Skip to content

Commit

Permalink
Chore: unify the header a bit more with other EVE Online websites (#90)
Browse files Browse the repository at this point in the history
  • Loading branch information
@steven-noorbergen
steven-noorbergen authored Nov 2, 2024
1 parent a749106 commit 1510840
Show file tree
Hide file tree
Showing 4 changed files with 272 additions and 64 deletions.
40 changes: 40 additions & 0 deletions docs/assets/stylesheet/font.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
191 changes: 129 additions & 62 deletions docs/assets/stylesheet/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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"],
Expand All @@ -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%);
}

/* -------------------------------------------------------------------------- */
Expand All @@ -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;
}
8 changes: 6 additions & 2 deletions mkdocs.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -46,7 +46,11 @@ theme:
- toc.follow
- toc.integrate

watch:
- overrides

extra_css:
- assets/stylesheet/font.css
- assets/stylesheet/theme.css

extra_javascript:
Expand Down
Loading

0 comments on commit 1510840

Please sign in to comment.