From 1510840f0c5e60cecc6d845bebdb5774cb84e45b Mon Sep 17 00:00:00 2001 From: Steven Noorbergen <91969936+steven-noorbergen@users.noreply.github.com> Date: Sat, 2 Nov 2024 16:56:09 +0100 Subject: [PATCH] Chore: unify the header a bit more with other EVE Online websites (#90) --- docs/assets/stylesheet/font.css | 40 +++++++ docs/assets/stylesheet/theme.css | 191 +++++++++++++++++++++---------- mkdocs.yml | 8 +- overrides/partials/header.html | 97 ++++++++++++++++ 4 files changed, 272 insertions(+), 64 deletions(-) create mode 100644 docs/assets/stylesheet/font.css create mode 100644 overrides/partials/header.html diff --git a/docs/assets/stylesheet/font.css b/docs/assets/stylesheet/font.css new file mode 100644 index 0000000..7f7de5c --- /dev/null +++ b/docs/assets/stylesheet/font.css @@ -0,0 +1,40 @@ +@font-face { + font-family: Shentox; + font-display: swap; + src: url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-SemiBold.woff2) + format("woff2"), + url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-SemiBold.woff) + format("woff"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: Shentox; + font-display: swap; + src: url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-Medium.woff2) + format("woff2"), + url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-Medium.woff) + format("woff"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: Shentox; + font-display: swap; + src: url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-Regular.woff2) + format("woff2"), + url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-Regular.woff) + format("woff"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: Shentox; + font-display: swap; + src: url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-Light.woff2) + format("woff2"), + url(https://web.ccpgamescdn.com/aws/webfonts/shentox/webfonts-2.0/Shentox-Light.woff) + format("woff"); + font-weight: 300; + font-style: normal; +} diff --git a/docs/assets/stylesheet/theme.css b/docs/assets/stylesheet/theme.css index 4f37305..baa1095 100644 --- a/docs/assets/stylesheet/theme.css +++ b/docs/assets/stylesheet/theme.css @@ -5,11 +5,10 @@ --test: 1; --header-padding: 0.5rem 0; --header-background: var(--md-primary-fg-color); - --header-shadow: 0 0 .2rem #0000001a,0 .2rem .4rem #0003; + --header-shadow: 0 0 0.2rem #0000001a, 0 0.2rem 0.4rem #0003; } [data-md-color-scheme="eveonline"] { - --logo-width: 110px; --header-padding: 0.5rem 0; --nav-width: 61rem; @@ -26,7 +25,7 @@ .md-header { will-change: background-color, box-shadow, padding, backdrop-filter; - transition: all .3s ease-in-out; + transition: all 0.3s ease-in-out; padding: var(--header-padding); background: var(--header-background); @@ -65,7 +64,7 @@ .md-header > .md-grid > .md-logo img, .md-header > .md-grid > .md-logo svg { - transition: width .3s ease-in-out; + transition: width 0.3s ease-in-out; width: var(--logo-width); height: auto; margin-top: 10px; @@ -78,81 +77,79 @@ .md-footer > .md-footer-meta { background: transparent; } - /* Indicate that the site is rendered with a dark color scheme*/ color-scheme: dark; - --md-primary-fg-color: hsla(0,0%,8%,.9); + --md-text-font: "Shentox"; + + --md-primary-fg-color: hsla(0, 0%, 8%, 0.9); /* Default color shades */ - --md-default-fg-color: hsla(var(--md-hue), 15%, 90%, 0.82); - --md-default-fg-color--light: hsla(var(--md-hue), 15%, 90%, 0.56); - --md-default-fg-color--lighter: hsla(var(--md-hue), 15%, 90%, 0.32); - --md-default-fg-color--lightest: hsla(var(--md-hue), 15%, 90%, 0.12); - --md-default-bg-color: hsla(var(--md-hue), 0%, 6%, 1.0); - --md-default-bg-color--light: hsla(var(--md-hue), 15%, 14%, 0.54); - --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 14%, 0.26); - --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 14%, 0.07); + --md-default-fg-color: hsla(var(--md-hue), 15%, 90%, 0.82); + --md-default-fg-color--light: hsla(var(--md-hue), 15%, 90%, 0.56); + --md-default-fg-color--lighter: hsla(var(--md-hue), 15%, 90%, 0.32); + --md-default-fg-color--lightest: hsla(var(--md-hue), 15%, 90%, 0.12); + --md-default-bg-color: hsla(var(--md-hue), 0%, 6%, 1); + --md-default-bg-color--light: hsla(var(--md-hue), 15%, 14%, 0.54); + --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 14%, 0.26); + --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 14%, 0.07); /* Code color shades */ - --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 0.82); - --md-code-bg-color: hsla(var(--md-hue), 15%, 18%, 1); + --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 0.82); + --md-code-bg-color: hsla(var(--md-hue), 15%, 18%, 1); /* Code highlighting syntax color shades */ - --md-code-hl-number-color: hsla(6, 74%, 63%, 1); - --md-code-hl-special-color: hsla(340, 83%, 66%, 1); - --md-code-hl-function-color: hsla(291, 57%, 65%, 1); - --md-code-hl-constant-color: hsla(250, 62%, 70%, 1); - --md-code-hl-keyword-color: hsla(219, 66%, 64%, 1); - --md-code-hl-string-color: hsla(150, 58%, 44%, 1); - --md-code-hl-name-color: var(--md-code-fg-color); - --md-code-hl-operator-color: var(--md-default-fg-color--light); - --md-code-hl-punctuation-color: var(--md-default-fg-color--light); - --md-code-hl-comment-color: var(--md-default-fg-color--light); - --md-code-hl-generic-color: var(--md-default-fg-color--light); - --md-code-hl-variable-color: var(--md-default-fg-color--light); + --md-code-hl-number-color: hsla(6, 74%, 63%, 1); + --md-code-hl-special-color: hsla(340, 83%, 66%, 1); + --md-code-hl-function-color: hsla(291, 57%, 65%, 1); + --md-code-hl-constant-color: hsla(250, 62%, 70%, 1); + --md-code-hl-keyword-color: hsla(219, 66%, 64%, 1); + --md-code-hl-string-color: hsla(150, 58%, 44%, 1); + --md-code-hl-name-color: var(--md-code-fg-color); + --md-code-hl-operator-color: var(--md-default-fg-color--light); + --md-code-hl-punctuation-color: var(--md-default-fg-color--light); + --md-code-hl-comment-color: var(--md-default-fg-color--light); + --md-code-hl-generic-color: var(--md-default-fg-color--light); + --md-code-hl-variable-color: var(--md-default-fg-color--light); /* Typeset color shades */ - --md-typeset-color: var(--md-default-fg-color); + --md-typeset-color: var(--md-default-fg-color); /* Typeset `a` color shades */ - --md-typeset-a-color: var(--md-primary-fg-color); + --md-typeset-a-color: var(--md-primary-fg-color); /* Typeset `kbd` color shades */ - --md-typeset-kbd-color: hsla(var(--md-hue), 15%, 90%, 0.12); - --md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 90%, 0.2); - --md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1); + --md-typeset-kbd-color: hsla(var(--md-hue), 15%, 90%, 0.12); + --md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 90%, 0.2); + --md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1); /* Typeset `mark` color shades */ - --md-typeset-mark-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.3); + --md-typeset-mark-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.3); /* Typeset `table` color shades */ - --md-typeset-table-color: hsla(var(--md-hue), 15%, 95%, 0.12); - --md-typeset-table-color--light: hsla(var(--md-hue), 15%, 95%, 0.035); + --md-typeset-table-color: hsla(var(--md-hue), 15%, 95%, 0.12); + --md-typeset-table-color--light: hsla(var(--md-hue), 15%, 95%, 0.035); /* Admonition color shades */ - --md-admonition-fg-color: var(--md-default-fg-color); - --md-admonition-bg-color: var(--md-default-bg-color); + --md-admonition-fg-color: var(--md-default-fg-color); + --md-admonition-bg-color: var(--md-default-bg-color); /* Footer color shades */ - --md-footer-bg-color: hsla(var(--md-hue), 15%, 10%, 0.87); - --md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 8%, 1); + --md-footer-bg-color: hsla(var(--md-hue), 15%, 10%, 0.87); + --md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 8%, 1); /* Shadow depth 1 */ - --md-shadow-z1: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1); + --md-shadow-z1: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05), + 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1); /* Shadow depth 2 */ - --md-shadow-z2: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.25), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25); + --md-shadow-z2: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.25), + 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25); /* Shadow depth 3 */ - --md-shadow-z3: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35); + --md-shadow-z3: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4), + 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35); /* Hide images for light mode */ img[src$="#only-light"], @@ -163,44 +160,43 @@ /* -------------------------------------------------------------------------- */ - [data-md-color-scheme="eveonline"][data-md-color-primary="pink"] { - --md-typeset-a-color: hsl(340, 81%, 63%); + --md-typeset-a-color: hsl(340, 81%, 63%); } [data-md-color-scheme="eveonline"][data-md-color-primary="purple"] { - --md-typeset-a-color: hsl(291, 53%, 63%); + --md-typeset-a-color: hsl(291, 53%, 63%); } [data-md-color-scheme="eveonline"][data-md-color-primary="deep-purple"] { - --md-typeset-a-color: hsl(262, 73%, 70%); + --md-typeset-a-color: hsl(262, 73%, 70%); } [data-md-color-scheme="eveonline"][data-md-color-primary="indigo"] { - --md-typeset-a-color: hsl(219, 76%, 62%); + --md-typeset-a-color: hsl(219, 76%, 62%); } [data-md-color-scheme="eveonline"][data-md-color-primary="teal"] { - --md-typeset-a-color: hsl(174, 100%, 40%); + --md-typeset-a-color: hsl(174, 100%, 40%); } [data-md-color-scheme="eveonline"][data-md-color-primary="green"] { - --md-typeset-a-color: hsl(122, 39%, 60%); + --md-typeset-a-color: hsl(122, 39%, 60%); } [data-md-color-scheme="eveonline"][data-md-color-primary="deep-orange"] { - --md-typeset-a-color: hsl(14, 100%, 65%); + --md-typeset-a-color: hsl(14, 100%, 65%); } [data-md-color-scheme="eveonline"][data-md-color-primary="brown"] { - --md-typeset-a-color: hsl(16, 45%, 56%); + --md-typeset-a-color: hsl(16, 45%, 56%); } /* Set neutral colors to indigo */ [data-md-color-scheme="eveonline"][data-md-color-primary="grey"] { - --md-typeset-a-color: hsl(219, 66%, 62%); + --md-typeset-a-color: hsl(219, 66%, 62%); } [data-md-color-scheme="eveonline"][data-md-color-primary="blue-grey"] { - --md-typeset-a-color: hsl(219, 66%, 62%); + --md-typeset-a-color: hsl(219, 66%, 62%); } [data-md-color-scheme="eveonline"][data-md-color-primary="white"] { - --md-typeset-a-color: hsl(219, 66%, 62%); + --md-typeset-a-color: hsl(219, 66%, 62%); } [data-md-color-scheme="eveonline"][data-md-color-primary="black"] { - --md-typeset-a-color: hsl(219, 66%, 62%); + --md-typeset-a-color: hsl(219, 66%, 62%); } /* -------------------------------------------------------------------------- */ @@ -212,3 +208,74 @@ transition-duration: 0ms !important; /* stylelint-disable-line */ } } + +.md-sidebar .md-nav--primary[data-md-level="0"] > .md-nav__title, +.md-sidebar .md-nav--primary[data-md-level="0"] > .md-nav__source { + display: none; +} + +.md-sidebar .md-nav--primary .md-nav__title { + padding: 0 40px 4px; + height: 45px; +} + +.esi-nav-container { + display: flex; + flex-direction: row; + max-width: 1632px; +} + +.esi-nav-header { + flex-grow: 1; + display: flex; + flex-direction: row; + gap: 8px; + height: 100%; + align-items: center; +} + +.esi-nav-container > .esi-burger-button { + padding: 0; + margin-left: -4px; +} +.esi-nav-container > .esi-burger-button > svg { + width: 36px; + height: 36px; +} + +@media (max-width: 1199.9px) { + [data-scrolled] [data-md-color-scheme="eveonline"] { + --header-padding: 0 0 0.5rem; + } + + .esi-nav-header { + display: none; + } + + .esi-min-placeholder { + width: 30px; + } + + .esi-nav-container { + justify-content: space-between; + } + + .esi-nav-container > .md-search, + .esi-nav-container > .esi-search-icon { + display: none !important; + } + + .esi-nav-container > .md-header__source { + display: none; + } + + .esi-nav-container > .md-logo { + display: flex; + } +} + +.esi-nav-header-item { + padding: 8px; + font-size: 18.4px; + line-height: 31px; +} diff --git a/mkdocs.yml b/mkdocs.yml index 57147f5..db3e97c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -25,11 +25,11 @@ not_in_nav: | theme: name: material logo: assets/images/eve-logo.svg + custom_dir: overrides favicon: assets/images/favicon.ico palette: scheme: eveonline - font: - code: Noto Sans + font: false features: - content.action.edit - content.action.view @@ -46,7 +46,11 @@ theme: - toc.follow - toc.integrate +watch: + - overrides + extra_css: + - assets/stylesheet/font.css - assets/stylesheet/theme.css extra_javascript: diff --git a/overrides/partials/header.html b/overrides/partials/header.html new file mode 100644 index 0000000..35f4d65 --- /dev/null +++ b/overrides/partials/header.html @@ -0,0 +1,97 @@ + + + +{% set class = "md-header" %} {% if "navigation.tabs.sticky" in features %} {% +set class = class ~ " md-header--shadow md-header--lifted" %} {% elif +"navigation.tabs" not in features %} {% set class = class ~ " md-header--shadow" +%} {% endif %} + + +
+ + + + {% if "navigation.tabs.sticky" in features %} {% if "navigation.tabs" in + features %} {% include "partials/tabs.html" %} {% endif %} {% endif %} +