From 4ee5c0fe7975f9c598b3de6f9c11fbbb609cbfaa Mon Sep 17 00:00:00 2001 From: Sina Atalay <79940989+sinaatalay@users.noreply.github.com> Date: Mon, 2 Mar 2026 20:30:23 +0300 Subject: [PATCH] Improve docs header --- docs/assets/stylesheets/rendercv.css | 16 ++ docs/assets/stylesheets/rendercv.scss | 307 -------------------------- docs/overrides/partials/logo.html | 4 + 3 files changed, 20 insertions(+), 307 deletions(-) delete mode 100644 docs/assets/stylesheets/rendercv.scss create mode 100644 docs/overrides/partials/logo.html diff --git a/docs/assets/stylesheets/rendercv.css b/docs/assets/stylesheets/rendercv.css index afcc25be..d6f477f4 100644 --- a/docs/assets/stylesheets/rendercv.css +++ b/docs/assets/stylesheets/rendercv.css @@ -209,3 +209,19 @@ 0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.4), 0 0 0.05rem hsla(0, 0%, 0%, 0.35); } + +.md-header__button.md-logo { + overflow: visible; + margin-right: 0; + padding-right: 0; +} + +.md-header__button.md-logo svg { + overflow: visible; + width: 1.6rem; + height: 1.6rem; +} + +.md-header__topic { + margin-left: 0; +} diff --git a/docs/assets/stylesheets/rendercv.scss b/docs/assets/stylesheets/rendercv.scss deleted file mode 100644 index 40989af7..00000000 --- a/docs/assets/stylesheets/rendercv.scss +++ /dev/null @@ -1,307 +0,0 @@ -// Compiling rendercv.scss -// -// This file uses SCSS features from MkDocs Material (hex2hsl(), -// px2rem(), $clr-* variables). Compile with Material's SCSS context: -// -// 1. Clone mkdocs-material and install deps: -// git clone https://github.com/squidfunk/mkdocs-material ../mkdocs-material -// cd ../mkdocs-material && pnpm install -// -// 2. From the mkdocs-material directory, run: -// npx sass --load-path=node_modules/.pnpm/material-design-color@2.3.2/node_modules/material-design-color --load-path=src/templates/assets/stylesheets --load-path=../docs/assets/stylesheets --style=expanded --no-source-map --quiet /dev/stdin ../docs/assets/stylesheets/rendercv.css <<< '@import "material-color"; @import "utilities/convert"; @import "rendercv";' - -// ============================================================================ -// Shadcn Design Tokens -// ============================================================================ - -// Light tokens -[data-md-color-scheme="default"] { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.129 0.042 264.695); - --card: oklch(1 0 0); - --card-foreground: oklch(0.129 0.042 264.695); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.129 0.042 264.695); - --primary: oklch(0.208 0.042 265.755); - --primary-foreground: oklch(0.984 0.003 247.858); - --secondary: oklch(0.968 0.007 247.896); - --secondary-foreground: oklch(0.208 0.042 265.755); - --muted: oklch(0.968 0.007 247.896); - --muted-foreground: oklch(0.554 0.046 257.417); - --accent: oklch(0.968 0.007 247.896); - --accent-foreground: oklch(0.208 0.042 265.755); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.929 0.013 255.508); - --input: oklch(0.929 0.013 255.508); - --ring: oklch(0.704 0.04 256.788); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.984 0.003 247.858); - --sidebar-foreground: oklch(0.129 0.042 264.695); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.984 0.003 247.858); - --sidebar-accent: oklch(0.968 0.007 247.896); - --sidebar-accent-foreground: oklch(0.208 0.042 265.755); - --sidebar-border: oklch(0.929 0.013 255.508); - --sidebar-ring: oklch(0.704 0.04 256.788); -} - -// Dark tokens -:root, -[data-md-color-scheme="slate"] { - --background: oklch(0.129 0.042 264.695); - --foreground: oklch(0.984 0.003 247.858); - --card: oklch(0.208 0.042 265.755); - --card-foreground: oklch(0.984 0.003 247.858); - --popover: oklch(0.208 0.042 265.755); - --popover-foreground: oklch(0.984 0.003 247.858); - --primary: oklch(0.929 0.013 255.508); - --primary-foreground: oklch(0.208 0.042 265.755); - --secondary: oklch(0.279 0.041 260.031); - --secondary-foreground: oklch(0.984 0.003 247.858); - --muted: oklch(0.279 0.041 260.031); - --muted-foreground: oklch(0.704 0.04 256.788); - --accent: oklch(0.279 0.041 260.031); - --accent-foreground: oklch(0.984 0.003 247.858); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.551 0.027 264.364); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.208 0.042 265.755); - --sidebar-foreground: oklch(0.984 0.003 247.858); - --sidebar-primary: oklch(0.64 0.17 269.37); - --sidebar-primary-foreground: oklch(0.984 0.003 247.858); - --sidebar-accent: oklch(0.279 0.041 260.031); - --sidebar-accent-foreground: oklch(0.984 0.003 247.858); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.551 0.027 264.364); -} - -//// -/// Copyright (c) 2016-2025 Martin Donath -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ============================================================================ -// MkDocs Material — Light Theme -// ============================================================================ - -[data-md-color-scheme="default"] { - color-scheme: light; - - // Hide images for dark mode - img[src$="#only-dark"], - img[src$="#gh-dark-mode-only"] { - display: none; - } - - // Color hue — change to alter the overall tone of the theme - --md-hue: 225deg; - - // Primary color shades - --md-primary-fg-color: var(--sidebar); - --md-primary-bg-color: var(--sidebar-foreground); - - // Accent color shades - --md-accent-fg-color: var(--sidebar-primary); - --md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1); - --md-accent-bg-color: hsla(0, 0%, 100%, 1); - --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7); - - // Default color shades - --md-default-fg-color: var(--foreground); - --md-default-fg-color--light: var(--muted-foreground); - --md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.32); - --md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07); - --md-default-bg-color: var(--background); - --md-default-bg-color--light: hsla(0, 0%, 100%, 0.7); - --md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3); - --md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12); - - // Code color shades - --md-code-fg-color: hsla(200, 18%, 26%, 1); - --md-code-bg-color: var(--sidebar); - --md-code-bg-color--light: hsla(200, 0%, 96%, 0); - --md-code-bg-color--lighter: hsla(200, 0%, 96%, 0); - - // Code highlighting color shades - --md-code-hl-color: hsla(#{hex2hsl($clr-blue-a200)}, 1); - --md-code-hl-color--light: hsla(#{hex2hsl($clr-blue-a200)}, 0.1); - - // Code highlighting syntax color shades - --md-code-hl-number-color: hsla(0, 67%, 50%, 1); - --md-code-hl-special-color: hsla(340, 83%, 47%, 1); - --md-code-hl-function-color: hsla(291, 45%, 50%, 1); - --md-code-hl-constant-color: hsla(250, 63%, 60%, 1); - --md-code-hl-keyword-color: hsla(219, 54%, 51%, 1); - --md-code-hl-string-color: hsla(150, 63%, 30%, 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-a-color: var(--sidebar-primary); - --md-typeset-del-color: hsla(6, 90%, 60%, 0.15); - --md-typeset-ins-color: hsla(150, 90%, 44%, 0.15); - --md-typeset-kbd-color: hsla(0, 0%, 98%, 1); - --md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1); - --md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1); - --md-typeset-mark-color: hsla(#{hex2hsl($clr-yellow-a200)}, 0.5); - --md-typeset-table-color: hsla(0, 0%, 0%, 0.12); - --md-typeset-table-color--light: hsla(0, 0%, 0%, 0.035); - - // Admonition color shades - --md-admonition-fg-color: var(--md-default-fg-color); - --md-admonition-bg-color: var(--md-default-bg-color); - - // Warning color shades - --md-warning-fg-color: hsla(0, 0%, 0%, 0.87); - --md-warning-bg-color: hsla(60, 100%, 80%, 1); - - // Footer color shades - --md-footer-fg-color: var(--sidebar-foreground); - --md-footer-fg-color--light: var(--sidebar-foreground); - --md-footer-fg-color--lighter: var(--sidebar-foreground); - --md-footer-bg-color: var(--sidebar); - --md-footer-bg-color--dark: var(--sidebar); - - // Shadow depths - --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-z2: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25); - --md-shadow-z3: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35); -} - -// ============================================================================ -// MkDocs Material — Dark Theme -// ============================================================================ - -[data-md-color-scheme="slate"] { - color-scheme: dark; - - // Hide images for light mode - img[src$="#only-light"], - img[src$="#gh-light-mode-only"] { - display: none; - } - - // Color hue — change to alter the overall tone of the theme - --md-hue: 225deg; - - // Primary color shades - --md-primary-fg-color: var(--sidebar); - --md-primary-bg-color: var(--sidebar-foreground); - - // Accent color shades - --md-accent-fg-color: var(--sidebar-primary); - --md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1); - --md-accent-bg-color: hsla(0, 0%, 100%, 1); - --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7); - - // Default color shades - --md-default-fg-color: var(--foreground); - --md-default-fg-color--light: var(--muted-foreground); - --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: var(--background); - --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: var(--sidebar); - --md-code-bg-color--light: hsla(var(--md-hue), 15%, 18%, 0); - --md-code-bg-color--lighter: hsla(var(--md-hue), 15%, 18%, 0); - - // 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); - --md-typeset-a-color: var(--sidebar-primary); - --md-typeset-del-color: hsla(6, 90%, 60%, 0.15); - --md-typeset-ins-color: hsla(150, 90%, 44%, 0.15); - --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-mark-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.3); - --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); - - // Warning color shades - --md-warning-fg-color: hsla(0, 0%, 0%, 0.87); - --md-warning-bg-color: hsla(60, 100%, 80%, 1); - - // Footer color shades - --md-footer-fg-color: var(--sidebar-foreground); - --md-footer-fg-color--light: var(--sidebar-foreground); - --md-footer-fg-color--lighter: var(--sidebar-foreground); - --md-footer-bg-color: var(--sidebar); - --md-footer-bg-color--dark: var(--sidebar); - - // Shadow depths - --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-z2: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.25), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25); - --md-shadow-z3: - 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4), - 0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35); -} diff --git a/docs/overrides/partials/logo.html b/docs/overrides/partials/logo.html new file mode 100644 index 00000000..276698d5 --- /dev/null +++ b/docs/overrides/partials/logo.html @@ -0,0 +1,4 @@ +{% set icon = config.theme.icon.logo or "material/library" %} + + {% include ".icons/" ~ icon ~ ".svg" %} +