/* Available color variables can be found here: https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss */ /* Colors: Use colors from Oslo Design System: https://designsystem.oslo.kommune.no/#/general-colors */ [data-md-color-scheme="byks-nice"] { --md-primary-fg-color: #F9C66B; /* --md-primary-fg-color--light: #2c2c2c; */ /* --md-primary-fg-color--dark: #90030C; */ --md-accent-fg-color: #F9C66B; /* Title and header icons */ --md-primary-bg-color: #2a2859; /* Text color */ --md-typeset-color: #2c2c2c; } /* Inspired from https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/palette/_scheme.scss */ [data-md-color-scheme="byks-evil"] { /* --md-hue: 210; */ color-scheme: dark; --md-primary-fg-color: #F9C66B; --md-primary-bg-color: #2a2859; /* // 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), 15%, 14%, 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-bg-color--light: hsla(var(--md-hue), 15%, 18%, 0.9); --md-code-bg-color--lighter: hsla(var(--md-hue), 15%, 18%, 0.54); /* // Code highlighting color shades */ --md-code-hl-color: hsla(#{hex2hsl($clr-blue-a400)}, 1); --md-code-hl-color--light: hsla(#{hex2hsl($clr-blue-a400)}, 0.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); /* // Typeset color shades */ --md-typeset-color: var(--md-default-fg-color); /* // Typeset `a` color shades */ --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); /* // Typeset `mark` color shades */ --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); /* // Admonition color shades */ --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); /* // 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); /* // 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); /* // 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); /* // Hide images for light mode */ img[src$="#only-light"], img[src$="#gh-light-mode-only"] { display: none; } } /* Add border around images */ /* .md-content img { border-width: 1px; border-style: solid; border-color: black; outline-width: 5px; outline-style: solid; outline-color: rgb(226, 226, 226); } */ /* FONTS AND TYPEFACE */ @font-face { font-family: "Oslo Sans"; src: url("../assets/fonts/OsloSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Oslo Sans"; src: url("../assets/fonts/OsloSans-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Oslo Sans"; src: url("../assets/fonts/OsloSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Oslo Sans"; src: url("../assets/fonts/OsloSans-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Oslo Sans"; src: url("../assets/fonts/OsloSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Oslo Sans"; src: url("../assets/fonts/OsloSans-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Logo size — overflow the navbar without affecting its height */ .md-header__button.md-logo { margin: 0; padding: 0; } .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 4.4rem; width: 4.4rem; /* Keep the logo in flow but don't let it stretch the navbar */ vertical-align: middle; margin: -2.3rem -0.5rem; /* Adjust the Oslo logo to be inline with title */ } :root { --md-text-font: "Oslo Sans"; } /* Soften header banner title weight */ .md-header__topic .md-ellipsis { font-weight: 400; } /* .md-grid { max-width: 1800px; } */