mirror of
https://github.com/rendercv/rendercv.git
synced 2026-04-21 15:29:17 -04:00
Improve docs header
This commit is contained in:
Sina Atalay
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// 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);
|
||||
}
|
||||
4
docs/overrides/partials/logo.html
Normal file
4
docs/overrides/partials/logo.html
Normal file
@@ -0,0 +1,4 @@
|
||||
{% set icon = config.theme.icon.logo or "material/library" %}
|
||||
<span style="display: flex; align-items: center; width: 1.6rem; height: 1.6rem;">
|
||||
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||
</span>
|
||||
Reference in New Issue
Block a user