colin/uninsane
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: nicer header decor

Browse Source
This commit is contained in:
Colin 2022-04-04 22:11:17 +00:00
parent 5a834a5a6c
commit 8a6a6a389a
3 changed files with 46 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
sass/static/style.scss
View File

@ -98,6 +98,15 @@ p
} }
} }
// some element which should not ever be displayed.
// TODO: probably want to inline this to prevent any early rendering.
.hide
{
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
body body
{ {
@ -125,6 +134,12 @@ body
display: flex; display: flex;
} }
h1 .link-right
{
text-align: right;
flex-grow: 1000;
}
h1::after, h2::after h1::after, h2::after
{ {
content: ""; content: "";
@ -135,19 +150,21 @@ body
} }
h1::before, h2::before h1::before, h2::before
{ {
content: ""; content: "↳";
width: $indent_hdr - 0.3rem; font-size: 1.35rem;
margin-left: 0.15rem; width: $indent_hdr - 0.3rem;
margin-right: 0.15rem; margin-left: 0.15rem;
margin-right: 0.15rem;
} }
h2::after, h2::before h2::after
{ {
background: -moz-element(#tile-slash) center; background: -moz-element(#tile-slash) center;
} }
// TODO colin: the max-width media stuff applies to the browser window, as if the scrollbar didn't exist. // TODO colin: numbers are slightly wrong because of scrollbar width.
// but the % calculation applies to the body-width, which because of the scrollbar is NOT the same as the max-width. // could adjust these to make the transition smoother.
// maybe can use CSS variables to deal with this? //
// at low width, allow the left padding on section headers to shrink
$h_disappear_max: 40rem; $h_disappear_max: 40rem;
$h_disappear_delta: 2*($indent_hdr - 0.3rem); $h_disappear_delta: 2*($indent_hdr - 0.3rem);
$h_disappear_min: $h_disappear_max - $h_disappear_delta; $h_disappear_min: $h_disappear_max - $h_disappear_delta;
@ -155,23 +172,22 @@ $h_disappear_min: $h_disappear_max - $h_disappear_delta;
{ {
h1::before, h2::before h1::before, h2::before
{ {
width: calc(50% - #{$h_disappear_min * 0.5}); max-width: calc(50% - #{$h_disappear_min * 0.5 - 0.5rem});
} }
h1::after, h2::after h1::after, h2::after
{ {
min-width: calc(50% - #{$h_disappear_min * 0.5}); min-width: calc(50% - #{$h_disappear_min * 0.5});
} }
} }
// at small width, force the header margins to shrink // we need to hide the left-side decor as the padding shrinks
@media (max-width: #{$h_disappear_min}) @media (max-width: #{$h_disappear_max - 1rem})
{ {
h1::after, h2::after, h1::before, h2::before h1::before, h2::before
{ {
min-width: 0; // zeroing the opacity hides this without changing any of the page formatting
width: 0; opacity: 0;
} }
} }
}

9
templates/blog-page.html
View File

@ -1,14 +1,15 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div>
<span id="tile-slash" style="font-size: 1.6em; opacity: 55%;">/</span>
</div>
<h1> <h1>
{{ page.title }} {{ page.title }}
</h1> </h1>
<p><strong>{{ page.date }}</strong></p> <p><strong>{{ page.date }}</strong></p>
{{ page.content | safe }} {{ page.content | safe }}
<div class="hide">
<span id="tile-slash" style="font-size: 1.6em; opacity: 55%;">/</span>
</div>
{% endblock content %} {% endblock content %}

17
templates/index.html
View File

@ -4,15 +4,18 @@
{% set blog = get_section(path="blog/_index.md") %} {% set blog = get_section(path="blog/_index.md") %}
{% set about = get_page(path="about.md") %} {% set about = get_page(path="about.md") %}
<h1 class="title"> <h1>
{{ section.title }} {{ section.title }}
<span class="link-right">
<a href="{{ about.permalink | safe }}">about</a>
</span>
</h1> </h1>
<a href="{{ about.permalink | safe }}">about</a>
<ul> <ul>
{% for page in blog.pages %} {% for page in blog.pages %}
<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li> <li>
{% endfor %} <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
</li>
{% endfor %}
</ul> </ul>
{% endblock content %} {% endblock content %}