Skip to content

Mainframe Homepage #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Mainframe Homepage #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b3023f
Fix: Add link to F5 logo in footer
danielledeleo Apr 17, 2025
5d7204a
Style: Add Mainframe homepage
danielledeleo Apr 17, 2025
12d1961
Style: Widen homepage, lighten body text
danielledeleo Apr 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 155 additions & 40 deletions assets/css/v2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,17 @@

/* 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;
--color-codeblock-highlight: #fffed9;
--color-footer: #1d1d1d;
--color-footer-text: #e2e2e2;
--color-product-title: #8d8d8d;
Expand All @@ -77,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);
Expand Down Expand Up @@ -169,18 +171,24 @@ html {
scroll-behavior: smooth;
}

/* MARK: Global styles
*/
body {
color: var(--color-foreground);
}

h1,
h2,
h3,
h4,
h5,
h6 {
scroll-margin-top: 1.5rem;
color: var(--color-foreground-heavy);
}

/* MARK: Header
*/
p {
line-height: 1.6rem;
font-weight: 350;
}

Expand All @@ -207,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;
Expand Down Expand Up @@ -281,6 +289,141 @@ 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-home);
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;
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;
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 1.25rem;
font-weight: 400;
color: #000;
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);

text-decoration: none;
}

#products {
margin: 2rem 0 0 0;
}

.product-grid {
margin: 1.5rem 0 0 0;
}

.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 {
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 {
Expand Down Expand Up @@ -437,7 +580,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);
}

Expand Down Expand Up @@ -484,7 +627,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 {
Expand All @@ -505,7 +648,7 @@ nav {
}

.main {
display: flex;
margin: 0 auto;
}

/* MARK: Coveo
Expand Down Expand Up @@ -957,7 +1100,6 @@ main {

p {
margin: 0;
line-height: 1.5rem;
}

.breadcrumb {
Expand Down Expand Up @@ -988,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 {
Expand Down Expand Up @@ -1461,12 +1603,6 @@ ul .code-block {
padding: 0;
}

.highlight code .hl {
width: fit-content;
min-width: 100%;
background-color: var(--color-codeblock-highlight);
}

/* MARK: Images
*/
figure {
Expand Down Expand Up @@ -1513,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 {
Expand Down
89 changes: 78 additions & 11 deletions exampleSite/layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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")
}}

<h1>Homepage Example</h1>
<p>
<ul>
<li>
<a href="{{ relref . "nginx" }}">NGINX and NGINX Plus</a>
</li>
<li>
<a href="{{ relref . "test-product" }}">Test Product</a>
</li>
</ul>
</p>
{{ $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"
)
}}

<div class="main">
<div class="home-layout">
<h1>Documentation</h1>
<p>This is a short call to action to explore our examples and guides.</p>

<div class="cta">
<a href="/test-product/" class="get-started-button">Get started with Test Product →</a> or <a href="#products">explore all products</a>.
</div>

<div class="jump-links">
<ul>
<h3>Instance management</h3>
<li><a href="https://docs.nginx.com/nginx-one/how-to/certificates/manage-certificates/">Manage certificates<span class="tiny-pill">One</span></a></li>
<li><a href="#">Role-based access control</a></li>
<li><a href="#">Create a new data plane key</a></li>
</ul>
<ul>
<h3>Kubernetes</h3>
<li><a href="https://docs.nginx.com/nginx-one/how-to/certificates/manage-certificates/">Manage certificates</a></li>
<li><a href="#">Role-based access control</a></li>
<li><a href="#">Create a new data plane key</a></li>
</ul>
<ul>
<h3>Load balancing</h3>
<li><a href="#">NGINX HTTP Load Balancing</a></li>
<li><a href="#">NGINX TCP and UDP Load Balancing</a></li>
<li><a href="#">GSLB with NS1 and NGINX Plus<span class="tiny-pill">N+</span></a></li>
</ul>
</div>

<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>

<div id="products">
<h2>All products</h2>
{{ $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 }}
<div class="product-grid">
<p class="product-title">{{ index $nginxCategories $type }}</p>
<ul>
{{ range $products }}
<li>
<a class="product-tile" href="{{ .url }}">{{ .title }}</a>
</li>
{{ end }}
</ul>
</div>
{{ end }}
</div>
</div>
</div>
{{end}}
Loading
Loading