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]
|
||||
anchorLineNos = true
|
||||
lineNos = true
|
||||
lineNumbersInTable = false
|
||||
noClasses = false
|
||||
|
||||
[mediaTypes]
|
||||
|
|
@ -32,6 +33,10 @@ name = 'Eryn Wells'
|
|||
identifier = 'resume'
|
||||
name = 'Résumé'
|
||||
url = '/resume/'
|
||||
[[menu.main]]
|
||||
identifier = 'about'
|
||||
name = 'About'
|
||||
url = '/about/'
|
||||
|
||||
[outputFormats]
|
||||
[outputFormats.RSS]
|
||||
|
|
@ -41,7 +46,7 @@ name = 'Eryn Wells'
|
|||
|
||||
[outputs]
|
||||
home = ['HTML', 'RSS']
|
||||
page = ['HTML']
|
||||
page = ['HTML', 'JSON']
|
||||
|
||||
[params]
|
||||
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.
|
||||
|
||||
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
|
||||
Este es un poco de texto sobre Eryn: quién es, qué le gusta, y por qué existe este sitio.
|
||||
|
|
|
|||
|
|
@ -1,56 +1,5 @@
|
|||
# Hi! 👋🏻
|
||||
---
|
||||
title: Eryn Rachel Wells
|
||||
---
|
||||
|
||||
I'm Eryn. My pronouns are [she/her][p]. This is my personal page. Welcome!
|
||||
|
||||
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>
|
||||
Software engineer, potter, musician, and overall nerd. This is my website.
|
||||
|
|
|
|||
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
|
||||
on the RPi:
|
||||
|
||||
```bash
|
||||
{{< figures/code lang=sh >}}
|
||||
fw=/lib/firmware/raspberrypi/bootloader/stable/pieeprom-2020-09-03.bin
|
||||
rpi-eeprom-config $fw > ~/bootconf.txt
|
||||
vi ~/bootconf.txt
|
||||
rpi-eeprom-config --out ~/pieeprom-new.bin --config ~/bootconf.txt $fw
|
||||
sudo rpi-eeprom-update -d -f ~/pieeprom-new.bin
|
||||
sudo reboot
|
||||
```
|
||||
{{< /figures/code >}}
|
||||
|
||||
My updated bootconf.txt is:
|
||||
|
||||
```conf
|
||||
{{< figures/code lang=cfg >}}
|
||||
[all]
|
||||
BOOT_UART=1
|
||||
WAKE_ON_GPIO=0
|
||||
|
|
@ -33,7 +33,7 @@ TFTP_FILE_TIMEOUT=30000
|
|||
ENABLE_SELF_UPDATE=1
|
||||
DISABLE_HDMI=0
|
||||
BOOT_ORDER=0xf412
|
||||
```
|
||||
{{< /figures/code >}}
|
||||
|
||||
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
|
||||
|
|
@ -41,11 +41,11 @@ repeated if the bootloader is updated via apt.
|
|||
|
||||
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 enable System/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
|
||||
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
|
||||
RPi queries for a directory named by its serial number.
|
||||
|
||||
```bash
|
||||
{{< figures/code lang=sh >}}
|
||||
mkdir /private/tftpboot/$raspberry_pi_serial
|
||||
chmod 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
|
||||
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
|
||||
to specify the IP directly. On my router:
|
||||
|
||||
```bash
|
||||
{{< figures/code lang=sh >}}
|
||||
configure
|
||||
set service dhcp-server shared-network-name LAN subnet $lan_cidr_subnet tftp-server-name $ip_of_mac
|
||||
commit
|
||||
save
|
||||
exit
|
||||
```
|
||||
{{< /figures/code >}}
|
||||
|
||||
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
|
||||
|
|
@ -88,4 +88,4 @@ attempt a TFTP boot, and I see queries in the logs on my Mac.
|
|||
|
||||
[eeprom]: https://www.raspberrypi.org/documentation/hardware/raspberrypi/bcm2711_bootloader_config.md
|
||||
[eeprom-gh]: https://github.com/raspberrypi/documentation/blob/master/hardware/raspberrypi/bcm2711_bootloader_config.md
|
||||
[mac-tftp]: https://www.unixfu.ch/start-a-tftp-server-on-your-mac/
|
||||
[mac-tftp]: https://www.unixfu.ch/start-a-tftp-server-on-your-mac/
|
||||
|
|
|
|||
|
|
@ -91,6 +91,14 @@ Our audio processing graph looks like this:
|
|||
rr.Terminal("destination")));
|
||||
{{< /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
|
||||
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.
|
||||
|
||||
```js {linenos=false}
|
||||
```js {linenostart=30}
|
||||
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;
|
||||
}
|
||||
|
||||
header h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
header h3 { margin-block-end: 0.5rem; }
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
ul { margin-top: 0; }
|
||||
li { margin-block-end: 0.75rem; }
|
||||
|
|
|
|||
|
|
@ -3,11 +3,41 @@
|
|||
{{ partial "head.html" . }}
|
||||
|
||||
<body>
|
||||
<main class="main">
|
||||
{{ block "body" . }}
|
||||
{{ block "header" . }}{{ end }}
|
||||
<main class="{{ .Type }}">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "development/page_info.html" . }}
|
||||
{{ block "footer" . }}{{ end }}
|
||||
{{ end }}
|
||||
</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 }}
|
||||
|
||||
<script src="{{ `scripts/site.js` | absURL }}"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,22 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ if .Title }}
|
||||
<h1 class="main-title">{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
|
||||
<section id="homepage-content">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
|
||||
<div class="platter">
|
||||
<div class="grid">
|
||||
<div id="title">
|
||||
<h1 class="site">{{ .Title }}</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
</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 }}
|
||||
|
|
|
|||
|
|
@ -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" }}
|
||||
<article class="post-single">
|
||||
<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>
|
||||
{{ partial "single_main.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<!-- 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>
|
||||
{{ define "styles" }}
|
||||
{{ if .Page.Scratch.Get "includes_railroad_diagram" }}
|
||||
<link rel="preload stylesheet" as="style" href="{{ `styles/railroad.css` | absURL }}">
|
||||
{{ end }}
|
||||
<link rel="preload stylesheet" as="style" href="{{ `styles/monokai.css` | absURL }}">
|
||||
{{ end }}
|
||||
|
||||
{{ 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 }}
|
||||
|
||||
<!-- Post Nav -->
|
||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
|
||||
{{ 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>
|
||||
{{ 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 }}
|
||||
</article>
|
||||
|
||||
{{ 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 }}
|
||||
|
||||
{{ 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">
|
||||
<p class="slogans"><span>Trans rights are human rights.</span> <span>Black lives matter.</span> <span>Get vaccinated.</span></p>
|
||||
<p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
|
||||
<footer class="site">
|
||||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -13,22 +13,6 @@
|
|||
<meta name="author" content="{{ site.Author.name }}">
|
||||
{{ 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" }}
|
||||
<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 }}">
|
||||
{{ end }}
|
||||
|
||||
<!-- Misc -->
|
||||
{{ if or hugo.IsProduction (eq site.Params.env "production") }}
|
||||
{{ template "_internal/schema.html" . }}
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,31 @@
|
|||
<header class="header">
|
||||
<div class="title-and-menu">
|
||||
<h1><a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a></h1>
|
||||
<header class="site">
|
||||
<div class="platter">
|
||||
<div class="grid">
|
||||
<h1 class="site">
|
||||
<a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
|
||||
</h1>
|
||||
|
||||
{{ $url := .RelPermalink }}
|
||||
{{ with site.Menus.main }}
|
||||
<nav class="menu">
|
||||
<menu>
|
||||
{{ range . }}
|
||||
<li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||
{{ $url := .RelPermalink }}
|
||||
{{ with site.Menus.main }}
|
||||
<nav class="site bulleted">
|
||||
{{ range . }}
|
||||
{{ if eq .URL $url }}
|
||||
<li class="active"><span>{{ .Name }}</span></li>
|
||||
{{ else }}
|
||||
<li><a href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
</menu>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
<nav class="site social">
|
||||
<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(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
|
||||
{{ with .OutputFormats.Get "rss" }}
|
||||
<li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="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(--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>
|
||||
{{ with .OutputFormats.Get "rss" }}
|
||||
<li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
|
||||
{{ end }}
|
||||
</menu>
|
||||
</nav>
|
||||
</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,25 +1,17 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<article id="resume" class="post-single">
|
||||
<header class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
|
||||
<section class="post-content">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
|
||||
<!-- Post Nav -->
|
||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
|
||||
{{ 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>
|
||||
|
||||
{{ define "header" }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<header class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
|
||||
<section class="post-content">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "footer" }}
|
||||
{{ partial "footer.html" . }}
|
||||
{{ 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")) }}
|
||||
{{ $resized_img := $img.Fit "1280x1280" }}
|
||||
<div class="centered">
|
||||
<figure>
|
||||
<a href="{{ $img.RelPermalink }}">
|
||||
<img src="{{ $resized_img.RelPermalink }}" />
|
||||
</a>
|
||||
{{ if $img.Title }}
|
||||
<figcaption>
|
||||
<p>{{ $img.Title }}</p>
|
||||
</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
</div>
|
||||
<figure>
|
||||
<a href="{{ $img.RelPermalink }}">
|
||||
<img src="{{ $resized_img.RelPermalink }}" />
|
||||
</a>
|
||||
{{ if $img.Title }}
|
||||
<figcaption>{{ $img.Title }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@
|
|||
{{- $id := .Get "id" | default (.Get 0) -}}
|
||||
{{- $class := .Get "class" | default (.Get 1) -}}
|
||||
{{- $title := .Get "title" | default "YouTube Video" }}
|
||||
<div class="centered">
|
||||
<figure>
|
||||
<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>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<figure>
|
||||
<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>
|
||||
</div>
|
||||
</figure>
|
||||
{{ end -}}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
{{ define "main" }}
|
||||
{{ define "header" }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<article class="post-single">
|
||||
<header class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<header>
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
<div class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="post-content">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ define "footer" }}
|
||||
{{ partial "footer.html" . }}
|
||||
{{ 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 = {
|
||||
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
|
||||
AR: 10, // radius of arcs
|
||||
VS: 11, // minimum vertical separation between things. For a 3px stroke, must be at least 4
|
||||
AR: 11, // radius of arcs
|
||||
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?
|
||||
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
|
||||
};
|
||||
|
||||
|
|
|
|||
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 {
|
||||
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; }
|
||||
/* Line */ .chroma .line { display: flex; }
|
||||
:root {
|
||||
--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 { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
|
|
|
|||
|
|
@ -1,28 +1,27 @@
|
|||
:root {
|
||||
--rect-fill: #fafafa;
|
||||
--rect-fill: rgba(var(--mid-blue), 0.1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--rect-fill: #272822;
|
||||
--rect-fill: rgb(var(--mid-blue), 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
svg.railroad-diagram path {
|
||||
stroke-width: 2;
|
||||
stroke: var(--body-foreground-color);
|
||||
stroke: var(--foreground-body-color);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text {
|
||||
font-family: var(--monospace-font-family);
|
||||
font-family: var(--font-family-monospace);
|
||||
text-anchor: middle;
|
||||
white-space: pre;
|
||||
fill: var(--body-foreground-color);
|
||||
fill: var(--foreground-body-color);
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.diagram-text {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.diagram-arrow {
|
||||
|
|
@ -34,7 +33,7 @@ svg.railroad-diagram text.label {
|
|||
}
|
||||
|
||||
svg.railroad-diagram text.comment {
|
||||
font: italic 12px monospace;
|
||||
font: italic 12px var(--font-family-monospace);
|
||||
}
|
||||
|
||||
svg.railroad-diagram g.non-terminal text {
|
||||
|
|
@ -43,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
|
|||
|
||||
svg.railroad-diagram rect {
|
||||
stroke-width: 2;
|
||||
stroke: var(--body-foreground-color);
|
||||
stroke: var(--foreground-body-color);
|
||||
fill: var(--rect-fill);
|
||||
}
|
||||
|
||||
|
|
@ -54,12 +53,12 @@ svg.railroad-diagram rect.group-box {
|
|||
}
|
||||
|
||||
svg.railroad-diagram path.diagram-text {
|
||||
stroke-width: 3;
|
||||
stroke: var(--body-foreground-color);
|
||||
fill: var(--body-background-color);
|
||||
stroke-width: 2;
|
||||
stroke: var(--foreground-body-color);
|
||||
fill: var(--background-body-color);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
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>
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, textarea {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
|
|
@ -43,7 +18,6 @@ table {
|
|||
button,
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
@ -57,13 +31,9 @@ input[type='submit'] {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill {
|
||||
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