Added additional styles

This commit is contained in:
gurkenhabicht 2022-10-29 00:15:24 +02:00
parent 6ea4fdad4a
commit be42575afe
8 changed files with 201 additions and 81 deletions

View File

@ -39,40 +39,26 @@ def make_tree(path="templates/content"):
if os.listdir(fn): # this line is experimental and needs to be tested
tree['children'].append(make_tree(fn))
else:
if fn.endswith('.md') and not name == "README.md":
if fn.endswith('.md'):
tree['children'].append(dict(name=fn))
return tree
#def clean_up_tree(tree):
# for key, val in tree.items():
# if isinstance(val, list):
# val = [ x for x in val if len(val) > 0]
# if isinstance(val, dict):
# clean_tree(tree)
# return tree
#def clean_up_tree(tree):
# '''
# create a clean directory structure inside the dict without empty lists
# '''
# import copy
# for key, val in tree.items():
# if isinstance(val, list):
# if len(val) < 1:
# del tree[key]
# else:
# for item in val:
# if isinstance(item, dict):
# clean_up_tree(item)
# return tree
#def clean_up_tree(tree):
# '''
# delete directories without content
# '''
# for key, val in tree.items():
# if isinstance(val, list) and len(val) == 0:
# del tree[key]
# return tree
def rem_readme(path, tree):
'''
This functions puts out the path of the README.md and
which will be index.html
path can be dynamically configured and may have a / at the end nor not
'''
#if path.endswith('/'):
# path = path[:-1]
#index = f"{path}/README.md"
#for item in tree['children']:
# if isinstance(item, dict):
# for k,v in item.items():
# if k == "name":
# if v == index:
# del tree['children'][-1][k]
return tree
def cut_path_tree(tree, subdir, file_ending):
'''

View File

@ -4,5 +4,5 @@ title = "The Real Hugo"
[content]
path = "templates/content/"
style = "github-dark" # Supported styles are one-dark, solarized-dark, solarized-light, github-dark, xcode
style = "xcode" # Supported styles are one-dark, solarized-dark, solarized-light, github-dark, xcode, nord | taken from https://pygments.org/styles/

View File

@ -10,18 +10,17 @@ import markdown.extensions.codehilite
import markdown.extensions.toc
from markdown.extensions.toc import TocExtension
from pygments.formatters import HtmlFormatter
from husk_helpers import make_tree, cut_path_tree, cut_filetype_tree, list_files, build_index
from husk_helpers import make_tree, cut_path_tree, cut_filetype_tree, list_files, build_index, rem_readme
import toml
app = Flask(__name__)
Markdown(app)
app.config["husk"] = toml.load("settings.toml")
content_path = app.config["husk"]["content"]["path"]
highlight_style = app.config["husk"]["content"]["style"]
stylesheet = "stylesheet.css"
stylesheet_auto_complete = "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"]
@ -53,10 +52,11 @@ def content(path="README"):
"documentation.html",
toc=md.toc, md_doc=md_template,
colors = colors,
stylesheet=stylesheet, stylesheet_auto_complete=stylesheet_auto_complete,
stylesheet=STYLESHEET, stylesheet_auto_complete=STYLESHEET_AUTO_COMPLETE,
project_name=project_name, project_title=project_title,
tree=cut_path_tree(
make_tree(content_path), content_path, ".md")
rem_readme(content_path, make_tree(content_path))
, content_path, ".md")
)
response = make_response(res)
response.headers["Content-Type"]: "text/html; charset=utf-8"

View File

@ -1,21 +1,22 @@
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Twemoji Mozilla Monospace !important; }
html *{ font-family: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace;}
body { margin:0; padding: 0; text-decoration: none;}
blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;}
pre { font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; max-width:100%; border-radius: 5px;}
code { }
pre { font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; max-width: 100%; border-radius: 5px;}
code { max-width: 100%; overflow: auto; }
img { max-width: 100%; }
hr { height: 0px; }
a {color: inherit; }
a:hover { text-decoration: solid underline;}
details > summary{ font-size: 18px;}
details > summary{ font-size: 16px;}
details > summary:hover { }
details summary::-webkit-details-marker,
/*details summary::marker { content: "\1F4C1\20";}*/
details summary::marker { display: none; content: ""; }
details summary::marker { height: auto; 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; }
.banner { float: left; padding-left: 2em; padding-top: 8px; text-align: center; }
.header-wrapper { width: 100%; position: fixed; top: 0; padding-bottom: 12px; padding-top: 8px; opacity: 0.9; }
.HolyGrail,
.HolyGrail-body {
@ -35,15 +36,17 @@ details summary::marker { display: none; content: ""; }
flex-direction: row;
flex: 1;
text-align: left;
padding-top: 6vh;
padding-top: 3.6%;
}
.HolyGrail-content {
flex: 1;
text-align: left;
margin-left: 1em;
margin-right: 1em;
max-width: 80.5em;
margin-left: 2em;
margin-right: 2em;
/* max-width: 80.5em; */
overflow: auto;
padding-top: 1em;
}
.HolyGrail-nav, .HolyGrail-ads {
@ -85,9 +88,9 @@ details summary::marker { display: none; content: ""; }
}
.HolyGrail-nav li::marker {
/*content: "\1F4DD\20";*/
content: "\1F4DD\20";
display: none;
content: "";
/*content: "";*/
}
@ -132,12 +135,12 @@ details summary::marker { display: none; content: ""; }
.search-container {
/*width: 75%; */
margin: 0 auto;
float: right;
/*margin-right: 0%;*/
width: 80%;
width: 50%;
}
.search-container input {
width: 35%;
width: 100%;
height: 42px;
font-weight: 30px;
cursor: pointer;

View File

@ -1 +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>
<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>

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 397 B

View File

@ -30,6 +30,38 @@ autocomplete_suggestion_selected = "#ecf2f8"
autocomplete_suggestion_hover_background = "#77bdfb"
autocomplete_suggestion_hover = "#ecf2f8"
[nord]
body_background ="#616e87"
body = "#d8dee9"
pre_background = "#2e3440"
pre = "#d8dee9"
#pre_border = "#89929b"
pre_border = "none"
code_background = "#2e3440"
code = "#d8dee9"
a = "#a3be8c"
details_background = "#2e3440"
details_hover_background = "#616e87"
details_hover = "#2e3440"
selection_background = "#d08770"
moz_selection_background = "#d08770"
header_background = "#616e87"
nav_background = "#2e3440"
content_border_top = "#2e3440"
content_border_bottom = "#2e3440"
search_input_background = "#2e3440"
search_input = "#d8dee9"
search_input_border = "#616e87"
search_focus_border = "#d08770"
autocomplete_suggestions_background = "#2e3440"
autocomplete_suggestions_border = "#81a1c1"
autocomplete_suggestion = "#d8dee9"
autocomplete_suggestion_b = "#161b22"
autocomplete_suggestion_selected_background = "#77bdfb"
autocomplete_suggestion_selected = "#ecf2f8"
autocomplete_suggestion_hover_background = "#81a1c1"
autocomplete_suggestion_hover = "#d8dee9"
[one-dark]
body_background ="#2f333d"
body = "#979fad"
@ -38,8 +70,8 @@ pre = "#979fad"
pre_border = "#282c34"
code_background = "#282c34"
code = "#979fad"
a = "#2979ff"
details_background = "#3a3f4b"
a = "#be5046"
details_background = "#282c34"
details_hover_background = "#2f333d"
details_hover = "#979fad"
selection_background = "#668799"
@ -51,13 +83,107 @@ content_border_bottom = "#979fad"
search_input_background = "#3a3f4b"
search_input = "#979fad"
search_input_border = "#282c34"
search_focus_border = "#282c34"
search_focus_border = "#d19a66"
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_selected_background = "#d19a66"
autocomplete_suggestion_selected = "#3a3f4b"
autocomplete_suggestion_hover_background = "#d19a66"
autocomplete_suggestion_hover = "#3a3f4b"
[solarized-dark]
body_background ="#073642"
body = "#93a1a1"
pre_background = "#002b36"
pre = "#839496"
pre_border = "none"
code_background = "#002b36"
code = "#839496"
a = "#b58900"
details_background = "#002b36"
details_hover_background = "#839496"
details_hover = "#002b36"
selection_background = "#fdf6e3"
moz_selection_background = "#fdf6e3"
header_background = "#073642"
nav_background = "#002b36"
content_border_top = "#002b36"
content_border_bottom = "#002b36"
search_input_background = "#839496"
search_input = "#002b36"
search_input_border = "#002b36"
search_focus_border = "#b58900"
autocomplete_suggestions_background = "#eee8d5"
autocomplete_suggestions_border = "#b58900"
autocomplete_suggestion = "#657b83"
autocomplete_suggestion_b = "#1f8dd6"
autocomplete_suggestion_selected_background = "#073642"
autocomplete_suggestion_selected = "#93a1a1"
autocomplete_suggestion_hover_background = "#073642"
autocomplete_suggestion_hover = "#93a1a1"
[solarized-light]
body_background ="#fdf6e3"
body = "#657b83"
pre_background = "#eee8d5"
pre = "#657b83"
pre_border = "none"
code_background = "#eee8d5"
code = "#657b83"
a = "#073642"
details_background = "#eee8d5"
details_hover_background = "#073642"
details_hover = "#eee8d5"
selection_background = "#073642"
moz_selection_background = "#073642"
header_background = "#fdf6e3"
nav_background = "#eee8d5"
content_border_top = "#002b36"
content_border_bottom = "#002b36"
search_input_background = "#eee8d5"
search_input = "#002b36"
search_input_border = "#002b36"
search_focus_border = "#b58900"
autocomplete_suggestions_background = "#eee8d5"
autocomplete_suggestions_border = "#b58900"
autocomplete_suggestion = "#657b83"
autocomplete_suggestion_b = "#1f8dd6"
autocomplete_suggestion_selected_background = "#073642"
autocomplete_suggestion_selected = "#93a1a1"
autocomplete_suggestion_hover_background = "#073642"
autocomplete_suggestion_hover = "#93a1a1"
[xcode]
body_background ="#fff"
body = "#262626"
pre_background = "#ecf5ff"
pre = "#262626"
pre_border = "none"
code_background = "#ecf5ff"
code = "#262626"
a = "#2ed9ff"
details_background = "#ecf5ff"
details_hover_background = "#2ed9ff"
details_hover = "#ecf2f8"
selection_background = "#2e9dff"
moz_selection_background = "#2e9dff"
header_background = "#fff"
nav_background = "#ecf5ff"
content_border_top = "#262626"
content_border_bottom = "#262626"
search_input_background = "#ecf5ff"
search_input = "#262626"
search_input_border = "#262626"
search_focus_border = "#2e9dff"
autocomplete_suggestions_background = "#ecf5ff"
autocomplete_suggestions_border = "#262626"
autocomplete_suggestion = "#262626"
autocomplete_suggestion_b = "#262626"
autocomplete_suggestion_selected_background = "#2ed9ff"
autocomplete_suggestion_selected = "#e5e5e5"
autocomplete_suggestion_hover_background = "#2ed9ff"
autocomplete_suggestion_hover = "#e5e5e5"

@ -0,0 +1 @@
Subproject commit 0916deb7baeb8c223f4e4d0221372f252c1e9a21

View File

@ -10,21 +10,21 @@
<link rel="stylesheet" href="{{ url_for('static', filename=stylesheet) }}">
<link rel="stylesheet" href="{{ url_for('static', filename=stylesheet_auto_complete) }}">
<title>{% block title %}{{ project_title }}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 }}; }
body { background: {{ colors.body_background }}; color: {{ colors.body }}; }
pre { background: {{ colors.pre_background }}; color: {{ colors.pre }}; border: 1px solid {{ colors.pre_border }}; }
code { background: {{ 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 }}; }
details > summary { background: {{ colors.details_background }}; }
details > summary:hover { background: {{ colors.details_hover_background }}; color: {{ colors.details_hover }}; }
::selection { background: {{ colors.selection_background }}; }
::-moz-selection { background: {{ colors.moz_selection_background }}; }
.header-wrapper { background: {{ colors.header_background }}; }
.HolyGrail-nav, .HolyGrail-ads { background: {{ 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 { background: {{ 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>
@ -34,6 +34,11 @@
.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>
<style type="text/css">
.directory { height: 1em; content: url("{{ url_for('static', filename='svg/1f4c1.svg') }}"); }
</style>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<!--Get your own code at fontawesome.com-->
</head>
<body class="HolyGrail">
<header>
@ -44,10 +49,10 @@
</div>
<div class="search-container">
<div class="search-container-color">
<label for="search-by"><i class="fas fa-search"></i></label>
<!-- <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>
<!-- <span data-search-clear=""><i class="fas fa-times"></i></span> --!>
</div>
</div>
</div>
@ -61,10 +66,10 @@
{%- for item in tree.children recursive %}
{%- set name = item.name.split('/')[-1] -%}
{%- if item.type != "directory" -%}
<li><a href="{{ item.name }}.html"><img style="height: 16px;" src="{{ url_for('static', filename='svg/1f4dd.svg') }}"> {{ name }}</a></li>
<li><a href="{{ item.name }}.html"> {{ name }}</a></li>
{%- else -%}
{%- if item.children|length -%}
<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>
<details id={{ name }} ontoggle="linkClick(this); return false;" ><summary><!--i class='fas fa-folder'></i--!>{{ name[0]|upper }}{{ name[1:] }}</summary>
{%- endif -%}
{%- endif -%}
{%- if item.children and item.children|length -%}
@ -86,9 +91,9 @@
function linkClick(obj) {
if (obj.open) {
//console.log('open');
if (sessionStorage.getItem(obj.id) && !(sessionStorage.getItem(obj.id) === "open")) {
sessionStorage.removeItem(obj.id);
}
if (sessionStorage.getItem(obj.id) && !(sessionStorage.getItem(obj.id) === "open")) {
sessionStorage.removeItem(obj.id);
}
sessionStorage.setItem(obj.id,"open");
//console.log(obj.id);
} else {
@ -96,7 +101,6 @@
sessionStorage.removeItem(obj.id);
}
}
let _keys = Object.keys(sessionStorage);
if (_keys) {
for ( let i = 0; i < _keys.length; i++ ) {