From 8ce3d91bd0a58f50b4baa56449144165d20137a8 Mon Sep 17 00:00:00 2001 From: stefan Date: Sun, 18 Sep 2022 21:00:35 +0200 Subject: [PATCH] rework layout, bugfixing --- husk_helpers.py | 7 ++- settings.toml | 2 +- start_site.py | 12 ++-- static/js/search.js | 4 +- static/stylesheet.css | 122 +++++++++++++++++++++------------------- templates/template.html | 30 +++++----- 6 files changed, 91 insertions(+), 86 deletions(-) diff --git a/husk_helpers.py b/husk_helpers.py index dd82318..27181cd 100644 --- a/husk_helpers.py +++ b/husk_helpers.py @@ -1,4 +1,7 @@ -import os +import os +#import toml + +#base_url = toml.load('settings.toml')["general"]["base_url"] def make_tree(path="templates/content"): if '/' in path: @@ -59,7 +62,7 @@ def build_index(path, file_ending): data = _f.readlines() data[0] = data[0].strip('# \n') #searchable[data[0]] = [''.join(data), item[len(path):-len(file_ending)]] - searchable["index"].append(dict(uri=item[len(path):-len(file_ending)] + '.html', title=data[0],tags=[],content=''.join(data), description="")) + searchable["index"].append(dict(uri= "/" + item[len(path):-len(file_ending)] + '.html', title=data[0],tags=[],content=''.join(data), description="")) #searchable[str(uuid.uuid1())] = (dict(href=item[len(path):-len(file_ending)], title=data[0],tags=[],content=''.join(data))) if isinstance(item, dict): build_index(item) diff --git a/settings.toml b/settings.toml index 4cbf5fa..c85146a 100644 --- a/settings.toml +++ b/settings.toml @@ -1,3 +1,3 @@ [content] path = "templates/content/" -style = "material" # Take a look at https://pygments.org/styles/ +style = "one-dark" # Take a look at https://pygments.org/styles/ diff --git a/start_site.py b/start_site.py index b7e9204..64f59e1 100644 --- a/start_site.py +++ b/start_site.py @@ -34,17 +34,15 @@ def index(): @app.route('/', defaults={'path': 'README'}) @app.route('/.html') def content(path="README"): - with open(os.path.join(app.root_path, f'{content_path}{path}.md'), "r") as _f: + with open(os.path.join(app.root_path, content_path, f'{path}.md'), "r") as _f: md_file = _f.read() - if not md_file.startswith("[TOC]"): - md_file = "[TOC]\n" + md_file - md_template_string = markdown.markdown(md_file, extensions=["fenced_code", "codehilite", "toc", TocExtension(toc_class="column column-3", title=""), "mdx_math"], - extension_configs={"mdx_math": {"enable_dollar_delimiter": True}}) + md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="HolyGrail-ads", title=""),"fenced_code", "codehilite", "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() md_css_string = "" - md_template = md_css_string + md_template_string - res = render_template("documentation.html", md_doc=md_template, tree= + md_template = md_css_string + html + res = render_template("documentation.html", toc=md.toc, md_doc=md_template, tree= cut_path_tree( make_tree(content_path), content_path, ".md") ) diff --git a/static/js/search.js b/static/js/search.js index a80f502..d3f7e3c 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -83,14 +83,14 @@ $( document ).ready(function() { divsuggestion.setAttribute("data-title", item.title); divsuggestion.setAttribute("data-uri", item.uri); divsuggestion.setAttribute("data-context", item.context); - divsuggestion.innerText = 'ยป ' + item.title; + divsuggestion.innerText = '>> ' + item.title; divsuggestion.appendChild(divcontext); - console.log(1); return divsuggestion.outerHTML; }, /* onSelect callback fires when a search suggestion is chosen */ onSelect: function(e, term, item) { location.href = item.getAttribute('data-uri'); + console.log("this is " + location.href); } }); }); diff --git a/static/stylesheet.css b/static/stylesheet.css index 26cadb8..95fd125 100644 --- a/static/stylesheet.css +++ b/static/stylesheet.css @@ -1,13 +1,13 @@ html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; color: #222;} -body { padding: 0 10px; text-decoration: none; color: #263238;} +body { text-decoration: none; color: #263238;} h1 { font-size: 28px; } h2 { font-size: 22px; margin-bottom: 2px; } h3 { font-size: 14px; } p { font-size: 16px; } blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;} -pre { background-color: #263238;color: #eeffff;border: 1px solid #ddd; font-size: 14px; padding-left: 2ch;padding-top:1ch; padding-bottom: 1ch; line-height: 18px; overflow: auto; } -code { background-color: #263238;color: #eeffff; } +pre { background-color: #263238;color: #eeffff;border: 1px solid #ddd; font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; line-height: 18px; overflow: auto; } +code { background-color: #263238; color: #eeffff; } hr { height: 0px; } a {color: inherit; text-decoration: solid underline;} a:hover {color: red;} @@ -17,8 +17,8 @@ details > summary{ background-color: #eee; font-size: 18px;} details > summary:hover { background-color: #263238; color: #eee;} details summary::-webkit-details-marker, -details summary::marker { content: "\20\00BB\20";} -ul { padding-left:0em; padding: 0px 8px;} +details summary::marker { content: "\1F5C0\20";} +ul {} ul:active {} .toctitle{ padding: 1em; } .toc > ul li { text-decoration: none; } @@ -27,76 +27,82 @@ ul:active {} .menu { line-height: 1em; font-size: 24px; line-height: 1em; text-decoration: none; } .index { color: inherit; text-decoration: solid underline; } .references { text-decoration: solid underline; text-underline-position: under; } -.contact{text-align: center;} -.columns { Width: 100%; border-top: 1px solid #263238; border-bottom: 1px solid #263238; } -.column-1, .column-2, .column-3{ - width: 100%; +.HolyGrail, +.HolyGrail-body { + display: flex; + flex-direction: column; } + +.HolyGrail-nav { + padding-right: 1em; + order: -1; +} + @media (min-width: 48em) { - .column-1 { - width: 18%; - height: 100%; - float: left; - overflow: auto; - margin-top: 8px; - margin-right: 8px; - } - .column-1 > ul li { - list-style-type: none; + .HolyGrail-body { + flex-direction: row; + flex: 1; + border-top: 1px solid #263238; border-bottom: 1px solid #263238; + text-align: left; + } + + .HolyGrail-content { + flex: 1; + text-align: left; + margin-left: 1em; + margin-right: 1em; + } + + .HolyGrail-nav, .HolyGrail-ads { + /* 12em is the width of the columns */ + flex: 0 0 14em; + background-color: #eee; + } + + + .HolyGrail-ads ul li { + list-style-type: none!important; text-align: left; - padding: 0; - margin: 0; - outline: 0; border: none; - display: block; white-space: normal; } - .column-1 ul { - padding-left: 16px; - padding-right: 0; + .HolyGrail-nav ul { + list-style-type: none!important; + padding-left : 0.3em; + margin: 0em; + text-align: left; } - .column-1 a:hover{ + + .HolyGrail-nav li { + list-style-type: none!important; + padding-left : 1em; + margin: 0em; + text-align: left; + } + .HolyGrail-nav a{ + overflow-wrap: break-word; + + } + + .HolyGrail-nav a:hover{ background-color: #263238; color: #eee; } - .column-2 { - width: 80%; - float: left; - overflow: auto; - clear: none; - padding-left: 16px; + .HolyGrail-nav a:before{ + content: ""; } - .column-3 { - width: 25%; - position: relative; - float: right; - overflow: auto; - margin: 24.25px 16px; - clear: none; - background-color: #eee; + .HolyGrail-ads ul{ + padding-left: 0.5em; + padding-right: 0; } - .column-3 > ul li { - outline 0; - border: none; - display: block; - padding: 0.2em 0.4em; - white-space: normal; - list-style-type: none; - } - .column-3 ul li:before { + + + .HolyGrail-ads ul li:before { content: "\00BB\20"; } - .column-3 a { - text-decoration: none; - } - .columns { - content: ""; - display: table; - clear: both; - } } .search-container{ diff --git a/templates/template.html b/templates/template.html index 82a450e..677d0fc 100644 --- a/templates/template.html +++ b/templates/template.html @@ -15,8 +15,9 @@ {% endblock %} - - + +
+
Husk
@@ -28,14 +29,10 @@ -
-
- - -

-
- -
+ +
+
+
-
{% block content %}{% endblock %}
- - +
{% block footer %}

© Stefan Friese
{% endblock %} - - +
+