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 2073fc6..be102ce 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,5 @@ -LightroomExports/ node_modules/ public/ -/documentation/mirrors/ /resources/ .hugo_build.lock *.log 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 fea5233..31cc605 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,5 @@ # Eryn Wells -BUILD_DIR=public - CONTENT_PATH=content DEPLOY_USER=eryn @@ -16,18 +14,14 @@ 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 "Removing .DS_Store files from $(DEPLOY_LOCATION)" - find "$(BUILD_DIR)" -name .DS_Store -print -delete @echo "Deploying to $(DEPLOY_LOCATION)" - rsync -avz --no-times --no-perms --delete "$(BUILD_DIR)/" "$(DEPLOY_LOCATION)" - git tag -f $(shell ./scripts/website deployment next-tag) - -deployall: nethack deploy + rsync -avz --no-times --no-perms --delete public/ $(DEPLOY_LOCATION) + git tag -f deploy-$(shell date +%Y-%m-%d) nethack: nethack-logfile nethack-commit @@ -40,5 +34,13 @@ endif nethack-commit: $(NETHACK_LOGFILE_DATA_FILE) if ! git diff --quiet $<; then git commit -m "Update Nethack logfile for $(HOSTNAME)" -- $<; fi +weeknotes: YEAR=$(shell date '+%Y') +weeknotes: WEEK_NUMBER=$(shell date '+%V') +weeknotes: UPCOMING_SUNDAY=$(shell scripts/next_sunday.py) +weeknotes: PAGE_PATH=blog/$(YEAR)/weeknotes-$(YEAR)w$(WEEK_NUMBER).md +weeknotes: $(CONTENT_PATH)/$(PAGE_PATH) + hugo new -k weeknotes --clock "$(UPCOMING_SUNDAY)" -c "$(CONTENT_PATH)" "$(PAGE_PATH)" + sed -I -e "s/%%WEEK_NUMBER%%/$(WEEK_NUMBER)/" "$(CONTENT_PATH)/$(PAGE_PATH)" + 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/archetypes/weeknotes.md b/archetypes/weeknotes.md index 1bae5a0..93bbb34 100644 --- a/archetypes/weeknotes.md +++ b/archetypes/weeknotes.md @@ -1,10 +1,9 @@ --- -title: "Notes on {{ time.Now.Format "2006" }}W%%WEEK_NUMBER%%" +title: "Weeknotes for {{ time.Now.Format "2006" }}W%%WEEK_NUMBER%%" slug: weeknotes-{{ time.Now.Format "2006" }}w%%WEEK_NUMBER%% -date: {{ .Date | time.Format "2006-01-02" }} +date: {{ .Date }} categories: weeknotes -tags: - - Weeknotes +tags: [] 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..109b50b --- /dev/null +++ b/assets/styles/root/002_layout.css @@ -0,0 +1,470 @@ +: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 root { + main > .grid2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} + +@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; + } + + main ul, ol { + list-style-position: inside; + } + + main ul, + main ol, + main dl, + main :is(ul, ol) > li { + margin-inline-start: var(--body-item-spacing); + } + + main dl { + margin: 0; + } + + main dd { + line-height: var(--line-height); + margin-inline-start: calc(2 * var(--body-item-spacing)); + } + + main :is(ul, ol) > li:not(:last-child), + main dd:has(+ dt) { + margin-block-end: calc(var(--body-item-spacing) / 2); + } + + main :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%; + } +} + +@layer utility { + .grid-item { + grid-column: unset; + } +} 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..7e006b3 --- /dev/null +++ b/assets/styles/root/050_site_footer.css @@ -0,0 +1,41 @@ +@layer root { + footer.site { + align-items: center; + display: flex; + flex-direction: column; + row-gap: 0.25rem; + 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..4341d3b --- /dev/null +++ b/assets/styles/root/050_typography.css @@ -0,0 +1,188 @@ +@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: 212%; + --h2-size: 178%; + --h3-size: 135%; + --h4-size: 121%; + --h5-size: 100%; + --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); + } + + dt { + font-weight: bold; + } + + 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: bold; + 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..6a6e49b 100644 --- a/config/_default/config.yaml +++ b/config/_default/config.yaml @@ -1,6 +1,6 @@ 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/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/permalinks.yaml b/config/_default/permalinks.yaml index 7d4b0bc..8efe757 100644 --- a/config/_default/permalinks.yaml +++ b/config/_default/permalinks.yaml @@ -1,3 +1,2 @@ blog: blog/:year/:month/:slug/ photos: photos/:year/:month/:slug/ -twitter: twitter/:year/:month/:slug/ 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 dec3a59..04418e1 100644 --- a/content/_index.es.md +++ b/content/_index.es.md @@ -1,20 +1,7 @@ --- -layout: single -draft: true -params: - renderHeadingAnchors: false +title: Eryn Rachel Wells --- -¡Hola! Me llamo Eryn Wells. Este es mi sitio web. ¡Bienvenidos! - - -## Personal - -Soy mujer queer, - - -## Profesional - -Desde 2011, he trabajado como ingeniera de software en varios companías alrededor del área -del Bahía de San Francisco. En 2016, me uní a [Apple][]. Hoy, trabajo en -tecnologías que +{{< nobreak >}}Ingeniera de software,{{< /nobreak >}} +alfarera, música, y +{{< nobreak >}}nerd en general.{{< /nobreak >}} diff --git a/content/_index.md b/content/_index.md index e4ca8ce..2d5b279 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,66 +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 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][] -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][] 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 -other coding project][src]. I'm also a musician: I play piano, Irish tin -whistle, and modular synthesizer. Occasionally I [record things][sc] or offer -them [for sale][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 -[iaidō][mjer], a traditional Japanese sword art, at [Nishi Kaigan Iaidō -Dōjō][nkid] since early 2024. Other things I've been into include: bread baking, -bicycling, calligraphy, ceramics, and knitting. - - -[Apple]: https://apple.com -[ab]: {{< ref "/about" >}} -[b]: {{< ref "/blog" >}} -[bc]: https://erynwells.bandcamp.com/releases -[cats]: {{< ref "/cats" >}} -[eml]: mailto:Eryn%20Wells -[src]: https://source.erynwells.me/eryn -[ig]: https://www.instagram.com/erynofwales -[m]: https://mastodon.social/@erynofwales -[n]: {{< ref "/now" >}} -[Oberlin College]: 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" >}} -[mjer]: https://en.wikipedia.org/wiki/Mus%C5%8D_Jikiden_Eishin-ry%C5%AB -[nkid]: https://iaido.org +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/_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/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("