510 lines
16 KiB
SCSS
510 lines
16 KiB
SCSS
/// Replace `$search` with `$replace` in `$string`
|
|
/// @author Hugo Giraudel
|
|
/// @param {String} $string - Initial string
|
|
/// @param {String} $search - Substring to replace
|
|
/// @param {String} $replace ('') - New value
|
|
/// @return {String} - Updated string
|
|
@function str-replace($string, $search, $replace: '') {
|
|
$index: str-index($string, $search);
|
|
|
|
@if $index {
|
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
|
}
|
|
|
|
@return $string;
|
|
}
|
|
|
|
// @source https://gist.github.com/B-iggy/14da053d2cebf92e1930
|
|
// @author B-iggy
|
|
@function url-encode($string) {
|
|
$map: (
|
|
"%": "%25",
|
|
"<": "%3C",
|
|
">": "%3E",
|
|
" ": "%20",
|
|
"!": "%21",
|
|
"*": "%2A",
|
|
"'": "%27",
|
|
'"': "%22",
|
|
"(": "%28",
|
|
")": "%29",
|
|
";": "%3B",
|
|
":": "%3A",
|
|
"@": "%40",
|
|
"&": "%26",
|
|
"=": "%3D",
|
|
"+": "%2B",
|
|
"$": "%24",
|
|
",": "%2C",
|
|
"/": "%2F",
|
|
"?": "%3F",
|
|
"#": "%23",
|
|
"[": "%5B",
|
|
"]": "%5D"
|
|
);
|
|
$new: $string;
|
|
@each $search, $replace in $map {
|
|
$new: str-replace($new, $search, $replace);
|
|
}
|
|
@return $new;
|
|
}
|
|
|
|
/// declare a cross-browser @font-face.
|
|
/// note that Firefox is very picky about the syntax here: experimentation shows that
|
|
/// the eot MUST come first (even if FF doesn't load it), and the other formats MUST
|
|
/// be declared under one `src` directive. the local sources may have a separate `src`.
|
|
/// @author @colin@fed.uninsane.org
|
|
@mixin font-face($family, $variant, $short, $weight, $style) {
|
|
$path: 'fonts/' + str-replace($family, ' ', '') + '/' + $short;
|
|
$hyphenated: str-replace($variant, ' ', '-');
|
|
@font-face {
|
|
font-family: $family;
|
|
src: url('#{$path}.eot');
|
|
src: url('#{$path}.eot?#iefix') format('embedded-opentype'),
|
|
url('#{$path}.woff2') format('woff2'),
|
|
url('#{$path}.woff') format('woff'),
|
|
url('#{$path}.ttf') format('truetype');
|
|
// TODO: local fonts disabled during devel
|
|
// src: local($variant), local($hyphenated);
|
|
font-weight: $weight;
|
|
font-style: $style;
|
|
}
|
|
}
|
|
|
|
@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) {
|
|
@if $b-hsb == 0 {
|
|
@return hsla(0, 0, 0, $a)
|
|
} @else {
|
|
$l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));
|
|
$s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2);
|
|
@return hsla($h-hsb, $s-hsl, $l-hsl, $a);
|
|
}
|
|
}
|
|
|
|
// naming: lower number = brighter, higher number = darker
|
|
$color_cream_1: hsb(27, 10%, 100%);
|
|
$color_cream_2: hsb(19, 22%, 97%);
|
|
//$color_cream_3: hsb(3, 25%, 91%);
|
|
$color_cream_4: hsb(17, 13%, 100%);
|
|
$color_cream_5: hsb(17, 16%, 85%);
|
|
|
|
//$color_teal_1: hsb(191, 15%, 91%);
|
|
//$color_teal_2: hsb(191, 55%, 35%);
|
|
|
|
//$color_purple_0: hsb(268, 11%, 93%);
|
|
//$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_1: hsb(3, 9%, 99%);
|
|
//$color_pink_15:hsb(329, 21%, 88%);
|
|
$color_pink_2: hsb(345, 23%, 83%);
|
|
$color_pink_3: hsb(345, 35%, 70%);
|
|
$color_pink_4: hsb(337, 63%, 60%);
|
|
$color_pink_5: hsb(347, 67%, 50%);
|
|
|
|
$color_bg: $color_cream_1;
|
|
$color_h1: $color_pink_1;
|
|
$color_h2: $color_cream_4;
|
|
$color_link: $color_pink_5;
|
|
$color_link_shadow: $color_pink_2;
|
|
$color_link_hover: $color_pink_3;
|
|
|
|
$font_scale_hdr: 1.50;
|
|
$indent_hdr: 1.3rem;
|
|
// effective margin of h1, h2
|
|
$margin_hdr_max: $indent_hdr;
|
|
$margin_hdr_min: 0.2rem;
|
|
$margin_hdr_delta: $margin_hdr_max - $margin_hdr_min;
|
|
|
|
// TODO: move these into files and #include them.
|
|
// MIT; source: https://icon-sets.iconify.design/bi/arrow-return-right/
|
|
$icon_bootstrap_arrow_return_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z"/></svg>');
|
|
// MIT; source: https://icon-sets.iconify.design/bi/arrow-right/
|
|
$icon_bootstrap_arrow_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>');
|
|
// MIT; source: https://icon-sets.iconify.design/bi/arrow-bar-right/
|
|
$icon_bootstrap_arrow_bar_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/></svg>');
|
|
// @author colin
|
|
// made in Inkscape
|
|
$icon_h2_slash_svg: ' \
|
|
<svg \
|
|
aria-hidden="true" \
|
|
role="img" \
|
|
width="9.0000038" \
|
|
height="36.000004" \
|
|
preserveAspectRatio="xMidYMid meet" \
|
|
viewBox="0 0 9.0000038 36.000004" \
|
|
version="1.1" \
|
|
id="svg4" \
|
|
xmlns="http://www.w3.org/2000/svg" \
|
|
xmlns:svg="http://www.w3.org/2000/svg"> \
|
|
<defs \
|
|
id="defs8" /> \
|
|
<path \
|
|
fill="none" \
|
|
stroke="#{$color_cream_5}" \
|
|
stroke-linecap="round" \
|
|
stroke-linejoin="round" \
|
|
d="M 8.3205889,0.67941499 0.67941499,35.320589" \
|
|
id="path2" \
|
|
style="stroke-width:1.35883;stroke-miterlimit:4;stroke-dasharray:none" /> \
|
|
</svg> \
|
|
';
|
|
$icon_h2_slash: url("data:image/svg+xml; utf8, #{url-encode($icon_h2_slash_svg)}");
|
|
|
|
// CC0; based on: https://www.svgrepo.com/svg/211498/rss
|
|
$icon_rss_svg: ' \
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" \
|
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> \
|
|
<g> \
|
|
<g> \
|
|
<path fill="#{$color_pink_5}" d="M71.934,368.142c-39.663,0-71.93,32.267-71.93,71.929S32.272,512,71.934,512c39.662,0,71.929-32.267,71.929-71.929 \
|
|
S111.595,368.142,71.934,368.142z M71.934,481.819c-23.022,0-41.75-18.728-41.75-41.749c0-23.02,18.73-41.749,41.75-41.749 \
|
|
c23.019,0,41.749,18.728,41.749,41.749C113.682,463.091,94.954,481.819,71.934,481.819z"/> \
|
|
</g> \
|
|
</g> \
|
|
<g> \
|
|
<g> \
|
|
<path fill="#{$color_pink_5}" d="M345.696,466.878c-14.677-73.983-50.727-141.496-104.252-195.237c-53.907-54.122-121.79-90.547-196.31-105.334 \
|
|
c-11.144-2.211-22.567,0.652-31.344,7.857c-8.76,7.19-13.783,17.814-13.783,29.147v37.255c0,17.793,12.137,32.93,29.516,36.808 \
|
|
c50.059,11.182,95.796,36.367,132.266,72.837c36.479,36.481,61.666,82.216,72.837,132.261 \
|
|
c3.881,17.382,19.018,29.521,36.811,29.521h37.252c11.331,0,21.956-5.024,29.148-13.782 \
|
|
C345.041,489.438,347.905,478.02,345.696,466.878z M314.513,479.059c-0.845,1.029-2.724,2.755-5.825,2.755h-37.252 \
|
|
c-3.552,0-6.578-2.433-7.355-5.915c-12.421-55.647-40.415-106.489-80.953-147.027c-40.528-40.528-91.37-68.52-147.03-80.951 \
|
|
c-3.481-0.777-5.912-3.801-5.912-7.355v-37.255c0-3.098,1.726-4.977,2.754-5.822c0.856-0.7,2.5-1.734,4.775-1.734 \
|
|
c0.486,0,1,0.047,1.544,0.155c68.62,13.617,131.138,47.169,180.8,97.029c49.31,49.509,82.519,111.687,96.034,179.812 \
|
|
C316.701,475.824,315.364,478.023,314.513,479.059z"/> \
|
|
</g> \
|
|
</g> \
|
|
<g> \
|
|
<g> \
|
|
<path fill="#{$color_pink_5}" d="M511.673,469.397c-7.85-59.36-25.317-116.628-51.919-170.213c-25.931-52.239-59.946-99.825-101.095-141.434 \
|
|
c-41.88-42.355-90.001-77.373-143.027-104.08C161.25,26.276,103.044,8.329,42.633,0.324C31.896-1.094,21.048,2.185,12.886,9.336 \
|
|
C4.701,16.508,0.006,26.86,0.006,37.739v36.85c0,18.609,13.961,34.643,32.476,37.297c91.877,13.175,175.612,54.7,242.151,120.08 \
|
|
c33.399,32.826,61.118,70.524,82.389,112.051c21.795,42.548,36.287,88.124,43.073,135.457 \
|
|
c2.656,18.538,18.718,32.519,37.36,32.519h36.797c10.879,0,21.232-4.693,28.403-12.875 \
|
|
C509.806,490.964,513.091,480.129,511.673,469.397z M479.961,479.222c-0.847,0.967-2.716,2.589-5.707,2.589h-36.797 \
|
|
c-3.788,0-6.937-2.784-7.486-6.62c-7.26-50.647-22.767-99.41-46.085-144.935c-22.747-44.407-52.387-84.719-88.097-119.816 \
|
|
C224.625,140.517,135.056,96.106,36.763,82.01c-3.81-0.546-6.576-3.668-6.576-7.423v-36.85c0-2.988,1.621-4.856,2.588-5.703 \
|
|
c0.838-0.733,2.511-1.861,4.877-1.861c0.326,0,0.665,0.023,1.017,0.068c57.055,7.562,112.027,24.511,163.385,50.377 \
|
|
c50.098,25.234,95.565,58.324,135.142,98.347c38.886,39.321,71.025,84.282,95.524,133.634 \
|
|
c25.122,50.603,41.619,104.688,49.031,160.747C482.134,476.243,480.794,478.272,479.961,479.222z"/> \
|
|
</g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
<g> \
|
|
</g> \
|
|
</svg> \
|
|
';
|
|
$icon_rss: url("data:image/svg+xml; utf8, #{url-encode($icon_rss_svg)}");
|
|
|
|
|
|
$marker_title: $icon_bootstrap_arrow_return_right;
|
|
$marker_section: $icon_bootstrap_arrow_right;
|
|
$marker_li: "⤚ ";
|
|
|
|
// list of arrows: https://www.alt-codes.net/arrow_alt_codes.php
|
|
// ↳
|
|
// ⤷
|
|
// ➥
|
|
//
|
|
// →
|
|
// ↦
|
|
// ↣
|
|
// ⇒
|
|
// ⇢
|
|
// ⇥
|
|
// ⇨
|
|
// ⍈
|
|
// ➜
|
|
// ➔
|
|
// ➙
|
|
// ⤚
|
|
// ⤞
|
|
// ⤠
|
|
// ➳
|
|
// ►
|
|
// ➢
|
|
// ➲
|
|
|
|
// reset browser defaults
|
|
body
|
|
{
|
|
padding: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
h1, h2, h3, header
|
|
{
|
|
font-size: $font_scale_hdr * 1rem;
|
|
padding: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
body
|
|
{
|
|
background-color: $color_bg;
|
|
font-family: "Gentium Basic","serif";
|
|
}
|
|
|
|
:link, :visited
|
|
{
|
|
text-decoration: none;
|
|
color: $color_link;
|
|
}
|
|
|
|
:link:hover
|
|
{
|
|
color: $color_link_hover;
|
|
}
|
|
|
|
.flex-right
|
|
{
|
|
text-align: right;
|
|
flex-grow: 1000;
|
|
}
|
|
|
|
.portal
|
|
{
|
|
max-width: 40rem;
|
|
// center this within its container
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
p, ul, pre
|
|
{
|
|
text-align: justify;
|
|
padding: 0;
|
|
// this aligns the paragraphs with the header indents
|
|
margin-left: $margin_hdr_max;
|
|
margin-right: $margin_hdr_max;
|
|
|
|
// interpolate margins from 0 (at 20em) -> max (at 40em):
|
|
@media (max-width: 40rem)
|
|
{
|
|
margin-left: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
|
|
margin-right: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
|
|
}
|
|
|
|
@media (max-width: 20rem)
|
|
{
|
|
margin-left: $margin_hdr_min;
|
|
margin-right: $margin_hdr_min;
|
|
}
|
|
}
|
|
|
|
img
|
|
{
|
|
max-width: 100%;
|
|
}
|
|
|
|
ul
|
|
{
|
|
padding-left: 1.3rem;
|
|
}
|
|
li::marker
|
|
{
|
|
content: $marker_li;
|
|
}
|
|
|
|
.date
|
|
{
|
|
font-style: normal;
|
|
// dates should be able to render as subtitles below headings, gapless
|
|
margin-top: 0;
|
|
}
|
|
|
|
header, h1, h2, h3
|
|
{
|
|
display: flex;
|
|
}
|
|
|
|
header
|
|
{
|
|
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;
|
|
}
|
|
.link-rss
|
|
{
|
|
content: $icon_rss;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-left: 0.8rem;
|
|
margin-bottom: -0.15rem;
|
|
}
|
|
}
|
|
|
|
// the first heading after the global header should have no gap
|
|
header + * > h1
|
|
{
|
|
margin-top: 0;
|
|
// since it's followed by the date, it shouldn't enforce a bottom margin either
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.body-text
|
|
{
|
|
pre
|
|
{
|
|
// create a scrollbar when the content overflows x.
|
|
overflow-x: auto;
|
|
// subtle rounding of the background edges
|
|
border-radius: 2px;
|
|
// scrollbar-color: grey #2b303b;
|
|
code
|
|
{
|
|
display: block;
|
|
margin: 0.15rem;
|
|
}
|
|
}
|
|
h1
|
|
{
|
|
// this extra padding accomodates the underlines from the header
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
background-color: $color_h1;
|
|
}
|
|
|
|
h2, h3
|
|
{
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
background-color: $color_h2;
|
|
}
|
|
|
|
h1::after, h2::after, h3::after
|
|
{
|
|
content: "";
|
|
flex-grow: 1;
|
|
min-width: $indent_hdr - 0.3rem;
|
|
margin-left: 0.15rem;
|
|
margin-right: 0.15rem;
|
|
}
|
|
h1::before, h2::before, h3::before
|
|
{
|
|
content: "";
|
|
font-size: 1.35rem;
|
|
width: $indent_hdr - 0.3rem;
|
|
margin-left: 0.15rem;
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
h1::before
|
|
{
|
|
content: $marker_title;
|
|
font-size: 1.5rem;
|
|
}
|
|
h2::before
|
|
{
|
|
content: $marker_section;
|
|
font-size: 1.5rem;
|
|
}
|
|
h2::after
|
|
{
|
|
background-image: $icon_h2_slash;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
// 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, h3::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});
|
|
}
|
|
}
|
|
// we need to hide the left-side decor as the padding shrinks
|
|
@media (max-width: #{$h_disappear_max - 1rem})
|
|
{
|
|
h1::before, h2::before, h3::before
|
|
{
|
|
// zeroing the opacity hides this without changing any of the page formatting
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.listing
|
|
{
|
|
.title
|
|
{
|
|
font-size: 1.3rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.subtitle
|
|
{
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
margin-left: 1rem;
|
|
margin-top: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* font: Gentium Basic
|
|
* upstream: https://www.fontsquirrel.com/fonts/Gentium-Basic
|
|
* https://fonts.google.com/specimen/Gentium+Basic
|
|
* license: SIL Open Font License 1.1
|
|
* author: SIL International
|
|
*/
|
|
@include font-face('Gentium Basic', 'Gentium Basic', 'GenBasR', 400, normal);
|
|
@include font-face('Gentium Basic', 'Gentium Basic Bold', 'GenBasB', 700, normal);
|
|
@include font-face('Gentium Basic', 'Gentium Basic Italic', 'GenBasI', 400, italic);
|
|
@include font-face('Gentium Basic', 'Gentium Basic Bold Italic', 'GenBasBI', 700, italic);
|