From 0187698cf5c3ce885851812e868c3f70c4a0b6e6 Mon Sep 17 00:00:00 2001 From: Nick Budak Date: Wed, 15 Jan 2025 12:31:48 -0800 Subject: [PATCH] Update examples of 3 header variants Closes #89 --- header/index.html | 229 +++++++++++++++++++++++++-------------------- styles/header.css | 48 ++++++++-- styles/palette.css | 1 + 3 files changed, 164 insertions(+), 114 deletions(-) diff --git a/header/index.html b/header/index.html index 072b4ed..fe42295 100644 --- a/header/index.html +++ b/header/index.html @@ -28,7 +28,9 @@

Headers

-

With navigation links

+ +

Dark version (customizable color)

+ -
@@ -194,14 +195,14 @@

With navigation links

type="submit" name="commit" value="Send" - class="btn btn-secondary" + class="btn btn-primary" data-disable-with="Send" /> @@ -247,20 +248,23 @@

With navigation links

>
-

Without navigation links

+

White version ("SDR theme")

+
-
- +
+
+ +
-
-
-
-
-
+
+
+
+
+
- -
- -
- -
-
-
- -
- -
-
-
- -
- -

- This site is protected by reCAPTCHA and the Google - Privacy Policy - and - Terms of Service - apply. -

-
-
-
-
Recaptcha stuff
-
-
-
- -
+
+
+ +
+
+
+
+
+ +

Light version

+ + +
+
+
+ +
+
+
+ +
+
-
+
Without navigation links >
Website at Stanford
+
+ +
+ diff --git a/styles/header.css b/styles/header.css index 7171677..4e4125e 100644 --- a/styles/header.css +++ b/styles/header.css @@ -1,7 +1,16 @@ :root { - --sul-logo-color: white; + --sul-logo-color: var(--stanford-black); --identity-bar-color: var(--stanford-cardinal); } + +.bg-dark { + --sul-logo-color: var(--bs-navbar-color); +} + +.identity-bar { + --bs-dark-rgb: var(--stanford-cardinal-rgb); +} + /* stylelint-disable selector-class-pattern */ .su-brand-bar__logo { --bs-link-hover-decoration: none; @@ -31,18 +40,37 @@ text-indent: 100%; white-space: nowrap; width: 280px; + + &.polychrome { + background-color: transparent; + mask-image: none; + background-image: url("StanfordLibraries-logo-poly.svg"); + background-repeat: no-repeat; + background-position: 0 center; + } } -.bg-dark.navbar, -.bg-dark .navbar { - --bs-navbar-color: white; - --bs-navbar-hover-color: rgb(255 255 255 / 100%); - --bs-nav-link-color: white; - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1' d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z' /%3e%3c/svg%3e"); - --bs-navbar-toggler-border-color: rgb(255 255 255 / 10%); +.navbar, +.masthead { + --bs-navbar-color: var(--stanford-black); + --bs-nav-link-color: var(--stanford-black); + --bs-link-color-rgb: var(--stanford-black-rgb); + --bs-link-hover-color-rgb: var(--stanford-black-rgb); + + .bg-dark &, + &.bg-dark { + --bs-navbar-color: white; + --bs-nav-link-color: white; + --bs-link-color-rgb: 255, 255, 255; + --bs-link-hover-color-rgb: 255, 255, 255; + --bs-navbar-hover-color: rgb(255 255 255 / 100%); - .collapsed { - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1' d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z' /%3e%3c/svg%3e"); + --bs-navbar-toggler-border-color: rgb(255 255 255 / 10%); + + .collapsed { + --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + } } } diff --git a/styles/palette.css b/styles/palette.css index d2b6ff9..cc95f2c 100644 --- a/styles/palette.css +++ b/styles/palette.css @@ -3,6 +3,7 @@ --stanford-cardinal-rgb: 143, 20, 20; --stanford-cardinal: rgb(var(--stanford-cardinal-rgb)); --stanford-black: #2e2d29; + --stanford-black-rgb: 46, 45, 41; --stanford-80-black: #585754; --stanford-70-black: #6d6c69; --stanford-30-black: #c0c0bf;