617 lines
12 KiB
SCSS
617 lines
12 KiB
SCSS
@use 'sass:math';
|
|
@use 'colours' as *;
|
|
@use 'fonts' as *;
|
|
|
|
@import url(counters.css);
|
|
|
|
|
|
@layer colordefs {
|
|
@property --base-hue {
|
|
syntax: "<number>";
|
|
inherits: true;
|
|
initial-value: 336;
|
|
}
|
|
|
|
@include color-var(--fg, $darker, $light);
|
|
@include color-var(--bg, $light, $darker);
|
|
@include color-var(--counter-fg, $lighter, $lighter);
|
|
@include color-var(--counter-bg, $dark, $mid);
|
|
@include color-var(--accent, $dark-accent, $light-accent);
|
|
@include color-var(--counter-accent, $light-accent, $dark-accent);
|
|
@include color-var(--box-base, $light, $mid);
|
|
@include color-var(--box-fg, $darker, $lighter);
|
|
@include color-var(--box-shadow, halfalpha($mid));
|
|
|
|
:root {
|
|
--gradient: linear-gradient(
|
|
120deg in oklch,
|
|
oklch(93% 27.1% 96deg),
|
|
oklch(84.03% 22% 15deg),
|
|
oklch(80% 29.3% 303deg),
|
|
oklch(84% 23% 233deg),
|
|
oklch(89% 25% 161deg)
|
|
);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
// todo oklch
|
|
--gradient:
|
|
linear-gradient(20deg in oklch,
|
|
hsl(300deg 30% 20%),
|
|
hsl(220deg 30% 20%),
|
|
hsl(150deg 30% 20%),
|
|
hsl(30deg 30% 20%),
|
|
hsl(350deg 30% 20%));
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@mixin boxy-margin { margin: 1rem 0; }
|
|
|
|
@mixin boxy-shadow($dst: 0.5rem) {
|
|
box-shadow: 0.5rem 0.5rem 0 var(--box-shadow);
|
|
}
|
|
|
|
@function border-style($fg: var(--fg)) { @return 3px solid $fg; }
|
|
|
|
@mixin boxy-unpadded($bg, $fg: var(--box-fg), $border: $fg, $dst: 0.5em)
|
|
{
|
|
color: $fg;
|
|
background: $bg;
|
|
border: border-style($border);
|
|
@include boxy-shadow;
|
|
}
|
|
|
|
@mixin boxy($bg, $clear: true, $args...) {
|
|
@include boxy-unpadded($bg, $args...);
|
|
@include boxy-margin;
|
|
padding: 0.5rem 0.8rem;
|
|
@if $clear {
|
|
clear: both;
|
|
} @else {
|
|
overflow: hidden; // makes the box dodge floats?????? idk why
|
|
}
|
|
:first-child { margin-top: 0; }
|
|
:last-child { margin-bottom: 0; }
|
|
}
|
|
|
|
@mixin fake-border {
|
|
border: none;
|
|
filter:
|
|
drop-shadow(1px 1px 0 currentcolor)
|
|
drop-shadow(1px -1px 0 currentcolor)
|
|
drop-shadow(-1px 1px 0 currentcolor)
|
|
drop-shadow(-1px -1px 0 currentcolor)
|
|
drop-shadow(1px 0 0 currentcolor)
|
|
drop-shadow(-1px 0 0 currentcolor)
|
|
drop-shadow(0 1px 0 currentcolor)
|
|
drop-shadow(0 -1px 0 currentcolor);
|
|
}
|
|
|
|
@mixin decorations($before, $after: $before, $size: null, $color: null) {
|
|
&::before, &::after {
|
|
@include symbol-font;
|
|
font-style: normal;
|
|
@if $size { font-size: $size; }
|
|
@if $color { color: $color; }
|
|
margin: 0 0.5rem;
|
|
}
|
|
&::before { content: $before; }
|
|
&::after { content: $after; }
|
|
}
|
|
|
|
|
|
@mixin inline-lists {
|
|
ul, menu, li { display: inline; }
|
|
ul, menu { padding-left: 0; }
|
|
li { list-style: none; }
|
|
li + li { margin-left: 0.75ex; }
|
|
}
|
|
|
|
@mixin center {
|
|
text-align: center;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
|
|
@layer outer {
|
|
* { box-sizing: border-box; }
|
|
|
|
:root {
|
|
background: var(--gradient) fixed;
|
|
color: var(--fg);
|
|
|
|
@include main-font;
|
|
font-size: $body-size;
|
|
line-height: 150%;
|
|
}
|
|
|
|
body {
|
|
@include boxy-unpadded(var(--bg));
|
|
margin: 2em auto;
|
|
|
|
$darkbg: oklch(from var(--bg) calc(l * 0.9) calc(c * 1.25) h);
|
|
background: linear-gradient(to bottom in oklch, var(--bg), $darkbg);
|
|
|
|
width: min(54rem, 85vw);
|
|
}
|
|
|
|
main {
|
|
margin: 0 2rem;
|
|
}
|
|
}
|
|
|
|
@layer header {
|
|
header {
|
|
@include inverted;
|
|
@include inline-lists;
|
|
|
|
text-align: center;
|
|
text-wrap: balance;
|
|
padding: 1em;
|
|
|
|
h1 {
|
|
@include decorations('✿', $size: 60%);
|
|
@include heading-size(0);
|
|
@include heading-font;
|
|
font-weight: $main-heading-weight;
|
|
font-style: italic;
|
|
letter-spacing: 0.1ch;
|
|
margin: { top: 0; bottom: 0.5rem; }
|
|
|
|
em { font-weight: $normal-weight; }
|
|
}
|
|
|
|
.meta {
|
|
@include small-font;
|
|
display: flex;
|
|
gap: 2em;
|
|
justify-content: center;
|
|
|
|
* { display: inline; }
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer footer {
|
|
footer {
|
|
@include inverted(0.75rem);
|
|
@include small-font;
|
|
@include inline-lists;
|
|
|
|
clear: both;
|
|
margin: 2rem 0 0 0;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
menu { @include decorations('➸', ''); }
|
|
}
|
|
}
|
|
|
|
@layer headings {
|
|
main {
|
|
h1, h2, h3, h4, h5, h6 { @include heading-font; }
|
|
|
|
h1 {
|
|
@include inverted;
|
|
@include boxy-margin;
|
|
@include boxy-shadow;
|
|
@include heading-size(1);
|
|
letter-spacing: 0.075ch;
|
|
clear: both;
|
|
}
|
|
|
|
h2 { @include heading-size(2); }
|
|
h3 { @include heading-size(3); }
|
|
h4, h5, h6 { font-size: 1rem; }
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
padding: 0.25rem 0.75rem;
|
|
border-bottom: border-style();
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer links {
|
|
a {
|
|
color: inherit;
|
|
text-decoration: 2px solid underline var(--accent);
|
|
text-underline-offset: 0.175em;
|
|
&:hover { color: var(--accent); }
|
|
}
|
|
}
|
|
|
|
@layer banner {
|
|
.banner {
|
|
@include boxy(var(--accent), $fg: var(--banner-fg),
|
|
$border: var(--banner-border));
|
|
@include decorations('☛', '☚');
|
|
@include heading-size(2);
|
|
|
|
font-weight: $boldbold-weight;
|
|
width: fit-content;
|
|
margin: auto;
|
|
|
|
p { display: inline; }
|
|
|
|
&:has(a) {
|
|
background: var(--accent);
|
|
a { text-decoration: none; }
|
|
a:hover { color: var(--counter-accent); }
|
|
}
|
|
|
|
--banner-fg: #{$lighter};
|
|
--banner-border: #{$dark};
|
|
@media (prefers-color-scheme: dark) {
|
|
--banner-fg: #{$darker};
|
|
--banner-border: #{$lighter};
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@layer code {
|
|
pre {
|
|
@include code-font;
|
|
font-size: 1rem * $code-font-scale;
|
|
}
|
|
|
|
:where(:not(pre)) > code {
|
|
@include code-font;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* syntax highlighting */
|
|
.kw { color: hsl(300deg, 60%, 30%); }
|
|
.pp { color: hsl(343deg, 100%, 40%); }
|
|
.dt { color: hsl(173deg, 100%, 24%); }
|
|
.fu, .at { color: hsl(34deg, 100%, 30%); }
|
|
.va { color: hsl(203deg, 100%, 30%); }
|
|
.cf { color: hsl(276deg, 75%, 35%); }
|
|
.op { color: hsl(220deg, 40%, 33%); }
|
|
.co { color: hsl(221deg, 10%, 39%); }
|
|
.bu { color: hsl(120deg, 85%, 25%); }
|
|
.st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 100%, 20%); }
|
|
.wa { color: hsl(350deg, 80%, 25%); text-decoration: wavy 1.5px underline; }
|
|
.al { color: hsl(350deg, 80%, 25%); }
|
|
.cn { color: hsl(343deg, 100%, 30%); }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.kw { color: hsl(300deg, 60%, 80%); }
|
|
.pp { color: hsl(343deg, 100%, 85%); }
|
|
.dt { color: hsl(193deg, 60%, 74%); }
|
|
.fu, .at { color: hsl(34deg, 100%, 70%); }
|
|
.va { color: hsl(203deg, 100%, 75%); }
|
|
.cf { color: hsl(276deg, 75%, 85%); }
|
|
.op { color: hsl(220deg, 40%, 70%); }
|
|
.co { color: hsl(221deg, 10%, 80%); }
|
|
.bu { color: hsl(120deg, 55%, 75%); }
|
|
.st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 70%, 80%); }
|
|
.wa { color: hsl(350deg, 80%, 77%); text-decoration: wavy 1.5px underline; }
|
|
.al { color: hsl(350deg, 80%, 77%); }
|
|
.cn { color: hsl(343deg, 80%, 70%); }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@layer figures {
|
|
figure {
|
|
img { max-width: 100%; }
|
|
|
|
&:where(:not(.nobg, .hasborder)) {
|
|
a img { border: border-style(); }
|
|
a:hover img { border: border-style(var(--accent)); }
|
|
}
|
|
|
|
&.nobg a img { @include fake-border; }
|
|
&.lightbg img { background: var(--light); }
|
|
}
|
|
|
|
figcaption {
|
|
@include note-font;
|
|
@include center;
|
|
|
|
em { font-style: normal; }
|
|
}
|
|
|
|
:not(.floating) > figcaption { width: 75%; }
|
|
}
|
|
|
|
|
|
@layer tables {
|
|
table {
|
|
margin: auto;
|
|
border-spacing: 0;
|
|
border: { top: border-style(); bottom: border-style(); }
|
|
}
|
|
|
|
th { font-weight: $bold-weight; }
|
|
|
|
thead th {
|
|
border-bottom: border-style(halfalpha(var(--fg)));
|
|
}
|
|
|
|
td, th {
|
|
padding: 0 0.5em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
|
|
@layer boxes {
|
|
pre, aside, blockquote {
|
|
$hue: calc(h + var(--hue-nudge));
|
|
--box-bg: oklch(from var(--box-base) var(--luma) c #{$hue});
|
|
@include boxy(var(--box-bg), $clear: false);
|
|
|
|
--luma: calc(l * 1.05);
|
|
@media (prefers-color-scheme: dark) { --luma: calc(l / 1.05); }
|
|
}
|
|
|
|
:is(pre, .sourceCode, aside, blockquote) {
|
|
& + & { margin-top: 1.5em; }
|
|
}
|
|
|
|
pre {
|
|
--hue-nudge: 60;
|
|
}
|
|
|
|
aside {
|
|
@include note-font;
|
|
--hue-nudge: -80;
|
|
}
|
|
|
|
blockquote {
|
|
@include note-font;
|
|
--hue-nudge: 180;
|
|
}
|
|
|
|
.light {
|
|
@include apply-colors($fg: $darker, $bg: $lighter);
|
|
}
|
|
}
|
|
|
|
|
|
@layer conlangs {
|
|
.ipa { @include ipa-font; }
|
|
|
|
.lang, .ebnf-t {
|
|
@include ipa-font;
|
|
font-weight: 700;
|
|
font-variation-settings: "ENLA" 25;
|
|
/* ENLA (increased x-height) not defined for IPA characters */
|
|
}
|
|
|
|
.scr {
|
|
vertical-align: -40%;
|
|
height: 1.5em;
|
|
|
|
:is(.gloss, .bigscr) & { height: 2em; }
|
|
.hugescr & { height: 4em; }
|
|
}
|
|
|
|
.gloss {
|
|
border: none;
|
|
text-align: left;
|
|
& + & { margin-top: 2em; }
|
|
}
|
|
|
|
.gloss-split, .gloss-gloss { @include small-font; }
|
|
|
|
.glosses.left .gloss { margin-left: 0; }
|
|
|
|
.abbr-list {
|
|
dl {
|
|
display: grid;
|
|
grid-template-columns: 1fr 8fr 1fr 8fr;
|
|
}
|
|
dt { @extend .abbr; }
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@layer spans {
|
|
|
|
dfn, b, strong, dt { font-weight: $bold-weight; }
|
|
|
|
dfn { font-style: normal; }
|
|
|
|
abbr, .abbr { font-variant: all-small-caps; }
|
|
|
|
u u { text-decoration: double underline; }
|
|
|
|
.note { @include note-font; }
|
|
:is(h1, h2) .note { font-size: 75%; }
|
|
|
|
mark {
|
|
--mark-hue: calc(var(--hue) + 90)
|
|
padding: 0 0.35ch;
|
|
mix-blend-mode: multiply;
|
|
background: oklch(95% 40% var(--mark-hue) / 30%);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
mix-blend-mode: screen;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@layer lists {
|
|
:not(ol) > li {
|
|
list-style: '☀ ';
|
|
|
|
&::marker {
|
|
@include symbol-font;
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@layer dl {
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
display: inline;
|
|
break-after: avoid;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 1em;
|
|
display: inline;
|
|
break-before: avoid;
|
|
}
|
|
|
|
dd::after {
|
|
content: '';
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
|
|
@layer twocol {
|
|
.twocol {
|
|
columns: 2;
|
|
> :first-child { margin-top: 0; }
|
|
}
|
|
|
|
.twocol-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1em;
|
|
}
|
|
}
|
|
|
|
@layer ebnf {
|
|
|
|
.ebnf {
|
|
border: none;
|
|
}
|
|
|
|
.ebnf td {
|
|
padding: 0 0.15em;
|
|
}
|
|
|
|
.ebnf-nt {
|
|
font-weight: bold;
|
|
color: hsl(155deg, 80%, 30%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ebnf-punc {
|
|
color: hsl(25deg, 40%, 30%);
|
|
}
|
|
|
|
.ebnf-sub, .ebnf-brack {
|
|
color: hsl(210deg, 80%, 35%);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ebnf-brack {
|
|
padding: 0 0.05em;
|
|
}
|
|
|
|
.ebnf-s {
|
|
font-style: italic;
|
|
color: hsl(330deg, 80%, 30%);
|
|
}
|
|
}
|
|
|
|
|
|
@layer floats {
|
|
.floating {
|
|
max-width: 33%;
|
|
margin: 0.5em 1em;
|
|
|
|
&:not(.left) {
|
|
float: right;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.left {
|
|
float: left;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.shaped { shape-margin: 1em; }
|
|
}
|
|
|
|
|
|
@layer images {
|
|
|
|
.pixel {
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
.bigemoji {
|
|
height: 2em;
|
|
width: 2em;
|
|
vertical-align: -0.2em;
|
|
}
|
|
|
|
.emojiseq { white-space: nowrap; }
|
|
}
|
|
|
|
@layer citations {
|
|
|
|
.citation {
|
|
font-size: 90%;
|
|
}
|
|
|
|
#refs {
|
|
margin-top: 0.75em;
|
|
}
|
|
.csl-entry {
|
|
margin-left: 2em;
|
|
text-indent: -2em;
|
|
}
|
|
|
|
}
|
|
|
|
@layer math {
|
|
|
|
math[display=block] {
|
|
border: 2px solid var(--fg);
|
|
|
|
padding: 1em 3em;
|
|
margin: auto;
|
|
width: min-content;
|
|
|
|
}
|
|
.rulebox math[display=block] {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.texdefs {
|
|
display: none;
|
|
}
|
|
|
|
.rulebox {
|
|
float: right;
|
|
border: 1px solid var(--fg);
|
|
background: #ffffff66;
|
|
padding: .4em 1.2em;
|
|
margin-left: 3em;
|
|
|
|
// "#asd" for specificity
|
|
:is(p, .math, mjx-container, #asd) {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
}
|