diff --git a/.gitattributes b/.gitattributes index 90fc636..0b5b3d4 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,5 +1,3 @@ *.jpg filter=lfs diff=lfs merge=lfs -text *.jpeg filter=lfs diff=lfs merge=lfs -text *.pxm filter=lfs diff=lfs merge=lfs -text -*.mov filter=lfs diff=lfs merge=lfs -text -*.mp4 filter=lfs diff=lfs merge=lfs -text diff --git a/.gitignore b/.gitignore index 2ca23d2..13dbcb9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,7 @@ node_modules/ public/ -/documentation/mirrors/ /resources/ .hugo_build.lock *.log *.orig *~ - -# Backup files for Markdown files processed in-place with sed -*.md-e diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 6563459..0000000 --- a/.gitmodules +++ /dev/null @@ -1,18 +0,0 @@ -[submodule "themes/platters"] - path = themes/platters - url = nutmeg:git/hugo-theme-platters.git -[submodule "themes/termlite"] - path = themes/termlite - url = git@github.com:erynofwales/hugo-theme-termlite.git -[submodule "themes/resource-builders"] - path = themes/resource-builders - url = git@github.com:erynofwales/hugo-resource-builders.git -[submodule "themes/image-utils"] - path = themes/image-utils - url = git@github.com:erynofwales/hugo-image-utilities.git -[submodule "themes/photostream"] - path = themes/photostream - url = git@github.com:erynofwales/hugo-theme-photostream.git -[submodule "themes/feeds"] - path = themes/feeds - url = git@github.com:erynofwales/hugo-theme-feeds.git diff --git a/.nvim/ftdetect/html.lua b/.nvim/ftdetect/html.lua index 1c8cf86..6fedaca 100644 --- a/.nvim/ftdetect/html.lua +++ b/.nvim/ftdetect/html.lua @@ -2,7 +2,7 @@ local filetypedetectGroup = vim.api.nvim_create_augroup("HugoHTMLTemplates", {clear = true}) vim.api.nvim_create_autocmd({"BufRead", "BufNewFile"}, { - pattern = {"**/layouts/**/*.html"}, + pattern = {"*/layouts/*.html"}, group = filetypedetectGroup, command = "set ft=gohtmltmpl", }) diff --git a/Makefile b/Makefile index 72bf627..494d569 100644 --- a/Makefile +++ b/Makefile @@ -1,9 +1,5 @@ # Eryn Wells -BUILD_DIR=public - -CONTENT_PATH=content - DEPLOY_USER=eryn DEPLOY_HOSTNAME=nutmeg.erynwells.me DEPLOY_PATH=/srv/www/erynwells.me/html @@ -16,17 +12,15 @@ NETHACK_LOGFILE_DATA_FILE=data/nethack/logfile/$(HOSTNAME).json .PHONY: site deploy clean -site: +site: nethack @echo "Building site" - hugo --buildFuture --enableGitInfo --destination "$(BUILD_DIR)" + hugo deploy: site @echo "Deploying to $(DEPLOY_LOCATION)" - rsync -avz --no-times --no-perms --delete "$(BUILD_DIR)/" "$(DEPLOY_LOCATION)" + rsync -avz --no-times --no-perms --delete public/ $(DEPLOY_LOCATION) git tag -f deploy-$(shell date +%Y-%m-%d) -deployall: nethack deploy - nethack: nethack-logfile nethack-commit nethack-logfile: $(NETHACK_LOGFILE) @@ -39,4 +33,4 @@ nethack-commit: $(NETHACK_LOGFILE_DATA_FILE) if ! git diff --quiet $<; then git commit -m "Update Nethack logfile for $(HOSTNAME)" -- $<; fi clean: - rm -rf "$(BUILD_DIR)/" + rm -rf public/ diff --git a/archetypes/link.md b/archetypes/link.md deleted file mode 100644 index 5a8d835..0000000 --- a/archetypes/link.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "{{ replace .Name "-" " " | title }}" -slug: link-{{ .Name }} -date: {{ .Date }} -categories: links -draft: true -tags: [] ---- - diff --git a/scripts/erynwells_me/__init__.py b/archetypes/other.md similarity index 100% rename from scripts/erynwells_me/__init__.py rename to archetypes/other.md diff --git a/archetypes/weeknotes.md b/archetypes/weeknotes.md deleted file mode 100644 index 1bae5a0..0000000 --- a/archetypes/weeknotes.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: "Notes on {{ time.Now.Format "2006" }}W%%WEEK_NUMBER%%" -slug: weeknotes-{{ time.Now.Format "2006" }}w%%WEEK_NUMBER%% -date: {{ .Date | time.Format "2006-01-02" }} -categories: weeknotes -tags: - - Weeknotes -draft: true ---- - diff --git a/assets/css/099_format_tweaks.css b/assets/css/099_format_tweaks.css deleted file mode 100644 index 453f2cc..0000000 --- a/assets/css/099_format_tweaks.css +++ /dev/null @@ -1,18 +0,0 @@ - - - - - -/************************ - * PARAGRAPH-SPACED LIST - ************************/ - -p + .paragraph-spaced-list { - margin-block-start: var(--space-paragraph); -} - -.paragraph-spaced-list { - li + li { - margin-block-start: var(--space-paragraph); - } -} diff --git a/assets/css/099_home_latest.css b/assets/css/099_home_latest.css deleted file mode 100644 index 7fb9e44..0000000 --- a/assets/css/099_home_latest.css +++ /dev/null @@ -1,42 +0,0 @@ -.home-latest { - display: grid; - grid-column: main-start / main-end; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: min-content min-content; - grid-template-areas: - "blog1 blog1 blog2 blog2" - "photo1 photo2 photo3 photo4"; - - .home-latest__blog { - margin-block-end: var(--space-m); - } - - .home-latest__blog:nth-of-type(1) { - grid-area: blog1; - border-right: 2px dashed var(--gray6); - padding-inline-end: var(--space-s); - } - - .home-latest__blog:nth-of-type(2) { - grid-area: blog2; - padding-inline-start: var(--space-s); - } - - .home-latest__photo { - } -} - -@media screen and (max-width: 480px) { - .home-latest { - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(min-content, 4); - grid-template-areas: - "blog1 blog2" - "photo1 photo2" - "photo3 photo4"; - } -} - -p + .home-latest { - margin-block-start: var(--space-paragraph); -} diff --git a/assets/css/099_nethack.css b/assets/css/099_nethack.css deleted file mode 100644 index 3667e30..0000000 --- a/assets/css/099_nethack.css +++ /dev/null @@ -1,100 +0,0 @@ - - - - - -/****************** - * NETHACK LOGFILE - ******************/ - -#dungeon-background { - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; - z-index: -1; - filter: brightness(0.3); -} - -.nethack-logfile { - margin-inline-start: 0; - padding-inline-start: 0; - - .nethack-logentry { - align-items: first baseline; - display: grid; - grid-template-columns: min-content min-content auto min-content; - grid-template-areas: - "list-marker entry-marker entry-date entry-character-descriptor" - ". . entry-description entry-description" - ". . entry-stats entry-stats"; - gap: var(--space-xs); - margin-inline-start: 0; - } -} - - -.nethack-logentry { - &:not(:last-child) { - margin-block-end: var(--space-l); - } - - &::before { - grid-area: list-marker; - } - - .nethack-logentry__marker { - grid-area: entry-marker; - } - - .nethack-logentry__date { - grid-area: entry-date; - line-height: 1; - margin: 0; - padding: 0; - } - - .nethack-logentry__character-descriptor { - font-family: var(--font-family-monospace); - font-size: var(--text-s); - grid-area: entry-character-descriptor; - line-height: 1; - white-space: nowrap; - } - - .nethack-logentry__description { - grid-area: entry-description; - margin: 0; - } - - .nethack-logentry__stats { - border: 0; - color: var(--text-color-secondary); - font-family: var(--font-family-monospace); - font-size: var(--text-s); - grid-area: entry-stats; - margin-block: 0; - width: 100%; - -webkit-border-horizontal-spacing: 0; - -webkit-border-vertical-spacing: 0; - } - - .nethack-logentry__stats { - padding: 0; - text-transform: uppercase; - vertical-align: bottom; - white-space: nowrap; - - thead { - font-weight: bolder; - } - - .nethack-logentry__score, - .nethack-logentry__hp, - .nethack-logentry__level { - width: 16rem; - text-align: right; - } - } -} diff --git a/assets/images/memes/not-doing-it.png b/assets/images/memes/not-doing-it.png deleted file mode 100644 index 0dd9974..0000000 Binary files a/assets/images/memes/not-doing-it.png and /dev/null differ diff --git a/assets/scripts/nethack/dungeon.js b/assets/scripts/nethack/dungeon.js index 6203f94..0c8eabb 100644 --- a/assets/scripts/nethack/dungeon.js +++ b/assets/scripts/nethack/dungeon.js @@ -402,11 +402,11 @@ class TunnelGenerator { } /** - * Dig a corridor from fromPoint to toPoint, assuming that both points are - * adjacent to valid locations for doors on the map. + * Dig a corridor from fromPoint to toPoint, assuming that both points are adjacent to valid locations for doors on + * the map. * - * This is as close a copy of dig_corridor in the Nethack source as I could - * muster. It's not exactly pretty. This method assumed + * This is as close a copy of dig_corridor in the Nethack source as I could muster. It's not exactly pretty. This + * method assumed */ #digCorridorFromPointToPoint(p, fromPoint, toPoint) { const MAX_STEPS = 500; @@ -711,8 +711,6 @@ new p5(p => { p.setup = () => { const container = document.querySelector('#dungeon-background'); - console.assert(container, "Missing #dungeon-background element"); - canvasWidth = parseFloat(getComputedStyle(container).width); canvasHeight = parseFloat(getComputedStyle(container).height); @@ -733,11 +731,9 @@ new p5(p => { grid = new Grid(gridBounds.size.width, gridBounds.size.height); grid.generate(p, NRandomRoomsGenerator, TunnelGenerator); - }; + } p.draw = () => { - console.log("Drawing"); - p.textSize(CELL_HEIGHT); for (let y = 0; y < grid.height; y++) { diff --git a/assets/scripts/rubiks/scrambler.js b/assets/scripts/rubiks/scrambler.js deleted file mode 100644 index 10a03c3..0000000 --- a/assets/scripts/rubiks/scrambler.js +++ /dev/null @@ -1,123 +0,0 @@ -class RubiksCubeScrambler extends HTMLElement { - static #RandomMoveHysteresisMaxLength = 2; - - #shadowRoot; - #movesListElement; - - #numberOfMovesToGenerate = 25; - - constructor() { - super(); - this.#shadowRoot = this.attachShadow({ mode: "open" }); - } - - scramble() { - console.log("Randomizing Rubik's cube..."); - - const movesList = this.#movesListElement; - - while (movesList.childElementCount > this.#numberOfMovesToGenerate) { - movesList.removeChild(movesList.lastChild); - } - - let randomMoveHysteresis = []; - - for (let i = 0; i < this.#numberOfMovesToGenerate; i++) { - const randomMove = this.#randomMove(randomMoveHysteresis); - - let moveItem; - if (i < movesList.childElementCount) { - moveItem = movesList.children[i]; - } else { - moveItem = document.createElement("li"); - movesList.appendChild(moveItem); - } - - moveItem.classList.add("scrambler__move"); - moveItem.classList.remove("scrambler__move--start", "scrambler__move--end"); - - if (randomMove.includes("2")) { - moveItem.classList.add("scrambler__move--start"); - } else if (randomMove.includes("'")) { - moveItem.classList.add("scrambler__move--end"); - } - - moveItem.innerText = randomMove; - } - } - - #randomMove(hysteresis) { - const faces = "FBLRUD"; - - let move; - do { - move = faces.charAt(Math.floor(Math.random() * faces.length)); - } while (hysteresis && hysteresis.includes(move)); - - if (hysteresis) { - hysteresis.unshift(move); - while (hysteresis.length > RubiksCubeScrambler.#RandomMoveHysteresisMaxLength) { - hysteresis.pop(); - } - } - - const modifierFactor = Math.random(); - if (modifierFactor < 0.33333) { - move = "2" + move; - } else if (modifierFactor < 0.666666) { - move = move + "'"; - } - - return move; - } - - #removeAllMoves() { - const element = this.#movesListElement; - while (element.hasChildNodes()) { - element.removeChild(element.lastChild); - } - } - - // MARK: Custom Element - - connectedCallback() { - let template = document.getElementById("rubiks-cube-scrambler-template"); - console.assert(template, "Couldn't find RubiksCubeScrambler component template in the document"); - - const shadowRoot = this.#shadowRoot; - shadowRoot.appendChild(template.content.cloneNode(true)); - - this.#movesListElement = shadowRoot.querySelector(".scrambler__move-list"); - - shadowRoot - .querySelector("button[name='scramble']") - .addEventListener("click", () => this.scramble()); - - const patternLengthInputElement = shadowRoot.querySelector(".scrambler__pattern-length > input"); - patternLengthInputElement.value = this.#numberOfMovesToGenerate; - patternLengthInputElement.addEventListener("input", event => { - try { - const integerValue = parseInt(event.target.value); - this.#numberOfMovesToGenerate = integerValue; - } catch (e) { - console.error("Non-integer value of pattern length field", e); - } - }); - - this.scramble(); - } - - attributeChangedCallback(name, oldValue, newValue) { - console.debug("RubiksCubeScrambler attribute changed", name, oldValue, newValue); - if (name === "count") { - try { - let newIntValue = parseInt(newValue); - this.#numberOfMovesToGenerate = newIntValue; - } catch (e) { - console.error("`count` attribute should have an integer value.", e); - } - } - } -} - -window.customElements.define("rubiks-cube-scrambler", RubiksCubeScrambler); diff --git a/assets/styles/blog/002_grid.css b/assets/styles/blog/002_grid.css new file mode 100644 index 0000000..d1f289a --- /dev/null +++ b/assets/styles/blog/002_grid.css @@ -0,0 +1,9 @@ +/* Eryn Wells */ + +article > :is(h1, h2, h3, h4, h5, h6) { + grid-column: content-start / content-end; +} + +.blog.list { + gap: 4rem 0; +} diff --git a/assets/styles/development.css b/assets/styles/development.css new file mode 100644 index 0000000..fb1a795 --- /dev/null +++ b/assets/styles/development.css @@ -0,0 +1,105 @@ +/* Eryn Wells */ + +details:has(.photo-params.debug) { + width: 100%; +} + +.draft { + color: red; + display: inline-block; + font-family: 'SF Pro', sans-serif; + font-size: 1.5rem; + font-weight: bold; + letter-spacing: 3px; + text-transform: uppercase; +} + +.draft:before { + content: "["; +} + +.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); + box-sizing: border-box; + font-size: 12px; + padding: 0.5rem; + position: fixed; + left: 12px; + bottom: 12px; + width: max-content; +} + +#debug-page-info > details { + margin: 0.5rem; +} + +#debug-page-info > summary { + font-family: var(--font-family-heading); +} + +#debug-page-info h4 { + margin-block: 1rem; + margin-inline-start: 2rem; +} + +#debug-page-info table { + border: 0; + border-color: rgb(var(--dk-gray)); + display: block; + margin-inline-start: 2rem; + width: 100%; +} + +#debug-page-info table > tbody { + border: 1px solid; +} + +#debug-page-info table > tbody + tbody { + border-top: 1px solid; +} + +#debug-page-info td { + border: 1px dotted; + border-left: 1px solid; + padding: 0.3em; +} + +#debug-page-info table > tbody > tr:nth-child(even) { + background-color: var(--separator-color); +} + +table.photo-params.debug { + --inline-start-padding: 2rem; + + box-sizing: border-box; + width: calc(100% - var(--inline-start-padding)); + margin-block-start: 1rem; + margin-inline-start: var(--inline-start-padding); +} + +.photo-params.debug > thead { + font-size: 2rem; + font-weight: bold; + border-bottom: 2px solid rgb(var(--dk-gray)); +} + +.photo-params.debug > tbody > tr > td { + border: 1px solid var(--photo-params-border-color); + vertical-align: top; +} + +.photo-params.debug > tbody > tr > td:first-of-type { + width: max-content; +} + +.photo-params.debug > tbody > tr > td:last-of-type { + word-wrap: anywhere; + overflow: scroll; +} diff --git a/assets/styles/home.css b/assets/styles/home.css new file mode 100644 index 0000000..5a20cd5 --- /dev/null +++ b/assets/styles/home.css @@ -0,0 +1,207 @@ +@layer page { + :root { + --animation-offset: 6px; + --font-size-max: 12px; + --line-height: 1.85; + } + + body { + display: flex; + font-size: 2rem; + justify-content: center; + margin: auto; + } + + h1 { + font-size: 5rem; + line-height: 1.3; + margin: 0; + padding: 0; + } + + @media (max-width: 599px) { + h1 { + font-size: 4.25rem; + } + } + + header.site h1 { white-space: normal; } + + @media (max-width: 599px) { + html { + --font-size-scale-factor: 1.33vmax; + } + } + + main { + display: block; + line-height: var(--landing-line-height); + margin-block-start: 10vh; + width: inherit; + } + + main header { + align-items: first baseline; + display: grid; + gap: 0 2rem; + grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr); + grid-template-rows: repeat(2, max-content); + grid-template-areas: + "title blurb" + "title nav"; + padding-inline: 1em; + margin-inline: 2rem; + max-width: 40rem; + } + @media (max-width: 599px) { + main header { + gap: 1rem 0; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, max-content); + grid-template-areas: + "title" + "blurb" + "nav"; + justify-items: center; + text-align: center; + } + } + + main h1 { + letter-spacing: 0.025em; + text-align: end; + } + + @media (max-width: 599px) { + main h1 { + text-align: center; + } + } + + nav { + align-items: baseline; + justify-self: center; + display: flex; + font-size: 90%; + list-style: none; + text-transform: lowercase; + } + + nav > li::before { + } + + p { + margin: 0; + line-height: var(--line-height); + } + + h1 { + grid-area: title; + } + + #content { + grid-area: blurb + } + + nav { + grid-area: nav + } + + h1, + #content>p, + nav { + position: relative; + } + + h1 { + animation: left-fade-in var(--transition-duration) ease-in-out; + } + @media (max-width: 599px) { + h1 { + animation: top-fade-in var(--transition-duration) ease-in-out; + } + } + + #content>p, + nav { + animation: right-fade-in var(--transition-duration) ease-in-out; + } + @media (max-width: 599px) { + #content>p, + 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; + } +} diff --git a/assets/styles/monokai.css b/assets/styles/monokai.css new file mode 100644 index 0000000..271e13f --- /dev/null +++ b/assets/styles/monokai.css @@ -0,0 +1,198 @@ +:root { + --highlight-background-color: rgb(250, 250, 250); + --highlight-foreground-color: var(--foreground-body-color); +} + +.chroma { + line-height: var(--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); +} + +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } +/* CodeLine */ .chroma .cl { } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ +.chroma .ln { + color: #7f7f7f; + background-color: var(--background-color); + padding: 0 0.4em 0 0.4em; + user-select: none; + white-space: pre; +} +.chroma .ln a[href] { + color: inherit; +} +/* Keyword */ .chroma .k { color: #00a8c8 } +/* KeywordConstant */ .chroma .kc { color: #00a8c8 } +/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #00a8c8 } +/* KeywordReserved */ .chroma .kr { color: #00a8c8 } +/* KeywordType */ .chroma .kt { color: #00a8c8 } +/* Name */ .chroma .n { color: #111111 } +/* NameAttribute */ .chroma .na { color: #75af00 } +/* NameBuiltin */ .chroma .nb { color: #111111 } +/* NameBuiltinPseudo */ .chroma .bp { color: #111111 } +/* NameClass */ .chroma .nc { color: #75af00 } +/* NameConstant */ .chroma .no { color: #00a8c8 } +/* NameDecorator */ .chroma .nd { color: #75af00 } +/* NameEntity */ .chroma .ni { color: #111111 } +/* NameException */ .chroma .ne { color: #75af00 } +/* NameFunction */ .chroma .nf { color: #75af00 } +/* NameFunctionMagic */ .chroma .fm { color: #111111 } +/* NameLabel */ .chroma .nl { color: #111111 } +/* NameNamespace */ .chroma .nn { color: #111111 } +/* NameOther */ .chroma .nx { color: #75af00 } +/* NameProperty */ .chroma .py { color: #111111 } +/* NameTag */ .chroma .nt { color: #f92672 } +/* NameVariable */ .chroma .nv { color: #111111 } +/* NameVariableClass */ .chroma .vc { color: #111111 } +/* NameVariableGlobal */ .chroma .vg { color: #111111 } +/* NameVariableInstance */ .chroma .vi { color: #111111 } +/* NameVariableMagic */ .chroma .vm { color: #111111 } +/* Literal */ .chroma .l { color: #ae81ff } +/* LiteralDate */ .chroma .ld { color: #d88200 } +/* LiteralString */ .chroma .s { color: #d88200 } +/* LiteralStringAffix */ .chroma .sa { color: #d88200 } +/* LiteralStringBacktick */ .chroma .sb { color: #d88200 } +/* LiteralStringChar */ .chroma .sc { color: #d88200 } +/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 } +/* LiteralStringDoc */ .chroma .sd { color: #d88200 } +/* LiteralStringDouble */ .chroma .s2 { color: #d88200 } +/* LiteralStringEscape */ .chroma .se { color: #8045ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 } +/* LiteralStringInterpol */ .chroma .si { color: #d88200 } +/* LiteralStringOther */ .chroma .sx { color: #d88200 } +/* LiteralStringRegex */ .chroma .sr { color: #d88200 } +/* LiteralStringSingle */ .chroma .s1 { color: #d88200 } +/* LiteralStringSymbol */ .chroma .ss { color: #d88200 } +/* LiteralNumber */ .chroma .m { color: #ae81ff } +/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } +/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } +/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } +/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } +/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } +/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } +/* Operator */ .chroma .o { color: #f92672 } +/* OperatorWord */ .chroma .ow { color: #f92672 } +/* Punctuation */ .chroma .p { color: #111111 } +/* Comment */ .chroma .c { color: #75715e } +/* CommentHashbang */ .chroma .ch { color: #75715e } +/* CommentMultiline */ .chroma .cm { color: #75715e } +/* CommentSingle */ .chroma .c1 { color: #75715e } +/* CommentSpecial */ .chroma .cs { color: #75715e } +/* CommentPreproc */ .chroma .cp { color: #75715e } +/* CommentPreprocFile */ .chroma .cpf { color: #75715e } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } + +@media (prefers-color-scheme: dark) { + /* Background */ .bg { color: #f8f8f2; background-color: #272822 } + /* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color: #960050; background-color: #1e0010 } + /* CodeLine */ .chroma .cl { } + /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } + /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } + /* LineHighlight */ .chroma .hl { background-color: #ffffcc } + /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } + /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } + /* Keyword */ .chroma .k { color: #66d9ef } + /* KeywordConstant */ .chroma .kc { color: #66d9ef } + /* KeywordDeclaration */ .chroma .kd { color: #66d9ef } + /* KeywordNamespace */ .chroma .kn { color: #f92672 } + /* KeywordPseudo */ .chroma .kp { color: #66d9ef } + /* KeywordReserved */ .chroma .kr { color: #66d9ef } + /* KeywordType */ .chroma .kt { color: #66d9ef } + /* Name */ .chroma .n { } + /* NameAttribute */ .chroma .na { color: #a6e22e } + /* NameBuiltin */ .chroma .nb { color: inherit; } + /* NameBuiltinPseudo */ .chroma .bp { } + /* NameClass */ .chroma .nc { color: #a6e22e } + /* NameConstant */ .chroma .no { color: #66d9ef } + /* NameDecorator */ .chroma .nd { color: #a6e22e } + /* NameEntity */ .chroma .ni { } + /* NameException */ .chroma .ne { color: #a6e22e } + /* NameFunction */ .chroma .nf { color: #a6e22e } + /* NameFunctionMagic */ .chroma .fm { } + /* NameLabel */ .chroma .nl { } + /* NameNamespace */ .chroma .nn { } + /* NameOther */ .chroma .nx { color: #a6e22e } + /* NameProperty */ .chroma .py { } + /* NameTag */ .chroma .nt { color: #f92672 } + /* NameVariable */ .chroma .nv { color: inherit; } + /* NameVariableClass */ .chroma .vc { } + /* NameVariableGlobal */ .chroma .vg { } + /* NameVariableInstance */ .chroma .vi { } + /* NameVariableMagic */ .chroma .vm { } + /* Literal */ .chroma .l { color: #ae81ff } + /* LiteralDate */ .chroma .ld { color: #e6db74 } + /* LiteralString */ .chroma .s { color: #e6db74 } + /* LiteralStringAffix */ .chroma .sa { color: #e6db74 } + /* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } + /* LiteralStringChar */ .chroma .sc { color: #e6db74 } + /* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } + /* LiteralStringDoc */ .chroma .sd { color: #e6db74 } + /* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } + /* LiteralStringEscape */ .chroma .se { color: #ae81ff } + /* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } + /* LiteralStringInterpol */ .chroma .si { color: #e6db74 } + /* LiteralStringOther */ .chroma .sx { color: #e6db74 } + /* LiteralStringRegex */ .chroma .sr { color: #e6db74 } + /* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } + /* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } + /* LiteralNumber */ .chroma .m { color: #ae81ff } + /* LiteralNumberBin */ .chroma .mb { color: #ae81ff } + /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } + /* LiteralNumberHex */ .chroma .mh { color: #ae81ff } + /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } + /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } + /* LiteralNumberOct */ .chroma .mo { color: #ae81ff } + /* Operator */ .chroma .o { color: #f92672 } + /* OperatorWord */ .chroma .ow { color: #f92672 } + /* Punctuation */ .chroma .p { color: inherit; } + /* Comment */ .chroma .c { color: #75715e } + /* CommentHashbang */ .chroma .ch { color: #75715e } + /* CommentMultiline */ .chroma .cm { color: #75715e } + /* CommentSingle */ .chroma .c1 { color: #75715e } + /* CommentSpecial */ .chroma .cs { color: #75715e } + /* CommentPreproc */ .chroma .cp { color: #75715e } + /* CommentPreprocFile */ .chroma .cpf { color: #75715e } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { color: #f92672 } + /* GenericEmph */ .chroma .ge { font-style: italic } + /* GenericError */ .chroma .gr { } + /* GenericHeading */ .chroma .gh { } + /* GenericInserted */ .chroma .gi { color: #a6e22e } + /* GenericOutput */ .chroma .go { } + /* GenericPrompt */ .chroma .gp { } + /* GenericStrong */ .chroma .gs { font-weight: bold } + /* GenericSubheading */ .chroma .gu { color: #75715e } + /* GenericTraceback */ .chroma .gt { } + /* GenericUnderline */ .chroma .gl { } + /* TextWhitespace */ .chroma .w { } +} diff --git a/assets/styles/nethack.css b/assets/styles/nethack.css new file mode 100644 index 0000000..aee5fce --- /dev/null +++ b/assets/styles/nethack.css @@ -0,0 +1,113 @@ +/* Eryn Wells */ + +:root { + --logentry-background-color: var(--tag-background-color); + --logentry-foreground-color: var(--tag-text-color); + + --separator-color: rgb(var(--dk-gray)); + --box-shadow-color: rgba(var(--dk-gray), 0.8); + --body-code-background-color: rgb(var(--dk-gray)); + + --heading-color: rgb(var(--white)); + --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); + + --html-background-color: rgb(var(--black)); + --color: rgba(var(--white), 0.8); + + --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); + --platter-backdrop-filter: brightness(0.66) blur(10px); + + --tag-foreground-color: rgb(var(--sub-lt-gray)); + --tag-background-color: rgb(var(--dk-gray)); + --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); + --tag-hover-background-color: rgb(var(--super-dk-gray)); + --tag-hover-foreground-color: rgb(var(--mid-gray)); +} + +main { + background: rgba(var(--black), 0.6); +} + +#dungeon-background { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + z-index: -1; + filter: brightness(0.3); +} + +.logfile { + margin-block-start: 0; + margin-inline-start: 0; + padding-inline-start: 0; +} + +.logfile > li { + align-items: first baseline; + color: var(--logentry-foreground-color); + background-color: var(--logentry-background-color); + border-radius: 6px; + display: grid; + grid-template-columns: 32px auto auto; + row-gap: 1rem; + margin-block-start: 2rem; + margin-inline-start: 0; + padding: 3rem; +} + +.logfile > li > .date { + grid-column-start: 2; + grid-row-start: 1; +} + +.logfile > li > h4.date { + margin: 0; + padding: 0; +} + +.logfile > li > .character-descriptor { + color: #aaa; + font-size: 1.5rem; + font-weight: 700; + grid-column-start: 3; + grid-row-start: 1; + text-align: right; + text-transform: uppercase; +} + +.logfile > li > p { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 2; + margin: 0; +} + +.logfile > li > table.stats { + border: 0; + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 3; + margin-block-end: 0; + width: 100%; + -webkit-border-horizontal-spacing: 0; + -webkit-border-vertical-spacing: 0; +} + +.logfile > li > table.stats > tbody > tr > td { + border: 0; + color: #aaa; + font-size: 1.5rem; + font-weight: 700; + padding: 0; + text-transform: uppercase; + vertical-align: bottom; +} + +.logfile > li > table.stats > tbody > tr > td.score, +.logfile > li > table.stats > tbody > tr > td.hp, +.logfile > li > table.stats > tbody > tr > td.level { + width: 16rem; + text-align: right; +} diff --git a/assets/styles/photos/001_photos.css b/assets/styles/photos/001_photos.css new file mode 100644 index 0000000..5979819 --- /dev/null +++ b/assets/styles/photos/001_photos.css @@ -0,0 +1,87 @@ +{{ $gridSize := site.Params.photos.gridSize }} +:root { + --date-item-background-color: rgb(var(--lt-gray)); + + --photo-params-background-color: rgb(var(--lt-gray)); + --photo-params-container-background-color: rgb(var(--super-lt-gray)); + --photo-params-color: rgb(var(--sub-dk-gray)); + --photo-params-border-color: rgb(var(--super-lt-gray)); +} +@media (prefers-color-scheme: dark) { + :root { + --date-item-background-color: rgb(var(--dk-gray)); + + --photo-params-background-color: rgb(var(--dk-gray)); + --photo-params-container-background-color: rgb(var(--sub-dk-gray)); + --photo-params-color: rgb(var(--super-lt-gray)); + --photo-params-border-color: rgb(var(--sub-dk-gray)); + } +} + +.photos.list { + box-sizing: border-box; + max-width: none; + padding: 0 var(--body-item-spacing); + width: 100%; +} + +.photos.list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr)); + gap: 4px; +} + +.photos.list > * { + margin-block-end: 0; + grid-column: auto; +} + +.photos.list > a { + display: block; + line-height: 0; +} + +.photos.list > a > img { + image-orientation: from-image; +} + +.photos.list > div { + background-color: var(--date-item-background-color); + width: 100%; + height: 100%; + display: flex; + align-items: center; +} + +.photos.list > div > h6 { + display: block; + font-size: 5rem; + margin: 0 auto; + letter-spacing: 0; +} + +.photos.list > div > h6 > span { + text-align: end; + width: min-content; + position: relative; + display: inline-block; + padding-inline-end: 20px; +} + +.photos.list > div > h6 > span::after { + top: 6px; + right: 0px; + position: absolute; + display: block; + content: "⏵︎"; + font-size: 80%; +} +@media (max-width: calc(24px + 400px + 4px)) { + .photos.list > div > h6 > span { + width: max-content; + padding-block: calc(0.25 * var(--body-item-spacing)); + } + .photos.list > div > h6 > span::after { + content: ""; + } +} diff --git a/assets/styles/photos/050_page.css b/assets/styles/photos/050_page.css new file mode 100644 index 0000000..7af5542 --- /dev/null +++ b/assets/styles/photos/050_page.css @@ -0,0 +1,34 @@ +@layer section { + .photos.page { + gap: var(--body-item-spacing) 0; + } + + .photos.page > article > :not(:last-child) { + margin-block-end: var(--body-item-spacing); + } + + .photos.page > article > h1 { + font-size: var(--h3-size); + } + + .photos.page > nav { + margin-block-end: var(--body-item-spacing); + } + + .photos.page > :not(figure) { + grid-column: content-start / content-end; + } + + .photos.page > figure { + grid-column: wide-content-start / wide-content-end; + } + @media (max-width: 960px) { + figure, img { + border-radius: 0; + } + } + + .photos.page :is(figure, figure > img) { + max-width: none; + } +} diff --git a/assets/styles/photos/050_params.css b/assets/styles/photos/050_params.css new file mode 100644 index 0000000..2dcc7b4 --- /dev/null +++ b/assets/styles/photos/050_params.css @@ -0,0 +1,68 @@ +.photo-params { + padding-inline: calc(var(--body-item-spacing) / 2); +} + +.photo-params > .container { + display: block; + background-color: var(--photo-params-container-background-color); + border-radius: 10px; + margin: auto; + padding: calc(var(--body-item-spacing) / 2); + max-width: calc(0.66 * var(--content-width)); +} + +.photo-params > .container > table { + background-color: var(--photo-params-background-color); + color: var(--photo-params-color); + border-collapse: collapse; + border-radius: 6px; + table-layout: fixed; + text-align: center; + width: 100%; +} + +.photo-params thead td { + border-bottom: 1px solid var(--photo-params-border-color); + font-size: 80%; + font-weight: bold; +} + +.photo-params tbody tr > td { + border: none; + border-bottom: 1px solid var(--photo-params-border-color); +} + +.photo-params tr.exposure-attributes > td { + border: none; + border-top: 1px solid var(--photo-params-border-color); + border-left: 1px solid var(--photo-params-border-color); +} + +.photo-params tr.exposure-attributes > td:first-child { + border-left: none; +} + +.photo-params td { + font-size: 75%; + padding: 1rem; +} + +.photo-params td:last-child { + text-align: end; +} + +.photo-params td:first-child { + text-align: start; +} + +.photo-params .make-model { + font-weight: bold; +} + +.photo-params .size { + border-left: 0; +} + +.photo-params .location { + border-right: 0; +} diff --git a/assets/styles/railroad.css b/assets/styles/railroad.css new file mode 100644 index 0000000..6a75b33 --- /dev/null +++ b/assets/styles/railroad.css @@ -0,0 +1,64 @@ +:root { + --rect-fill: rgba(var(--mid-blue), 0.1); +} +@media (prefers-color-scheme: dark) { + :root { + --rect-fill: rgb(var(--mid-blue), 0.9); + } +} + +svg.railroad-diagram path { + stroke-width: 2; + stroke: var(--color); + fill: none; +} + +svg.railroad-diagram text { + font-family: var(--font-family-monospace); + text-anchor: middle; + white-space: pre; + fill: var(--color); +} + +svg.railroad-diagram text.diagram-text { + font-size: 11px; +} + +svg.railroad-diagram text.diagram-arrow { + font-size: 16px; +} + +svg.railroad-diagram text.label { + text-anchor: start; +} + +svg.railroad-diagram text.comment { + font: italic 12px var(--font-family-monospace); +} + +svg.railroad-diagram g.non-terminal text { + /*font-style: italic;*/ +} + +svg.railroad-diagram rect { + stroke-width: 2; + stroke: var(--color); + fill: var(--rect-fill); +} + +svg.railroad-diagram rect.group-box { + stroke: gray; + stroke-dasharray: 10 5; + fill: none; +} + +svg.railroad-diagram path.diagram-text { + stroke-width: 2; + stroke: var(--color); + fill: var(--html-background-color); + cursor: help; +} + +svg.railroad-diagram g.diagram-text:hover path.diagram-text { + fill: var(--rect-fill); +} diff --git a/assets/styles/root/000_layers.css b/assets/styles/root/000_layers.css new file mode 100644 index 0000000..622ca5c --- /dev/null +++ b/assets/styles/root/000_layers.css @@ -0,0 +1 @@ +@layer reset, typography, root, layout, section, page, utility; diff --git a/assets/styles/root/001_reset.css b/assets/styles/root/001_reset.css new file mode 100644 index 0000000..0d3eeb7 --- /dev/null +++ b/assets/styles/root/001_reset.css @@ -0,0 +1,7 @@ +@layer reset { + body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea { + padding: 0; margin: 0; + } + + figure, figure .youtube { line-height: 1; } +} diff --git a/assets/styles/root/002_colors.css b/assets/styles/root/002_colors.css new file mode 100644 index 0000000..abdfa1b --- /dev/null +++ b/assets/styles/root/002_colors.css @@ -0,0 +1,224 @@ +:root { + --black: 0, 0, 0; + --sub-dk-gray: 16, 16, 16; + --dk-gray: 32, 32, 32; + --super-dk-gray: 80, 80, 80; + --mid-gray: 128, 128, 128; + --sub-lt-gray: 175, 175, 175; + --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: var(--white); + --color: rgba(var(--black), 0.8); + + --a-color: rgb(var(--mid-blue)); + --a-underline-color: rgb(var(--sub-lt-gray)); + --a-ruby-color: var(--color); + + --body-code-background-color: rgb(var(--super-lt-gray)); + --box-shadow-color: rgba(var(--lt-gray), 0.8); + + --separator-color: rgb(var(--lt-gray)); + --header-border-color: var(--separator-color); + --footer-border-color: var(--separator-color); + + --header-anchor-link-color: rgb(var(--sub-lt-gray)); + --header-box-shadow-color: var(--box-shadow-color); + --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); + --heading-color: rgb(var(--black)); + + --html-background-color: rgb(var(--background)); + + --platter-background-color: rgba(var(--white), var(--platter-background-opacity)); + --platter-background-opacity: 0.6; + --platter-backdrop-filter: blur(10px); + + --site-nav-link-color: var(--a-color); + + --tag-foreground-color: rgb(var(--super-dk-gray)); + --tag-background-color: rgb(var(--super-lt-gray)); + --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); + --tag-hover-background-color: rgb(var(--sub-lt-gray)); +} + +@media (prefers-color-scheme: dark) { + :root { + --background: var(--black); + --color: rgba(var(--white), 0.8); + + --separator-color: rgb(var(--dk-gray)); + --box-shadow-color: rgba(var(--dk-gray), 0.8); + --body-code-background-color: rgb(var(--dk-gray)); + + --header-anchor-link-color: rgb(var(--super-dk-gray)); + --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); + --heading-color: rgb(var(--white)); + + --html-background-color: rgb(var(--background)); + + --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); + --platter-backdrop-filter: brightness(0.66) blur(10px); + + --tag-foreground-color: rgb(var(--sub-lt-gray)); + --tag-background-color: rgb(var(--dk-gray)); + --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); + --tag-hover-background-color: rgb(var(--super-dk-gray)); + --tag-hover-foreground-color: rgb(var(--mid-gray)); + } +} + +@layer root { + a rt, + a:hover rt { + color: var(--a-ruby-color); + } + + a[href] { + color: var(--a-color); + } + + a[href]:visited { + color: var(--a-color); + } + + a.hover-only { + color: var(--color); + transition: color 0.2s; + } + + a.hover-only:hover { + color: var(--a-color); + transition: color 0.2s; + } + + code { + background-color: var(--body-code-background-color); + } + + code.nobg { + background: none; + } + + details:has(#TableOfContents) { + border: 1px solid var(--separator-color); + } + + fieldset { + border: 1px solid var(--separator-color); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--heading-color); + } + + h1.gradient { + --site-title-color1: rgb(103, 128, 229); + --site-title-color2: rgb(130, 90, 227); + --site-title-color3: rgb(135, 101, 228); + --site-title-color4: rgb(125, 115, 229); + --site-title-color5: rgb(107, 130, 230); + --site-title-color6: rgb(77, 153, 232); + --site-title-color7: rgb(74, 136, 230); + --site-title-color8: rgb(71, 128, 228); + --site-title-color9: rgb(65, 80, 224); + --site-title-color10: rgb(61, 58, 223); + + color: rgb(var(--mid-blue)); + } + + @supports not ((background-clip: text) or (-webkit-background-clip: text)) { + h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); } + h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); } + h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); } + h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); } + h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); } + h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); } + h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); } + h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); } + h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); } + h1.gradient span:nth-child(10n) { color: var(--site-title-color10); } + } + @supports (background-clip: text) or (-webkit-background-clip: text) { + h1.gradient { + 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.gradient a[href] { + color: inherit; + } + } + + header.site nav > li { + color: var(--site-nav-link-color); + } + + html { + background-color: var(--html-background-color); + color: var(--color); + } + + main > :is(h1, h2, h3, h4, h5, h6) > a[href], + main > :is(h1, h2, h3, h4, h5, h6) > a[href]:visited { + color: inherit; + } + + nav.bulleted > li:first-child::before { + color: var(--color); + } + + nav.bulleted > li::before { + color: var(--heading-color); + opacity: 80%; + } + + ruby:hover rt { + color: var(--color); + } + + @media (prefers-color-scheme: dark) { + rt { + color: rgba(var(--white), 0.5); + } + } + + table { + border: 1px solid var(--separator-color); + } + + td, th { + border: 1px solid var(--separator-color); + } + + figure.code code { + background-color: inherit; + } + + .post header a, + .post header a:visited { + color: inherit; + } + + .social > li + li:before { + color: var(--dark); + } + + .title, .title a { + color: var(--color); + } +} diff --git a/assets/styles/root/002_layout.css b/assets/styles/root/002_layout.css new file mode 100644 index 0000000..a3f77eb --- /dev/null +++ b/assets/styles/root/002_layout.css @@ -0,0 +1,448 @@ +:root { + --body-item-spacing: 2rem; + --content-width: 80rem; + --content-columns: 5; + --gutter-width: 3rem; + --list-item-block-gap: var(--body-item-spacing); + --margin-min-width: var(--body-item-spacing); + --margin-max-width: 1fr; + --menu-icon-size: 20px; + --nav-bulleted-spacing: 0.75rem; +} + +@layer root { + main { + display: grid; + grid-template-columns: + [margin-left] + minmax(var(--margin-min-width), var(--margin-max-width)) + [wide-content-start wide-content-left-start] + 1fr + [wide-content-left-end gutter-start gutter-left-start] + var(--gutter-width) + [gutter-left-end content-start] + repeat(var(--content-columns), + [column-start] + min( + calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), + calc(var(--content-width) / var(--content-columns)) + ) + [column-end] + ) + [content-end gutter-right-start] + var(--gutter-width) + [gutter-right-end gutter-end wide-content-right-start] + 1fr + [wide-content-right-end wide-content-end] + minmax(var(--margin-min-width), var(--margin-max-width)) + [margin-right]; + } + + @media (max-width: 960px) { + main { + --margin-min-width: 0; + --margin-max-width: 0; + } + } + + @media (max-width: 519px) { + /* Collapse the margin and wide content tracks */ + main { + --content-columns: 3; + + grid-template-columns: + [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start] + var(--gutter-width) + [gutter-left-end content-start] + repeat( + var(--content-columns), + [column-start] + min( + calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), + calc(var(--content-width) / var(--content-columns)) + ) + [column-end] + ) + [content-end gutter-right-start] + var(--gutter-width) + [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right]; + } + } + + @media (max-width: 415px) { + main { + --content-columns: 1; + + display: grid; + grid-template-columns: + [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start] + var(--gutter-width) + [gutter-left-end content-start] + calc(100% - 2 * var(--gutter-width)) + [content-end gutter-right-start] + var(--gutter-width) + [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right]; + } + } +} + +@layer layout { + aside#table-of-contents { + grid-column: content-start / content-end; + } + + blockquote { + --line-width: 4px; + + border-inline-start: var(--line-width) solid var(--separator-color); + padding-inline-start: calc(3rem - var(--line-width)); + + margin: 0; + } + + p code { + padding-block-start: 0.1em; + padding-inline: 0.25em; + } + + code.nobg { + display: inline-block; + margin: 0; + padding: 0; + } + + details { + width: 100%; + } + + details:has(#TableOfContents) { + box-sizing: border-box; + padding: var(--body-item-spacing); + } + + details > summary + #TableOfContents { + margin-top: 1rem; + } + + fieldset { + box-sizing: border-box; + padding: var(--body-item-spacing); + padding-top: calc(var(--body-item-spacing) / 10); + } + + figcaption:not(:empty) { + margin-block-start: 0.2em; + } + + figure { + grid-column: gutter-start / gutter-end; + margin: 0; + margin-inline: 0; + min-width: fit-content; + overflow: hidden; + } + @media (max-width: 415px) { + figure { + grid-column: wide-content-start / wide-content-end; + } + } + + figure.code { + grid-column: content-start / content-end; + } + + figure.code pre { + overflow: auto; + padding: 1rem; + } + + figure > .container { + align-items: center; + display: flex; + gap: var(--body-item-spacing); + justify-content: center; + min-width: fit-content; + } + + figure img { + display: block; + } + @media (max-width: 414px) { + figure img { + max-width: 100%; + } + } + + figure svg { + width: 100%; + height: auto; + } + + figure .youtube { + overflow: hidden; + width: 100%; + } + + header.site { + display: flex; + width: 100%; + } + + header.site h1 { + margin: 0; + order: 1; + } + + header.site > .grid { + align-items: baseline; + display: flex; + flex-wrap: wrap; + gap: 0 0.5em; + margin: 0 auto; + max-width: var(--content-width); + padding: 1.5rem 3rem; + width: 100%; + } + + header.site > .grid > nav { + align-items: center; + display: flex; + justify-content: start; + list-style: none; + } + + header.site nav > li { display: block; } + + header.site nav:first-of-type { + justify-content: start; + order: 2; + } + @media (max-width: 435px) { + header.site nav:first-of-type { order: 5; } + } + + header.site nav:last-of-type { + justify-content: end; + order: 3; + } + + @media (max-width: 516px) { + header.site > .platter { + border-left: none; + border-radius: 0; + border-right: none; + border-top: none; + } + + header.site > .grid { max-width: none; } + } + + img { + height: auto; + max-width: 100%; + width: 100%; + } + + main { + box-sizing: border-box; + margin-block-start: var(--body-item-spacing); + width: 100%; + } + + main > * { + grid-column: content-start / content-end; + } + + main > figure:not(.code), + main > a.to-photo-post { + grid-column: wide-content-start / wide-content-end; + } + + main > header > .series { + margin-inline-start: 0.5em; + width: 100%; + } + + main > header > .series::before { + margin-inline-end: 0.25em; + } + + main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) { + padding-block-start: 0.5em; + } + + nav.bulleted > li:not(:first-child)::before { + margin-inline-start: var(--nav-bulleted-spacing); + } + + nav.social > li { + margin-inline-start: var(--nav-bulleted-spacing); + } + + nav.social > li:first-child { + margin-inline-start: 0; + } + + section.flow { + display: block flow; + } + + ul, ol { + list-style-position: inside; + } + + ul, + ol, + dl, + :is(ul, ol) > li, + dl > dt { + margin-inline-start: var(--body-item-spacing); + } + + :is(ul, ol) > li:not(:last-child) { + margin-block-end: calc(var(--body-item-spacing) / 2); + } + + :is(ul, ol) > li > :is(ul, ol) { + margin-inline-start: 0; + margin-block-start: calc(var(--body-item-spacing) / 2); + } + + table { + border-collapse: collapse; + margin-inline: auto; + width: 50%; + } + + td, + th { + padding-inline: 1rem; + } + + .list .post header { + grid-column: wide-content-start / content-end; + } + @supports (grid-template-columns: subgrid) { + .list .post header { + display: grid; + grid-template-columns: subgrid; + } + + .list .post header h1 { + grid-column: content-start / content-end; + } + } + + .list .post time { + grid-column: wide-content-start; + justify-self: end; + } + @media (max-width: 960px) { + .list .post time { + grid-column: content-start / content-end; + justify-self: start; + } + } + + .list { + gap: var(--list-item-block-gap) 0; + } + + .list > h1, + .list > header { + grid-column: content-start / content-end; + } + + .list > .post { + grid-column: wide-content-start / wide-content-end; + } + + @supports (grid-template-columns: subgrid) { + .list > .post { + display: grid; + grid-template-columns: subgrid; + gap: var(--body-item-spacing) 0; + } + } + + .list .post time { + font-variant-numeric: tabular-nums; + } + + @media (max-width: 960px) { + .list .post time { + line-height: var(--line-height); + } + } + + .p5-sketch { + display: block; + position: relative; + width: 100%; + } + + .page { + gap: var(--body-item-spacing) 0; + } + + .page > header { + align-items: first baseline; + column-gap: 4rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + @media (max-width: 539px) { + .page > header { + grid-template-columns: auto; + } + } + + .page > header, + .page > footer { + grid-column: content-start / content-end; + } + + .page > article > * { + grid-column: gutter-start / gutter-end; + } + + .page > article > :not(:last-child) { + margin-block-end: var(--body-item-spacing); + } + + .post { + grid-column: gutter-start / gutter-end; + } + + .post > * { + grid-column: content-start / content-end; + } + + .social { + display: block flex; + margin-left: auto; + order: 2; + } + + .social > li > a { + display: block; + height: var(--menu-icon-size); + width: var(--menu-icon-size); + } + + .social > li > a > span { + display: none; + } + + .social > li + li:before { + padding: 0 0.5rem; + } + + .youtube iframe { + aspect-ratio: 16 / 9; + margin-bottom: -3px; + width: 100%; + } +} diff --git a/assets/styles/root/010_interactions.css b/assets/styles/root/010_interactions.css new file mode 100644 index 0000000..955448b --- /dev/null +++ b/assets/styles/root/010_interactions.css @@ -0,0 +1,14 @@ +/* Eryn Wells */ + +:root { + --transition-duration: 0.7s; +} + +@layer root { + figure.code .ln a { + -webkit-user-select: none; + -moz-use-select: none; + -ms-user-select: none; + user-select: none; + } +} diff --git a/assets/styles/root/050_ruby.css b/assets/styles/root/050_ruby.css new file mode 100644 index 0000000..c8f4b9a --- /dev/null +++ b/assets/styles/root/050_ruby.css @@ -0,0 +1,25 @@ +@layer root { + body:has(ruby-switch[value=none]) rt { + display: none; + } + + /* When the ruby switch is set to "hidden", hide the ruby base and only show the . */ + body:has(ruby-switch[value=hidden]) ruby > span { + display: none; + } + + body:has(ruby-switch[value=hidden]) rt { + color: inherit; + display: inline; + font-size: inherit; + white-space: inherit; + } + + body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt { + font-family: var(--font-family-heading); + font-weight: bold; + } + + rt { transition: color 0.3s; } + ruby:hover rt { transition: color 0.3s; } +} diff --git a/assets/styles/root/050_site_footer.css b/assets/styles/root/050_site_footer.css new file mode 100644 index 0000000..1386547 --- /dev/null +++ b/assets/styles/root/050_site_footer.css @@ -0,0 +1,40 @@ +@layer root { + footer.site { + align-items: center; + display: flex; + flex-direction: column; + margin-block: var(--body-item-spacing); + text-align: center; + } + + footer.site > ul { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; + } + + footer.site > .slogans { + margin-block-end: 0; + } + + footer.site > .slogans > li { + margin-block-end: 0; + 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; + } + } +} diff --git a/assets/styles/root/050_site_header.css b/assets/styles/root/050_site_header.css new file mode 100644 index 0000000..05eda7f --- /dev/null +++ b/assets/styles/root/050_site_header.css @@ -0,0 +1,29 @@ +@layer root { + :root { + --mastodon-icon: url(/icons/mastodon.svg); + --github-icon: url(/icons/github.svg); + --instagram-icon: url(/icons/instagram.svg); + --feed-icon: url(/icons/feed.svg); + + --social-menu-padding: 1rem; + } + + @media (prefers-color-scheme: dark) { + :root { + --mastodon-icon: url(/icons/mastodon-dark.svg); + --github-icon: url(/icons/github-dark.svg); + --instagram-icon: url(/icons/instagram-dark.svg); + --feed-icon: url(/icons/feed-dark.svg); + } + } + + #social-menu-mastodon img { content: var(--mastodon-icon); } + #social-menu-github img { content: var(--github-icon); } + #social-menu-instagram img { content: var(--instagram-icon); } + #social-menu-feed img { content: var(--feed-icon); } + + #social-menu-mastodon img { + position: relative; + top: 1px; + } +} diff --git a/assets/styles/root/050_tags_list.css b/assets/styles/root/050_tags_list.css new file mode 100644 index 0000000..a9c60a8 --- /dev/null +++ b/assets/styles/root/050_tags_list.css @@ -0,0 +1,60 @@ +.taxonomies { + align-items: first baseline; + display: flex; + grid-column: content-start / content-end; + height: min-content; + position: relative; +} + +ul.tags { + display: flex; + flex-wrap: wrap; + gap: 1rem 1rem; + height: min-content; + margin-inline-start: 0; + padding-inline-start: 0; +} + +ul.tags > li { + background-color: var(--tag-background-color); + color: var(--tag-foreground-color); + border-radius: 4px; + display: inline-block; + font-size: 75%; + letter-spacing: 1px; + margin: 0; +} + +ul.tags > li:hover { + background-color: var(--tag-hover-background-color); +} + +ul.tags > li > a { + color: inherit; + display: block; + height: 100%; + width: 100%; + padding: 0.6rem 1rem; + text-decoration: none; +} + +ul.tags > li > a:hover { + color: var(--tag-hover-foreground-color); + text-decoration: none; +} + +ul.tags > li + li { margin-inline-start: 0; } + +.taxonomies > .chevron { + align-items: center; + border: 0; + border-radius: 0; + color: var(--tag-spacer-foreground-color); + background-color: inherit; + display: flex; + justify-content: center; + margin-inline-start: 0; + position: relative; + top: 2px; + width: 2rem; +} diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css new file mode 100644 index 0000000..aba2e1d --- /dev/null +++ b/assets/styles/root/050_typography.css @@ -0,0 +1,185 @@ +@font-face { + font-family: "Museo_Slab"; + src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"), + url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff"); + font-weight: normal; + font-style: normal; +} + +@layer typography { + :root { + --font-family: Verdana, Helvetica, sans-serif; + --font-family-heading: Museo_Slab, Tahoma, "Hiragino Mincho ProN", serif; + --font-family-monospace: "Courier New", Courier, monospace; + --font-family-site-heading: Museo_Slab, Tahoma, sans-serif; + + --font-size: 2rem; + --font-size-max: 8px; + --font-size-min: 6px; + --font-size-scale-factor: 1vmax; + --site-header-font-size: 200%; + + --h1-size: 305%; + --h2-size: 244%; + --h3-size: 195%; + --h4-size: 156%; + --h5-size: 125%; + --h6-size: 100%; + + --line-height: 1.5; + --heading-line-height: 1; + /* A little extra line height so the descenders don't get clipped */ + --site-heading-line-height: 1.1; + } + + a { + text-decoration: none; + } + + a[href]:hover { + text-decoration: underline; + text-decoration-style: solid; + } + + a.hover-only:hover { + text-decoration: underline; + } + + body { + font-size: var(--font-size); + } + + code { + font-family: var(--font-family-monospace); + } + + figcaption { + font-size: 80%; + line-height: var(--line-height); + text-align: center; + } + + figure.code .cl { + white-space: pre-wrap; + } + + footer.site { + font-size: 80%; + line-height: 1; + } + + h1 { font-size: var(--h1-size); } + h2 { font-size: var(--h2-size); } + h3 { font-size: var(--h3-size); } + h4 { font-size: var(--h4-size); } + h5 { font-size: var(--h5-size); } + h6 { font-size: var(--h6-size); } + h5, h6 { font-family: var(--font-family-body); } + + header > span.series::before { + content: "↳"; + } + + header.site h1 > a:hover { + text-decoration: none; + } + + header.site nav { + list-style: none; + } + + header.site nav > .active { + font-weight: bold; + } + + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-family-heading); + font-weight: 600; + letter-spacing: 1pt; + line-height: var(--heading-line-height); + } + + h1.gradient { + font-family: var(--font-family-site-heading); + } + + h1.gradient > a { color: inherit; } + + + header.site h1.site { + font-size: var(--site-header-font-size); + line-height: var(--site-heading-line-height); + white-space: nowrap; + } + + header.site nav { + font-size: max(1.5rem, 80%); + letter-spacing: 0.10em; + text-transform: lowercase; + } + + header.site nav > li { + color: var(--site-nav-link-color); + } + + :is(h1, h2, h3, h4, h5, h6) rt { + font-family: var(--font-family); + font-weight: normal; + letter-spacing: 0; + } + + header > span.series { + font-size: 1.75rem; + letter-spacing: 1px; + } + + header > span.series::before { + color: var(--header-series-arrow-foreground-color); + } + + html { + font-family: var(--font-family); + font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max)); + } + + main:has(header > .post-title > h1) h1 { font-size: 244%; } + main:has(header > .post-title > h1) h2 { font-size: 195%; } + main:has(header > .post-title > h1) h3 { font-size: 156%; } + main:has(header > .post-title > h1) h4 { font-size: 125%; } + main:has(header > .post-title > h1) h5 { font-size: 100%; } + main:has(header > .post-title > h1) h6 { font-size: 100%; } + + main:has(header > .post-title > h1) :is(h5, h6) { + font-family: var(--font-family-body); + } + + nav.bulleted>li:first-child::before { + content: ""; + } + + nav.bulleted > li::before { + content: "•"; + font-size: 60%; + font-weight: normal; + } + + p { + line-height: var(--line-height); + } + + p > code { + white-space: pre; + } + + #TableOfContents ul { + list-style-type: none; + } + + .social { + letter-spacing: 2px; + } + + .title { + font-size: var(--h5-size); + } +} diff --git a/assets/styles/root/099_utility.css b/assets/styles/root/099_utility.css new file mode 100644 index 0000000..7cf252e --- /dev/null +++ b/assets/styles/root/099_utility.css @@ -0,0 +1,43 @@ +@layer utility { + .centered { text-align: center; } + + .content-width { grid-column: content-start / content-end; } + + .float-right { + float: right; + justify-self: end; + } + + .nobreak { white-space: nowrap; } + + .noselect { + cursor: default; + -webkit-user-select: none; + -moz-use-select: none; + -ms-user-select: none; + user-select: none; + } + + .platter { + -webkit-backdrop-filter: var(--platter-backdrop-filter); + backdrop-filter: var(--platter-backdrop-filter); + background-color: var(--platter-background-color); + border: 1px solid var(--header-border-color); + border-radius: 12px; + box-shadow: 3px 4px 4px var(--header-box-shadow-color); + } + + .visible { visibility: visible; } + + article.two-column { columns: 2; } + + img.circular { + shape-outside: circle(50%); + -webkit-clip-path: circle(50%); + clip-path: circle(50%); + } + + .column5 { + grid-column: span content-start 4; + } +} diff --git a/config/_default/config.yaml b/config/_default/config.yaml index 950d2f1..285923c 100644 --- a/config/_default/config.yaml +++ b/config/_default/config.yaml @@ -1,6 +1,5 @@ baseURL: https://erynwells.me/ languageCode: en-US -title: ~eryn -copyright: Copyright © 2020—2024 Eryn Wells +title: Eryn Rachel Wells +copyright: Copyright © 2020—2023 Eryn Wells defaultContentLanguage: en -enableEmoji: true diff --git a/config/_default/languages.yaml b/config/_default/languages.yaml index b450ec4..e0da1ed 100644 --- a/config/_default/languages.yaml +++ b/config/_default/languages.yaml @@ -7,6 +7,3 @@ es: jp: languageName: 日本語 weight: 3 -tok: - languageName: toki pona - weight: 4 diff --git a/config/_default/markup.yaml b/config/_default/markup.yaml index 0a8cb53..c271d52 100644 --- a/config/_default/markup.yaml +++ b/config/_default/markup.yaml @@ -1,10 +1,6 @@ goldmark: renderer: unsafe: true - parser: - attribute: - block: true - title: true highlight: anchorLineNos: true lineNos: false diff --git a/config/_default/menu.yaml b/config/_default/menu.yaml index e9bf573..ff649d2 100644 --- a/config/_default/menu.yaml +++ b/config/_default/menu.yaml @@ -11,12 +11,6 @@ main: name: About url: /about/ weight: 30 - - identifier: feed - name: feed - url: /feed.atom - weight: 40 - params: - style: file social: - identifier: mastodon name: Mastodon @@ -37,7 +31,7 @@ social: params: shortName: ig - identifier: feed - name: feed + name: Feed url: /feed.atom weight: 40 params: diff --git a/config/_default/module.yaml b/config/_default/module.yaml deleted file mode 100644 index df1ab3b..0000000 --- a/config/_default/module.yaml +++ /dev/null @@ -1,15 +0,0 @@ -hugoVersion: - extended: false - min: "0.116.0" -replacements: >- - github.com/erynofwales/hugo-theme-feeds/v2 -> feeds, - github.com/erynofwales/hugo-theme-termlite/v2 -> termlite, - github.com/erynofwales/hugo-theme-photostream/v2 -> photostream, - github.com/erynofwales/hugo-resource-builders/v2 -> resource-builders, - github.com/erynofwales/hugo-image-utilities/v2 -> image-utils -imports: - - path: github.com/erynofwales/hugo-theme-termlite/v2 - - path: github.com/erynofwales/hugo-theme-feeds/v2 - - path: github.com/erynofwales/hugo-theme-photostream/v2 - - path: github.com/erynofwales/hugo-resource-builders/v2 - - path: github.com/erynofwales/hugo-image-utilities/v2 diff --git a/config/_default/outputs.yaml b/config/_default/outputs.yaml index 5dec102..f788268 100644 --- a/config/_default/outputs.yaml +++ b/config/_default/outputs.yaml @@ -1,4 +1,3 @@ -home: [HTML, Atom] -section: [HTML, Atom] -taxonomy: [HTML] -term: [HTML] +home: [HTML, Atom, RSS] +page: [HTML, JSON] +section: [HTML, Atom, RSS] diff --git a/config/_default/params.yaml b/config/_default/params.yaml index ca8f50f..9a44e25 100644 --- a/config/_default/params.yaml +++ b/config/_default/params.yaml @@ -9,12 +9,6 @@ github: erynofwales instagram: erynofwales description: Home page of Eryn Rachel Wells -blog: - yearLimit: 3 - -photostream: - yearLimit: 3 - photos: gridSize: 200 thumbnailSize: 600 diff --git a/config/_default/privacy.yaml b/config/_default/privacy.yaml index ad42382..86268a6 100644 --- a/config/_default/privacy.yaml +++ b/config/_default/privacy.yaml @@ -1,2 +1,2 @@ -x: +twitter: enableDNT: true diff --git a/config/_default/services.yaml b/config/_default/services.yaml index 4738995..4ad50c5 100644 --- a/config/_default/services.yaml +++ b/config/_default/services.yaml @@ -1,2 +1,2 @@ -x: +twitter: disableInlineCSS: true diff --git a/content/_index.es.md b/content/_index.es.md index 4812de4..04418e1 100644 --- a/content/_index.es.md +++ b/content/_index.es.md @@ -1,6 +1,5 @@ --- title: Eryn Rachel Wells -layout: single --- {{< nobreak >}}Ingeniera de software,{{< /nobreak >}} diff --git a/content/_index.md b/content/_index.md index 320c794..2d5b279 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,58 +1,5 @@ --- -layout: single -params: - renderHeadingAnchors: false +title: Eryn Rachel Wells --- -Hi, I'm Eryn Wells. This is my website. Welcome! - -## Latest - -Here are some of my most recent posts. - -{{< home/latest >}} - -## Personal - -I'm a queer trans woman, {{< tess >}}' partner, and mom of [two cats][cats]. I -was born in Seattle, {{< abbr Washington >}}WA{{< /abbr >}} and grew up in -Phoenix, {{< abbr Arizona >}}AZ{{< /abbr >}}. I attended [Oberlin College][ob] -where I got a degree in Computer Science. My pronouns are [she/her][pronouns]. - -You can read more about me on my [about][ab] page, or [get in touch][where-am-i]. - -## Professional - -I've worked as a software engineer since 2011 for a variety of companies around -the San Francisco Bay Area. I joined [Apple][a] in 2016, where I currently work -on password management and authentication technologies. - -My [résumé][r] has all the details. - -## Hobbies - -When I'm not working, you can reliably find me hacking on this website or [some -coding other project][gh]. I'm also a musician, and play piano, Irish tin -whistle, and modular synthesizer. Occasionally I [record][bc] [things][sc]. I -love outer space and astronomy; I will always get excited to look at the moon -with you, or check out anything through a telescope. I enjoy [photograhy][p], -mostly as a travel hobby. And I've been practicing iaido, a traditional Japanese -sword art, since early 2024. Other things I've been into include: bread baking, -bicycling, calligraphy, ceramics, and knitting. - -[a]: https://apple.com -[ab]: {{< ref "/about" >}} -[b]: {{< ref "/blog" >}} -[bc]: https://erynwells.bandcamp.com/releases -[cats]: {{< ref "/cats" >}} -[eml]: mailto:Eryn%20Wells -[gh]: https://github.com/erynofwales -[ig]: https://www.instagram.com/erynofwales -[m]: https://mastodon.social/@erynofwales -[n]: {{< ref "/now" >}} -[ob]: https://www.oberlin.edu -[p]: {{< ref "/photos" >}} -[pronouns]: http://pronoun.is/she -[r]: {{< ref "/resume" >}} -[sc]: https://soundcloud.com/purlsnbeeps -[where-am-i]: {{< ref "/about/where-am-i" >}} +Software engineer, potter, musician, and overall nerd. diff --git a/content/about/_index.md b/content/about/_index.md index 5c1da98..7b2ba05 100644 --- a/content/about/_index.md +++ b/content/about/_index.md @@ -1,16 +1,18 @@ --- title: "Hi! 👋🏻" -layout: single +date: 2022-09-03T12:14:32-07:00 resources: - name: me src: me.jpeg params: - alt: > - Me, wearing a hat and smiling slightly, standing in front of a stone - background. + alt: " + Me, wearing a hat and smiling slightly, standing in front of a stone background. + " --- -{{% section class=content--small-right-column %}} +{{% section class=flow %}} + +{{< circular_image id=me name=me class="float-right" width=200 >}} 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, @@ -20,8 +22,6 @@ I attended [Oberlin College][ob] where I got a degree in Computer Science. I speak English natively, and Spanish too, though I always need more practice. -{{< circular_image id=me name=me class="content--right-column" width=200 >}} - {{% /section %}} ## Hobbies diff --git a/content/about/where-am-i.md b/content/about/where-am-i.md index a033245..660a718 100644 --- a/content/about/where-am-i.md +++ b/content/about/where-am-i.md @@ -3,16 +3,11 @@ title: "Where to Find Me" date: 2022-11-11T08:35:26-08:00 --- -Here's a list of places you can find me online. You can often find me on -services not listed here with the `erynofwales` or `erynrwells` handles. +Here's a list of places you can find me online. ## Social Media -I'm really only on Instagram and Mastodon these days. My Twitter account is -still live, as an archive, but I don't post on it or look at it. Ditto for -Facebook. - -- Facebook: [erynofwales](https://www.facebook.com/erynofwales) +- Cohost: [@eryn](https://cohost.org/eryn) - Instagram: [@erynofwales](https://instagram.com/erynofwales) - Mastodon: [@erynofwales](https://mastodon.social/@erynofwales) - Twitter: [@erynofwales](https://twitter.com/erynofwales) @@ -20,10 +15,9 @@ Facebook. ## Content - Bandcamp: [erynwells](https://erynwells.bandcamp.com/releases) -- GitHub: [erynofwales](https://github.com/erynofwales) - Soundcloud: [purlsnbeeps](https://soundcloud.com/purlsnbeeps) -- StoryGraph: [erynrwells](https://app.thestorygraph.com/profile/erynrwells) - YouTube: [Eryn Wells](https://www.youtube.com/channel/UCWb2pTDlC27R1PucyUPrypA) +- GitHub: [erynofwales](https://github.com/erynofwales) ## The Old Fashioned Way diff --git a/content/blog/2020/_index.md b/content/blog/2020/_index.md deleted file mode 100644 index 0539207..0000000 --- a/content/blog/2020/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 2020 -date: 2020-01-01 ---- diff --git a/content/blog/2021/09/oskitone-scout/index.md b/content/blog/2021/09/oskitone-scout/index.md index 3b3012c..8d74247 100644 --- a/content/blog/2021/09/oskitone-scout/index.md +++ b/content/blog/2021/09/oskitone-scout/index.md @@ -7,7 +7,7 @@ categories: ["Music"] tags: ["Synthesizers", "Electronics", "DIY", "Compositions"] --- -{{< youtube id="gCSwWsxzy_c" title="A timelapse video of me building an Oskitone Scout, set to music produced using the Scout itself" >}} +{{< figures/youtube id="gCSwWsxzy_c" title="A timelapse video of me building an Oskitone Scout, set to music produced using the Scout itself">}} [Oskitone][oskitone] recently released a new synthesizer: the [Scout][scout]. It's a small monophonic keyboard synth built around an Arduino. It was a quick diff --git a/content/blog/2021/10/pnw-reunion-trip/index.md b/content/blog/2021/10/pnw-reunion-trip/index.md index c574098..07ec46e 100644 --- a/content/blog/2021/10/pnw-reunion-trip/index.md +++ b/content/blog/2021/10/pnw-reunion-trip/index.md @@ -41,4 +41,4 @@ I'm so grateful for every one of these people. We've been friends for years and even though our lives have taken us in so many different directions, we've found each other again and that is so wonderful. -{{< twitter user=erynofwales id=1447951049076056071 >}} +{{< twitter erynofwales 1447951049076056071 >}} diff --git a/content/blog/2021/_index.md b/content/blog/2021/_index.md deleted file mode 100644 index f27ca81..0000000 --- a/content/blog/2021/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 2021 -date: 2021-01-01 ---- diff --git a/content/blog/2022/01/cmss-3modules/index.md b/content/blog/2022/01/cmss-3modules/index.md index f78c23a..96d8bac 100644 --- a/content/blog/2022/01/cmss-3modules/index.md +++ b/content/blog/2022/01/cmss-3modules/index.md @@ -7,7 +7,7 @@ categories: ["Music"] tags: ["Eurorack", "Synthesizers", "Recordings", "Performances", "Compositions"] --- -{{< youtube id="sqr7g4P85aM" title="A top-down video of me operating a small Eurorack system made of only three modules. Lights flash, an incorporeal hand turns knobs to sculpt the sound." >}} +{{< figures/youtube id="sqr7g4P85aM" title="A top-down video of me operating a small Eurorack system made of only three modules. Lights flash, an incorporeal hand turns knobs to sculpt the sound." >}} This is my submission to the [Three Module Challenge][3mc] show put on by Colorado Modular Synth Society in late January 2022. This is my first time diff --git a/content/blog/2022/04/nethack/index.es.md b/content/blog/2022/04/nethack/index.es.md index d2fbcbd..03034ec 100644 --- a/content/blog/2022/04/nethack/index.es.md +++ b/content/blog/2022/04/nethack/index.es.md @@ -18,7 +18,7 @@ estuve hecho. Es posible que me entusiasme un poco. -{{< twitter user=erynofwales id=1510763278691016705 >}} +{{< twitter erynofwales 1510763278691016705 >}} He mejorado mucho en las últimas semanas. Mis puntajes han crecidos desde 1,000 hasta el mejor juego hasta ahora en que [obtuve 9401 puntos][over9000]. Quién diff --git a/content/blog/2022/04/nethack/index.md b/content/blog/2022/04/nethack/index.md index 9eb2538..7015792 100644 --- a/content/blog/2022/04/nethack/index.md +++ b/content/blog/2022/04/nethack/index.md @@ -23,7 +23,7 @@ packed with [NetHackWiki][nethackwiki] tabs too, including a pinned one for the I may have gotten a little carried away a time or two. -{{< twitter user=erynofwales id=1510763278691016705 >}} +{{< twitter erynofwales 1510763278691016705 >}} I've gotten much better in that time. My scores have increased from the 1000-2000 range to my best game so far in which [I scored 9401 diff --git a/content/blog/2022/08/audio-scope-with-p5js/diagram.svg b/content/blog/2022/08/audio-scope-with-p5js/diagram.svg deleted file mode 100644 index a4483cb..0000000 --- a/content/blog/2022/08/audio-scope-with-p5js/diagram.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - -<audio> - - - - - - - -Analyzer - - - - - - - -destination - - - - - - diff --git a/content/blog/2022/08/audio-scope-with-p5js/index.md b/content/blog/2022/08/audio-scope-with-p5js/index.md index 8db3abc..7171876 100644 --- a/content/blog/2022/08/audio-scope-with-p5js/index.md +++ b/content/blog/2022/08/audio-scope-with-p5js/index.md @@ -88,7 +88,22 @@ node to the input of the analyzer node, and the output of the analyzer node to the audio context's `destination` node that routes to the computer's speakers. Our audio processing graph looks like this: -![](diagram.svg) +{{< figures/railroad id="audioContextDiagram" >}} + {{< scripts/railroad >}} + return rr.Diagram( + rr.Sequence( + rr.Terminal("