2022-04-04 00:53:20 +00:00
|
|
|
/// 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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$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;
|
|
|
|
|
|
|
|
|
2022-04-04 00:53:20 +00:00
|
|
|
body
|
|
|
|
{
|
2022-04-04 05:03:05 +00:00
|
|
|
background-color: $color_bg;
|
2022-04-04 00:53:20 +00:00
|
|
|
font-family: "Gentium Basic","serif";
|
|
|
|
}
|
|
|
|
|
2022-04-04 05:03:05 +00:00
|
|
|
.body-text
|
|
|
|
{
|
|
|
|
text-align: justify;
|
|
|
|
max-width: 40em;
|
|
|
|
// center this within its container
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
|
|
|
|
h1
|
|
|
|
{
|
|
|
|
background-color: $color_title;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2
|
|
|
|
{
|
|
|
|
background-color: $color_purple;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2::after
|
|
|
|
{
|
|
|
|
content: "";
|
|
|
|
background: -moz-element(#tile-slash) center;
|
|
|
|
flex: 1 0 0;
|
|
|
|
margin-left: 0.1em;
|
|
|
|
margin-right: 0.1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-04-04 00:53:20 +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)
|