style: add breadcrumbs
This commit is contained in:
Colin
parent
8a6a6a389a
commit
996c70ebb6
|
|
@ -46,13 +46,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// naming: lower number = brighter, higher number = darker
|
||||
$color_cream: hsb(23, 11%, 100%);
|
||||
$color_teal: hsb(191, 15%, 91%);
|
||||
$color_purple: hsb(252, 15%, 95%);
|
||||
$color_teal_1: hsb(191, 15%, 91%);
|
||||
$color_teal_2: hsb(191, 55%, 35%);
|
||||
$color_purple_1: hsb(252, 15%, 95%);
|
||||
$color_purple_2: hsb(252, 20%, 90%);
|
||||
//$color_purple_3: hsb(252, 55%, 45%);
|
||||
//$color_pink_2: hsb(329, 63%, 79%);
|
||||
$color_pink_3: hsb(329, 63%, 60%);
|
||||
$color_pink_4: hsb(329, 45%, 83%);
|
||||
|
||||
$color_bg: $color_cream;
|
||||
$color_title: $color_teal;
|
||||
$color_header: $color_purple;
|
||||
$color_h1: $color_teal_1;
|
||||
$color_h2: $color_purple_1;
|
||||
$color_link: $color_pink_3;
|
||||
$color_link_shadow: $color_purple_2;
|
||||
$color_link_hover: $color_pink_4;
|
||||
|
||||
$font_scale_hdr: 1.50;
|
||||
$indent_hdr: 1.3rem;
|
||||
|
|
@ -69,7 +79,7 @@ body
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
h1, h2
|
||||
h1, h2, header
|
||||
{
|
||||
font-size: $font_scale_hdr * 1rem;
|
||||
padding: 0;
|
||||
|
|
@ -114,7 +124,24 @@ body
|
|||
font-family: "Gentium Basic","serif";
|
||||
}
|
||||
|
||||
.body-text
|
||||
:link, :visited
|
||||
{
|
||||
text-decoration: none;
|
||||
color: $color_link;
|
||||
}
|
||||
|
||||
:link:hover
|
||||
{
|
||||
color: $color_link_hover;
|
||||
}
|
||||
|
||||
.flex-right
|
||||
{
|
||||
text-align: right;
|
||||
flex-grow: 1000;
|
||||
}
|
||||
|
||||
.portal
|
||||
{
|
||||
text-align: justify;
|
||||
max-width: 40rem;
|
||||
|
|
@ -122,73 +149,101 @@ body
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
h1
|
||||
header, h1, h2
|
||||
{
|
||||
background-color: $color_title;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
background-color: $color_purple;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 .link-right
|
||||
header
|
||||
{
|
||||
text-align: right;
|
||||
flex-grow: 1000;
|
||||
a
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
.link-consolidated
|
||||
{
|
||||
border-bottom: 2px solid $color_link_shadow;
|
||||
}
|
||||
.link-consolidated-left
|
||||
{
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.6rem;
|
||||
}
|
||||
.link-consolidated-right
|
||||
{
|
||||
padding-left: 0.6rem;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1::after, h2::after
|
||||
// the first heading after the global header should have no gap
|
||||
header + * > h1
|
||||
{
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
min-width: $indent_hdr - 0.3rem;
|
||||
margin-left: 0.15rem;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
h1::before, h2::before
|
||||
{
|
||||
content: "↳";
|
||||
font-size: 1.35rem;
|
||||
width: $indent_hdr - 0.3rem;
|
||||
margin-left: 0.15rem;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
h2::after
|
||||
{
|
||||
background: -moz-element(#tile-slash) center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// 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;
|
||||
@media (max-width: #{$h_disappear_max})
|
||||
{
|
||||
h1::before, h2::before
|
||||
.body-text
|
||||
{
|
||||
max-width: calc(50% - #{$h_disappear_min * 0.5 - 0.5rem});
|
||||
h1
|
||||
{
|
||||
background-color: $color_h1;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
background-color: $color_h2;
|
||||
}
|
||||
|
||||
h1::after, h2::after
|
||||
{
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
min-width: $indent_hdr - 0.3rem;
|
||||
margin-left: 0.15rem;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
h1::before, h2::before
|
||||
{
|
||||
content: "↳";
|
||||
font-size: 1.35rem;
|
||||
width: $indent_hdr - 0.3rem;
|
||||
margin-left: 0.15rem;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
h2::after
|
||||
{
|
||||
background: -moz-element(#tile-slash) center;
|
||||
}
|
||||
|
||||
// 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;
|
||||
@media (max-width: #{$h_disappear_max})
|
||||
{
|
||||
h1::before, h2::before
|
||||
{
|
||||
max-width: calc(50% - #{$h_disappear_min * 0.5 - 0.5rem});
|
||||
}
|
||||
h1::after, h2::after
|
||||
{
|
||||
min-width: calc(50% - #{$h_disappear_min * 0.5});
|
||||
}
|
||||
}
|
||||
h1::after, h2::after
|
||||
// we need to hide the left-side decor as the padding shrinks
|
||||
@media (max-width: #{$h_disappear_max - 1rem})
|
||||
{
|
||||
min-width: calc(50% - #{$h_disappear_min * 0.5});
|
||||
h1::before, h2::before
|
||||
{
|
||||
// zeroing the opacity hides this without changing any of the page formatting
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// we need to hide the left-side decor as the padding shrinks
|
||||
@media (max-width: #{$h_disappear_max - 1rem})
|
||||
{
|
||||
h1::before, h2::before
|
||||
{
|
||||
// zeroing the opacity hides this without changing any of the page formatting
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* font: Gentium Basic
|
||||
|
|
|
|||
|
|
@ -7,12 +7,26 @@
|
|||
<link rel="stylesheet" href="{{ get_url(path="static/style.css") | safe }}">
|
||||
</head>
|
||||
|
||||
{% set about = get_page(path="about.md") %}
|
||||
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="portal">
|
||||
<header>
|
||||
<span>
|
||||
<span class="link-consolidated link-consolidated-left">
|
||||
{% block breadcrumbs %} {% endblock %}
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-right">
|
||||
<span class="link-consolidated link-consolidated-right">
|
||||
<a href="{{ about.permalink | safe }}">about</a>
|
||||
</span>
|
||||
</span>
|
||||
</header>
|
||||
<div class="body-text">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block breadcrumbs %}
|
||||
/ <a href="/">home</a> / <a>blog</a>
|
||||
{% endblock breadcrumbs %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1>
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block breadcrumbs %}
|
||||
<a href="/">~Perfectly Sane</a>
|
||||
{% endblock breadcrumbs %}
|
||||
|
||||
{% block content %}
|
||||
{% set blog = get_section(path="blog/_index.md") %}
|
||||
{% set about = get_page(path="about.md") %}
|
||||
|
||||
<h1>
|
||||
{{ section.title }}
|
||||
<span class="link-right">
|
||||
<a href="{{ about.permalink | safe }}">about</a>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<ul>
|
||||
{% for page in blog.pages %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user