uninsane/sass/static/style.scss

354 lines
10 KiB
SCSS
Raw Normal View History

/// 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;
}
/// 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;
}
}
2022-04-04 05:03:05 +00:00
@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);
}
}
2022-04-04 23:42:22 +00:00
// 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%);
2022-04-04 23:42:22 +00:00
//$color_purple_3: hsb(252, 55%, 45%);
2022-04-04 05:03:05 +00:00
//$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;
2022-04-04 05:03:05 +00:00
$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>');
$marker_title: $icon_bootstrap_arrow_return_right;
$marker_section: $icon_bootstrap_arrow_right;
2022-04-05 21:19:15 +00:00
$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;
}
2022-04-04 22:11:17 +00:00
// 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;
}
2022-04-04 05:03:05 +00:00
body
{
2022-04-04 05:03:05 +00:00
background-color: $color_bg;
font-family: "Gentium Basic","serif";
}
2022-04-04 23:42:22 +00:00
:link, :visited
{
text-decoration: none;
color: $color_link;
}
:link:hover
{
color: $color_link_hover;
}
.flex-right
{
text-align: right;
flex-grow: 1000;
}
#tile-slash
{
font-size: 1.6rem;
// opacity: 50%;
color: $color_cream_5;
}
2022-04-04 23:42:22 +00:00
.portal
2022-04-04 05:03:05 +00:00
{
max-width: 40rem;
2022-04-04 05:03:05 +00:00
// center this within its container
margin-left: auto;
margin-right: auto;
2022-04-05 21:19:15 +00:00
p, ul
{
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;
}
}
ul
{
padding-left: 1.3rem;
}
li::marker
{
content: $marker_li;
}
2022-04-05 21:43:39 +00:00
.subtitle
{
font-style: italic;
font-size: 0.8rem;
margin-left: 1rem;
}
.date
{
font-style: normal;
2022-04-05 22:18:18 +00:00
// dates should be able to render as subtitles below headings, gapless
margin-top: 0;
2022-04-05 21:43:39 +00:00
}
header, h1, h2, h3
2022-04-04 05:03:05 +00:00
{
display: flex;
}
2022-04-04 23:42:22 +00:00
header
2022-04-04 22:11:17 +00:00
{
2022-04-04 23:42:22 +00:00
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;
}
2022-04-04 22:11:17 +00:00
}
2022-04-04 23:42:22 +00:00
// the first heading after the global header should have no gap
header + * > h1
2022-04-04 05:03:05 +00:00
{
2022-04-04 23:42:22 +00:00
margin-top: 0;
2022-04-05 22:18:18 +00:00
// since it's followed by the date, it shouldn't enforce a bottom margin either
margin-bottom: 0.5rem;
}
2022-04-04 23:42:22 +00:00
.body-text
{
2022-04-04 23:42:22 +00:00
h1
{
// this extra padding accomodates the underlines from the header
padding-top: 2px;
padding-bottom: 2px;
2022-04-04 23:42:22 +00:00
background-color: $color_h1;
}
h2, h3
2022-04-04 23:42:22 +00:00
{
padding-top: 2px;
padding-bottom: 2px;
2022-04-04 23:42:22 +00:00
background-color: $color_h2;
}
h1::after, h2::after, h3::after
2022-04-04 23:42:22 +00:00
{
content: "";
flex-grow: 1;
min-width: $indent_hdr - 0.3rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
}
h1::before, h2::before, h3::before
2022-04-04 23:42:22 +00:00
{
2022-04-05 08:37:50 +00:00
content: "";
2022-04-04 23:42:22 +00:00
font-size: 1.35rem;
width: $indent_hdr - 0.3rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
}
2022-04-05 21:19:15 +00:00
h1::before
{
2022-04-05 21:19:15 +00:00
content: $marker_title;
font-size: 1.5rem;
}
h2::before
{
2022-04-05 21:19:15 +00:00
content: $marker_section;
font-size: 1.5rem;
}
2022-04-04 23:42:22 +00:00
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, h3::before
2022-04-04 23:42:22 +00:00
{
max-width: calc(50% - #{$h_disappear_min * 0.5 - 0.5rem});
}
h1::after, h2::after
{
min-width: calc(50% - #{$h_disappear_min * 0.5});
}
}
2022-04-04 23:42:22 +00:00
// 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
2022-04-04 23:42:22 +00:00
{
// zeroing the opacity hides this without changing any of the page formatting
opacity: 0;
}
}
}
}
2022-04-04 05:03:05 +00:00
/* 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)