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
{
@ -125,6 +134,12 @@ body
display: flex;
}
h1 .link-right
{
text-align: right;
flex-grow: 1000;
}
h1::after, h2::after
{
content: "";
@ -135,19 +150,21 @@ body
}
h1::before, h2::before
{
content: "";
width: $indent_hdr - 0.3rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
content: "↳";
font-size: 1.35rem;
width: $indent_hdr - 0.3rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
}
h2::after, h2::before
h2::after
{
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.
// but the % calculation applies to the body-width, which because of the scrollbar is NOT the same as the max-width.
// maybe can use CSS variables to deal with this?
// TODO colin: numbers are slightly wrong because of scrollbar width.
// could adjust these to make the transition smoother.
//
// at low width, allow the left padding on section headers to shrink
$h_disappear_max: 40rem;
$h_disappear_delta: 2*($indent_hdr - 0.3rem);
$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
{
width: calc(50% - #{$h_disappear_min * 0.5});
max-width: calc(50% - #{$h_disappear_min * 0.5 - 0.5rem});
}
h1::after, h2::after
{
min-width: calc(50% - #{$h_disappear_min * 0.5});
}
}
// at small width, force the header margins to shrink
@media (max-width: #{$h_disappear_min})
// we need to hide the left-side decor as the padding shrinks
@media (max-width: #{$h_disappear_max - 1rem})
{
h1::after, h2::after, h1::before, h2::before
h1::before, h2::before
{
min-width: 0;
width: 0;
// zeroing the opacity hides this without changing any of the page formatting
opacity: 0;
}
}
}

9
templates/blog-page.html
View File

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

17
templates/index.html
View File

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