new style + some posts
This commit is contained in:
parent
2d53d00d20
commit
8f8150eaac
21 changed files with 847 additions and 788 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,3 +3,4 @@ _build
|
|||
_tmp
|
||||
.directory
|
||||
*~
|
||||
.sass-cache
|
||||
|
|
|
|||
24
Makefile
24
Makefile
|
|
@ -19,16 +19,17 @@ OUTPUTPOSTS = \
|
|||
$(BUILDDIR)/index.html $(BUILDDIR)/rss.xml
|
||||
|
||||
STYLE != find style -type f
|
||||
OUTPUTSTYLE = $(patsubst %,$(BUILDDIR)/%,$(STYLE))
|
||||
OUTPUTSTYLE = $(patsubst %.scss,%.css,$(patsubst %,$(BUILDDIR)/%,$(STYLE)))
|
||||
|
||||
OUTPUT = $(OUTPUTPOSTS) $(OUTPUTSTYLE)
|
||||
SCRIPT != find script -type f
|
||||
OUTPUTSCRIPT = $(patsubst %.ts,%.js,$(patsubst %,$(BUILDDIR)/%,$(SCRIPT)))
|
||||
|
||||
OUTPUT = $(OUTPUTPOSTS) $(OUTPUTSTYLE) $(OUTPUTSCRIPT)
|
||||
|
||||
ALL_TAGS = $(TMPDIR)/all-tags
|
||||
POST_LISTS = $(TMPDIR)/post-lists
|
||||
COMBO_FILTER = $(TMPDIR)/combo-filter
|
||||
EXECS = \
|
||||
$(LAANTAS_SCRIPT) \
|
||||
$(ALL_TAGS) $(POST_LISTS) $(COMBO_FILTER)
|
||||
EXECS = $(ALL_TAGS) $(POST_LISTS) $(COMBO_FILTER)
|
||||
|
||||
CABAL_FLAGS ?= -O
|
||||
|
||||
|
|
@ -58,8 +59,17 @@ $(BUILDDIR)/%.html: $(TMPDIR)/%.md $(POSTDEPS) ; $(call pandoc-simple,meta.htm
|
|||
$(BUILDDIR)/rss.xml: $(TMPDIR)/index.md $(POSTDEPS)
|
||||
$(call pandoc,rss.xml,--metadata-file rss.yaml --write html)
|
||||
|
||||
.PHONY: langfilter laantas-script
|
||||
langfilter laantas-script: %: ; cabal build $@
|
||||
$(BUILDDIR)/%.css: %.scss
|
||||
@echo "[sass]" $@
|
||||
mkdir -p $(dir $@)
|
||||
sass --no-source-map -I style $< $@
|
||||
|
||||
$(BUILDDIR)/%.js: %.ts
|
||||
@echo "[tsc]" $@
|
||||
mkdir -p $(dir $@)
|
||||
tsc --strict --noUncheckedIndexedAccess --noEmitOnError \
|
||||
--lib dom,es2021 --target es2015 \
|
||||
--outDir $(dir $@) $^
|
||||
|
||||
# $(1): template file
|
||||
# $(2): extra flags
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ getTags file = do
|
|||
makeYAML :: [Set Text] -> LazyBS.ByteString
|
||||
makeYAML tags = "---\n" <> yaml <> "\n...\n" where
|
||||
yaml = YAML.encode1 $ YAML.obj
|
||||
[("title" ##= YAML.str "all tags"),
|
||||
("all-tags" ##= collate tags)]
|
||||
["title" ##= YAML.str "all tags", "meta" ##= True,
|
||||
"all-tags" ##= collate tags]
|
||||
|
||||
-- | generates a makefile to include that generates the index and individual
|
||||
-- tag pages. example:
|
||||
|
|
@ -112,7 +112,7 @@ data Tag =
|
|||
|
||||
instance YAML.ToYAML Tag where
|
||||
toYAML (Tag {name, slug, count}) = YAML.obj $
|
||||
[("name" ##= name), ("slug" ##= slug), ("count" ##= count)]
|
||||
["name" ##= name, "slug" ##= slug, "count" ##= count]
|
||||
|
||||
-- | counts occurrences of each tag, and checks they all have distinct slugs
|
||||
collate :: [Set Text] -> [Tag]
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ makeTagInfo infos title basename outdir = do
|
|||
makeContent :: Text -> [PostInfo] -> LazyBS.ByteString
|
||||
makeContent title is' = "---\n" <> YAML.encode1 val <> "...\n" where
|
||||
is = sortBy (flip $ comparing date) is'
|
||||
val = YAML.obj [("title" ##= title), ("posts" ##= is)]
|
||||
val = YAML.obj ["title" ##= title, "posts" ##= is, "meta" ##= True]
|
||||
|
||||
allTags :: Foldable t => t PostInfo -> Set Text
|
||||
allTags = foldMap (Set.fromList . tags)
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ packages:
|
|||
source-repository-package
|
||||
type: git
|
||||
location: https://git.rhiannon.website/rhi/lang.git
|
||||
tag: ed54ec4c5af5b2b8ea25f0274e11c2f8c87714c3
|
||||
tag: c4a430facbeaa55a9de8edd69145243475c94087
|
||||
subdir: langfilter
|
||||
|
||||
source-repository-package
|
||||
type: git
|
||||
location: https://git.rhiannon.website/rhi/lang.git
|
||||
tag: ed54ec4c5af5b2b8ea25f0274e11c2f8c87714c3
|
||||
tag: c4a430facbeaa55a9de8edd69145243475c94087
|
||||
subdir: laantas-script
|
||||
|
||||
source-repository-package
|
||||
|
|
|
|||
14
posts/new-new-theme.md
Normal file
14
posts/new-new-theme.md
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: <em>new</em> new theme
|
||||
date: 2024-12-05
|
||||
summary: for real this time. probably
|
||||
tags: [december adventure]
|
||||
...
|
||||
|
||||
yeah i redid it.
|
||||
|
||||
it's more _on brand_ now, i think. and the actual css is nice and organised now. i am grudgingly using [sass] now because i really want those mixins. and functions.
|
||||
|
||||
so yeah! honestly i don't think there is much to talk about with something like this. you can see the results.
|
||||
|
||||
bye
|
||||
18
posts/new-theme.md
Normal file
18
posts/new-theme.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: new theme
|
||||
date: 2024-12-04
|
||||
tags: [december adventure]
|
||||
summary: wow!
|
||||
...
|
||||
|
||||
hi today's `@december adventure@` was…
|
||||
|
||||
:::banner
|
||||
redesigning this page
|
||||
:::
|
||||
|
||||
maybe you noticed when you opened it. i know it's pretty subtle.
|
||||
|
||||
:::aside
|
||||
**note to readers from the future**: it was not subtle.
|
||||
:::
|
||||
|
|
@ -29,6 +29,8 @@ so. one sentence at a time.
|
|||
|
||||
# one
|
||||
|
||||
you know! the thing! from the game!
|
||||
|
||||
:::glosses
|
||||
- suatł pattalal šilbari gulaigúšḿ fulla
|
||||
- [ˌsuətɫ̩ ˈpatːɐləlʲ ˈʃilʲbɐɾɪ ɡɔˈlaɪɣɔːʃm̩ fʊɫːɑ]
|
||||
|
|
@ -37,18 +39,13 @@ so. one sentence at a time.
|
|||
- use your warps to skip some floors
|
||||
:::
|
||||
|
||||
you know! the thing! from the game!
|
||||
|
||||
<figure class='floating right'>
|
||||
<figcaption> well. from the fan translation </figcaption>
|
||||
<img src=quorientation/skip-some-floors.png class=pixel alt=''>
|
||||
</figure>
|
||||
{.floating .right .pixel}
|
||||
|
||||
- out of context, `{!patta}` means door. i suppose a portal would be a magic
|
||||
door, an `{!ustaitł patta}`. but in the context of someone making one right
|
||||
in front of you, it is clear what kind of door we're talking about.
|
||||
|
||||
:::{.aside .no-line}
|
||||
:::aside
|
||||
the word `{!ustail}` also means "songs". did you know there's an old english
|
||||
word for magic, `{ġealdor}`, that comes from the proto-germanic `{galdr}`,
|
||||
meaning both "song" and "incantation"? i thought it was cute.
|
||||
|
|
@ -88,7 +85,7 @@ babylon no longer exists, so it doesn't need protecting. go have fun
|
|||
mean something like "is possible/necessary".
|
||||
"{flowers grow here} is possible".
|
||||
|
||||
:::{.aside .no-line}
|
||||
:::aside
|
||||
the similarity of `{!fulla}` and `{!bulla}` is just a weird accident, in case
|
||||
you're wondering. i made the words at different times. no etymology puzzle
|
||||
here, sorry
|
||||
|
|
@ -112,7 +109,7 @@ babylon no longer exists, so it doesn't need protecting. go have fun
|
|||
|
||||
# abbreviation list
|
||||
|
||||
:::{.twocol .abbr-list}
|
||||
:::{.abbr-list}
|
||||
DEF
|
||||
: [definite](https://lang.niss.website/laantas/nouns.html#definiteness)
|
||||
["the"]{.note}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,18 @@ summary: q.t. colour scheme generator
|
|||
header-includes: |
|
||||
<style>
|
||||
#relcolor {
|
||||
max-width: 20em; margin: auto;
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: .5em;
|
||||
max-width: 20em; margin: 1em auto auto;
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 3em;
|
||||
font-weight: bold;
|
||||
--hi: #ea9aa1; --wow: oklch(from var(--hi) l c calc(h + 180));
|
||||
}
|
||||
#relcolor div {
|
||||
text-align: center; font-size: 125%;
|
||||
padding: .4em; border-radius: .5em;
|
||||
padding: .4em;
|
||||
color: black;
|
||||
background: var(--bg);
|
||||
border: 4px solid oklch(from var(--bg) .25 75% h);
|
||||
box-shadow: 0.5em 0.5em 0 color-mix(in srgb, var(--bg) 50%, transparent);
|
||||
}
|
||||
#hi { --bg: var(--hi); }
|
||||
#wow { --bg: var(--wow); }
|
||||
|
|
@ -69,7 +70,7 @@ if you look at [mdn], you might see this interesting [`hue-rotate()`][hr] thing
|
|||
|
||||
well that doesn't sound very encouraging. but maybe it'll be fine.
|
||||
|
||||
i shoved [all of the colours][jofo] to hue 0° (using krita's _hue HSL_ blend mode), and used `hue-rotate()` to change it back to the 'main' colour of each region.
|
||||
i shoved [all of the colours][jofo] to hue 0° (using krita's `@hue HSL@` blend mode), and used `hue-rotate()` to change it back to the 'main' colour of each region.
|
||||
|
||||
it won't look exact, but it'll be close. right?
|
||||
|
||||
|
|
@ -171,27 +172,27 @@ a good place to start is the same place everyone does: with complementary and tr
|
|||
using this as a starting point, i pick some evenly-spaced colours for each bit. the final palettes come out like this!
|
||||
|
||||
:::{#result}
|
||||
- fins:
|
||||
- fins
|
||||
<svg viewBox='-0.1 -0.1 8.7 1.2'>
|
||||
<rect fill=#770084 width=2 height=1 />
|
||||
<rect fill=#9d0058 width=2 height=1 x=2 />
|
||||
<rect fill=#a11916 width=2 height=1 x=4 />
|
||||
<rect fill=#eead91 width=2 height=1 x=6.5 />
|
||||
</svg>
|
||||
- body:
|
||||
- body
|
||||
<svg viewBox='-0.1 -0.1 6.7 1.2'>
|
||||
<rect fill=#00709b width=2 height=1 />
|
||||
<rect fill=#008fca width=2 height=1 x=2 />
|
||||
<rect fill=#7dd1f1 width=2 height=1 x=4.5 />
|
||||
</svg>
|
||||
- belly:
|
||||
- belly
|
||||
<svg viewBox='-0.1 -0.1 8.7 1.2'>
|
||||
<rect fill=#dc8d7b width=2 height=1 />
|
||||
<rect fill=#efa4b0 width=2 height=1 x=2 />
|
||||
<rect fill=#f9aba1 width=2 height=1 x=4.5 />
|
||||
<rect fill=#e3adbc width=2 height=1 x=6.5 />
|
||||
</svg>
|
||||
- mask/claws/socks:
|
||||
- mask/claws/socks
|
||||
<svg viewBox='-0.1 -0.1 9.2 1.2'>
|
||||
<rect fill=#ebc1c8 width=2 height=1 />
|
||||
<rect fill=#b4aaae width=2 height=1 x=2.5 />
|
||||
|
|
|
|||
6
script/hue.ts
Normal file
6
script/hue.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export {}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const hue = `${Math.random() * 360}`;
|
||||
document.documentElement.style.setProperty('--base-hue', hue);
|
||||
});
|
||||
43
style/colours.scss
Normal file
43
style/colours.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
$lighter: oklch(95% 8% var(--base-hue));
|
||||
$light: oklch(90% 12% var(--base-hue));
|
||||
$mid: oklch(40% 20% var(--base-hue));
|
||||
$dark: oklch(20% 45% var(--base-hue));
|
||||
$darker: oklch(10% 40% var(--base-hue));
|
||||
|
||||
$dark-accent: oklch(56% 40% calc(var(--base-hue) - 180));
|
||||
$light-accent: oklch(90% 30% calc(var(--base-hue) - 180));
|
||||
|
||||
@function halfalpha($col) {
|
||||
@return color-mix(in srgb, #{$col} 50%, transparent);
|
||||
}
|
||||
|
||||
|
||||
@mixin color-var($name, $light, $dark: null) {
|
||||
@property #{$name} {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: #{$light};
|
||||
}
|
||||
:root {
|
||||
#{$name}: #{$light};
|
||||
@if $dark != null {
|
||||
@media (prefers-color-scheme: dark) { #{$name}: #{$dark}; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin apply-colors($fg, $bg, $accent: null) {
|
||||
--fg: #{$fg};
|
||||
--bg: #{$bg};
|
||||
@if $accent { --accent: #{$accent}; }
|
||||
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
@mixin inverted($padding: 0.5em) {
|
||||
@include apply-colors($fg: var(--counter-fg), $bg: var(--counter-bg),
|
||||
$accent: var(--counter-accent));
|
||||
padding: $padding;
|
||||
}
|
||||
|
|
@ -16,53 +16,14 @@
|
|||
suffix: " ";
|
||||
}
|
||||
|
||||
main :is(h1, h2, h3, h4, h5, h6):not(.unnumbered)::before {
|
||||
padding-right: 1ex;
|
||||
}
|
||||
main h1 {
|
||||
&:not(.unnumbered) { counter-increment: h1; }
|
||||
|
||||
main h1:not(.unnumbered) { counter-increment: h1; }
|
||||
main h1 { counter-reset: h2 h3 h4 h5 h6; }
|
||||
main h1:not(.unnumbered)::before {
|
||||
content: counter(h1, inv-circled);
|
||||
&::before {
|
||||
font-family: PragmataPro;
|
||||
font-style: normal;
|
||||
content: counter(h1, inv-circled);
|
||||
padding-right: 1ex;
|
||||
}
|
||||
&.unnumbered::before { content: "\2B8A"; }
|
||||
}
|
||||
main h1.unnumbered::before {
|
||||
content: "\2B8A ";
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
main h2:not(.unnumbered) { counter-increment: h2; }
|
||||
main h2:not(.unnumbered)::before {
|
||||
content: counter(h1) '.' counter(h2);
|
||||
}
|
||||
main h2 { counter-reset: h3 h4 h5 h6; }
|
||||
|
||||
main h3:not(.unnumbered) { counter-increment: h3; }
|
||||
main h3 { counter-reset: h4 h5 h6; }
|
||||
main h3:not(.unnumbered)::before {
|
||||
content: counter(h1) '.' counter(h2) '.' counter(h3);
|
||||
}
|
||||
|
||||
main h4:not(.unnumbered) { counter-increment: h4; }
|
||||
main h4 { counter-reset: h5 h6; }
|
||||
main h4:not(.unnumbered)::before {
|
||||
content:
|
||||
counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4);
|
||||
}
|
||||
|
||||
main h5:not(.unnumbered) { counter-increment: h5; }
|
||||
main h5 { counter-reset: h6; }
|
||||
main h5:not(.unnumbered)::before {
|
||||
content:
|
||||
counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.'
|
||||
counter(h5);
|
||||
}
|
||||
|
||||
main h6:not(.unnumbered) { counter-increment: h6; }
|
||||
main h6:not(.unnumbered)::before {
|
||||
content:
|
||||
counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.'
|
||||
counter(h5) '.' counter(h6);
|
||||
}
|
||||
|
||||
*/
|
||||
|
|
|
|||
51
style/fonts.scss
Normal file
51
style/fonts.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
@import url(fonts/pragmatapro/pragmatapro.css);
|
||||
@import url(fonts/muller/muller.css);
|
||||
@import url(fonts/junicodevf/junicodevf.css);
|
||||
|
||||
|
||||
$normal-weight: 400;
|
||||
$bold-weight: 600;
|
||||
$boldbold-weight: 700;
|
||||
$main-heading-weight: 300;
|
||||
$heading-weight: $bold-weight;
|
||||
$small-weight: 500;
|
||||
|
||||
$body-size: 14pt;
|
||||
$small-size: $body-size * 0.75;
|
||||
$code-font-scale: 0.85;
|
||||
|
||||
@mixin main-font { font-family: Muller, sans-serif; }
|
||||
|
||||
@mixin heading-font { @include main-font; }
|
||||
|
||||
@mixin code-font {
|
||||
font-family: PragmataPro, monospace;
|
||||
font-size: 100% * $code-font-scale;
|
||||
}
|
||||
|
||||
@mixin ipa-font {
|
||||
font-family: JunicodeVF, serif;
|
||||
font-feature-settings: "ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01";
|
||||
font-weight: 550;
|
||||
font-stretch: 110%;
|
||||
}
|
||||
|
||||
@mixin small-font {
|
||||
font-size: 80%;
|
||||
font-weight: $small-weight;
|
||||
}
|
||||
|
||||
@mixin note-font {
|
||||
@include small-font;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin symbol-font {
|
||||
font-family: PragmataPro, sans-serif;
|
||||
}
|
||||
|
||||
@mixin heading-size($level) {
|
||||
$step: 1.2;
|
||||
font-size: #{pow($step, max(4 - $level, 0))}rem;
|
||||
}
|
||||
|
||||
34
style/meta.scss
Normal file
34
style/meta.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@use 'colours' as *;
|
||||
@use 'fonts' as *;
|
||||
@import url(page.css);
|
||||
|
||||
.tag-list {
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
.post-list li + li {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.post-desc {
|
||||
margin: 0;
|
||||
line-height: 125%;
|
||||
|
||||
p { margin: 0; }
|
||||
p + p { margin-top: .5em; }
|
||||
}
|
||||
|
||||
.post-list > li { list-style: '✎ '; }
|
||||
.tag-list > li { list-style: '🏷 '; }
|
||||
|
||||
.post-list .date, .tag-list .count, .post-desc {
|
||||
@include note-font;
|
||||
}
|
||||
|
||||
#toc > ul {
|
||||
columns: 2;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
> li { list-style: circled; }
|
||||
}
|
||||
|
||||
BIN
style/niss.png
BIN
style/niss.png
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
708
style/page.css
708
style/page.css
|
|
@ -1,708 +0,0 @@
|
|||
@import url(counters.css);
|
||||
@import url(fonts/schola/schola.css);
|
||||
@import url(fonts/muller/muller.css);
|
||||
@import url(fonts/junius/junius.css);
|
||||
@import url(fonts/pragmatapro/pragmatapro.css);
|
||||
|
||||
:root {
|
||||
--ipa-font: JuniusX;
|
||||
|
||||
--light: #feb;
|
||||
--dark: #325;
|
||||
--mid: #83869e;
|
||||
--red1: #f42;
|
||||
--red2: #d16;
|
||||
|
||||
--fg: var(--dark);
|
||||
--bg: var(--light);
|
||||
--accent: var(--red1);
|
||||
--other-accent: var(--red2);
|
||||
}
|
||||
|
||||
:root {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
|
||||
font-family: PragmataPro;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--fg: var(--light);
|
||||
--bg: var(--dark);
|
||||
--accent: var(--red2);
|
||||
--other-accent: var(--red1);
|
||||
}
|
||||
}
|
||||
|
||||
:root, body { margin: 0; padding: 0; }
|
||||
|
||||
main, footer { max-width: 50rem; }
|
||||
|
||||
main {
|
||||
min-height: 100%;
|
||||
margin: 1em auto 0;
|
||||
padding: 0.5em 2em;
|
||||
|
||||
line-height: 150%;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
background: var(--fg);
|
||||
color: var(--bg);
|
||||
--accent: var(--other-accent);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 200%;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4ch;
|
||||
}
|
||||
|
||||
/* h1, h2, h3, h4, h5, h6 { */
|
||||
main h1 {
|
||||
margin: 1em 0 0.25em;
|
||||
|
||||
font-weight: normal;
|
||||
font-variant-east-asian: full-width;
|
||||
-moz-font-feature-settings: "fwid";
|
||||
-webkit-font-feature-settings: "fwid";
|
||||
font-feature-settings: "fwid";
|
||||
|
||||
clear: both;
|
||||
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-variant-east-asian: normal;
|
||||
-moz-font-feature-settings: normal;
|
||||
-webkit-font-feature-settings: normal;
|
||||
font-feature-settings: normal;
|
||||
}
|
||||
|
||||
|
||||
h1 { font-size: 125%; }
|
||||
h2 { font-size: 125%; }
|
||||
h3 { font-size: 120%; }
|
||||
h4 { font-size: 110%; }
|
||||
h5 { font-size: 100%; }
|
||||
h6 { font-size: 100%; }
|
||||
|
||||
main h1 {
|
||||
background: var(--fg);
|
||||
color: var(--bg);
|
||||
padding: 0.25rem 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
main :is(h2, h3, h4, h5, h6) {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-bottom: 2px dotted var(--fg);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 2px dotted var(--fg);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
pre + hr {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
column-gap: 2em;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header .date {
|
||||
font-variant-east-asian: normal;
|
||||
-moz-font-feature-settings: normal;
|
||||
-webkit-font-feature-settings: normal;
|
||||
font-feature-settings: normal;
|
||||
font-size: 100%;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tags ul {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tags li {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tags li + li {
|
||||
margin-left: 0.75ex;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
.post-list .date, .tag-list .count {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.post-list li + li {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.post-desc {
|
||||
margin: 0;
|
||||
font-size: small;
|
||||
font-style: italic;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.post-desc p {
|
||||
margin: 0;
|
||||
}
|
||||
.post-desc p + p {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: 2px dotted underline var(--accent);
|
||||
}
|
||||
a:hover { color: var(--accent); }
|
||||
|
||||
b, strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul li { list-style: '❀ '; }
|
||||
.post-list li { list-style: '✒ '; }
|
||||
.tag-list li { list-style: ' '; } /* a tag in pragmatapro */
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
border-spacing: 0;
|
||||
border-top: 2px solid var(--fg);
|
||||
border-bottom: 2px solid var(--fg);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-bottom: 1px solid var(--fg);
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0 0.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
|
||||
pre, code {
|
||||
font-family: PragmataPro;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
pre, :not(pre) > code {
|
||||
background: hsla(0deg 0% 100% / 40%);
|
||||
border: 2px dotted color-mix(in srgb, currentcolor 75%, transparent);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
pre, :not(pre) > code { background: hsla(0deg 0% 00% / 30%); }
|
||||
}
|
||||
|
||||
:not(pre) > code { padding: 0 5px; white-space: nowrap; }
|
||||
|
||||
pre {
|
||||
clear: both;
|
||||
width: min-content;
|
||||
margin: 0.5em auto;
|
||||
padding: 0.5em 0.8em;
|
||||
}
|
||||
|
||||
|
||||
.ipa, .lang, .ebnf-t {
|
||||
/* font-family: var(--ipa-font); */
|
||||
|
||||
font-feature-settings:
|
||||
"ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01";
|
||||
/* ss01 to use modern Þþð design, others to make juniusx go brrr
|
||||
* maybe i can just turn loca off but idk what other regional forms
|
||||
* it does that i actually want */
|
||||
|
||||
text-underline-offset: 0.125em;
|
||||
}
|
||||
|
||||
.lang, .ebnf-t { font-weight: 500; }
|
||||
|
||||
.abbr-list dt {
|
||||
font-family: PragmataPro;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.abbr, .abbr-list dt {
|
||||
font-variant: all-small-caps;
|
||||
}
|
||||
|
||||
.scr {
|
||||
height: 1.5em;
|
||||
vertical-align: -40%;
|
||||
}
|
||||
|
||||
.gloss-split, .gloss-gloss {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
:is(.gloss, .bigscr) .scr {
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.hugescr .scr {
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
:is(.splash, .example) .scr {
|
||||
height: unset;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.example .text {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 0.75em auto 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
.letter-list {
|
||||
margin: 1.25em auto 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 80%;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 1.5em;
|
||||
}
|
||||
|
||||
.letter-list + .letter-list {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
.letter-list .lang {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.letter-list .scr {
|
||||
height: 3em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.letter-list .text {
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
|
||||
#toc > ul {
|
||||
columns: 2;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
> li { list-style: circled; }
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
figure:not(.nobg, .hasborder) img:not(.scr) {
|
||||
border: 3px solid currentcolor;
|
||||
}
|
||||
figure.nobg a img {
|
||||
/* fake outline */
|
||||
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) ;
|
||||
}
|
||||
figure.lightbg img {
|
||||
background: var(--light);
|
||||
}
|
||||
figure:not(.left) {
|
||||
text-align: center;
|
||||
}
|
||||
figure:not(.left) table {
|
||||
display: inline-table;
|
||||
}
|
||||
.twocol-grid figure {
|
||||
margin: 0;
|
||||
}
|
||||
figure table {
|
||||
margin: 1em 0.5em;
|
||||
}
|
||||
.gloss {
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
figure ul {
|
||||
text-align: left;
|
||||
margin-left: 5em;
|
||||
margin-right: 5em;
|
||||
columns: 2;
|
||||
}
|
||||
figure li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 80%;
|
||||
line-height: 125%;
|
||||
font-style: italic;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
}
|
||||
figcaption em {
|
||||
font-style: normal;
|
||||
}
|
||||
:not(.floating) > figcaption {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 500;
|
||||
display: inline;
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
display: inline;
|
||||
break-before: avoid;
|
||||
}
|
||||
|
||||
dd::after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
u u {
|
||||
text-decoration: double underline;
|
||||
}
|
||||
|
||||
:is(.twocol, .threecol):not(:is(ul, ol) *) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.twocol {
|
||||
columns: 2;
|
||||
}
|
||||
.threecol {
|
||||
columns: 3;
|
||||
}
|
||||
.twocol :first-child, .threecol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.twocol-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.twocol-grid .gloss {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
border-top: 2px dotted var(--fg);
|
||||
margin: 1.5em auto 3em;
|
||||
|
||||
font-size: 80%;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer ul::before {
|
||||
margin: 0;
|
||||
content: '➸ ';
|
||||
}
|
||||
|
||||
footer ul::after {
|
||||
margin: 0;
|
||||
content: ' 🐌︎';
|
||||
}
|
||||
|
||||
footer li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
}
|
||||
footer li + li::before { content: ' · '; }
|
||||
|
||||
|
||||
.ebnf {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ebnf td {
|
||||
padding: 0 0.15em;
|
||||
}
|
||||
|
||||
.ebnf-nt {
|
||||
font-weight: 500;
|
||||
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: 500;
|
||||
}
|
||||
|
||||
.ebnf-brack {
|
||||
padding: 0 0.05em;
|
||||
}
|
||||
|
||||
.ebnf-s {
|
||||
font-style: italic;
|
||||
color: hsl(330deg, 80%, 30%);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
max-width: 85%;
|
||||
border-left: 1px solid black;
|
||||
padding-left: 1em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
.note, aside {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.banner {
|
||||
font-size: 125%;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.banner p:first-child::before { content: '☛ '; }
|
||||
.banner p:last-child::after { content: ' ☚'; }
|
||||
|
||||
:is(h1, h2) .note {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
aside {
|
||||
margin: 0.5em 3em;
|
||||
}
|
||||
aside:not(.no-line) {
|
||||
padding-left: 1em;
|
||||
border-left: 2px solid var(--fg);
|
||||
}
|
||||
|
||||
aside > details summary {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
aside :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: 0.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
aside h1 { font-size: 115%; }
|
||||
aside :is(h2, h3, h4, h5, h6) { font-size: 100%; }
|
||||
|
||||
:is(aside, figure).floating {
|
||||
max-width: 33%;
|
||||
}
|
||||
aside.floating {
|
||||
padding: 0.25em 0.75em;
|
||||
margin: 0.15em 1em 0;
|
||||
}
|
||||
figure.floating {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
aside.floating :first-child { margin-top: 0; }
|
||||
aside.floating :last-child { margin-bottom: 0; }
|
||||
|
||||
.kw { color: hsl(300deg, 60%, 30%); }
|
||||
.pp { color: hsl(343deg, 100%, 40%); /* font-weight: 500; */ }
|
||||
.dt { color: hsl(173deg, 100%, 24%); /* font-weight: 500; */ }
|
||||
.fu, .at { color: hsl(34deg, 100%, 30%); /* font-weight: 500; */ }
|
||||
.va { color: hsl(203deg, 100%, 30%); /* font-weight: 500; */ }
|
||||
.cf { color: hsl(276deg, 75%, 35%); /* font-weight: 500; */ }
|
||||
.op { color: hsl(220deg, 40%, 33%); }
|
||||
.co { color: hsl(221deg, 10%, 39%); /* font-style: italic; */ }
|
||||
.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%); /* font-weight: 500; */ }
|
||||
.dt { color: hsl(193deg, 60%, 74%); /* font-weight: 500; */ }
|
||||
.fu, .at { color: hsl(34deg, 100%, 70%); /* font-weight: 500; */ }
|
||||
.va { color: hsl(203deg, 100%, 75%); /* font-weight: 500; */ }
|
||||
.cf { color: hsl(276deg, 75%, 85%); /* font-weight: 500; */ }
|
||||
.op { color: hsl(220deg, 40%, 70%); }
|
||||
.co { color: hsl(221deg, 10%, 80%); /* font-style: italic; */ }
|
||||
.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%); }
|
||||
}
|
||||
|
||||
.floating {
|
||||
float: right;
|
||||
margin: 0.5em 1em 0.5em 2em;
|
||||
}
|
||||
|
||||
.floating.left {
|
||||
float: left;
|
||||
margin: 0.5em 2em 0.5em 1em;
|
||||
}
|
||||
|
||||
.shaped {
|
||||
/* maybe one day... */
|
||||
/* shape-outside: attr(src url); */
|
||||
shape-margin: 1em;
|
||||
}
|
||||
|
||||
.shadow { filter: drop-shadow(5px 5px 8px #0006); }
|
||||
|
||||
.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; }
|
||||
|
||||
|
||||
.citation {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
#refs {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
.csl-entry {
|
||||
margin-left: 2em;
|
||||
text-indent: -2em;
|
||||
}
|
||||
/*
|
||||
.csl-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 4ch auto;
|
||||
grid-gap: 1ex;
|
||||
}
|
||||
.csl-left-margin {
|
||||
justify-self: end;
|
||||
}
|
||||
*/
|
||||
|
||||
math[display=block] {
|
||||
border: 2px dotted 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;
|
||||
}
|
||||
|
||||
/* the last thing in the :is is for priority fuckery */
|
||||
.rulebox :is(p, .math, mjx-container, #asd) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.clear { clear: both; }
|
||||
|
||||
mark {
|
||||
mix-blend-mode: multiply;
|
||||
background: #fbc;
|
||||
padding: 0 0.35ch;
|
||||
}
|
||||
|
||||
.light {
|
||||
background: var(--light);
|
||||
color: var(--dark);
|
||||
}
|
||||
617
style/page.scss
Normal file
617
style/page.scss
Normal file
|
|
@ -0,0 +1,617 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
BIN
style/paper.png
BIN
style/paper.png
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
$if(hide-footer)$$else$
|
||||
<footer>
|
||||
<ul>
|
||||
<menu>
|
||||
<li><a href=/index.html>all posts</a>
|
||||
<li><a href=/all-tags.html>all tags</a>
|
||||
<li><a href=/rss.xml>rss</a>
|
||||
</ul>
|
||||
</menu>
|
||||
</footer>
|
||||
$endif$
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,16 @@
|
|||
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel=stylesheet href=/style/page.css>
|
||||
$if(meta)$
|
||||
<link rel=stylesheet href=/style/meta.css>
|
||||
$endif$
|
||||
$for(css)$
|
||||
<link rel=stylesheet href=/style/$css$>
|
||||
$endfor$
|
||||
<link rel=alternate href=/rss.xml type=application/rss+xml>
|
||||
|
||||
<script src=/script/hue.js type=module></script>
|
||||
|
||||
$for(header-includes)$
|
||||
$header-includes$
|
||||
$endfor$
|
||||
|
|
|
|||
9
tsconfig.json
Normal file
9
tsconfig.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"noEmitOnError": true,
|
||||
"lib": ["ES2021", "dom"],
|
||||
"target": "ES2015"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue