Skip to content

Commit dbedba8

Browse files
nityanitya
committed
refactor / mkdocs theme
1 parent a4a89b8 commit dbedba8

File tree

4 files changed

+133
-0
lines changed

4 files changed

+133
-0
lines changed

‎docs/assets/extra.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,31 @@
1212
margin: 0;
1313
padding: 0;
1414
}
15+
16+
/* Custom gradient styles for the navigation banner */
17+
.custom-gradient-banner {
18+
position: absolute;
19+
top: 0;
20+
left: 0;
21+
right: 0;
22+
height: 4px; /* Height of the gradient banner */
23+
background: linear-gradient(90deg,
24+
#30216F 0%, /* Deep Purple */
25+
#7C4ACD 20%, /* Medium Purple */
26+
#E94BBF 40%, /* Vibrant Magenta/Pink */
27+
#F2A1E6 60%, /* Light Pink */
28+
#2B76E5 100% /* Electric Blue */
29+
);
30+
z-index: 10;
31+
}
32+
33+
/* Alternative full-height gradient for the header */
34+
.md-header {
35+
position: relative;
36+
}
37+
38+
/* Make sure the gradient looks good in both light and dark modes */
39+
[data-md-color-scheme="default"] .custom-gradient-banner,
40+
[data-md-color-scheme="slate"] .custom-gradient-banner {
41+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
42+
}

‎docs/overrides/main.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{% extends "base.html" %}
2+
3+
{% block extrahead %}
4+
{{ super() }}
5+
<style>
6+
/* Replace the entire navigation background with the gradient in both light and dark modes */
7+
.md-header {
8+
background-image: linear-gradient(90deg,
9+
#30216F 0%, /* Deep Purple */
10+
#7C4ACD 20%, /* Medium Purple */
11+
#E94BBF 40%, /* Vibrant Magenta/Pink */
12+
#F2A1E6 60%, /* Light Pink */
13+
#2B76E5 100% /* Electric Blue */
14+
) !important;
15+
/* Override any theme color */
16+
background-color: transparent !important;
17+
}
18+
19+
/* Ensure text is visible on the gradient background */
20+
.md-header, .md-header a, .md-header .md-header__button {
21+
color: white !important;
22+
}
23+
24+
/* Make header tabs more visible */
25+
.md-tabs {
26+
background-color: rgba(0, 0, 0, 0.2) !important;
27+
}
28+
</style>
29+
{% endblock %}

‎docs/overrides/partials/header.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!-- Custom header with gradient banner -->
2+
<header class="md-header" data-md-component="header">
3+
<nav class="md-header__inner md-grid" aria-label="{{ lang.t('header.title') }}">
4+
<div class="custom-gradient-banner"></div>
5+
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}">
6+
{% include "partials/logo.html" %}
7+
</a>
8+
<label class="md-header__button md-icon" for="__drawer">
9+
{% include ".icons/material/menu" ~ ".svg" %}
10+
</label>
11+
<div class="md-header__title" data-md-component="header-title">
12+
<div class="md-header__ellipsis">
13+
<div class="md-header__topic">
14+
<span class="md-ellipsis">
15+
{{ config.site_name }}
16+
</span>
17+
</div>
18+
<div class="md-header__topic" data-md-component="header-topic">
19+
<span class="md-ellipsis">
20+
{% if page.meta and page.meta.title %}
21+
{{ page.meta.title }}
22+
{% else %}
23+
{{ page.title }}
24+
{% endif %}
25+
</span>
26+
</div>
27+
</div>
28+
</div>
29+
{% if config.theme.palette %}
30+
{% if not config.theme.palette is mapping %}
31+
<form class="md-header__option" data-md-component="palette">
32+
{% for option in config.theme.palette %}
33+
{% set scheme = option.scheme | d("default", true) %}
34+
<input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ option.primary | d('indigo', true) }}" data-md-color-accent="{{ option.accent | d('indigo', true) }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
35+
{% if option.toggle %}
36+
<label class="md-header__button md-icon" title="{{ option.toggle.name }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
37+
{% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
38+
</label>
39+
{% endif %}
40+
{% endfor %}
41+
</form>
42+
{% endif %}
43+
{% endif %}
44+
{% if "search" in config.plugins %}
45+
<label class="md-header__button md-icon" for="__search">
46+
{% include ".icons/material/magnify.svg" %}
47+
</label>
48+
{% include "partials/search.html" %}
49+
{% endif %}
50+
{% if config.repo_url %}
51+
<div class="md-header__source">
52+
{% include "partials/source.html" %}
53+
</div>
54+
{% endif %}
55+
</nav>
56+
</header>
57+
58+
<style>
59+
/* Custom gradient banner at the top of the page */
60+
.custom-gradient-banner {
61+
position: absolute;
62+
top: 0;
63+
left: 0;
64+
right: 0;
65+
height: 4px; /* Height of the gradient banner */
66+
background: linear-gradient(90deg,
67+
#30216F 0%, /* Deep Purple */
68+
#7C4ACD 20%, /* Medium Purple */
69+
#E94BBF 40%, /* Vibrant Magenta/Pink */
70+
#F2A1E6 60%, /* Light Pink */
71+
#2B76E5 100% /* Electric Blue */
72+
);
73+
z-index: 10;
74+
}
75+
</style>

‎mkdocs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ theme:
4040
text: Roboto #Regular
4141
logo: assets/logo.svg
4242
language: en
43+
custom_dir: docs/overrides
4344

4445
# Theme Modes ...............................................
4546
palette:

0 commit comments

Comments
 (0)