From 625f2f11435b01dd108d333ab9b3d38c80023ca8 Mon Sep 17 00:00:00 2001 From: Brendan Hansen Date: Mon, 27 Nov 2023 22:07:13 -0600 Subject: [PATCH] dynamic header on homepage --- www/static/css/new_style.css | 51 +++++++- www/templates/pages/base.html | 1 + .../pages/docs/guide_http_server.html | 2 +- www/templates/pages/homepage.html | 119 ++++++++++++++---- www/templates/pages/normal_page.html | 3 + 5 files changed, 151 insertions(+), 25 deletions(-) diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css index 370d5e8..cbfda87 100644 --- a/www/static/css/new_style.css +++ b/www/static/css/new_style.css @@ -134,6 +134,7 @@ a.cta-button:hover { } .container.header { + position: relative; background: var(--header-color); color: var(--header-text); } @@ -299,7 +300,7 @@ navbar a { opacity: 0%; width: 32px; height: 20px; - z-index: 100; + z-index: 10000; position: absolute; right: 10px; top: 10px; @@ -309,6 +310,7 @@ navbar a { position: absolute; top: 10px; right: 10px; + z-index: 999; } .hamburger-piece { @@ -433,6 +435,39 @@ main li { } } +.homepage-quicklinks { + z-index: 10000; + position: relative; + max-width: 1200px; + margin: 0 auto; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.homepage-quicklinks a { + flex: 1; + display: block; + text-align: center; + font-size: 1.3rem; +} + +.homepage-quicklinks a span { + display: inline-block; + margin: 4px; + padding: 8px 20px; + transition: all 0.3s; + border-radius: 8px; +} + +.homepage-quicklinks a span:hover { + cursor: pointer; + background-color: var(--header-accent); + box-shadow: 0 6px 15px 8px rgba(200, 200, 230, 0.2); +} + .scrollport { mask-image: linear-gradient(to right, #0000 0, #000 10%, #000 90%, #0000 100%); -webkit-mask-image: linear-gradient(to right, #0000 0, #000 10%, #000 90%, #0000 100%); @@ -472,6 +507,20 @@ table td { border: none; } +canvas#animation { + z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + image-rendering: pixelated; + + mask-image: var(--header-color); + -webkit-mask-image: var(--header-color); +} + .scrollport > div { min-width: 1000px; } diff --git a/www/templates/pages/base.html b/www/templates/pages/base.html index 24cbf29..a8da9b3 100644 --- a/www/templates/pages/base.html +++ b/www/templates/pages/base.html @@ -37,5 +37,6 @@ {% block "content" %} + {% block "scripts" %} diff --git a/www/templates/pages/docs/guide_http_server.html b/www/templates/pages/docs/guide_http_server.html index 5b6475d..2df0713 100644 --- a/www/templates/pages/docs/guide_http_server.html +++ b/www/templates/pages/docs/guide_http_server.html @@ -284,7 +284,7 @@ package: <your-namespace>/<your-package-name>

- If you want to keep building up your HTTP server, you can look at more examples in the HTTP Server package. + If you want to keep building up your HTTP server, you can look at more examples in the HTTP Server package.

diff --git a/www/templates/pages/homepage.html b/www/templates/pages/homepage.html index 53dbc48..a634a86 100644 --- a/www/templates/pages/homepage.html +++ b/www/templates/pages/homepage.html @@ -4,41 +4,51 @@ {{ let navbar_page = "home" }} {{ let navbar_logo_hidden = true }} +{{ let navbar_hidden = true }} {{ block "page_content" }} -
-
- - {% partial "partials/logo_svg" %} - +
+ -
-

The Onyx Programming Language

-
-
-

A data-oriented, safe, and modern programming language

-
+
+ Try Onyx + Docs + News + GitHub
-
-
-
$ # Install Onyx in one command
-
- $ sh <(curl https://get.onyxlang.io -sSfL) - Copy +
+
+ + {% partial "partials/logo_svg" %} + + +
+

The Onyx Programming Language

+
+
+

A data-oriented, safe, and modern programming language

+
+
+ +
+
+
$ # Install Onyx in one command
+
+ $ sh <(curl https://get.onyxlang.io -sSfL) + Copy +
+
$ # Read the docs
+ +
$ # Try Onyx in your browser
+
-
$ # Read the docs
- -
$ # Try Onyx in your browser
-
- -

Language Features

@@ -197,4 +207,67 @@ rotator.addEventListener("scrollend", (e) => { {{endblock}} +{{ block "scripts" }} + + + +{{ endblock }} + {{extends "pages/normal_page"}} diff --git a/www/templates/pages/normal_page.html b/www/templates/pages/normal_page.html index cde107c..d2058b6 100644 --- a/www/templates/pages/normal_page.html +++ b/www/templates/pages/normal_page.html @@ -1,7 +1,10 @@ {{ block "content" }}
+{{ if navbar_hidden == true }} +{{ else }} {% partial "partials/navbar" %} +{{ endif }}
{% block "page_content" %}
-- 2.25.1