Skip to content

Commit 4e42424

Browse files
danielledeleodanielledeleo
committed
Style: Widen homepage, lighten body text
- Change logo font to Inter (CSS hack) - Slightly lighten link colour - Add plain boxes around product selectors on homepage
1 parent 5d7204a commit 4e42424

File tree

2 files changed

+79
-36
lines changed

2 files changed

+79
-36
lines changed

‎assets/css/v2/style.css

+75-32
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,14 @@
5151

5252
/* MARK: Variables
5353
*/
54+
5455
--color-brand: 56.6% 0.194 147.7;
5556
--color-brand-300: #a6daba;
5657
--color-brand-200: #ccead7;
5758
--color-brand-100: #f2faf5;
5859
--color-background: #ffffff;
59-
--color-foreground: #000000;
60+
--color-foreground: rgb(45, 48, 45);
61+
--color-foreground-heavy: rgb(16, 16, 16);
6062
--color-shadow: #d2d2d2;
6163
--color-codeblock-border: #888;
6264
--color-codeblock-shadow: #e5e5e5;
@@ -76,6 +78,7 @@
7678
/* vars for the primary grid setup */
7779
--grid-sidebar: 24rem;
7880
--grid-sidebar-gutter: 3rem;
81+
--grid-home: minmax(34rem, 60rem);
7982
--grid-content: minmax(34rem, 50rem);
8083
--grid-content-mobile: minmax(20rem, 50rem);
8184
--grid-side-callout: minmax(18rem, 26rem);
@@ -168,18 +171,24 @@ html {
168171
scroll-behavior: smooth;
169172
}
170173

174+
/* MARK: Global styles
175+
*/
176+
body {
177+
color: var(--color-foreground);
178+
}
179+
171180
h1,
172181
h2,
173182
h3,
174183
h4,
175184
h5,
176185
h6 {
177186
scroll-margin-top: 1.5rem;
187+
color: var(--color-foreground-heavy);
178188
}
179189

180-
/* MARK: Header
181-
*/
182190
p {
191+
line-height: 1.6rem;
183192
font-weight: 350;
184193
}
185194

@@ -206,10 +215,10 @@ ol li:last-child {
206215
margin-bottom: 0;
207216
}
208217

