Merge branch 'redesign'
This commit is contained in:
commit
9ae600d8ce
36 changed files with 1236 additions and 851 deletions
|
|
@ -16,6 +16,7 @@ name = 'Eryn Wells'
|
||||||
[markup.highlight]
|
[markup.highlight]
|
||||||
anchorLineNos = true
|
anchorLineNos = true
|
||||||
lineNos = true
|
lineNos = true
|
||||||
|
lineNumbersInTable = false
|
||||||
noClasses = false
|
noClasses = false
|
||||||
|
|
||||||
[mediaTypes]
|
[mediaTypes]
|
||||||
|
|
@ -32,6 +33,10 @@ name = 'Eryn Wells'
|
||||||
identifier = 'resume'
|
identifier = 'resume'
|
||||||
name = 'Résumé'
|
name = 'Résumé'
|
||||||
url = '/resume/'
|
url = '/resume/'
|
||||||
|
[[menu.main]]
|
||||||
|
identifier = 'about'
|
||||||
|
name = 'About'
|
||||||
|
url = '/about/'
|
||||||
|
|
||||||
[outputFormats]
|
[outputFormats]
|
||||||
[outputFormats.RSS]
|
[outputFormats.RSS]
|
||||||
|
|
@ -41,7 +46,7 @@ name = 'Eryn Wells'
|
||||||
|
|
||||||
[outputs]
|
[outputs]
|
||||||
home = ['HTML', 'RSS']
|
home = ['HTML', 'RSS']
|
||||||
page = ['HTML']
|
page = ['HTML', 'JSON']
|
||||||
|
|
||||||
[params]
|
[params]
|
||||||
twitter = 'erynofwales'
|
twitter = 'erynofwales'
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,5 @@
|
||||||
# Hola! 👋🏻
|
---
|
||||||
|
title: Eryn Rachel Wells
|
||||||
|
---
|
||||||
|
|
||||||
Me llamo Eryn. Mis pronombres son [ella/ella][p]. Esta es me página personal. Bienvenide.
|
Este es un poco de texto sobre Eryn: quién es, qué le gusta, y por qué existe este sitio.
|
||||||
|
|
||||||
Soy una mujer trans y queer. Vivo en San Francisco con mis [dos gatos][cats]. Nací en Seattle, WA, y crecía en Phoenix, AZ. Asistí [Oberlin College][ob] donde obtuve un títolo en informática. {{< tess >}} es mi novia.
|
|
||||||
|
|
||||||
Mi lengua nativa es inglés, y también hablo español pero siempre necesito practicar más.
|
|
||||||
|
|
||||||
## Pasatiempos
|
|
||||||
|
|
||||||
Tengo un gran apetito por probar y aprender pasatiempos nuevos, especialmente
|
|
||||||
las que combinan varias de mis intereses.
|
|
||||||
|
|
||||||
He sido música para el gran parte de mi vida. Empezé tocar el piano cuando tuve
|
|
||||||
siete años, toqué la trompeta en colegio, y he tocado algunos otros instrumentos
|
|
||||||
por el camino. Todavía toco el piano, pero mi obsesión musical hoy en día es mi
|
|
||||||
sintetizador modular. De vez en cuando, grabo música y espero compartirla aquí,
|
|
||||||
en este sitio. Por el momento, puedes escuchar mi música en [Bandcamp][bc] o
|
|
||||||
[SoundCloud][sc].
|
|
||||||
|
|
||||||
Otros pasatiempos de los años recients incluyen: cerámica, caligrafía, tejido,
|
|
||||||
horneado pan, ciclismo, fotografía, y astronomía. ¿Uno no puede tener demasiados
|
|
||||||
pasatiemos, de verdad?
|
|
||||||
|
|
||||||
## Trabajo
|
|
||||||
|
|
||||||
He trabajado como ingeniera de software desde 2011 por varias companías basadas
|
|
||||||
en San Francisco y Silicon Valley. Hace seis años que he trabajado en Apple,
|
|
||||||
primero en el equipo iOS Accessibility, y ahora en el equipo Authentication
|
|
||||||
Experience.
|
|
||||||
|
|
||||||
Echa un vistazo a mi [resumen][r] para más detalles.
|
|
||||||
|
|
||||||
## Decirme Hola
|
|
||||||
|
|
||||||
Puedes encontrarme en muchos rincones del Internet. Estoy más activa en
|
|
||||||
[Twitter][t] y [Instagram][i]. Publico música en [SoundCloud][sc] y
|
|
||||||
[Bandcamp][bc]. Y para los proyectos de software, estoy en [GitHub][gh].
|
|
||||||
|
|
||||||
[p]: http://pronoun.is/she
|
|
||||||
[cats]: {{< ref "/cats" >}}
|
|
||||||
[ob]: https://www.oberlin.edu
|
|
||||||
[r]: {{< ref "/resume" >}}
|
|
||||||
[t]: https://twitter.com/erynofwales
|
|
||||||
[i]: https://www.instagram.com/erynofwales/
|
|
||||||
[sc]: https://soundcloud.com/purlsnbeeps
|
|
||||||
[bc]: https://erynwells.bandcamp.com/releases
|
|
||||||
[gh]: https://github.com/erynofwales
|
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,5 @@
|
||||||
# Hi! 👋🏻
|
---
|
||||||
|
title: Eryn Rachel Wells
|
||||||
|
---
|
||||||
|
|
||||||
I'm Eryn. My pronouns are [she/her][p]. This is my personal page. Welcome!
|
Software engineer, potter, musician, and overall nerd. This is my website.
|
||||||
|
|
||||||
I'm a queer trans woman. I live in San Francisco, CA, on the unceded ancestral
|
|
||||||
lands of the Ramaytush Ohlone people, with my [two cats][cats]. I was born in
|
|
||||||
Seattle, WA and grew up in Phoenix, AZ. I attended [Oberlin College][ob] where I
|
|
||||||
got a degree in Computer Science. {{< tess >}} is my girlfriend.
|
|
||||||
|
|
||||||
I speak English natively, and Spanish too, though I always need more practice.
|
|
||||||
|
|
||||||
## Hobbies
|
|
||||||
|
|
||||||
I have a big appetite for learning new skills, especially things that combine
|
|
||||||
multiple of my interests.
|
|
||||||
|
|
||||||
I've been a musician for most of my life. I started on the piano at age seven,
|
|
||||||
played trumpet in high school, and have picked up a smattering of other
|
|
||||||
instruments along the way. I still play piano occasionally, but my current
|
|
||||||
musical obsession is my modular synthesizer. I occasionally record things, and
|
|
||||||
I'm hoping to share them here on this site, but for now, they're on
|
|
||||||
[SoundCloud][sc] and [Bandcamp][bc].
|
|
||||||
|
|
||||||
I do try to spend my non-work time away from the computer, but every so often I
|
|
||||||
get inspired to hack on something. Those projects usually end up on
|
|
||||||
[GitHub][gh].
|
|
||||||
|
|
||||||
Other things I've picked up over the years include: ceramics, calligraphy,
|
|
||||||
knitting, bread baking, bicycling, photography, and astronomy. You can never
|
|
||||||
have too many hobbies, right?
|
|
||||||
|
|
||||||
## Professional
|
|
||||||
|
|
||||||
I've worked as a software engineer since 2011 for a variety of companies around
|
|
||||||
the San Francisco Bay Area. I've been at Apple since early 2016, first on the
|
|
||||||
iOS Accessibility team, and now on the Authentication Experience team.
|
|
||||||
|
|
||||||
Check out my [résumé][r] for more details.
|
|
||||||
|
|
||||||
## Say Hello
|
|
||||||
|
|
||||||
You can find me in lots of other corners of the Internet. I'm most active on
|
|
||||||
[Twitter][t] and [Instagram][i]. I post music on [SoundCloud][sc] and
|
|
||||||
[Bandcamp][bc]. I'm on [GitHub][gh] for coding projects. You can also send me an
|
|
||||||
[email][eml].
|
|
||||||
|
|
||||||
[p]: http://pronoun.is/she
|
|
||||||
[cats]: {{< ref "/cats" >}}
|
|
||||||
[ob]: https://www.oberlin.edu
|
|
||||||
[r]: {{< ref "/resume" >}}
|
|
||||||
[t]: https://twitter.com/erynofwales
|
|
||||||
[i]: https://www.instagram.com/erynofwales/
|
|
||||||
[sc]: https://soundcloud.com/purlsnbeeps
|
|
||||||
[bc]: https://erynwells.bandcamp.com/releases
|
|
||||||
[gh]: https://github.com/erynofwales
|
|
||||||
[eml]: mailto:Eryn%20Wells<eryn@erynwells.me>
|
|
||||||
|
|
|
||||||
50
content/about/index.es.md
Normal file
50
content/about/index.es.md
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
title: "Hola! 👋🏻"
|
||||||
|
---
|
||||||
|
|
||||||
|
Me llamo Eryn. Mis pronombres son [ella/ella][p]. Esta es me página personal. Bienvenide.
|
||||||
|
|
||||||
|
Soy una mujer trans y queer. Vivo en San Francisco con mis [dos gatos][cats]. Nací en Seattle, WA, y crecía en Phoenix, AZ. Asistí [Oberlin College][ob] donde obtuve un títolo en informática. {{< tess >}} es mi novia.
|
||||||
|
|
||||||
|
Mi lengua nativa es inglés, y también hablo español pero siempre necesito practicar más.
|
||||||
|
|
||||||
|
## Pasatiempos
|
||||||
|
|
||||||
|
Tengo un gran apetito por probar y aprender pasatiempos nuevos, especialmente
|
||||||
|
las que combinan varias de mis intereses.
|
||||||
|
|
||||||
|
He sido música para el gran parte de mi vida. Empezé tocar el piano cuando tuve
|
||||||
|
siete años, toqué la trompeta en colegio, y he tocado algunos otros instrumentos
|
||||||
|
por el camino. Todavía toco el piano, pero mi obsesión musical hoy en día es mi
|
||||||
|
sintetizador modular. De vez en cuando, grabo música y espero compartirla aquí,
|
||||||
|
en este sitio. Por el momento, puedes escuchar mi música en [Bandcamp][bc] o
|
||||||
|
[SoundCloud][sc].
|
||||||
|
|
||||||
|
Otros pasatiempos de los años recients incluyen: cerámica, caligrafía, tejido,
|
||||||
|
horneado pan, ciclismo, fotografía, y astronomía. ¿Uno no puede tener demasiados
|
||||||
|
pasatiemos, de verdad?
|
||||||
|
|
||||||
|
## Trabajo
|
||||||
|
|
||||||
|
He trabajado como ingeniera de software desde 2011 por varias companías basadas
|
||||||
|
en San Francisco y Silicon Valley. Hace seis años que he trabajado en Apple,
|
||||||
|
primero en el equipo iOS Accessibility, y ahora en el equipo Authentication
|
||||||
|
Experience.
|
||||||
|
|
||||||
|
Echa un vistazo a mi [resumen][r] para más detalles.
|
||||||
|
|
||||||
|
## Decirme Hola
|
||||||
|
|
||||||
|
Puedes encontrarme en muchos rincones del Internet. Estoy más activa en
|
||||||
|
[Twitter][t] y [Instagram][i]. Publico música en [SoundCloud][sc] y
|
||||||
|
[Bandcamp][bc]. Y para los proyectos de software, estoy en [GitHub][gh].
|
||||||
|
|
||||||
|
[p]: http://pronoun.is/she
|
||||||
|
[cats]: {{< ref "/cats" >}}
|
||||||
|
[ob]: https://www.oberlin.edu
|
||||||
|
[r]: {{< ref "/resume" >}}
|
||||||
|
[t]: https://twitter.com/erynofwales
|
||||||
|
[i]: https://www.instagram.com/erynofwales/
|
||||||
|
[sc]: https://soundcloud.com/purlsnbeeps
|
||||||
|
[bc]: https://erynwells.bandcamp.com/releases
|
||||||
|
[gh]: https://github.com/erynofwales
|
||||||
56
content/about/index.md
Normal file
56
content/about/index.md
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
---
|
||||||
|
title: "Hi! 👋🏻"
|
||||||
|
date: 2022-09-03T12:14:32-07:00
|
||||||
|
draft: true
|
||||||
|
---
|
||||||
|
|
||||||
|
I'm Eryn. My pronouns are [she/her][p]. I'm a queer trans woman. I live in San
|
||||||
|
Francisco, CA, on the unceded ancestral lands of the Ramaytush Ohlone people,
|
||||||
|
with my [two cats][cats]. I was born in Seattle, WA and grew up in Phoenix, AZ.
|
||||||
|
I attended [Oberlin College][ob] where I got a degree in Computer Science.
|
||||||
|
{{< tess >}} is my girlfriend.
|
||||||
|
|
||||||
|
I speak English natively, and Spanish too, though I always need more practice.
|
||||||
|
|
||||||
|
## Hobbies
|
||||||
|
|
||||||
|
I've been a musician for most of my life. I started on the piano at age seven,
|
||||||
|
played trumpet in high school, and have picked up a smattering of other
|
||||||
|
instruments along the way. I still play piano occasionally, but my current
|
||||||
|
musical obsession is my modular synthesizer. I occasionally record things, and
|
||||||
|
I'm hoping to share them here on this site, but for now, they're on
|
||||||
|
[SoundCloud][sc] and [Bandcamp][bc].
|
||||||
|
|
||||||
|
I do try to spend my non-work time away from the computer, but every so often I
|
||||||
|
get inspired to hack on something. Those projects usually end up on
|
||||||
|
[GitHub][gh].
|
||||||
|
|
||||||
|
Other things I've picked up over the years include: ceramics, calligraphy,
|
||||||
|
knitting, bread baking, bicycling, photography, and astronomy. You can never
|
||||||
|
have too many hobbies, right?
|
||||||
|
|
||||||
|
## Professional
|
||||||
|
|
||||||
|
I've worked as a software engineer since 2011 for a variety of companies around
|
||||||
|
the San Francisco Bay Area. I've been at Apple since early 2016, first on the
|
||||||
|
iOS Accessibility team, and now on the Authentication Experience team.
|
||||||
|
|
||||||
|
Check out my [résumé][r] for more details.
|
||||||
|
|
||||||
|
## Say Hello
|
||||||
|
|
||||||
|
You can find me in lots of other corners of the Internet. I'm most active on
|
||||||
|
[Twitter][t] and [Instagram][i]. I post music on [SoundCloud][sc] and
|
||||||
|
[Bandcamp][bc]. I'm on [GitHub][gh] for coding projects. You can also send me an
|
||||||
|
[email][eml].
|
||||||
|
|
||||||
|
[p]: http://pronoun.is/she
|
||||||
|
[cats]: {{< ref "/cats" >}}
|
||||||
|
[ob]: https://www.oberlin.edu
|
||||||
|
[r]: {{< ref "/resume" >}}
|
||||||
|
[t]: https://twitter.com/erynofwales
|
||||||
|
[i]: https://www.instagram.com/erynofwales/
|
||||||
|
[sc]: https://soundcloud.com/purlsnbeeps
|
||||||
|
[bc]: https://erynwells.bandcamp.com/releases
|
||||||
|
[gh]: https://github.com/erynofwales
|
||||||
|
[eml]: mailto:Eryn%20Wells<eryn@erynwells.me>
|
||||||
|
|
@ -11,18 +11,18 @@ according to the instructions in the Raspberry Pi documentation. That page is
|
||||||
also on [GitHub][eeprom-gh] which might be a more stable location. On Raspbian
|
also on [GitHub][eeprom-gh] which might be a more stable location. On Raspbian
|
||||||
on the RPi:
|
on the RPi:
|
||||||
|
|
||||||
```bash
|
{{< figures/code lang=sh >}}
|
||||||
fw=/lib/firmware/raspberrypi/bootloader/stable/pieeprom-2020-09-03.bin
|
fw=/lib/firmware/raspberrypi/bootloader/stable/pieeprom-2020-09-03.bin
|
||||||
rpi-eeprom-config $fw > ~/bootconf.txt
|
rpi-eeprom-config $fw > ~/bootconf.txt
|
||||||
vi ~/bootconf.txt
|
vi ~/bootconf.txt
|
||||||
rpi-eeprom-config --out ~/pieeprom-new.bin --config ~/bootconf.txt $fw
|
rpi-eeprom-config --out ~/pieeprom-new.bin --config ~/bootconf.txt $fw
|
||||||
sudo rpi-eeprom-update -d -f ~/pieeprom-new.bin
|
sudo rpi-eeprom-update -d -f ~/pieeprom-new.bin
|
||||||
sudo reboot
|
sudo reboot
|
||||||
```
|
{{< /figures/code >}}
|
||||||
|
|
||||||
My updated bootconf.txt is:
|
My updated bootconf.txt is:
|
||||||
|
|
||||||
```conf
|
{{< figures/code lang=cfg >}}
|
||||||
[all]
|
[all]
|
||||||
BOOT_UART=1
|
BOOT_UART=1
|
||||||
WAKE_ON_GPIO=0
|
WAKE_ON_GPIO=0
|
||||||
|
|
@ -33,7 +33,7 @@ TFTP_FILE_TIMEOUT=30000
|
||||||
ENABLE_SELF_UPDATE=1
|
ENABLE_SELF_UPDATE=1
|
||||||
DISABLE_HDMI=0
|
DISABLE_HDMI=0
|
||||||
BOOT_ORDER=0xf412
|
BOOT_ORDER=0xf412
|
||||||
```
|
{{< /figures/code >}}
|
||||||
|
|
||||||
I enabled UART debugging, and set the boot order to be: network `0x2`, SD card
|
I enabled UART debugging, and set the boot order to be: network `0x2`, SD card
|
||||||
`0x1`, USB mass storage `0x4`, and finally reboot `0xf`. These steps need to be
|
`0x1`, USB mass storage `0x4`, and finally reboot `0xf`. These steps need to be
|
||||||
|
|
@ -41,11 +41,11 @@ repeated if the bootloader is updated via apt.
|
||||||
|
|
||||||
I [enabled the TFTP server][mac-tftp] on my Mac:
|
I [enabled the TFTP server][mac-tftp] on my Mac:
|
||||||
|
|
||||||
```bash
|
{{< figures/code lang=sh >}}
|
||||||
sudo launchctl load -F /System/Library/LaunchDaemons/tftp.plist
|
sudo launchctl load -F /System/Library/LaunchDaemons/tftp.plist
|
||||||
sudo launchctl enable System/com.apple.tftpd
|
sudo launchctl enable System/com.apple.tftpd
|
||||||
sudo launchctl start com.apple.tftpd
|
sudo launchctl start com.apple.tftpd
|
||||||
```
|
{{< /figures/code >}}
|
||||||
|
|
||||||
I’m not sure if the `enable` command is actually necessary. This doesn't
|
I’m not sure if the `enable` command is actually necessary. This doesn't
|
||||||
actually start the `tftpd` daemon. Instead, macOS starts the daemon on demand
|
actually start the `tftpd` daemon. Instead, macOS starts the daemon on demand
|
||||||
|
|
@ -55,11 +55,11 @@ The tftp server looks for files to serve out of **/private/tftpboot**, and those
|
||||||
things need to be world `rwx`, i.e. `777`. By default (this is configurable) the
|
things need to be world `rwx`, i.e. `777`. By default (this is configurable) the
|
||||||
RPi queries for a directory named by its serial number.
|
RPi queries for a directory named by its serial number.
|
||||||
|
|
||||||
```bash
|
{{< figures/code lang=sh >}}
|
||||||
mkdir /private/tftpboot/$raspberry_pi_serial
|
mkdir /private/tftpboot/$raspberry_pi_serial
|
||||||
chmod 777 /private/tftpboot
|
chmod 777 /private/tftpboot
|
||||||
chmod -R 777 /private/tftpboot/*
|
chmod -R 777 /private/tftpboot/*
|
||||||
```
|
{{< /figures/code >}}
|
||||||
|
|
||||||
RPi looks for files of various names in that directory, one in particular by the
|
RPi looks for files of various names in that directory, one in particular by the
|
||||||
name of **start.elf**.
|
name of **start.elf**.
|
||||||
|
|
@ -69,13 +69,13 @@ command line) to pass a `tftp-server` parameter in the DHCP payload. This step
|
||||||
may be optional because you can also set `TFTP_IP` in the **bootconf.txt** above
|
may be optional because you can also set `TFTP_IP` in the **bootconf.txt** above
|
||||||
to specify the IP directly. On my router:
|
to specify the IP directly. On my router:
|
||||||
|
|
||||||
```bash
|
{{< figures/code lang=sh >}}
|
||||||
configure
|
configure
|
||||||
set service dhcp-server shared-network-name LAN subnet $lan_cidr_subnet tftp-server-name $ip_of_mac
|
set service dhcp-server shared-network-name LAN subnet $lan_cidr_subnet tftp-server-name $ip_of_mac
|
||||||
commit
|
commit
|
||||||
save
|
save
|
||||||
exit
|
exit
|
||||||
```
|
{{< /figures/code >}}
|
||||||
|
|
||||||
I also gave my Mac a static IP, and renewed the DHCP lease so it took the new IP
|
I also gave my Mac a static IP, and renewed the DHCP lease so it took the new IP
|
||||||
to make the whole process a little more smooth. Now, it appears the RPi will
|
to make the whole process a little more smooth. Now, it appears the RPi will
|
||||||
|
|
|
||||||
|
|
@ -91,6 +91,14 @@ Our audio processing graph looks like this:
|
||||||
rr.Terminal("destination")));
|
rr.Terminal("destination")));
|
||||||
{{< /figures/railroad >}}
|
{{< /figures/railroad >}}
|
||||||
|
|
||||||
|
{{< figures/railroad id="audioContextDiagram" class="narrow-only" >}}
|
||||||
|
return rr.Diagram(
|
||||||
|
rr.Stack(
|
||||||
|
rr.Terminal("<audio>"),
|
||||||
|
rr.Terminal("Analyzer"),
|
||||||
|
rr.Terminal("destination")));
|
||||||
|
{{< /figures/railroad >}}
|
||||||
|
|
||||||
By itself the AudioContext doesn't actually play any audio. I'll tackle that
|
By itself the AudioContext doesn't actually play any audio. I'll tackle that
|
||||||
next.
|
next.
|
||||||
|
|
||||||
|
|
@ -178,7 +186,7 @@ for (let i = 0; i < samples.length; i++) {
|
||||||
|
|
||||||
The most interesting part of this function starts at line 66 where we get an array of samples from the analyzer node. The `samples` variable is a JavaScript `Float32Array`, with one element for each pixel of width.
|
The most interesting part of this function starts at line 66 where we get an array of samples from the analyzer node. The `samples` variable is a JavaScript `Float32Array`, with one element for each pixel of width.
|
||||||
|
|
||||||
```js {linenos=false}
|
```js {linenostart=30}
|
||||||
samples = new Float32Array(p.width);
|
samples = new Float32Array(p.width);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
138
content/blog/blog.css
Normal file
138
content/blog/blog.css
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
:root {
|
||||||
|
--post-item-highlight-color: #efefef;
|
||||||
|
|
||||||
|
--tag-text-color: #666;
|
||||||
|
--tag-background-color: #eee;
|
||||||
|
--tag-hover-background-color: #bbb;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--post-item-highlight-color: #121212;
|
||||||
|
|
||||||
|
--tag-text-color: #888;
|
||||||
|
--tag-background-color: rgb(40, 40, 40);
|
||||||
|
--tag-hover-background-color: rgb(73, 73, 73);
|
||||||
|
--tag-hover-foreground-color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content > .highlight { margin-block-end: var(--body-item-spacing); }
|
||||||
|
|
||||||
|
.post-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@supports (display: subgrid) {
|
||||||
|
.post-list {
|
||||||
|
align-items: baseline;
|
||||||
|
display: grid;
|
||||||
|
gap: 1em;
|
||||||
|
grid-template-columns:
|
||||||
|
minmax(150px, max-content) minmax(20px, max-content) 3px auto;
|
||||||
|
grid-template-areas: "month day line title";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list li {
|
||||||
|
align-items: baseline;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: grid;
|
||||||
|
gap: 1em;
|
||||||
|
padding: 0.1em;
|
||||||
|
transition: background-color 0.25s;
|
||||||
|
}
|
||||||
|
@supports not (display: subgrid) {
|
||||||
|
.post-list li {
|
||||||
|
grid-template-columns: 100px 20px 3px auto;
|
||||||
|
grid-template-areas: "month day thing title";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports (display: subgrid) {
|
||||||
|
.post-list li {
|
||||||
|
display: subgrid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list li time:nth-of-type(1) {
|
||||||
|
grid-area: month;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list li time:nth-of-type(2) {
|
||||||
|
grid-area: day;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list li h1 {
|
||||||
|
font-family: var(--font-family-body);
|
||||||
|
grid-area: title;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list li:hover {
|
||||||
|
background-color: var(--post-item-highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list h1 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-nav {
|
||||||
|
align-items: baseline;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-nav .next {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-single footer {
|
||||||
|
margin-block-start: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog footer .tags {
|
||||||
|
display: flex;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog footer .tags li {
|
||||||
|
background-color: var(--tag-background-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 75%;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog footer .tags li:hover {
|
||||||
|
background-color: var(--tag-hover-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog footer .tags li a {
|
||||||
|
color: var(--tag-text-color);
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog footer .tags li a:hover {
|
||||||
|
color: var(--tag-hover-foreground-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog footer .tags li + li {
|
||||||
|
margin-inline-start: 1rem;
|
||||||
|
}
|
||||||
154
content/home.css
Normal file
154
content/home.css
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
:root {
|
||||||
|
--animation-offset: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 2rem;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
h1 { font-size: 4.25rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-block-start: 10vh;
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .grid {
|
||||||
|
align-items: baseline;
|
||||||
|
display: grid;
|
||||||
|
gap: 0 2rem;
|
||||||
|
grid-template-columns: min-content fit-content(35%);
|
||||||
|
grid-template-rows: repeat(2, max-content);
|
||||||
|
grid-template-areas:
|
||||||
|
"title blurb"
|
||||||
|
"title nav";
|
||||||
|
padding-inline: 1em;
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
main .grid {
|
||||||
|
gap: 1rem 0;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: repeat(3, max-content);
|
||||||
|
grid-template-areas:
|
||||||
|
"title"
|
||||||
|
"blurb"
|
||||||
|
"nav";
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main h1 {
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
main h1 { text-align: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
main nav {
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
main p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title { grid-area: title; }
|
||||||
|
#content { grid-area: blurb }
|
||||||
|
#nav { grid-area: nav }
|
||||||
|
|
||||||
|
#title > *, #content > *, #nav > * { position: relative; }
|
||||||
|
|
||||||
|
#title > * {
|
||||||
|
animation: left-fade-in var(--transition-duration) ease-in-out;
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
#title > * {
|
||||||
|
animation: top-fade-in var(--transition-duration) ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#content > *, #nav > * {
|
||||||
|
animation: right-fade-in var(--transition-duration) ease-in-out;
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
#content > *, #nav > * {
|
||||||
|
animation: bottom-fade-in var(--transition-duration) ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes left-fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0%;
|
||||||
|
left: var(--animation-offset);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
opacity: 0%;
|
||||||
|
left: var(--animation-offset);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes right-fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0%;
|
||||||
|
left: calc(-1 * var(--animation-offset));
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
opacity: 0%;
|
||||||
|
left: calc(-1 * var(--animation-offset));
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes top-fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0%;
|
||||||
|
bottom: calc(-1 * var(--animation-offset));
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
opacity: 0%;
|
||||||
|
bottom: calc(-1 * var(--animation-offset));
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bottom-fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0%;
|
||||||
|
bottom: var(--animation-offset);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
opacity: 0%;
|
||||||
|
bottom: var(--animation-offset);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.platter {
|
||||||
|
padding: 1.5rem 3rem;
|
||||||
|
}
|
||||||
|
|
@ -13,10 +13,7 @@
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h3 {
|
header h3 { margin-block-end: 0.5rem; }
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
ul { margin-top: 0; }
|
||||||
margin-top: 0;
|
li { margin-block-end: 0.75rem; }
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,41 @@
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main class="main">
|
{{ block "body" . }}
|
||||||
|
{{ block "header" . }}{{ end }}
|
||||||
|
<main class="{{ .Type }}">
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
</main>
|
</main>
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "development/page_info.html" . }}
|
||||||
|
{{ block "footer" . }}{{ end }}
|
||||||
|
{{ end }}
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "Museo_Slab";
|
||||||
|
src: url("{{ `/fonts/Museo_Slab_500.woff2` | absURL }}") format("woff2"),
|
||||||
|
url("{{ `/fonts/Museo_Slab_500.woff` | absURL }}") format("woff");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" as="style" href="{{ `/styles/reset.css` | absURL }}">
|
||||||
|
<link rel="stylesheet" as="style" href="{{ `/styles/root.css` | absURL }}">
|
||||||
|
{{ if not hugo.IsProduction }}
|
||||||
|
<link rel="stylesheet" as="style" href="/styles/development.css">
|
||||||
|
{{ end }}
|
||||||
|
{{ block "styles" . }}{{ end }}
|
||||||
|
{{ if gt (len .Section) 0 }}
|
||||||
|
{{ range .FirstSection.Resources.Match "*.css" }}
|
||||||
|
<link rel="stylesheet" as="style" href="{{ .Permalink }}">
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ range .Resources.Match "*.css" }}
|
||||||
|
<link rel="stylesheet" as="style" href="{{ .Permalink }}">
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ block "scripts" . }}{{ end }}
|
{{ block "scripts" . }}{{ end }}
|
||||||
|
|
||||||
|
<script src="{{ `scripts/site.js` | absURL }}"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,22 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
<div class="platter">
|
||||||
{{ if .Title }}
|
<div class="grid">
|
||||||
<h1 class="main-title">{{ .Title }}</h1>
|
<div id="title">
|
||||||
{{ end }}
|
<h1 class="site">{{ .Title }}</h1>
|
||||||
|
</div>
|
||||||
<section id="homepage-content">
|
<div id="content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</div>
|
||||||
|
{{ with site.Menus.main }}
|
||||||
|
{{ $url := $.RelPermalink }}
|
||||||
|
<div id="nav">
|
||||||
|
<nav class="site bulleted">
|
||||||
|
{{ range . }}
|
||||||
|
<li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||||
|
{{ end }}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
|
|
||||||
{{ define "main" }}
|
|
||||||
{{ if .Title }}
|
|
||||||
<header>
|
|
||||||
<h1 class="main-title">{{ .Title }}</h1>
|
|
||||||
</header>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ $pages := union .RegularPages .Sections }}
|
|
||||||
{{ if .IsHome }}
|
|
||||||
{{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ .Content }}
|
|
||||||
|
|
||||||
<ul class="post-list">
|
|
||||||
{{ $paginator := .Paginate $pages }}
|
|
||||||
{{ range $index, $page := $paginator.Pages }}
|
|
||||||
<li class="post-entry">
|
|
||||||
<header>
|
|
||||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
|
||||||
<div class="post-date">
|
|
||||||
<time class="nobreak" datetime="{{ .Date | time.Format " 2006-01-02" }}">{{ .Date | time.Format "January 2, 2006" }}</time>
|
|
||||||
</div>
|
|
||||||
{{ partial "development/draft_tag.html" . }}
|
|
||||||
</header>
|
|
||||||
{{ if .Description }}
|
|
||||||
<article>{{ .Description }}</article>
|
|
||||||
{{ end }}
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{{ if gt $paginator.TotalPages 1 }}
|
|
||||||
<nav class="main-nav">
|
|
||||||
{{ if $paginator.HasPrev }}
|
|
||||||
<a class="prev" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
|
|
||||||
{{ end }}<!---->
|
|
||||||
{{ if $paginator.HasNext }}
|
|
||||||
<a class="next" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
|
|
||||||
{{ end }}
|
|
||||||
</nav>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
@ -1,39 +1,37 @@
|
||||||
|
{{ define "header" }}
|
||||||
|
{{ partial "header.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<article class="post-single">
|
{{ partial "single_main.html" . }}
|
||||||
<header>
|
|
||||||
{{ partial "development/draft_tag.html" . }}
|
|
||||||
<div class="post-title">
|
|
||||||
<h1>{{ .Title }}</h1>
|
|
||||||
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<section class="post-content">
|
|
||||||
{{ .Content }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Post Tags -->
|
|
||||||
{{ if .Params.tags }}
|
|
||||||
<footer>
|
|
||||||
<ul class="post-tags">
|
|
||||||
{{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
|
|
||||||
<li><a href="{{ $href }}">{{ . }}</a></li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
</footer>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<!-- Post Nav -->
|
{{ define "styles" }}
|
||||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
|
{{ if .Page.Scratch.Get "includes_railroad_diagram" }}
|
||||||
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
<link rel="preload stylesheet" as="style" href="{{ `styles/railroad.css` | absURL }}">
|
||||||
<nav class="post-nav">
|
|
||||||
{{ with $pages.Next . }}
|
|
||||||
<a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
|
|
||||||
{{ end }} {{ with $pages.Prev . }}
|
|
||||||
<a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</nav>
|
<link rel="preload stylesheet" as="style" href="{{ `styles/monokai.css` | absURL }}">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</article>
|
|
||||||
|
{{ define "scripts" }}
|
||||||
|
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
|
||||||
|
<script defer type="module" src="{{ `scripts/railroad.js` | absURL }}"></script>
|
||||||
|
<script defer type="module" src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .Page.Scratch.Get "includes_p5_sketch" }}
|
||||||
|
<script defer src="{{ `scripts/p5-1.4.1.min.js` | absURL }}"></script>
|
||||||
|
<script defer src="{{ `scripts/sketch-utils.js` | absURL }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ range $script := .Resources.Match "*.js" }}
|
||||||
|
{{ $isModule := default true $script.Params.is_module }}
|
||||||
|
<script defer {{ if $isModule }}type="module"{{ end }} src="{{ $script.Permalink | relURL }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "footer" }}
|
||||||
|
{{ partial "footer.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "scripts" }}
|
{{ define "scripts" }}
|
||||||
|
|
|
||||||
4
layouts/_default/single.json
Normal file
4
layouts/_default/single.json
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"title": "{{ .Title }}",
|
||||||
|
"main": "{{ partial `single_main.html` . }}"
|
||||||
|
}
|
||||||
36
layouts/blog/list.html
Normal file
36
layouts/blog/list.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
{{ define "header" }}
|
||||||
|
{{ partial "header.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ $pages := union .RegularPages .Sections }}
|
||||||
|
{{ if .IsHome }}
|
||||||
|
{{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ range .Pages.ByDate.GroupByDate "2006" }}
|
||||||
|
<h2>{{ .Key }}</h2>
|
||||||
|
<ul class="post-list">
|
||||||
|
{{ range .Pages }}
|
||||||
|
{{ if or (not .Draft) (and .Draft (not hugo.IsProduction)) }}
|
||||||
|
<li>
|
||||||
|
<h1>
|
||||||
|
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||||
|
{{ partial "development/draft_tag.html" . }}
|
||||||
|
</h1>
|
||||||
|
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "January" }}</time>
|
||||||
|
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "2" }}</time>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "footer" }}
|
||||||
|
{{ partial "footer.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "styles" }}
|
||||||
|
<link rel="preload stylesheet" as="style" href="{{ `/styles/main.css` | absURL }}">
|
||||||
|
{{ end }}
|
||||||
11
layouts/partials/development/page_info.html
Normal file
11
layouts/partials/development/page_info.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{{ if not hugo.IsProduction }}
|
||||||
|
<div class="platter" id="debug-page-info">
|
||||||
|
<details>
|
||||||
|
<summary>Debug Page Info</summary>
|
||||||
|
<table>
|
||||||
|
<tr><td>.Section</td><td>{{ .Section }}</td></tr>
|
||||||
|
<tr><td>.Type</td><td>{{ .Type }}</td></tr>
|
||||||
|
</table>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
<footer class="footer">
|
<footer class="site">
|
||||||
<p class="slogans"><span>Trans rights are human rights.</span> <span>Black lives matter.</span> <span>Get vaccinated.</span></p>
|
<div>
|
||||||
|
<ul class="slogans">
|
||||||
|
<li>Trans rights are human rights.</li>
|
||||||
|
<li>Black lives matter.</li>
|
||||||
|
<li>Get vaccinated.</li>
|
||||||
|
</ul>
|
||||||
<p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
|
<p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -13,22 +13,6 @@
|
||||||
<meta name="author" content="{{ site.Author.name }}">
|
<meta name="author" content="{{ site.Author.name }}">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<link rel="preload stylesheet" as="style" href="{{ `/styles/main.css` | absURL }}">
|
|
||||||
{{ if or (eq .Kind "list") (eq .Kind "term") }}
|
|
||||||
<link rel="preload stylesheet" as="style" href="{{ `styles/list.css` | absURL }}">
|
|
||||||
{{ end }}
|
|
||||||
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
|
|
||||||
<link rel="preload stylesheet" as="style" href="{{ `styles/railroad.css` | absURL }}">
|
|
||||||
{{ end }}
|
|
||||||
{{ range $stylesheet := .Resources.Match "*.css" }}
|
|
||||||
<link rel="preload stylesheet" as="style" href="{{ $stylesheet.Permalink }}">
|
|
||||||
{{ end }}
|
|
||||||
{{ if in (.Site.BaseURL | string) "localhost" }}
|
|
||||||
<link rel="preload stylesheet" as="style" href="/styles/development.css">
|
|
||||||
{{ end }}
|
|
||||||
{{ if .IsPage }}
|
|
||||||
<link rel="preload stylesheet" as="style" href="{{ `styles/monokai.css` | absURL }}">
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ range $.Scratch.Get "social-list" }}
|
{{ range $.Scratch.Get "social-list" }}
|
||||||
<link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}">
|
<link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}">
|
||||||
|
|
@ -43,6 +27,7 @@
|
||||||
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ site.Title }}">
|
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ site.Title }}">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- Misc -->
|
||||||
{{ if or hugo.IsProduction (eq site.Params.env "production") }}
|
{{ if or hugo.IsProduction (eq site.Params.env "production") }}
|
||||||
{{ template "_internal/schema.html" . }}
|
{{ template "_internal/schema.html" . }}
|
||||||
{{ template "_internal/twitter_cards.html" . }}
|
{{ template "_internal/twitter_cards.html" . }}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,31 @@
|
||||||
<header class="header">
|
<header class="site">
|
||||||
<div class="title-and-menu">
|
<div class="platter">
|
||||||
<h1><a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a></h1>
|
<div class="grid">
|
||||||
|
<h1 class="site">
|
||||||
|
<a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
{{ $url := .RelPermalink }}
|
{{ $url := .RelPermalink }}
|
||||||
{{ with site.Menus.main }}
|
{{ with site.Menus.main }}
|
||||||
<nav class="menu">
|
<nav class="site bulleted">
|
||||||
<menu>
|
|
||||||
{{ range . }}
|
{{ range . }}
|
||||||
<li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
{{ if eq .URL $url }}
|
||||||
|
<li class="active"><span>{{ .Name }}</span></li>
|
||||||
|
{{ else }}
|
||||||
|
<li><a href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</menu>
|
|
||||||
</nav>
|
</nav>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="social">
|
<nav class="site social">
|
||||||
<menu>
|
|
||||||
<li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
|
<li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
|
||||||
<li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
|
<li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
|
||||||
<li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
|
<li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
|
||||||
{{ with .OutputFormats.Get "rss" }}
|
{{ with .OutputFormats.Get "rss" }}
|
||||||
<li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
|
<li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</menu>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
37
layouts/partials/single_main.html
Normal file
37
layouts/partials/single_main.html
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<article class="post-single">
|
||||||
|
<header>
|
||||||
|
{{ partial "development/draft_tag.html" . }}
|
||||||
|
<div class="post-title">
|
||||||
|
<h1>{{ .Title }}</h1>
|
||||||
|
{{ if not (eq .Type "page") }}
|
||||||
|
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="post-content">
|
||||||
|
{{ .Content }}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
{{ if .Params.tags }}
|
||||||
|
<ul class="tags">
|
||||||
|
{{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
|
||||||
|
<li><a href="{{ $href }}">{{ . }}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||||
|
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
||||||
|
<nav class="post-nav">
|
||||||
|
{{ with $pages.Prev . }}
|
||||||
|
<a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
|
||||||
|
{{ end }}
|
||||||
|
{{ with $pages.Next . }}
|
||||||
|
<a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
|
||||||
|
{{ end }}
|
||||||
|
</nav>
|
||||||
|
{{ end }}
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
{{ define "main" }}
|
{{ define "header" }}
|
||||||
|
{{ partial "header.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
<article id="resume" class="post-single">
|
{{ define "main" }}
|
||||||
<header class="post-title">
|
<header class="post-title">
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -8,18 +10,8 @@
|
||||||
<section class="post-content">
|
<section class="post-content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</section>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
<!-- Post Nav -->
|
{{ define "footer" }}
|
||||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
|
{{ partial "footer.html" . }}
|
||||||
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
|
||||||
<nav class="post-nav">
|
|
||||||
{{ with $pages.Next . }}
|
|
||||||
<a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
|
|
||||||
{{ end }} {{ with $pages.Prev . }}
|
|
||||||
<a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
|
|
||||||
{{ end }}
|
|
||||||
</nav>
|
|
||||||
{{ end }}
|
|
||||||
</article>
|
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
5
layouts/shortcodes/figures/code.html
Normal file
5
layouts/shortcodes/figures/code.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{{ $lang := .Get "lang" }}
|
||||||
|
{{ $trimmedCode := trim .Inner "\n " }}
|
||||||
|
<figure class="code">
|
||||||
|
{{ transform.Highlight $trimmedCode $lang }}
|
||||||
|
</figure>
|
||||||
|
|
@ -1,14 +1,10 @@
|
||||||
{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
|
{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
|
||||||
{{ $resized_img := $img.Fit "1280x1280" }}
|
{{ $resized_img := $img.Fit "1280x1280" }}
|
||||||
<div class="centered">
|
|
||||||
<figure>
|
<figure>
|
||||||
<a href="{{ $img.RelPermalink }}">
|
<a href="{{ $img.RelPermalink }}">
|
||||||
<img src="{{ $resized_img.RelPermalink }}" />
|
<img src="{{ $resized_img.RelPermalink }}" />
|
||||||
</a>
|
</a>
|
||||||
{{ if $img.Title }}
|
{{ if $img.Title }}
|
||||||
<figcaption>
|
<figcaption>{{ $img.Title }}</figcaption>
|
||||||
<p>{{ $img.Title }}</p>
|
|
||||||
</figcaption>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,9 @@
|
||||||
{{- $id := .Get "id" | default (.Get 0) -}}
|
{{- $id := .Get "id" | default (.Get 0) -}}
|
||||||
{{- $class := .Get "class" | default (.Get 1) -}}
|
{{- $class := .Get "class" | default (.Get 1) -}}
|
||||||
{{- $title := .Get "title" | default "YouTube Video" }}
|
{{- $title := .Get "title" | default "YouTube Video" }}
|
||||||
<div class="centered">
|
|
||||||
<figure>
|
<figure>
|
||||||
<div class="youtube">
|
<div class="youtube">
|
||||||
<iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
|
<iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,21 @@
|
||||||
{{ define "main" }}
|
{{ define "header" }}
|
||||||
|
{{ partial "header.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "main" }}
|
||||||
<article class="post-single">
|
<article class="post-single">
|
||||||
<header class="post-title">
|
<header>
|
||||||
|
{{ partial "development/draft_tag.html" . }}
|
||||||
|
<div class="post-title">
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<section class="post-content">
|
<section class="post-content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "footer" }}
|
||||||
|
{{ partial "footer.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
BIN
static/fonts/Museo_Slab_500.woff
Normal file
BIN
static/fonts/Museo_Slab_500.woff
Normal file
Binary file not shown.
BIN
static/fonts/Museo_Slab_500.woff2
Normal file
BIN
static/fonts/Museo_Slab_500.woff2
Normal file
Binary file not shown.
|
|
@ -20,12 +20,12 @@ export default funcs;
|
||||||
|
|
||||||
export const Options = {
|
export const Options = {
|
||||||
DEBUG: false, // if true, writes some debug information into attributes
|
DEBUG: false, // if true, writes some debug information into attributes
|
||||||
VS: 8, // minimum vertical separation between things. For a 3px stroke, must be at least 4
|
VS: 11, // minimum vertical separation between things. For a 3px stroke, must be at least 4
|
||||||
AR: 10, // radius of arcs
|
AR: 11, // radius of arcs
|
||||||
DIAGRAM_CLASS: 'railroad-diagram', // class to put on the root <svg>
|
DIAGRAM_CLASS: 'railroad-diagram', // class to put on the root <svg>
|
||||||
STROKE_ODD_PIXEL_LENGTH: false, // is the stroke width an odd (1px, 3px, etc) pixel length?
|
STROKE_ODD_PIXEL_LENGTH: false, // is the stroke width an odd (1px, 3px, etc) pixel length?
|
||||||
INTERNAL_ALIGNMENT: 'center', // how to align items when they have extra space. left/right/center
|
INTERNAL_ALIGNMENT: 'center', // how to align items when they have extra space. left/right/center
|
||||||
CHAR_WIDTH: 8.5, // width of each monospace character. play until you find the right value for your font
|
CHAR_WIDTH: 11, // width of each monospace character. play until you find the right value for your font
|
||||||
COMMENT_CHAR_WIDTH: 7, // comments are in smaller text by default
|
COMMENT_CHAR_WIDTH: 7, // comments are in smaller text by default
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
16
static/scripts/site.js
Normal file
16
static/scripts/site.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* site.js
|
||||||
|
* Eryn Wells <eryn@erynwells.me>
|
||||||
|
*/
|
||||||
|
|
||||||
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const siteHeader = document.querySelector("header.site");
|
||||||
|
if (!siteHeader) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
siteHeader.classList.add("visible");
|
||||||
|
|
||||||
|
const documentReferrer = new URL(document.referrer);
|
||||||
|
if (documentReferrer.pathname === "/") {
|
||||||
|
siteHeader.classList.add("animated");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -20,3 +20,39 @@
|
||||||
.draft:after {
|
.draft:after {
|
||||||
content: "]";
|
content: "]";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#debug-page-info {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border: 1px solid var(--separator-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 4px 5px 5px var(--box-shadow-color);
|
||||||
|
font-size: 1.75rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
position: fixed;
|
||||||
|
left: 2rem;
|
||||||
|
bottom: 2rem;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debug-page-info details {
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debug-page-info summary {
|
||||||
|
font-family: var(--font-family-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
#debug-page-info table {
|
||||||
|
display: block;
|
||||||
|
margin-block-start: 0.5em;
|
||||||
|
margin-inline-start: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debug-page-info td {
|
||||||
|
border: 1px solid rgb(var(--dk-gray));
|
||||||
|
padding: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debug-page-info tr:nth-child(even) {
|
||||||
|
background-color: var(--separator-color);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,501 +0,0 @@
|
||||||
/* main.css
|
|
||||||
* Global stylesheet for erynwells.me
|
|
||||||
* Eryn Wells <eryn@erynwells.me>
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--header: 8rem;
|
|
||||||
--footer: calc(8rem + var(--safe-bottom));
|
|
||||||
|
|
||||||
--light: #fff;
|
|
||||||
--light-dim: #888;
|
|
||||||
--dark: rgb(22, 22, 22);
|
|
||||||
--highlight-color: rgb(50, 186, 228);
|
|
||||||
--hljs-bg: #111;
|
|
||||||
|
|
||||||
--safe-bottom: 0;
|
|
||||||
|
|
||||||
--body-padding: 4rem;
|
|
||||||
--body-width: 80rem;
|
|
||||||
|
|
||||||
--body-background-color: var(--light);
|
|
||||||
--body-foreground-color: var(--dark);
|
|
||||||
|
|
||||||
--heading-color: var(--body-foreground-color);
|
|
||||||
--link-color: var(--highlight-color);
|
|
||||||
|
|
||||||
--menu-icon-size: 20px;
|
|
||||||
--social-menu-padding: 1rem;
|
|
||||||
|
|
||||||
--tag-text-color: var(--dark);
|
|
||||||
--tag-background-color: #eee;
|
|
||||||
--tag-hover-background-color: #bbb;
|
|
||||||
|
|
||||||
--separator-color: #888;
|
|
||||||
|
|
||||||
--twitter-icon: url(/icons/twitter.svg);
|
|
||||||
--github-icon: url(/icons/github.svg);
|
|
||||||
--instagram-icon: url(/icons/instagram.svg);
|
|
||||||
--rss-icon: url(/icons/rss.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--body-background-color: var(--dark);
|
|
||||||
--body-foreground-color: var(--light);
|
|
||||||
|
|
||||||
--tag-text-color: var(--light-dim);
|
|
||||||
--tag-background-color: rgb(40, 40, 40);
|
|
||||||
--tag-hover-background-color: rgb(73, 73, 73);
|
|
||||||
|
|
||||||
--twitter-icon: url(/icons/twitter-dark.svg);
|
|
||||||
--github-icon: url(/icons/github-dark.svg);
|
|
||||||
--instagram-icon: url(/icons/instagram-dark.svg);
|
|
||||||
--rss-icon: url(/icons/rss-dark.svg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--link-color);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-position: from-font;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--body-background-color);
|
|
||||||
color: var(--body-foreground-color);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: var(--body-width);
|
|
||||||
padding: 0 var(--body-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
border-inline-start: 4px solid var(--separator-color);
|
|
||||||
padding-inline-start: 2rem;
|
|
||||||
margin-inline-start: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption h4 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
margin-inline-start: 0;
|
|
||||||
margin-inline-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure a,
|
|
||||||
figure a:hover {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure img {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-bottom: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure + p {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure .youtube {
|
|
||||||
line-height: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
width: var(--body-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
figure.bordered {
|
|
||||||
padding: 0.5rem;
|
|
||||||
border: 2px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.centered {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: 'SF Pro Rounded', ui-rounded, 'Arial Rounded MT', system-ui, -apple-system, sans-serif;
|
|
||||||
/*font-family: Palatino, Rockwell, Courier;*/
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: 'SF Pro', sans-serif;
|
|
||||||
font-size: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header,
|
|
||||||
.footer {
|
|
||||||
padding: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Header
|
|
||||||
*/
|
|
||||||
|
|
||||||
.header {
|
|
||||||
align-items: baseline;
|
|
||||||
border-bottom: 1px solid var(--separator-color);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
margin: 0;
|
|
||||||
margin-right: 2rem;
|
|
||||||
font-size: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 a {
|
|
||||||
color: var(--heading-color);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 a:hover {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu > a + a:before {
|
|
||||||
color: var(--heading-color);
|
|
||||||
content: "•";
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu menu,
|
|
||||||
.social menu {
|
|
||||||
display: inline-block;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-transform: lowercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu menu li,
|
|
||||||
.social menu li {
|
|
||||||
display: inline-block;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu menu li + li:before,
|
|
||||||
.social menu li + li:before {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu menu li + li:before {
|
|
||||||
content: "•";
|
|
||||||
}
|
|
||||||
|
|
||||||
.p5-sketch {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social menu li + li {
|
|
||||||
margin-left: var(--social-menu-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social {
|
|
||||||
display: flex;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social a {
|
|
||||||
background-image: var(--url);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: var(--menu-icon-size);
|
|
||||||
display: block;
|
|
||||||
height: var(--menu-icon-size);
|
|
||||||
width: var(--menu-icon-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social a span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social > li + li:before {
|
|
||||||
color: var(--dark);
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-and-menu {
|
|
||||||
align-items: baseline;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.youtube iframe {
|
|
||||||
aspect-ratio: 16 / 9;
|
|
||||||
margin-bottom: -3px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 475px) {
|
|
||||||
:root {
|
|
||||||
--menu-icon-size: 18px;
|
|
||||||
--social-menu-padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-and-menu {
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 320px) {
|
|
||||||
.header h1 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Footer
|
|
||||||
*/
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
align-items: center;
|
|
||||||
border-top: 1px solid var(--separator-color);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p + p {
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 740px) {
|
|
||||||
.slogans span {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Main
|
|
||||||
*/
|
|
||||||
|
|
||||||
.main > header {
|
|
||||||
align-items: baseline;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
margin: 3.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main :first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main h1 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main h1,
|
|
||||||
.main h2,
|
|
||||||
.main h3,
|
|
||||||
.main h4,
|
|
||||||
.main h5,
|
|
||||||
.main h6 {
|
|
||||||
margin-top: 3.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main figcaption h4 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .main-title {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list {
|
|
||||||
margin-top: 1rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list h1,
|
|
||||||
.post-list h2,
|
|
||||||
.post-list h3,
|
|
||||||
.post-list h4,
|
|
||||||
.post-list h5,
|
|
||||||
.post-list h6 {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list li + li {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list article {
|
|
||||||
color: gray;
|
|
||||||
font-style: oblique;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav {
|
|
||||||
align-items: baseline;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav .next {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-single footer {
|
|
||||||
margin-block-start: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.post-tags {
|
|
||||||
display: flex;
|
|
||||||
padding-inline-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.post-tags li {
|
|
||||||
background-color: var(--tag-background-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
display: inline-block;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.post-tags li:hover {
|
|
||||||
background-color: var(--tag-hover-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.post-tags li a {
|
|
||||||
color: var(--tag-text-color);
|
|
||||||
display: block;
|
|
||||||
font-size: 1.75rem;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.post-tags li a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.post-tags li + li {
|
|
||||||
margin-inline-start: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title {
|
|
||||||
align-items: baseline;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title > h1 {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-block-end: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title > .post-date {
|
|
||||||
color: var(--light-dim);
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.75rem;
|
|
||||||
inline-size: min-content;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-block-start: 0.5rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 620px) {
|
|
||||||
.main h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list {
|
|
||||||
padding-inline-start: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list h2 {
|
|
||||||
display: block;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list time {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 704px) {
|
|
||||||
html {
|
|
||||||
font-size: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Helpers
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* For <span>s that shouldn't break. */
|
|
||||||
.nobreak {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,26 @@
|
||||||
.chroma { line-height: 1.4; }
|
:root {
|
||||||
/* Line */ .chroma .line { display: flex; }
|
--highlight-background-color: rgb(var(--super-lt-gray));
|
||||||
|
--highlight-foreground-color: var(--foreground-body-color);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chroma {
|
||||||
|
line-height: var(--body-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
color: var(--highlight-foreground-color);
|
||||||
|
background-color: var(--highlight-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chroma {
|
||||||
|
color: var(--highlight-foreground-color);
|
||||||
|
background-color: var(--highlight-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
/* Background */ .bg { color: #272822; background-color: #fafafa }
|
|
||||||
/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
|
|
||||||
/* Other */ .chroma .x { }
|
/* Other */ .chroma .x { }
|
||||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||||
/* CodeLine */ .chroma .cl { }
|
/* CodeLine */ .chroma .cl { }
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,27 @@
|
||||||
:root {
|
:root {
|
||||||
--rect-fill: #fafafa;
|
--rect-fill: rgba(var(--mid-blue), 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--rect-fill: #272822;
|
--rect-fill: rgb(var(--mid-blue), 0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram path {
|
svg.railroad-diagram path {
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
stroke: var(--body-foreground-color);
|
stroke: var(--foreground-body-color);
|
||||||
fill: none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram text {
|
svg.railroad-diagram text {
|
||||||
font-family: var(--monospace-font-family);
|
font-family: var(--font-family-monospace);
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
fill: var(--body-foreground-color);
|
fill: var(--foreground-body-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram text.diagram-text {
|
svg.railroad-diagram text.diagram-text {
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram text.diagram-arrow {
|
svg.railroad-diagram text.diagram-arrow {
|
||||||
|
|
@ -34,7 +33,7 @@ svg.railroad-diagram text.label {
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram text.comment {
|
svg.railroad-diagram text.comment {
|
||||||
font: italic 12px monospace;
|
font: italic 12px var(--font-family-monospace);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram g.non-terminal text {
|
svg.railroad-diagram g.non-terminal text {
|
||||||
|
|
@ -43,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
|
||||||
|
|
||||||
svg.railroad-diagram rect {
|
svg.railroad-diagram rect {
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
stroke: var(--body-foreground-color);
|
stroke: var(--foreground-body-color);
|
||||||
fill: var(--rect-fill);
|
fill: var(--rect-fill);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,12 +53,12 @@ svg.railroad-diagram rect.group-box {
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram path.diagram-text {
|
svg.railroad-diagram path.diagram-text {
|
||||||
stroke-width: 3;
|
stroke-width: 2;
|
||||||
stroke: var(--body-foreground-color);
|
stroke: var(--foreground-body-color);
|
||||||
fill: var(--body-background-color);
|
fill: var(--background-body-color);
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
|
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
|
||||||
fill: #eee;
|
fill: var(--rect-fill);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,38 +2,13 @@
|
||||||
* Eryn Wells <eryn@erynwells.me>
|
* Eryn Wells <eryn@erynwells.me>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
h1,
|
* { box-sizing: border-box; }
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, textarea {
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong,
|
|
||||||
b {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
|
@ -43,7 +18,6 @@ table {
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea {
|
||||||
padding: 0;
|
|
||||||
font: inherit;
|
font: inherit;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -57,13 +31,9 @@ input[type='submit'] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:-webkit-autofill,
|
input:-webkit-autofill,
|
||||||
textarea:-webkit-autofill {
|
textarea:-webkit-autofill {
|
||||||
box-shadow: 0 0 0 6rem var(--white) inset;
|
box-shadow: 0 0 0 6rem var(--white) inset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre { margin: 0; }
|
||||||
|
|
|
||||||
455
static/styles/root.css
Normal file
455
static/styles/root.css
Normal file
|
|
@ -0,0 +1,455 @@
|
||||||
|
:root {
|
||||||
|
--black: 0, 0, 0;
|
||||||
|
--sub-dk-gray: 16, 16, 16;
|
||||||
|
--dk-gray: 32, 32, 32;
|
||||||
|
--mid-gray: 128, 128, 128;
|
||||||
|
--lt-gray: 223, 223, 223;
|
||||||
|
--super-lt-gray: 240, 240, 240;
|
||||||
|
--white: 255, 255, 255;
|
||||||
|
|
||||||
|
--lt-blue: 69, 212, 243;
|
||||||
|
--mid-blue: 26, 169, 239;
|
||||||
|
--dk-blue: 63, 46, 231;
|
||||||
|
--purple: 161, 49, 232;
|
||||||
|
--lilac: 187, 121, 245;
|
||||||
|
|
||||||
|
--background-color: rgb(var(--white));
|
||||||
|
--foreground-body-color: rgba(var(--black), 0.8);
|
||||||
|
--foreground-header-color: rgb(var(--black));
|
||||||
|
--site-nav-link-color: rgb(var(--lt-blue));
|
||||||
|
|
||||||
|
--separator-color: rgb(var(--lt-gray));
|
||||||
|
--header-border-color: var(--separator-color);
|
||||||
|
--footer-border-color: var(--separator-color);
|
||||||
|
|
||||||
|
--box-shadow-color: rgba(var(--lt-gray), 0.8);
|
||||||
|
--header-box-shadow-color: var(--box-shadow-color);
|
||||||
|
|
||||||
|
--font-family-body: Verdana, Helvetica, sans-serif;
|
||||||
|
--font-family-monospace: "Courier New", Courier, monospace;
|
||||||
|
--font-family-heading: Museo_Slab, Tahoma, sans-serif;
|
||||||
|
--font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
|
||||||
|
--font-size-min: 7px;
|
||||||
|
--font-size-max: 8px;
|
||||||
|
|
||||||
|
--body-item-spacing: 1em;
|
||||||
|
--body-line-height: 1.4;
|
||||||
|
--body-header-line-height: 1.1;
|
||||||
|
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||||
|
|
||||||
|
--content-width: 80rem;
|
||||||
|
|
||||||
|
--transition-duration: 0.7s;
|
||||||
|
|
||||||
|
--social-menu-padding: 1rem;
|
||||||
|
--menu-icon-size: 20px;
|
||||||
|
--twitter-icon: url(/icons/twitter.svg);
|
||||||
|
--github-icon: url(/icons/github.svg);
|
||||||
|
--instagram-icon: url(/icons/instagram.svg);
|
||||||
|
--rss-icon: url(/icons/rss.svg);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background-color: rgb(var(--black));
|
||||||
|
--foreground-body-color: rgba(var(--white), 0.8);
|
||||||
|
--foreground-header-color: rgb(var(--white));
|
||||||
|
--separator-color: rgb(var(--dk-gray));
|
||||||
|
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||||
|
--body-code-background-color: rgb(var(--dk-gray));
|
||||||
|
|
||||||
|
--twitter-icon: url(/icons/twitter-dark.svg);
|
||||||
|
--github-icon: url(/icons/github-dark.svg);
|
||||||
|
--instagram-icon: url(/icons/instagram-dark.svg);
|
||||||
|
--rss-icon: url(/icons/rss-dark.svg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(var(--mid-blue));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 0.12em;
|
||||||
|
}
|
||||||
|
a:visited { color: none; }
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-inline-start: 4px solid var(--separator-color);
|
||||||
|
padding-inline-start: 2rem;
|
||||||
|
margin-inline-start: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--foreground-body-color);
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: var(--body-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: var(--body-code-background-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-family: var(--font-family-monospace);
|
||||||
|
display: inline-block;
|
||||||
|
padding-inline: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
font-size: 75%;
|
||||||
|
margin-block-start: 0.2em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
margin-block: 0 var(--body-item-spacing);
|
||||||
|
margin-inline: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.bordered {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 2px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure a,
|
||||||
|
figure a:hover {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure img {
|
||||||
|
border-radius: 6px;
|
||||||
|
height: auto;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure .youtube {
|
||||||
|
border-radius: 6px;
|
||||||
|
line-height: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.site {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-block-start: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.site > div {
|
||||||
|
border-top: 1px solid var(--footer-border-color);
|
||||||
|
padding-block-start: 2rem;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.site ul {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.site .slogans li {
|
||||||
|
margin-inline-start: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.site p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.site p + p {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 740px) {
|
||||||
|
footer.site .slogans span {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--foreground-header-color);
|
||||||
|
font-family: var(--font-family-heading);
|
||||||
|
margin-block: 3.5rem 1rem;
|
||||||
|
line-height: var(--body-header-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:first-child, h2:first-child, h3:first-child,
|
||||||
|
h4:first-child, h5:first-child, h6:first-child {
|
||||||
|
margin-block-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--foreground-color);
|
||||||
|
font-family: var(--font-family-body);
|
||||||
|
font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: var(--content-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-block-start: 10.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.site {
|
||||||
|
color: rgb(var(--mid-blue));
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
@supports (background-clip: text) {
|
||||||
|
h1.site {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
|
||||||
|
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
|
||||||
|
radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
|
||||||
|
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||||
|
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||||
|
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.site * { color: inherit; }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.site {
|
||||||
|
display: flex;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0.5rem;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
header.site.visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
header.site.animated {
|
||||||
|
animation: site-header-slide-in var(--transition-duration) ease-out;
|
||||||
|
}
|
||||||
|
@keyframes site-header-slide-in {
|
||||||
|
from {
|
||||||
|
top: -200px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header.site h1 {
|
||||||
|
font-family: var(--font-family-site-heading);
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.site .grid {
|
||||||
|
align-items: baseline;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5em;
|
||||||
|
grid-template-columns: max-content auto max-content;
|
||||||
|
grid-template-rows: minmax(2em, min-content);
|
||||||
|
grid-template-areas:
|
||||||
|
"title menu social";
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: var(--content-width);
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
header.site .grid {
|
||||||
|
grid-template-columns: repeat(2, max-content);
|
||||||
|
grid-template-rows: repeat(2, max-content);
|
||||||
|
grid-template-areas:
|
||||||
|
"title social"
|
||||||
|
"menu menu";
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header.site .platter {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.site .grid nav:first-of-type {
|
||||||
|
grid-area: menu;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.site .grid nav:last-of-type {
|
||||||
|
grid-area: social;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main h1 { font-size: 1.6em; }
|
||||||
|
main h2 { font-size: 1.5em; }
|
||||||
|
main h3 { font-size: 1.4em; }
|
||||||
|
main h4 { font-size: 1.3em; }
|
||||||
|
|
||||||
|
nav.site {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
font-size: max(1.5rem, 80%);
|
||||||
|
justify-content: start;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
list-style: none;
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.site li {
|
||||||
|
color: var(--site-nav-link-color);
|
||||||
|
display: block;
|
||||||
|
margin-inline-end: 0.5em;
|
||||||
|
}
|
||||||
|
nav.site .active { font-weight: bold; }
|
||||||
|
|
||||||
|
nav.bulleted li:first-child::before {
|
||||||
|
color: var(--foreground-color);
|
||||||
|
content: "";
|
||||||
|
margin-inline-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.bulleted li::before {
|
||||||
|
color: var(--foreground-header-color);
|
||||||
|
content: "•";
|
||||||
|
font-size: 60%;
|
||||||
|
font-weight: normal;
|
||||||
|
opacity: 80%;
|
||||||
|
margin-inline-end: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
line-height: var(--body-line-height);
|
||||||
|
}
|
||||||
|
p { margin-block-end: var(--body-item-spacing); }
|
||||||
|
p:last-child { margin-block-end: 0; }
|
||||||
|
|
||||||
|
.social menu li + li {
|
||||||
|
margin-left: var(--social-menu-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
display: flex;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social a {
|
||||||
|
background-image: var(--url);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: var(--menu-icon-size);
|
||||||
|
display: block;
|
||||||
|
height: var(--menu-icon-size);
|
||||||
|
width: var(--menu-icon-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social a span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social > li + li:before {
|
||||||
|
color: var(--dark);
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
align-items: baseline;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0 4rem;
|
||||||
|
margin-bottom: var(--body-item-spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title h1 {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-block: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title > .post-date {
|
||||||
|
color: var(--light-dim);
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
inline-size: min-content;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-block-start: 0.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p5-sketch {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube iframe {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
margin-bottom: -3px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** SYNTAX HIGHLIGHTING **/
|
||||||
|
|
||||||
|
.highlight code {
|
||||||
|
background-color: inherit;
|
||||||
|
margin-block: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .line {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .ln a {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-use-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .cl {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** HELPER CLASSES **/
|
||||||
|
|
||||||
|
.centered { text-align: center; }
|
||||||
|
.nobreak { white-space: nowrap; }
|
||||||
|
|
||||||
|
.platter {
|
||||||
|
background: var(--background-color);
|
||||||
|
border: 1px solid var(--header-border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 4px 5px 5px var(--header-box-shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible { visibility: visible; }
|
||||||
Loading…
Add table
Add a link
Reference in a new issue