stefan
/
husk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modularized styles

This commit is contained in:
gurkenhabicht 2022-10-27 00:52:17 +02:00
parent 31c9ac2062
commit 6ea4fdad4a
9 changed files with 263 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
start_site.py
View File

@ -20,11 +20,14 @@ Markdown(app)
app.config["husk"] = toml.load("settings.toml")
content_path = app.config["husk"]["content"]["path"]
highlight_style = app.config["husk"]["content"]["style"]
stylesheet = f"{highlight_style}.css"
stylesheet_auto_complete = f"{highlight_style}-auto-complete.css"
stylesheet = "stylesheet.css"
stylesheet_auto_complete = "auto-complete.css"
project_name = app.config["husk"]["project"]["name"]
project_title = app.config["husk"]["project"]["title"]
app.config["husk"]["style"] = toml.load("style.toml")
colors = app.config["husk"]["style"][highlight_style]
@app.route('/index.json')
def index():
@ -40,7 +43,7 @@ def index():
def content(path="README"):
with open(os.path.join(app.root_path, content_path, f'{path}.md'), "r") as _f:
md_file = _f.read()
md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="HolyGrail-ads", title=""),"fenced_code", "codehilite", "tables", "mdx_math"], extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="", title=""),"fenced_code", "codehilite", "tables", "mdx_math"], extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
html = md.convert(md_file)
formatter = HtmlFormatter(style=highlight_style, full=True, cssclass="codehilite")
css_string = formatter.get_style_defs()
@ -49,6 +52,7 @@ def content(path="README"):
res = render_template(
"documentation.html",
toc=md.toc, md_doc=md_template,
colors = colors,
stylesheet=stylesheet, stylesheet_auto_complete=stylesheet_auto_complete,
project_name=project_name, project_title=project_title,
tree=cut_path_tree(

9
static/auto-complete.css
View File

@ -1,9 +1,7 @@
.autocomplete-suggestions {
text-align: left;
cursor: default;
border: 1px solid #262626;
border-top: 0;
background: #ecf5ff;
box-shadow: -1px 1px 3px rgba(0,0,0,.1);
/* core styles should not be changed */
@ -16,6 +14,7 @@
box-sizing: border-box;
}
.autocomplete-suggestion {
position: relative;
cursor: pointer;
@ -24,22 +23,16 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #262626;
}
.autocomplete-suggestion b {
font-weight: normal;
color: #262626;
}
.autocomplete-suggestion.selected {
background: #2e9dff;
color: #e5e5e5;
}
.autocomplete-suggestion:hover {
background: #2e9dff;
color: #e5e5e5;
}
.autocomplete-suggestion > .context {

9
static/github-dark-auto-complete.css
View File

@ -1,9 +1,7 @@
.autocomplete-suggestions {
text-align: left;
cursor: default;
border: 1px solid #c6cdd5;
border-top: 0;
background: #0d1117;
box-shadow: -1px 1px 3px rgba(0,0,0,.1);
/* core styles should not be changed */
@ -16,6 +14,7 @@
box-sizing: border-box;
}
.autocomplete-suggestion {
position: relative;
cursor: pointer;
@ -24,22 +23,16 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ecf2f8;
}
.autocomplete-suggestion b {
font-weight: normal;
color: #161b22;
}
.autocomplete-suggestion.selected {
background: #77bdfb;
color: #ecf2f8;
}
.autocomplete-suggestion:hover {
background: #77bdfb;
color: #ecf2f8;
}
.autocomplete-suggestion > .context {

85
static/github-dark.css
View File

@ -1,18 +1,21 @@
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; }
body { text-decoration: none; color: #ecf2f8; background-color: #161b22;}
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Twemoji Mozilla Monospace !important; }
body { margin:0; padding: 0; text-decoration: none;}
blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;}
pre { background-color: #0d1117;color: #ecf2f8;border: 1px solid #89929b; font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; }
code { background-color: #0d1117; color: #ecf2f8; }
pre { font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; max-width:100%; border-radius: 5px;}
code { }
hr { height: 0px; }
a {color: inherit; }
a:hover {color: #77bdfb; text-decoration: solid underline;}
details > summary{ background-color: #0d1117; font-size: 18px;}
details > summary:hover { background-color: #21262d; color: #ecf2f8;}
a:hover { text-decoration: solid underline;}
details > summary{ font-size: 18px;}
details > summary:hover { }
details summary::-webkit-details-marker,
details summary::marker { content: "\1F4C1\20";}
::selection { background-color: #fa7970; }
::-moz-selection { background-color: #fa7970; }
.menu { line-height: 1em; font-size: 32px; line-height: 1em; text-decoration: none; }
/*details summary::marker { content: "\1F4C1\20";}*/
details summary::marker { display: none; content: ""; }
::selection { }
::-moz-selection { }
.menu { line-height: 1em; font-size: 32px; text-decoration: none; width: 100%; margin: 0 auto; opacity: 1; }
.banner { float: left; margin-left: 3ch; padding-top: 8px;}
.header-wrapper { width: 100%; position: fixed; top: 0; padding-bottom: 8px; padding-top: 8px; opacity: 0.8; }
.HolyGrail,
.HolyGrail-body {
@ -23,15 +26,16 @@ details summary::marker { content: "\1F4C1\20";}
.HolyGrail-nav {
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
order: -1;
background-color: #0d1117;
}
@media (min-width: 48em) {
@media (min-width: 768px) {
.HolyGrail-body {
flex-direction: row;
flex: 1;
text-align: left;
padding-top: 6vh;
}
.HolyGrail-content {
@ -39,22 +43,33 @@ details summary::marker { content: "\1F4C1\20";}
text-align: left;
margin-left: 1em;
margin-right: 1em;
width: 70%;
border-top: 1px solid #89929b; border-bottom: 1px solid #89929b;
max-width: 80.5em;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 14em;
background-color: #0d1117;
flex: 0 0 12em;
/* experimental line height */
line-height: 1.8em;
width: 15%;
}
.HolyGrail-ads {
overflow: hidden;
padding-right: 8px;
min-width: 18em;
max-width: 18em;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.HolyGrail-nav {
min-width: 18em;
max-width: 18em;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.HolyGrail-nav ul {
list-style-type: none!important;
padding-left : 1ch;
padding-left: 1.5ch;
margin: 0em;
text-align: left;
}
@ -70,7 +85,10 @@ details summary::marker { content: "\1F4C1\20";}
}
.HolyGrail-nav li::marker {
content: "\1F4DD\20";
/*content: "\1F4DD\20";*/
display: none;
content: "";
}
.HolyGrail-nav a{
@ -102,35 +120,32 @@ details summary::marker { content: "\1F4C1\20";}
}
.HolyGrail-ads ul{
padding-left: 0.5em;
padding-left: 1.5ch;
padding-right: 0;
}
.HolyGrail-ads ul li:before {
content: "\203B\20";
content: "\007C\20";
}
}
.search-container{
position: relative;
.search-container {
/*width: 75%; */
margin: 0 auto;
float: right;
/*margin-right: 0%;*/
width: 80%;
}
.search-container input {
display: inline-block;
align: center;
margin-top: 8px;
margin-bottom: 16px;
width: 30%;
width: 35%;
height: 42px;
background-color: #0d1117;
border: 1px solid #21262d;
font-weight: 20px;
color: #c6cdd5;
font-weight: 30px;
cursor: pointer;
padding-left: 1ch;
padding-right: 1ch;
border-radius: 5px;
}
.search-container input:focus {
border: 2px solid #c6cdd5;
outline: 0 none;
}

152
static/stylesheet.css
View File

@ -1,18 +1,21 @@
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; }
body { text-decoration: none; color: #262626; background-color: #fff;}
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Twemoji Mozilla Monospace !important; }
body { margin:0; padding: 0; text-decoration: none;}
blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;}
pre { background-color: #fff;color: #262626;border: 1px solid #262626; font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; }
code { background-color: #fff; color: #262626; }
pre { font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; max-width:100%; border-radius: 5px;}
code { }
hr { height: 0px; }
a {color: inherit; text-decoration: none; }
a:hover {color: #2e9dff; text-decoration: solid underline;}
details > summary{ background-color: #ecf5ff; font-size: 18px;}
details > summary:hover { background-color: #2e9dff; color: #ecf2f8;}
a {color: inherit; }
a:hover { text-decoration: solid underline;}
details > summary{ font-size: 18px;}
details > summary:hover { }
details summary::-webkit-details-marker,
details summary::marker { content: "\1F4C1\20";}
::selection { background-color: #2e9dff; }
::-moz-selection { background-color: #2e9dff; }
.menu { line-height: 1em; font-size: 32px; line-height: 1em; text-decoration: none; }
/*details summary::marker { content: "\1F4C1\20";}*/
details summary::marker { display: none; content: ""; }
::selection { }
::-moz-selection { }
.menu { line-height: 1em; font-size: 32px; text-decoration: none; width: 100%; margin: 0 auto; opacity: 1; }
.banner { float: left; margin-left: 3ch; padding-top: 8px;}
.header-wrapper { width: 100%; position: fixed; top: 0; padding-bottom: 8px; padding-top: 8px; opacity: 0.8; }
.HolyGrail,
.HolyGrail-body {
@ -23,15 +26,16 @@ details summary::marker { content: "\1F4C1\20";}
.HolyGrail-nav {
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
order: -1;
}
@media (min-width: 48em) {
@media (min-width: 768px) {
.HolyGrail-body {
flex-direction: row;
flex: 1;
text-align: left;
border-top: 1px solid #262626; border-bottom: 1px solid #262626;
padding-top: 6vh;
}
.HolyGrail-content {
@ -39,77 +43,109 @@ details summary::marker { content: "\1F4C1\20";}
text-align: left;
margin-left: 1em;
margin-right: 1em;
max-width: 80.5em;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 14em;
background-color: #ecf5ff;
flex: 0 0 12em;
/* experimental line height */
line-height: 1.8em;
}
.HolyGrail-ads {
overflow: hidden;
padding-right: 8px;
min-width: 18em;
max-width: 18em;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.HolyGrail-nav {
min-width: 18em;
max-width: 18em;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.HolyGrail-nav ul {
list-style-type: none!important;
padding-left: 1.5ch;
margin: 0em;
text-align: left;
}
.HolyGrail-nav li {
list-style-type: none!important;
/* padding-left : 0.5ch; */
margin: 0em;
text-align: left;
/* experimental line height */
line-height: 1.5em;
list-style-position: inside;
}
.HolyGrail-nav li::marker {
/*content: "\1F4DD\20";*/
display: none;
content: "";
}
.HolyGrail-nav a{
overflow-wrap: break-word;
text-decoration: none;
}
.HolyGrail-nav a:hover{
text-decoration: solid underline;
}
.HolyGrail-nav a:before{
content: "";
}
.HolyGrail-ads ul li {
list-style-type: none!important;
text-align: left;
border: none;
white-space: normal;
}
.HolyGrail-nav ul {
list-style-type: none!important;
padding-left : 0.3em;
margin: 0em;
text-align: left;
}
}
.HolyGrail-nav li {
list-style-type: none!important;
padding-left : 1em;
margin: 0em;
text-align: left;
}
.HolyGrail-nav a{
overflow-wrap: break-word;
.HolyGrail-ads a {
text-decoration: none;
}
}
.HolyGrail-nav a:hover{
}
.HolyGrail-nav a:before{
content: "";
}
.HolyGrail-ads a:hover {
text-decoration: solid underline;
}
.HolyGrail-ads ul{
padding-left: 0.5em;
padding-left: 1.5ch;
padding-right: 0;
}
.HolyGrail-ads ul li:before {
content: "\203B\20";
}
}
.HolyGrail-ads ul li:before {
content: "\007C\20";
}
}
.search-container{
position: relative;
.search-container {
/*width: 75%; */
margin: 0 auto;
float: right;
/*margin-right: 0%;*/
width: 80%;
}
.search-container input {
display: inline-block;
align: center;
margin-top: 8px;
margin-bottom: 16px;
width: 30%;
width: 35%;
height: 42px;
background-color: #ecf5ff;
border: 1px solid #262626;
font-weight: 20px;
color: #262626;
font-weight: 30px;
cursor: pointer;
padding-left: 1ch;
padding-right: 1ch;
border-radius: 5px;
}
.search-container input:focus {
border: 2px solid #2e9dff;
outline: 0 none;
}

1
static/svg/1f4c1.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#269" d="M0 29c0 2.209 1.791 4 4 4h24c2.209 0 4-1.791 4-4V12c0-2.209-1.791-4-4-4h-9c-3.562 0-3-5-8.438-5H4C1.791 3 0 4.791 0 7v22z"/><path fill="#55ACEE" d="M30 10h-6.562C18 10 18.562 15 15 15H6c-2.209 0-4 1.791-4 4v10c0 .553-.448 1-1 1s-1-.447-1-1c0 2.209 1.791 4 4 4h26c2.209 0 4-1.791 4-4V14c0-2.209-1.791-4-4-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

1
static/svg/1f4dd.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#CCD6DD" d="M31 32c0 2.209-1.791 4-4 4H5c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h22c2.209 0 4 1.791 4 4v28z"/><path fill="#99AAB5" d="M27 24c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm-16 4c0 .553-.448 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h4c.552 0 1 .447 1 1zM27 8c0 .552-.447 1-1 1H6c-.552 0-1-.448-1-1s.448-1 1-1h20c.553 0 1 .448 1 1zm0 4c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1z"/><path fill="#66757F" d="M31 6.272c-.827-.535-1.837-.579-2.521-.023l-.792.646-1.484 1.211-.1.08-2.376 1.938-11.878 9.686c-.437.357-.793 1.219-1.173 2.074-.378.85-.969 2.852-1.443 4.391-.148.25-1.065 1.846-.551 2.453.52.615 2.326.01 2.568-.076 1.626-.174 3.731-.373 4.648-.58.924-.211 1.854-.395 2.291-.752.008-.006.01-.018.017-.023l11.858-9.666.792-.646.144-.118V6.272z"/><path fill="#D99E82" d="M18.145 22.526s-1.274-1.881-2.117-2.553c-.672-.843-2.549-2.116-2.549-2.116-.448-.446-1.191-.48-1.629-.043-.437.438-.793 1.366-1.173 2.291-.472 1.146-1.276 4.154-1.768 5.752-.083.272.517-.45.503-.21-.01.187.027.394.074.581l-.146.159.208.067c.025.082.05.154.068.21l.159-.146c.187.047.394.084.58.074.24-.014-.483.587-.21.503 1.598-.493 4.607-1.296 5.752-1.768.924-.381 1.854-.736 2.291-1.174.439-.435.406-1.178-.043-1.627z"/><path fill="#EA596E" d="M25.312 4.351c-.876.875-.876 2.293 0 3.168l3.167 3.168c.876.874 2.294.874 3.168 0l3.169-3.168c.874-.875.874-2.293 0-3.168l-3.169-3.168c-.874-.875-2.292-.875-3.168 0l-3.167 3.168z"/><path fill="#FFCC4D" d="M11.849 17.815l3.17 3.17 3.165 3.166 11.881-11.879-6.337-6.336-11.879 11.879z"/><path fill="#292F33" d="M11.298 26.742s-2.06 1.133-2.616.576c-.557-.558.581-2.611.581-2.611s1.951.036 2.035 2.035z"/><path fill="#CCD6DD" d="M23.728 5.935l3.96-3.96 6.336 6.337-3.96 3.96z"/><path fill="#99AAB5" d="M26.103 3.558l.792-.792 6.336 6.335-.792.792zM24.52 5.142l.791-.791 6.336 6.335-.792.792z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

63
style.toml Normal file
View File

@ -0,0 +1,63 @@
[github-dark]
body_background ="#161b22"
body = "#ecf2f8"
pre_background = "#0d1117"
pre = "#ecf2f8"
#pre_border = "#89929b"
pre_border = "none"
code_background = "#0d1117"
code = "#ecf2f8"
a = "#77bdfb"
details_background = "#0d1117"
details_hover_background = "#21262d"
details_hover = "#ecf2f8"
selection_background = "#fa7970"
moz_selection_background = "#fa7970"
header_background = "#161b22"
nav_background = "#0d1117"
content_border_top = "#89929b"
content_border_bottom = "#89929b"
search_input_background = "#0d1117"
search_input = "#c6cdd5"
search_input_border = "#21262d"
search_focus_border = "#c6cdd5"
autocomplete_suggestions_background = "#0d1117"
autocomplete_suggestions_border = "#c6cdd5"
autocomplete_suggestion = "#ecf2f8"
autocomplete_suggestion_b = "#161b22"
autocomplete_suggestion_selected_background = "#77bdfb"
autocomplete_suggestion_selected = "#ecf2f8"
autocomplete_suggestion_hover_background = "#77bdfb"
autocomplete_suggestion_hover = "#ecf2f8"
[one-dark]
body_background ="#2f333d"
body = "#979fad"
pre_background = "#282c34"
pre = "#979fad"
pre_border = "#282c34"
code_background = "#282c34"
code = "#979fad"
a = "#2979ff"
details_background = "#3a3f4b"
details_hover_background = "#2f333d"
details_hover = "#979fad"
selection_background = "#668799"
moz_selection_background = "#668799"
header_background = "#2f333d"
nav_background = "#282c34"
content_border_top = "#979fad"
content_border_bottom = "#979fad"
search_input_background = "#3a3f4b"
search_input = "#979fad"
search_input_border = "#282c34"
search_focus_border = "#282c34"
autocomplete_suggestions_background = "#3a3f4b"
autocomplete_suggestions_border = "#2f333d"
autocomplete_suggestion = "#979fad"
autocomplete_suggestion_b = "#979fad"
autocomplete_suggestion_selected_background = "#3a3f4b"
autocomplete_suggestion_selected = "#979fad"
autocomplete_suggestion_hover_background = "#979fad"
autocomplete_suggestion_hover = "#3a3f4b"

69
templates/template.html
View File

@ -1,6 +1,5 @@
<!doctype html>
<html lang="en">
<center>
<head>
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
@ -10,37 +9,62 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/search.js')}}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename=stylesheet) }}">
<link rel="stylesheet" href="{{ url_for('static', filename=stylesheet_auto_complete) }}">
<br>
<title>{% block title %}{{ project_title }}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}
<style type="text/css">
body { background-color: {{ colors.body_background }}; color: {{ colors.body }}; }
pre { background-color: {{ colors.pre_background }}; color: {{ colors.pre }}; border: 1px solid {{ colors.pre_border }}; }
code { background-color: {{ colors.code_background }}; color: {{ colors.code }}; }
a:hover { color: {{ colors.a }}; }
details > summary { background-color: {{ colors.details_background }}; }
details > summary:hover { background-color: {{ colors.details_hover_background }}; color: {{ colors.details_hover }}; }
::selection { background-color: {{ colors.selection_background }}; }
::-moz-selection { background-color: {{ colors.moz_selection_background }}; }
.header-wrapper { background-color: {{ colors.header_background }}; }
.HolyGrail-nav, .HolyGrail-ads { background-color: {{ colors.nav_background }}; }
.HolyGrail-content { border-top: 1px solid {{ colors.content_border_top }}; border-bottom: 1px solid {{ colors.content_border_bottom }}; }
.search-container-color input { background-color: {{ colors.search_input_background }}; color: {{ colors.search_input }}; border: 1px solid {{ colors.search_input_border }}; }
.search-container-color input:focus { border: 2px solid {{ colors.search_focus_border }}; }
</style>
<style>
.autocomplete-suggestions{ background: {{ colors.autocomplete_suggestions_background }}; border: 1px solid {{ colors.autocomplete_suggestions_border }}; }
.autocomplete-suggestion { color: {{ colors.autocomplete_suggestion }}; }
.autocomplete-suggestion b { color: {{ colors.autocomplete_suggestion_b }}; }
.autocomplete-suggestion.selected { background: {{ colors.autocomplete_suggestion_selected_background }}; color: {{ colors.autocomplete_suggestion_selected }}; }
.autocomplete-suggestion:hover { background: {{ colors.autocomplete_suggestion_hover_background }}; color: {{ colors.autocomplete_suggestion_hover }}; }
</style>
</head>
<body class="HolyGrail">
<header>
<div class="menu">
<a href="{{ url_for('content') }}" style="text-decoration:none">{{ project_name }}</a>
<div class= "header-wrapper">
<div class="menu">
<div class="banner">
<a href="{{ url_for('content') }}" style="text-decoration:none">{{ project_name }}</a>
</div>
<div class="search-container">
<div class="search-container-color">
<label for="search-by"><i class="fas fa-search"></i></label>
<input data-search-input="" id="search-by" type="search" placeholder="Search..." autocomplete="off">
<!--button type="submit"><i class="search"></i>&#128269;</button>-->
<span data-search-clear=""><i class="fas fa-times"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="search-container">
<label for="search-by"><i class="fas fa-search"></i></label>
<input data-search-input="" id="search-by" type="search" placeholder="Search..." autocomplete="off">
<!--button type="submit"><i class="search"></i>&#128269;</button>-->
<span data-search-clear=""><i class="fas fa-times"></i></span>
<p></p>
</div>
</div>
</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">{% block content %}{% endblock %}</main>
<nav class="HolyGrail-nav">
<ul>
{%- for item in tree.children recursive %}
{%- set name = item.name.split('/')[-1] -%}
{%- if item.type != "directory" -%}
<li><a href="{{ item.name }}.html">{{ name }}</a></li>
<li><a href="{{ item.name }}.html"><img style="height: 16px;" src="{{ url_for('static', filename='svg/1f4dd.svg') }}"> {{ name }}</a></li>
{%- else -%}
{%- if item.children|length -%}
<details id={{ name }} ontoggle="linkClick(this); return false;" ><summary>{{ name[0]|upper }}{{ name[1:] }}</summary>
<details id={{ name }} ontoggle="linkClick(this); return false;" ><summary><img style="height: 20px;" src="{{ url_for('static', filename='svg/1f4c1.svg') }}"> {{ name[0]|upper }}{{ name[1:] }}</summary>
{%- endif -%}
{%- endif -%}
{%- if item.children and item.children|length -%}
@ -49,19 +73,16 @@
{%- endfor %}
</ul>
</nav>
<main class="HolyGrail-content">{% block content %}{% endblock %}</main>
{{ toc | safe }}
<aside class="HolyGrail-ads">{{ toc | safe }}</aside>
</div>
<footer>
{% block footer %}
<p></p>
<center>
&copy; Stefan Friese
</center>
<p></p><center>&copy; Stefan Friese</center><p></p>
{% endblock %}
</footer>
</body>
<script>
<script>
function linkClick(obj) {
if (obj.open) {
//console.log('open');
@ -69,7 +90,7 @@
sessionStorage.removeItem(obj.id);
}
sessionStorage.setItem(obj.id,"open");
console.log(obj.id);
//console.log(obj.id);
} else {
//console.log('closed');
sessionStorage.removeItem(obj.id);