uninsane/sass/static/style.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;
}

/// 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);
    }
}

$color_cream: hsb(23, 11%, 100%);
$color_teal: hsb(191, 15%, 91%);
$color_purple: hsb(252, 15%, 95%);

$color_bg: $color_cream;
$color_title: $color_teal;
$color_header: $color_purple;

$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;

// reset browser defaults
body
{
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

h1, h2
{
    font-size: $font_scale_hdr * 1rem;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

p
{
    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;
}
}


body
{
    background-color: $color_bg;
    font-family: "Gentium Basic","serif";
}

.body-text
{
    text-align: justify;
    max-width: 40rem;
    // center this within its container
    margin-left: auto;
    margin-right: auto;

    h1
    {
        background-color: $color_title;
	display: flex;
    }

    h2
    {
        background-color: $color_purple;
        display: flex;
    }

    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: "";
	width: $indent_hdr - 0.3rem;
	margin-left: 0.15rem;
	margin-right: 0.15rem;
    }
    h2::after, h2::before
    {
        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?
$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
    {
	width: calc(50% - #{$h_disappear_min * 0.5});
    }
    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})
{
    h1::after, h2::after, h1::before, h2::before
    {
        min-width: 0;
	width: 0;
    }
}
}



/* 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)