diff --git a/docs/stylesheets/uga-brand.css b/docs/stylesheets/uga-brand.css new file mode 100644 index 0000000..69fa6e1 --- /dev/null +++ b/docs/stylesheets/uga-brand.css @@ -0,0 +1,283 @@ +/* ================================================================ + UGA Brand Stylesheet — GTBOP Documentation Site + Reference: brand.uga.edu/visual-identity/visual-style/ + + Primary: Bulldog Red #BA0C2F | Arch Black #000000 | Chapel Bell White #FFFFFF + Neutral: Stegeman #9EA2A2 | Creamery #D6D2C4 | Sanford #554F47 + Accent: Lake Herrick #00A3AD | Olympic #004E60 | Odyssey #C8D8EB + Hedges #B4BD00 | Glory Glory #E4002B + + Typography: Oswald (headings) | Merriweather Sans (body) | Georgia (fallback) + Rule: Never place red text on black or black text on red. + ================================================================ */ + +/* ── Google Fonts: Oswald for headings ──────────────────────────── */ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500&display=swap'); + +/* ================================================================ + LIGHT MODE + ================================================================ */ +[data-md-color-scheme="default"] { + /* Primary — Bulldog Red */ + --md-primary-fg-color: #BA0C2F; + --md-primary-fg-color--light: #cf3d5e; + --md-primary-fg-color--dark: #8a0923; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + + /* Accent — Olympic (darker teal, passes WCAG AA on white) */ + --md-accent-fg-color: #004E60; + --md-accent-fg-color--transparent: rgba(0, 78, 96, 0.1); + --md-accent-bg-color: #FFFFFF; + + /* Default backgrounds */ + --md-default-fg-color: #000000; + --md-default-fg-color--light: #554F47; + --md-default-fg-color--lighter: #9EA2A2; + --md-default-fg-color--lightest: rgba(0, 0, 0, 0.07); + --md-default-bg-color: #FFFFFF; + --md-default-bg-color--light: #F9F8F6; + --md-default-bg-color--lighter: #F4F2EF; + --md-default-bg-color--lightest: #D6D2C4; + + /* Links */ + --md-typeset-a-color: #004E60; + + /* Code blocks */ + --md-code-bg-color: #F4F2EF; + --md-code-fg-color: #000000; + + /* Footer */ + --md-footer-bg-color: #000000; + --md-footer-bg-color--dark: #000000; + --md-footer-fg-color: #FFFFFF; + --md-footer-fg-color--light: #D6D2C4; + --md-footer-fg-color--lighter: #9EA2A2; +} + +/* ================================================================ + DARK MODE + ================================================================ */ +[data-md-color-scheme="slate"] { + /* Primary — Bulldog Red */ + --md-primary-fg-color: #BA0C2F; + --md-primary-fg-color--light: #cf3d5e; + --md-primary-fg-color--dark: #8a0923; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #E0E0E0; + + /* Accent — Lake Herrick (brighter teal, good contrast on dark) */ + --md-accent-fg-color: #00A3AD; + --md-accent-fg-color--transparent: rgba(0, 163, 173, 0.15); + --md-accent-bg-color: #1a1a1a; + + /* Dark backgrounds — near-black */ + --md-default-fg-color: #E0E0E0; + --md-default-fg-color--light: #BBBBBB; + --md-default-fg-color--lighter: #9EA2A2; + --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07); + --md-default-bg-color: #121212; + --md-default-bg-color--light: #1a1a1a; + --md-default-bg-color--lighter: #222222; + --md-default-bg-color--lightest: #2a2a2a; + + /* Links */ + --md-typeset-a-color: #00A3AD; + + /* Code blocks */ + --md-code-bg-color: #1e1e1e; + --md-code-fg-color: #E0E0E0; + + /* Footer */ + --md-footer-bg-color: #0a0a0a; + --md-footer-bg-color--dark: #000000; + --md-footer-fg-color: #E0E0E0; + --md-footer-fg-color--light: #9EA2A2; + --md-footer-fg-color--lighter: #666666; +} + +/* ================================================================ + TYPOGRAPHY — Oswald headings + UGA Brand: Oswald light (300) and medium (500) only + ================================================================ */ +.md-typeset h1, +.md-typeset h2, +.md-typeset h3, +.md-typeset h4, +.md-typeset h5, +.md-typeset h6 { + font-family: "Oswald", sans-serif; + font-weight: 500; + text-transform: none; +} + +.md-typeset h1 { + font-weight: 300; + letter-spacing: 0.02em; +} + +/* Navigation tabs — Oswald medium */ +.md-tabs__link { + font-family: "Oswald", sans-serif; + font-weight: 500; + letter-spacing: 0.03em; + text-transform: uppercase; +} + +/* Site title in header */ +.md-header__title { + font-family: "Oswald", sans-serif; + font-weight: 500; +} + +/* ================================================================ + LINK STYLES — accessible contrast + ================================================================ */ +.md-typeset a { + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 2px; +} + +.md-typeset a:hover, +.md-typeset a:focus { + text-decoration-thickness: 2px; +} + +/* Navigation links should not be underlined */ +.md-nav a, +.md-tabs a, +.md-header a, +.md-footer a { + text-decoration: none; +} + +/* ================================================================ + FOCUS INDICATORS — accessibility + High-visibility focus rings for keyboard navigation + ================================================================ */ +*:focus-visible { + outline: 3px solid #00A3AD; + outline-offset: 2px; +} + +.md-header *:focus-visible, +.md-footer *:focus-visible { + outline-color: #FFFFFF; +} + +/* ================================================================ + BUTTONS — UGA brand button style + Lake Herrick background, rounded, Merriweather Sans + ================================================================ */ +.md-typeset .md-button { + background-color: #004E60; + color: #FFFFFF; + border: none; + border-radius: 25px; + font-family: "Merriweather Sans", sans-serif; + font-weight: 300; + font-size: 0.8rem; + padding: 0.5em 1.2em; + text-decoration: none; +} + +.md-typeset .md-button:hover, +.md-typeset .md-button:focus { + background-color: #00A3AD; + color: #FFFFFF; + text-decoration: none; +} + +[data-md-color-scheme="slate"] .md-typeset .md-button { + background-color: #00A3AD; + color: #000000; +} + +[data-md-color-scheme="slate"] .md-typeset .md-button:hover, +[data-md-color-scheme="slate"] .md-typeset .md-button:focus { + background-color: #00c4d0; + color: #000000; +} + +/* ================================================================ + NAVIGATION SIDEBAR — brand styling + ================================================================ */ +.md-nav__link:hover, +.md-nav__link:focus { + color: var(--md-accent-fg-color); +} + +.md-nav__link--active { + color: var(--md-accent-fg-color); + font-weight: 700; +} + +/* ================================================================ + HEADER — ensure white text on Bulldog Red + (Brand rule: white provides sufficient contrast for red) + ================================================================ */ +.md-header { + background-color: var(--md-primary-fg-color); + color: #FFFFFF; +} + +/* ================================================================ + ADMONITIONS — use brand neutral tones + ================================================================ */ +.md-typeset .admonition, +.md-typeset details { + border-left-width: 4px; +} + +/* ================================================================ + TABLES — accessible styling + ================================================================ */ +.md-typeset table:not([class]) th { + background-color: var(--md-default-bg-color--lighter); + font-family: "Oswald", sans-serif; + font-weight: 500; + font-size: 0.8rem; + letter-spacing: 0.02em; +} + +/* ================================================================ + GRID CARDS on homepage — brand accent + ================================================================ */ +.md-typeset .grid.cards > ul > li:hover, +.md-typeset .grid.cards > ol > li:hover { + border-color: var(--md-accent-fg-color); +} + +/* ================================================================ + SELECTION — brand highlight + ================================================================ */ +::selection { + background-color: #C8D8EB; + color: #000000; +} + +[data-md-color-scheme="slate"] ::selection { + background-color: #004E60; + color: #FFFFFF; +} + +/* ================================================================ + SCROLLBAR — subtle brand theming (webkit browsers) + ================================================================ */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--md-default-bg-color--light); +} + +::-webkit-scrollbar-thumb { + background: var(--md-default-fg-color--lighter); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--md-default-fg-color--light); +} diff --git a/mkdocs.yml b/mkdocs.yml index 66a6c34..2c74a41 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -4,16 +4,17 @@ site_url: https://docs.gtbop.com/ theme: name: material + custom_dir: overrides palette: - scheme: default - primary: deep green - accent: amber + primary: custom + accent: custom toggle: icon: material/brightness-7 name: Switch to dark mode - scheme: slate - primary: deep green - accent: amber + primary: custom + accent: custom toggle: icon: material/brightness-4 name: Switch to light mode @@ -30,7 +31,7 @@ theme: icon: logo: material/bug font: - text: Source Sans Pro + text: Merriweather Sans code: Source Code Pro plugins: @@ -53,6 +54,9 @@ markdown_extensions: emoji_index: !!python/name:material.extensions.emoji.twemoji emoji_generator: !!python/name:material.extensions.emoji.to_svg +extra_css: + - stylesheets/uga-brand.css + extra: social: - icon: fontawesome/solid/building-columns diff --git a/overrides/main.html b/overrides/main.html new file mode 100644 index 0000000..572a26e --- /dev/null +++ b/overrides/main.html @@ -0,0 +1,49 @@ +{% extends "base.html" %} + +{# ── Accessibility: lang attribute is set by Material from mkdocs.yml + This override adds a skip-to-content link and improved landmarks ── #} + +{% block htmltitle %} +{{ config.site_name }}{% if page and page.title %} — {{ page.title }}{% endif %} +{% endblock %} + +{% block header %} +{# Skip navigation link — visible on focus for keyboard users #} + +{{ super() }} +{% endblock %} + +{% block styles %} +{{ super() }} + +{% endblock %} + +{% block content %} +
+ {{ super() }} +
+{% endblock %} diff --git a/site/404.html b/site/404.html index d33a92e..2334098 100644 --- a/site/404.html +++ b/site/404.html @@ -20,11 +20,10 @@ - - GTBOP Webinar Archives - - +GTBOP Webinar Archives + + @@ -34,6 +33,30 @@ + + @@ -42,11 +65,13 @@ - - + + + + @@ -63,7 +88,7 @@ - + @@ -77,6 +102,11 @@ + + + @@ -116,7 +146,7 @@ - +