Skip to content

Commit 278a6de

Browse files
CyanVoxelCyanVoxel
committed
feat(docs): vauxhall theme for docs site
1 parent 142e464 commit 278a6de

File tree

5 files changed

+306
-8
lines changed

5 files changed

+306
-8
lines changed

‎docs/assets/icon_mono.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎docs/stylesheets/extra.css‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,99 @@
1-
th, td {
1+
/* Dark Theme */
2+
[data-md-color-scheme="slate"] {
3+
--md-default-bg-color: #060617;
4+
--md-default-fg-color: #eae1ff;
5+
--md-default-fg-color--light: #b898ff;
6+
--md-code-fg-color: #eae1ffcc;
7+
--md-code-hl-string-color: rgb(92, 255, 228);
8+
--md-code-hl-keyword-color: rgb(61, 155, 255);
9+
--md-code-hl-constant-color: rgb(205, 78, 255);
10+
--md-footer-bg-color--dark: #03030c;
11+
--md-code-bg-color: #090a26;
12+
}
13+
14+
/* Light Theme */
15+
[data-md-color-scheme="default"] {
16+
--md-default-fg-color--light: #090a26;
17+
}
18+
19+
.md-header {
20+
background: linear-gradient(
21+
60deg,
22+
rgb(205, 78, 255) 10%,
23+
rgb(116, 123, 255) 50%,
24+
rgb(72, 145, 255) 75%,
25+
rgb(98, 242, 255) 100%
26+
);
27+
}
28+
29+
th,
30+
td {
231
padding: 0.5em 1em 0.5em 1em !important;
332
}
33+
34+
.md-header {
35+
border-style: solid;
36+
border-width: 0 0 2px 0;
37+
border-color: #ffffff33;
38+
}
39+
40+
.md-header__title {
41+
font-family: "Bai Jamjuree", Roboto, sans-serif;
42+
font-weight: 500 !important;
43+
font-size: 1.1rem;
44+
letter-spacing: -0.05rem !important;
45+
}
46+
47+
.md-nav__title,
48+
h1,
49+
h2,
50+
.md-nav__item--section > .md-nav__link {
51+
font-family: "Bai Jamjuree", Roboto, sans-serif;
52+
font-weight: 500 !important;
53+
font-size: 0.8rem;
54+
letter-spacing: -0.05rem !important;
55+
}
56+
57+
/* Add padding to stop text from cutting off early due to negative letter spacing */
58+
.md-nav__item--section > .md-nav__link > .md-ellipsis {
59+
padding-right: 0.5rem;
60+
}
61+
.md-header__title .md-header__topic .md-ellipsis {
62+
padding-right: 0.5rem;
63+
}
64+
65+
.md-header__button.md-logo {
66+
padding-right: 0;
67+
padding-bottom: 0.3rem;
68+
margin-right: -0.8rem;
69+
}
70+
71+
.md-search__form {
72+
height: 1.5rem;
73+
background-color: #00004444;
74+
border-radius: 0.3rem !important;
75+
border-style: solid;
76+
border-width: 2px 1px 0 1px;
77+
border-color: #00004422;
78+
padding-bottom: 2px;
79+
}
80+
.md-search__form > .md-icon {
81+
margin-top: -0.2rem;
82+
}
83+
84+
.twemoji {
85+
margin-top: 0.05rem;
86+
}
87+
88+
/* Matches the palette used by mkdocs-material */
89+
.priority-high {
90+
color: #f1185a;
91+
}
92+
93+
.priority-med {
94+
color: #7c4eff;
95+
}
96+
97+
.priority-low {
98+
color: #28afff;
99+
}

‎mkdocs.yml‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,29 +53,30 @@ nav:
5353

5454
theme:
5555
name: material
56+
custom_dir: overrides
5657
palette:
5758
# Palette toggle for automatic mode
5859
- media: "(prefers-color-scheme)"
5960
toggle:
60-
icon: material/brightness-auto
61-
name: Switch to light mode
61+
icon: material/lightbulb-auto-outline
62+
name: Switch to Light Mode
6263
# Palette toggle for light mode
6364
- media: "(prefers-color-scheme: light)"
6465
scheme: default
6566
primary: deep purple
6667
accent: deep purple
6768
toggle:
68-
icon: material/brightness-7
69-
name: Switch to dark mode
69+
icon: material/lightbulb
70+
name: Switch to Dark Mode
7071
# Palette toggle for dark mode
7172
- media: "(prefers-color-scheme: dark)"
7273
scheme: slate
7374
primary: deep purple
7475
accent: deep purple
7576
toggle:
76-
icon: material/brightness-4
77-
name: SSwitch to system preference
78-
logo: assets/icon.png
77+
icon: material/lightbulb-night-outline
78+
name: Switch to System Preference
79+
logo: assets/icon_mono.svg
7980
favicon: assets/icon.ico
8081
font: false # use system fonts
8182
language: en

‎overrides/partials/header.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!--
2+
Copyright (c) 2016-2025 Martin Donath <[email protected]>
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to
6+
deal in the Software without restriction, including without limitation the
7+
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
8+
sell copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in
12+
all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
20+
IN THE SOFTWARE.
21+
-->
22+
23+
<!-- Determine classes -->
24+
{% set class = "md-header" %}
25+
{% if "navigation.tabs.sticky" in features %}
26+
{% set class = class ~ " md-header--shadow md-header--lifted" %}
27+
{% elif "navigation.tabs" not in features %}
28+
{% set class = class ~ " md-header--shadow" %}
29+
{% endif %}
30+
31+
<!-- Header -->
32+
<header class="{{ class }}" data-md-component="header">
33+
<nav
34+
class="md-header__inner md-grid"
35+
aria-label="{{ lang.t('header') }}"
36+
>
37+
38+
<!-- Link to home -->
39+
<a
40+
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
41+
title="{{ config.site_name | e }}"
42+
class="md-header__button md-logo"
43+
aria-label="{{ config.site_name }}"
44+
data-md-component="logo"
45+
>
46+
{% include "partials/logo.html" %}
47+
</a>
48+
49+
<!-- Button to open drawer -->
50+
<label class="md-header__button md-icon" for="__drawer">
51+
{% set icon = config.theme.icon.menu or "material/menu" %}
52+
{% include ".icons/" ~ icon ~ ".svg" %}
53+
</label>
54+
55+
<!-- Header title -->
56+
<div class="md-header__title" data-md-component="header-title">
57+
<div class="md-header__ellipsis">
58+
<div class="md-header__topic">
59+
<span class="md-ellipsis">
60+
<a style="font-weight: 900;">Tag</a><a style="font-weight: 500;"><i>Studio</i></a>
61+
</span>
62+
</div>
63+
<div class="md-header__topic" data-md-component="header-topic">
64+
<span class="md-ellipsis">
65+
{% if page.meta and page.meta.title %}
66+
{{ page.meta.title }}
67+
{% else %}
68+
{{ page.title }}
69+
{% endif %}
70+
</span>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<!-- Color palette toggle -->
76+
{% if config.theme.palette %}
77+
{% if not config.theme.palette is mapping %}
78+
{% include "partials/palette.html" %}
79+
{% endif %}
80+
{% endif %}
81+
82+
<!-- User preference: color palette -->
83+
{% if not config.theme.palette is mapping %}
84+
{% include "partials/javascripts/palette.html" %}
85+
{% endif %}
86+
87+
<!-- Site language selector -->
88+
{% if config.extra.alternate %}
89+
{% include "partials/alternate.html" %}
90+
{% endif %}
91+
92+
<!-- Button to open search modal -->
93+
{% if "material/search" in config.plugins %}
94+
{% set search = config.plugins["material/search"] | attr("config") %}
95+
96+
<!-- Check if search is actually enabled - see https://t.ly/DT_0V -->
97+
{% if search.enabled %}
98+
<label class="md-header__button md-icon" for="__search">
99+
{% set icon = config.theme.icon.search or "material/magnify" %}
100+
{% include ".icons/" ~ icon ~ ".svg" %}
101+
</label>
102+
103+
<!-- Search interface -->
104+
{% include "partials/search.html" %}
105+
{% endif %}
106+
{% endif %}
107+
108+
<!-- Repository information -->
109+
{% if config.repo_url %}
110+
<div class="md-header__source">
111+
{% include "partials/source.html" %}
112+
</div>
113+
{% endif %}
114+
</nav>
115+
116+
<!-- Navigation tabs (sticky) -->
117+
{% if "navigation.tabs.sticky" in features %}
118+
{% if "navigation.tabs" in features %}
119+
{% include "partials/tabs.html" %}
120+
{% endif %}
121+
{% endif %}
122+
</header>

‎overrides/partials/nav.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!--
2+
Copyright (c) 2016-2025 Martin Donath <[email protected]>
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to
6+
deal in the Software without restriction, including without limitation the
7+
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
8+
sell copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in
12+
all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
20+
IN THE SOFTWARE.
21+
-->
22+
23+
{% import "partials/nav-item.html" as item with context %}
24+
25+
<!-- Determine classes -->
26+
{% set class = "md-nav md-nav--primary" %}
27+
{% if "navigation.tabs" in features %}
28+
{% set class = class ~ " md-nav--lifted" %}
29+
{% endif %}
30+
{% if "toc.integrate" in features %}
31+
{% set class = class ~ " md-nav--integrated" %}
32+
{% endif %}
33+
34+
<!-- Navigation -->
35+
<nav
36+
class="{{ class }}"
37+
aria-label="{{ lang.t('nav') }}"
38+
data-md-level="0"
39+
>
40+
41+
<!-- Site title -->
42+
<!-- <label class="md-nav__title" for="__drawer">
43+
<a
44+
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
45+
title="{{ config.site_name | e }}"
46+
class="md-nav__button md-logo"
47+
aria-label="{{ config.site_name }}"
48+
data-md-component="logo"
49+
>
50+
{% include "partials/logo.html" %}
51+
</a>
52+
{{ config.site_name }}
53+
</label> -->
54+
55+
<!-- Repository information -->
56+
{% if config.repo_url %}
57+
<div class="md-nav__source">
58+
{% include "partials/source.html" %}
59+
</div>
60+
{% endif %}
61+
62+
<!-- Navigation list -->
63+
<ul class="md-nav__list" data-md-scrollfix>
64+
{% for nav_item in nav %}
65+
{% set path = "__nav_" ~ loop.index %}
66+
{{ item.render(nav_item, path, 1) }}
67+
{% endfor %}
68+
</ul>
69+
</nav>

0 commit comments

Comments
 (0)