From 7b3023f018e445efaff97efadb5f9d8bd867089a Mon Sep 17 00:00:00 2001 From: Danielle De Leo Date: Thu, 17 Apr 2025 11:25:38 -0400 Subject: [PATCH 1/3] Fix: Add link to F5 logo in footer --- layouts/partials/footer-v2.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/layouts/partials/footer-v2.html b/layouts/partials/footer-v2.html index f695a939..040cae81 100644 --- a/layouts/partials/footer-v2.html +++ b/layouts/partials/footer-v2.html @@ -1,6 +1,11 @@
- F5 logo + F5 logo +

©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.

From 5d7204aeddc0de4e9faa7beb5a30858f6e964ac0 Mon Sep 17 00:00:00 2001 From: Danielle De Leo Date: Thu, 17 Apr 2025 15:21:05 -0400 Subject: [PATCH 2/3] Style: Add Mainframe homepage --- assets/css/v2/style.css | 93 ++++++++++++++++++++++++--- exampleSite/layouts/index.html | 89 +++++++++++++++++++++---- layouts/partials/homepage/bigcta.html | 0 3 files changed, 161 insertions(+), 21 deletions(-) create mode 100644 layouts/partials/homepage/bigcta.html diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 09f1f5aa..4747cae0 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -60,7 +60,6 @@ --color-shadow: #d2d2d2; --color-codeblock-border: #888; --color-codeblock-shadow: #e5e5e5; - --color-codeblock-highlight: #fffed9; --color-footer: #1d1d1d; --color-footer-text: #e2e2e2; --color-product-title: #8d8d8d; @@ -281,6 +280,86 @@ header { } } +/* MARK: Home page +*/ +.home-layout { + display: grid; + grid-template-columns: var(--grid-content); + margin: 4rem 2rem; + + row-gap: var(--flow-gap); +} + +.home-layout h1 { + margin: 0; +} + +.cta { + margin: 1rem 0; +} + +.jump-links { + display: flex; + column-gap: 2.5rem; + + margin: 1rem 0; +} + +.jump-links ul { + list-style: none; +} + +.get-started-button { + background-color: white; + border: 1px solid black; + padding: 0.25rem 0.5rem; + cursor: pointer; + font-size: 1.25rem; + font-weight: 400; + color: #000; + margin-top: 8px; + z-index: 1; + --color-codeblock-shadow: 0% 0 0; + box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15); + + text-decoration: none; +} + +#products { + margin: 2rem 0 0 0; +} + +.product-grid { + margin: 1.5rem 0 0 0; +} + +.product-grid ul { + list-style: none; +} + +.tiny-pill { + display: inline-block; + font-size: 0.625rem; + font-weight: 800; + + margin: 0 0.25rem; + vertical-align: 2px; + + border-radius: 3px; + padding: 0 2px; + background-color: oklch(var(--color-brand) / 0.8); + color: var(--color-background); +} + +.get-started-button:hover { + box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3); +} + +.get-started-button:focus { + outline: none; + box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8); +} + /* MARK: Footer */ footer { @@ -437,7 +516,7 @@ nav { .text-content { grid-template-columns: var(--grid-content) var(--grid-side-callout); - grid-template-rows: 70px max-content; + grid-template-rows: 70px auto; column-gap: var(--grid-column-gutter); } @@ -484,7 +563,7 @@ nav { /* Handles different flow-gap of list page */ .list-page.text-content { - grid-template-rows: calc(70px + var(--flow-gap)) max-content; + grid-template-rows: calc(70px + var(--flow-gap)) auto; } .api { @@ -505,7 +584,7 @@ nav { } .main { - display: flex; + margin: 0 auto; } /* MARK: Coveo @@ -1461,12 +1540,6 @@ ul .code-block { padding: 0; } -.highlight code .hl { - width: fit-content; - min-width: 100%; - background-color: var(--color-codeblock-highlight); -} - /* MARK: Images */ figure { diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html index 2c0398f5..74dd9b24 100644 --- a/exampleSite/layouts/index.html +++ b/exampleSite/layouts/index.html @@ -1,16 +1,83 @@ {{ define "main" }} +{{ $nginxProducts := slice + (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one") + (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one") + (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one") + (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one") + (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one") + (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one") + (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one") + (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect") + (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect") + (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service") + (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other") +}} -

Homepage Example

-

-

-

+{{ $nginxCategories := + (dict + "nginx-one" "NGINX One" + "nginx-app-protect" "NGINX App Protect" + "nginx-as-a-service" "NGINX as a Service" + "nginx-other" "Other NGINX Projects" + ) +}} +
+
+

Documentation

+

This is a short call to action to explore our examples and guides.

+ +
+ Get started with NGINX One → or explore all products. +
+ +
+ + + +
+

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.

+ +
+

All products

+ {{ $groupedProducts := dict + "nginx-one" (where $nginxProducts "type" "nginx-one") + "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect") + "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service") + "nginx-other" (where $nginxProducts "type" "nginx-other") + }} + {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }} + {{ range $orderedKeys }} + {{ $type := . }} + {{ $products := index $groupedProducts $type }} +
+

{{ index $nginxCategories $type }}

