Skip to content

Commit 90c2e0c

Browse files
cblanccblanc
authored
Merge pull request #242 from ideal-postcodes/restyle
2 parents b8014bf + 6bd6021 commit 90c2e0c

File tree

3 files changed

+295
-2
lines changed

3 files changed

+295
-2
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,3 @@ dist/openapi.js
2424
.DS_Store
2525
.claude
2626
CLAUDE.md
27-
dist/index.html

‎dist/index.html‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>API Documentation - Ideal Postcodes</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10+
<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
11+
<style>
12+
:root {
13+
--ideal-primary-blue: #375BDC;
14+
--ideal-dark-bg: #2B3544;
15+
--ideal-light-bg: #F8F9FA;
16+
--ideal-white: #FFFFFF;
17+
--ideal-dark-text: #1A202C;
18+
--ideal-medium-text: #4A5568;
19+
--ideal-light-text: #718096;
20+
--ideal-accent-yellow: #FFEB3B;
21+
--ideal-border: #E2E8F0;
22+
--ideal-hover: rgba(55, 91, 220, 0.1);
23+
}
24+
25+
* {
26+
margin: 0;
27+
padding: 0;
28+
box-sizing: border-box;
29+
}
30+
31+
body {
32+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
33+
background-color: var(--ideal-white);
34+
line-height: 1.6;
35+
}
36+
37+
/* Header Styling */
38+
.brand-header {
39+
background: linear-gradient(135deg, var(--ideal-primary-blue) 0%, #4F6EFF 100%);
40+
color: var(--ideal-white);
41+
padding: 2rem 0;
42+
box-shadow: 0 4px 20px rgba(55, 91, 220, 0.15);
43+
}
44+
45+
.header-container {
46+
max-width: 1200px;
47+
margin: 0 auto;
48+
padding: 0 2rem;
49+
display: flex;
50+
align-items: center;
51+
justify-content: space-between;
52+
flex-wrap: wrap;
53+
gap: 1rem;
54+
}
55+
56+
.logo-section {
57+
display: flex;
58+
align-items: center;
59+
gap: 1rem;
60+
}
61+
62+
.logo {
63+
width: 40px;
64+
height: 40px;
65+
background: var(--ideal-white);
66+
border-radius: 8px;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
font-weight: 700;
71+
color: var(--ideal-primary-blue);
72+
font-size: 1.5rem;
73+
}
74+
75+
.header-content h1 {
76+
font-size: 1.75rem;
77+
font-weight: 600;
78+
margin: 0;
79+
letter-spacing: -0.025em;
80+
}
81+
82+
.header-content p {
83+
font-size: 1rem;
84+
margin: 0.25rem 0 0 0;
85+
opacity: 0.9;
86+
font-weight: 400;
87+
}
88+
89+
.header-links {
90+
display: flex;
91+
gap: 1rem;
92+
align-items: center;
93+
}
94+
95+
.header-link {
96+
color: var(--ideal-white);
97+
text-decoration: none;
98+
padding: 0.5rem 1rem;
99+
border-radius: 6px;
100+
font-weight: 500;
101+
transition: all 0.2s ease;
102+
background: rgba(255, 255, 255, 0.1);
103+
font-size: 0.875rem;
104+
}
105+
106+
.header-link:hover {
107+
background: rgba(255, 255, 255, 0.2);
108+
transform: translateY(-1px);
109+
}
110+
111+
.header-link.primary {
112+
background: var(--ideal-accent-yellow);
113+
color: var(--ideal-dark-text);
114+
}
115+
116+
.header-link.primary:hover {
117+
background: #FFED4E;
118+
color: var(--ideal-dark-text);
119+
}
120+
121+
/* API Documentation Container */
122+
.api-container {
123+
max-width: 1400px;
124+
margin: 0 auto;
125+
background: var(--ideal-white);
126+
min-height: calc(100vh - 140px);
127+
}
128+
129+
/* Footer */
130+
.brand-footer {
131+
background: var(--ideal-dark-bg);
132+
color: var(--ideal-white);
133+
padding: 2rem 0;
134+
margin-top: 3rem;
135+
}
136+
137+
.footer-container {
138+
max-width: 1200px;
139+
margin: 0 auto;
140+
padding: 0 2rem;
141+
display: grid;
142+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
143+
gap: 2rem;
144+
}
145+
146+
.footer-section h3 {
147+
font-size: 1rem;
148+
font-weight: 600;
149+
margin-bottom: 1rem;
150+
color: var(--ideal-white);
151+
}
152+
153+
.footer-section a {
154+
color: #CBD5E0;
155+
text-decoration: none;
156+
display: block;
157+
margin-bottom: 0.5rem;
158+
font-size: 0.875rem;
159+
transition: color 0.2s ease;
160+
}
161+
162+
.footer-section a:hover {
163+
color: var(--ideal-white);
164+
}
165+
166+
.footer-bottom {
167+
border-top: 1px solid #4A5568;
168+
margin-top: 2rem;
169+
padding-top: 1rem;
170+
text-align: center;
171+
color: #CBD5E0;
172+
font-size: 0.875rem;
173+
}
174+
175+
/* Responsive Design */
176+
@media (max-width: 768px) {
177+
.header-container {
178+
flex-direction: column;
179+
text-align: center;
180+
}
181+
182+
.header-content h1 {
183+
font-size: 1.5rem;
184+
}
185+
186+
.header-links {
187+
flex-wrap: wrap;
188+
justify-content: center;
189+
}
190+
191+
.footer-container {
192+
grid-template-columns: 1fr;
193+
text-align: center;
194+
}
195+
}
196+
197+
/* Custom RapiDoc Styling */
198+
rapi-doc {
199+
--bg-color: #FFFFFF;
200+
--text-color: #1A202C;
201+
--header-color: #2D3748;
202+
--primary-color: #375BDC;
203+
--nav-bg-color: #F7FAFC;
204+
--nav-text-color: #2D3748;
205+
--nav-hover-bg-color: rgba(55, 91, 220, 0.1);
206+
--nav-hover-text-color: #375BDC;
207+
--nav-accent-color: #375BDC;
208+
--border-color: #E2E8F0;
209+
--code-bg-color: #F7FAFC;
210+
--input-bg-color: #FFFFFF;
211+
--font-regular: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
212+
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
213+
}
214+
</style>
215+
</head>
216+
<body>
217+
<header class="brand-header">
218+
<div class="header-container">
219+
<div class="logo-section">
220+
<div class="logo">IP</div>
221+
<div class="header-content">
222+
<h1>API Documentation</h1>
223+
<p>Address validation & postcode lookup services</p>
224+
</div>
225+
</div>
226+
<div class="header-links">
227+
<a href="https://docs.ideal-postcodes.co.uk" class="header-link">Documentation</a>
228+
<a href="https://ideal-postcodes.co.uk/support" class="header-link">Support</a>
229+
<a href="https://account.ideal-postcodes.co.uk/users/sign_up" class="header-link primary">Start Free Trial</a>
230+
</div>
231+
</div>
232+
</header>
233+
234+
<div class="api-container">
235+
<rapi-doc
236+
spec-url="https://openapi.ideal-postcodes.co.uk/openapi.yaml"
237+
theme="light"
238+
bg-color="#FFFFFF"
239+
text-color="#1A202C"
240+
primary-color="#375BDC"
241+
regular-font="Inter"
242+
show-header="false"
243+
show-info="true"
244+
allow-authentication="false"
245+
allow-server-selection="false"
246+
allow-api-list-style-selection="false"
247+
nav-item-spacing="relaxed"
248+
response-area-height="500px"
249+
render-style="focused"
250+
schema-style="table"
251+
schema-expand-level="2"
252+
default-schema-tab="schema"
253+
persist-auth="true"
254+
fill-request-fields-with-example="true"
255+
sort-tags="false"
256+
match-type="includes"
257+
nav-bg-color="#F7FAFC"
258+
nav-text-color="#2D3748"
259+
nav-hover-bg-color="rgba(55, 91, 220, 0.1)"
260+
nav-hover-text-color="#375BDC"
261+
nav-accent-color="#375BDC"
262+
> </rapi-doc>
263+
</div>
264+
265+
<footer class="brand-footer">
266+
<div class="footer-container">
267+
<div class="footer-section">
268+
<h3>Ideal Postcodes</h3>
269+
<a href="https://ideal-postcodes.co.uk">Website</a>
270+
<a href="https://account.ideal-postcodes.co.uk/login">Account Login</a>
271+
<a href="https://ideal-postcodes.co.uk/pricing">Pricing</a>
272+
<a href="https://status.ideal-postcodes.co.uk">Status Page</a>
273+
</div>
274+
<div class="footer-section">
275+
<h3>Developers</h3>
276+
<a href="https://docs.ideal-postcodes.co.uk">Documentation</a>
277+
<a href="https://docs.ideal-postcodes.co.uk/docs/api">API Reference</a>
278+
<a href="https://github.com/ideal-postcodes">GitHub</a>
279+
<a href="https://docs.ideal-postcodes.co.uk/docs/integrations">Integrations</a>
280+
</div>
281+
<div class="footer-section">
282+
<h3>Support</h3>
283+
<a href="https://ideal-postcodes.co.uk/support">Contact Support</a>
284+
<a href="https://docs.ideal-postcodes.co.uk/docs/guides">Guides</a>
285+
<a href="https://blog.ideal-postcodes.co.uk/">Blog</a>
286+
<a href="https://terms.ideal-postcodes.co.uk">Terms of Service</a>
287+
</div>
288+
</div>
289+
<div class="footer-bottom">
290+
<p>&copy; 2025 IDDQD Limited. All rights reserved.</p>
291+
</div>
292+
</footer>
293+
</body>
294+
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"semantic-release": "semantic-release --no-ci",
1616
"start": "redocly preview --project-dir dist",
1717
"mock": "npm run build && prism mock ./dist/openapi.yaml",
18-
"build": "tsc && redocly build-docs -o dist/index.html",
18+
"build": "tsc",
1919
"test": "redocly lint dist/openapi.yaml && redocly lint dist/openapi.json"
2020
},
2121
"main": "dist/openapi.js",

0 commit comments

Comments
 (0)