style: nicer header decor
This commit is contained in:
parent
5a834a5a6c
commit
8a6a6a389a
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user