bradtreloar/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP custom theme

Browse source
This commit is contained in:
Brad Treloar 2025-03-02 00:25:37 +10:30
parent 525d1e8b37
commit 9497067c8f
7 changed files with 121 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
mkdocs.yml
View file

@ -1,2 +1,4 @@
site_name: My Docs site_name: Notes
theme: readthedocs theme:
name: null
custom_dir: ./notes_theme

3
notes_theme/README.md Normal file
View file

@ -0,0 +1,3 @@
# Notes mkdocs theme
Help: [Creating a custom theme](https://www.mkdocs.org/dev-guide/themes/#creating-a-custom-theme)

29
notes_theme/base.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ 'css/main.css' | url }}" rel="stylesheet">
{%- for path in config.extra_css %}
<link href="{{ path | url }}" rel="stylesheet">
{%- endfor %}
</head>
<body>
{% include "main-menu.html" %}
<main>
{{ page.content }}
</main>
{%- for script in config.extra_javascript %}
{{ script | script_tag }}
{%- endfor %}
</body>
</html>

51
notes_theme/css/main.css Normal file
View file

@ -0,0 +1,51 @@
:root {
--gutter: 1rem;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
main {
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
box-sizing: content-box;
max-width: 600px;
}
.main-menu {
background-color: #eee;
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: var(--gutter);
}
.main-menu__top-level-items,
.main-menu__sub-level-items {
list-style: none;
padding: 0;
}
.main-menu__sub-menu {
padding: 0 0 0 var(--gutter);
}
.main-menu__top-level-items {
margin: 0;
}
.main-menu__top-level-item {
margin: 0;
}

14
notes_theme/main-menu-sub.html Normal file
View file

@ -0,0 +1,14 @@
{% if not nav_item.children %}
<li class="main-menu__sub-level-item{% if nav_item.active %} active{% endif %}">
<a href="{{ nav_item.url | url }}">{{ nav_item.title }}</a>
</li>
{% else %}
<li class="main-menu__sub-menu">
<a tabindex="-1" href="">{{ nav_item.title }}</a>
<ul class="main-menu__sub-level-items">
{% for nav_item in nav_item.children %}
{% include "main-menu-sub.html" %}
{% endfor %}
</ul>
</li>
{% endif %}

19
notes_theme/main-menu.html Normal file
View file

@ -0,0 +1,19 @@
<nav class="main-menu">
<ul class="main-menu__top-level-items">
{% for nav_item in nav %}
{% if nav_item.children %}
<li class="main-menu__top-level-item{% if nav_item.active %} main-menu__top-level-item--active{% endif %}">
<ul class="main-menu__sub-level-items">
{% for nav_item in nav_item.children %}
{% include "main-menu-sub.html" %}
{% endfor %}
</ul>
</li>
{% else %}
<li {% if nav_item.active %}class="active" {% endif %}>
<a href="{{ nav_item.url|url }}">{{ nav_item.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>

1
notes_theme/main.html Normal file
View file

@ -0,0 +1 @@
{% extends "base.html" %}