+ +
+ {{ end }} +
+
+
{{end}} \ No newline at end of file diff --git a/layouts/partials/homepage/bigcta.html b/layouts/partials/homepage/bigcta.html new file mode 100644 index 00000000..e69de29b From 12d1961a1910a4f1776beb060cb7afbc4ebc9489 Mon Sep 17 00:00:00 2001 From: Danielle De Leo Date: Mon, 21 Apr 2025 12:42:10 -0400 Subject: [PATCH 3/3] 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 --- assets/css/v2/style.css | 106 +++++++++++++++++++++++---------- exampleSite/layouts/index.html | 8 +-- 2 files changed, 78 insertions(+), 36 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 4747cae0..bc274719 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -51,12 +51,14 @@ /* MARK: Variables */ + --color-brand: 56.6% 0.194 147.7; --color-brand-300: #a6daba; --color-brand-200: #ccead7; --color-brand-100: #f2faf5; --color-background: #ffffff; - --color-foreground: #000000; + --color-foreground: rgb(45, 48, 45); + --color-foreground-heavy: rgb(16, 16, 16); --color-shadow: #d2d2d2; --color-codeblock-border: #888; --color-codeblock-shadow: #e5e5e5; @@ -76,6 +78,7 @@ /* vars for the primary grid setup */ --grid-sidebar: 24rem; --grid-sidebar-gutter: 3rem; + --grid-home: minmax(34rem, 60rem); --grid-content: minmax(34rem, 50rem); --grid-content-mobile: minmax(20rem, 50rem); --grid-side-callout: minmax(18rem, 26rem); @@ -168,6 +171,12 @@ html { scroll-behavior: smooth; } +/* MARK: Global styles +*/ +body { + color: var(--color-foreground); +} + h1, h2, h3, @@ -175,11 +184,11 @@ h4, h5, h6 { scroll-margin-top: 1.5rem; + color: var(--color-foreground-heavy); } -/* MARK: Header -*/ p { + line-height: 1.6rem; font-weight: 350; } @@ -206,10 +215,10 @@ ol li:last-child { margin-bottom: 0; } -/* MARK: Layout +/* MARK: Header */ header { - margin: 2rem 2rem 0 2rem; + padding: 1rem 2rem; .header-container { display: flex; @@ -280,11 +289,38 @@ header { } } +/* Override logo with black text version */ +.navbar-brand { + --logo-height: 2.5rem; + height: var(--logo-height); + display: block; + + /* non-tiling background logo */ + background-image: url(/images/icons/NGINX-Product-icon.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: left center; + text-decoration: none; + + &::after { + content: "NGINX Docs"; + font-size: calc(var(--logo-height) * 0.6); + font-weight: 600; + color: var(--color-foreground-heavy); + margin: 0.3rem calc(var(--logo-height) * 1.2); + display: inline-block; + } + + img { + display: none; + } +} + /* MARK: Home page */ .home-layout { display: grid; - grid-template-columns: var(--grid-content); + grid-template-columns: var(--grid-home); margin: 4rem 2rem; row-gap: var(--flow-gap); @@ -301,14 +337,21 @@ header { .jump-links { display: flex; column-gap: 2.5rem; + justify-content: space-between; margin: 1rem 0; } .jump-links ul { + margin: 1rem 0 0 0; + list-style: none; } +.jump-links li { + margin: 0.75rem 0 0 0; +} + .get-started-button { background-color: white; border: 1px solid black; @@ -317,7 +360,7 @@ header { font-size: 1.25rem; font-weight: 400; color: #000; - margin-top: 8px; + margin: 0.5rem 0.5rem 0 0; z-index: 1; --color-codeblock-shadow: 0% 0 0; box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15); @@ -335,6 +378,27 @@ header { .product-grid ul { list-style: none; + display: grid; + grid-template-columns: repeat(2, 1fr); + + gap: 1rem; +} + +.product-grid li { + padding: 0; + margin: 0; +} + +.product-grid li a.product-tile { + display: block; + border: 1px solid var(--color-divider); + padding: 1rem; + /* margin: 0 0 0 -1rem; */ +} + +.product-grid p.product-title { + font-weight: 500; + font-size: 0.875rem; } .tiny-pill { @@ -1036,7 +1100,6 @@ main { p { margin: 0; - line-height: 1.5rem; } .breadcrumb { @@ -1067,13 +1130,13 @@ p { } a { - color: oklch(var(--color-brand)); - text-decoration-color: oklch(var(--color-brand) / 0.3); - transition: text-decoration-color 0.15s ease-in-out; + color: oklch(var(--color-brand) / 0.8); + text-decoration-color: oklch(var(--color-brand) / 0.2); } a:hover { text-decoration-color: oklch(var(--color-brand) / 0.8); + transition: text-decoration-color 0.15s ease-in-out; } h1 { @@ -1586,27 +1649,6 @@ hr { margin: 0; } -/* FILTHY HACKS BEGIN */ - -/* Override logo with black text version */ -.navbar-brand { - height: 3.5rem; - display: block; - - /* non-tiling background logo */ - background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg); - background-repeat: no-repeat; - background-size: contain; - background-position: left center; - width: 200px; /* Adjust the width as needed to fit the logo */ - - img { - display: none; - } -} - -/* FILTHY HACKS END */ - /* Hidden temporarily */ .code-copy { diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html index 74dd9b24..ef2f30bd 100644 --- a/exampleSite/layouts/index.html +++ b/exampleSite/layouts/index.html @@ -28,7 +28,7 @@

Documentation

This is a short call to action to explore our examples and guides.

- Get started with NGINX One → or explore all products. + Get started with Test Product → or explore all products.
@@ -52,7 +52,7 @@

Load balancing

-

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.

+

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.

All products

@@ -67,11 +67,11 @@

All products

{{ $type := . }} {{ $products := index $groupedProducts $type }}
-

{{ index $nginxCategories $type }}

+

{{ index $nginxCategories $type }}