209-
/* MARK: Layout
218+
/* MARK: Header
210219
*/
211220
header {
212-
margin: 2rem 2rem 0 2rem;
221+
padding: 1rem 2rem;
213222

214223
.header-container {
215224
display: flex;
@@ -280,11 +289,38 @@ header {
280289
}
281290
}
282291

292+
/* Override logo with black text version */
293+
.navbar-brand {
294+
--logo-height: 2.5rem;
295+
height: var(--logo-height);
296+
display: block;
297+
298+
/* non-tiling background logo */
299+
background-image: url(/images/icons/NGINX-Product-icon.svg);
300+
background-repeat: no-repeat;
301+
background-size: contain;
302+
background-position: left center;
303+
text-decoration: none;
304+
305+
&::after {
306+
content: "NGINX Docs";
307+
font-size: calc(var(--logo-height)*0.6);
308+
font-weight: 600;
309+
color: var(--color-foreground-heavy);
310+
margin: 0.3rem calc(var(--logo-height)*1.2);
311+
display: inline-block;
312+
}
313+
314+
img {
315+
display: none;
316+
}
317+
}
318+
283319
/* MARK: Home page
284320
*/
285321
.home-layout {
286322
display: grid;
287-
grid-template-columns: var(--grid-content);
323+
grid-template-columns: var(--grid-home);
288324
margin: 4rem 2rem;
289325

290326
row-gap: var(--flow-gap);
@@ -301,14 +337,21 @@ header {
301337
.jump-links {
302338
display: flex;
303339
column-gap: 2.5rem;
340+
justify-content: space-between;
304341

305342
margin: 1rem 0;
306343
}
307344

308345
.jump-links ul {
346+
margin: 1rem 0 0 0;
347+
309348
list-style: none;
310349
}
311350

351+
.jump-links li {
352+
margin: 0.75rem 0 0 0;
353+
}
354+
312355
.get-started-button {
313356
background-color: white;
314357
border: 1px solid black;
@@ -317,7 +360,7 @@ header {
317360
font-size: 1.25rem;
318361
font-weight: 400;
319362
color: #000;
320-
margin-top: 8px;
363+
margin: 0.5rem 0.5rem 0 0;
321364
z-index: 1;
322365
--color-codeblock-shadow: 0% 0 0;
323366
box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
@@ -335,6 +378,28 @@ header {
335378

336379
.product-grid ul {
337380
list-style: none;
381+
display: grid;
382+
grid-template-columns: repeat(2, 1fr);
383+
384+
gap: 1rem;
385+
}
386+
387+
.product-grid li {
388+
padding: 0;
389+
margin: 0;
390+
}
391+
392+
.product-grid li a.product-tile {
393+
display: block;
394+
border: 1px solid var(--color-divider);
395+
padding: 1rem;
396+
/* margin: 0 0 0 -1rem; */
397+
398+
}
399+
400+
.product-grid p.product-title {
401+
font-weight: 500;
402+
font-size: 0.875rem;
338403
}
339404

340405
.tiny-pill {
@@ -1036,7 +1101,6 @@ main {
10361101

10371102
p {
10381103
margin: 0;
1039-
line-height: 1.5rem;
10401104
}
10411105

10421106
.breadcrumb {
@@ -1067,13 +1131,13 @@ p {
10671131
}
10681132

10691133
a {
1070-
color: oklch(var(--color-brand));
1071-
text-decoration-color: oklch(var(--color-brand) / 0.3);
1072-
transition: text-decoration-color 0.15s ease-in-out;
1134+
color: oklch(var(--color-brand) / 0.8);
1135+
text-decoration-color: oklch(var(--color-brand) / 0.2);
10731136
}
10741137

10751138
a:hover {
10761139
text-decoration-color: oklch(var(--color-brand) / 0.8);
1140+
transition: text-decoration-color 0.15s ease-in-out;
10771141
}
10781142

10791143
h1 {
@@ -1586,27 +1650,6 @@ hr {
15861650
margin: 0;
15871651
}
15881652

1589-
/* FILTHY HACKS BEGIN */
1590-
1591-
/* Override logo with black text version */
1592-
.navbar-brand {
1593-
height: 3.5rem;
1594-
display: block;
1595-
1596-
/* non-tiling background logo */
1597-
background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg);
1598-
background-repeat: no-repeat;
1599-
background-size: contain;
1600-
background-position: left center;
1601-
width: 200px; /* Adjust the width as needed to fit the logo */
1602-
1603-
img {
1604-
display: none;
1605-
}
1606-
}
1607-
1608-
/* FILTHY HACKS END */
1609-
16101653
/* Hidden temporarily */
16111654

16121655
.code-copy {

‎exampleSite/layouts/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1>Documentation</h1>
2828
<p>This is a short call to action to explore our examples and guides.</p>
2929

3030
<div class="cta">
31-
<a href="https://nginx.org" class="get-started-button">Get started with NGINX One →</a> or <a href="#products">explore all products</a>.
31+
<a href="/test-product/" class="get-started-button">Get started with Test Product →</a> or <a href="#products">explore all products</a>.
3232
</div>
3333

3434
<div class="jump-links">
@@ -52,7 +52,7 @@ <h3>Load balancing</h3>
5252
</ul>
5353
</div>
5454

55-
<p>The F5 NGINX One Console makes it easy to manage NGINX instances across locations and environments. The console lets you monitor and control your NGINX fleet from one place—you can check configurations, track performance metrics, identify security vulnerabilities, manage SSL certificates, and more.</p>
55+
<p>The NGINX One Console makes it easy to manage NGINX instances across locations and environments. The console lets you monitor and control your NGINX fleet from one place—you can check configurations, track performance metrics, identify security vulnerabilities, manage SSL certificates, and more.</p>
5656

5757
<div id="products">
5858
<h2>All products</h2>
@@ -67,11 +67,11 @@ <h2>All products</h2>
6767
{{ $type := . }}
6868
{{ $products := index $groupedProducts $type }}
6969
<div class="product-grid">
70-
<p>{{ index $nginxCategories $type }}</p>
70+
<p class="product-title">{{ index $nginxCategories $type }}</p>
7171
<ul>
7272
{{ range $products }}
7373
<li>
74-
<a href="{{ .url }}">{{ .title }}</a>
74+
<a class="product-tile" href="{{ .url }}">{{ .title }}</a>
7575
</li>
7676
{{ end }}
7777
</ul>

0 commit comments

Comments
 (0)