diff --git a/.nvim/after/ftplugin/css.lua b/.nvim/after/ftplugin/css.lua index db46984..886a868 100644 --- a/.nvim/after/ftplugin/css.lua +++ b/.nvim/after/ftplugin/css.lua @@ -1,4 +1,4 @@ -- Eryn Wells -vim.bo.shiftwidth = 4 -vim.bo.softtabstop = 4 +vim.bo.shiftwidth = 2 +vim.bo.softtabstop = 2 diff --git a/assets/styles/blog.css b/assets/styles/blog.css deleted file mode 100644 index ab40f5a..0000000 --- a/assets/styles/blog.css +++ /dev/null @@ -1,79 +0,0 @@ -:root { - --post-item-highlight-color: #efefef; - - --blog-list-grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content max-content; -} -@media (prefers-color-scheme: dark) { - :root { - --post-item-highlight-color: #121212; - } -} - -.blog > .highlight { margin-block-end: var(--body-item-spacing); } - -.post-nav { - align-items: baseline; - display: flex; - margin-top: 3.5rem; -} - -.post-nav .next { - margin-left: auto; -} - -.post-single footer { - margin-block-start: var(--body-item-spacing); -} - -.blog.list > ul { - list-style: none; -} -.blog.list > ul > li { - align-items: baseline; - border-radius: 6px; - display: grid; - gap: 1rem; - grid-template-columns: var(--blog-list-grid-template-columns); - margin-block-end: 0.25rem; - transition: background-color 0.25s; -} -.blog.list > ul > li:hover { - background-color: var(--post-item-highlight-color); -} -.blog.list > ul > li > a { color: inherit; } -.blog.list > ul > li > a:hover { text-decoration: none; } -.blog.list > ul > li > time:nth-child(2) { text-align: end; } -.blog.list > ul > li > .draft { align-self: center; } - -@supports (grid-template-columns: subgrid) { - .blog.list { - display: grid; - gap: 1rem; - grid-template-columns: var(--blog-list-grid-template-columns); - } - .blog.list > ul { - display: grid; - row-gap: 0.25rem; - grid-column: 1 / -1; - grid-template-columns: subgrid; - list-style: none; - } - .blog.list > ul > li { - display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; - margin-block-end: 0; - } - - .blog.list > h5 { - grid-column: 1 / -1; - margin-block: 1rem 0; - } - .blog.list > h5:first-child { - margin-block-start: 0; - } -} - -.blog.list > ul > li > :first-child { - text-align: end; -} 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 index 00cd343..fb1a795 100644 --- a/assets/styles/development.css +++ b/assets/styles/development.css @@ -1,8 +1,6 @@ /* Eryn Wells */ details:has(.photo-params.debug) { - margin-inline: var(--body-item-spacing); - max-width: var(--content-width); width: 100%; } @@ -77,8 +75,13 @@ details:has(.photo-params.debug) { background-color: var(--separator-color); } -.photos-params.debug { - width: calc(100% - var(--body-item-spacing)); +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 { 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 index 685f3d9..271e13f 100644 --- a/assets/styles/monokai.css +++ b/assets/styles/monokai.css @@ -1,11 +1,7 @@ :root { - --highlight-background-color: rgb(var(--super-lt-gray)); + --highlight-background-color: rgb(250, 250, 250); --highlight-foreground-color: var(--foreground-body-color); } -@media (prefers-color-scheme: dark) { - :root { - } -} .chroma { line-height: var(--line-height); @@ -28,7 +24,17 @@ /* 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 } +/* 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 } diff --git a/assets/styles/nethack.css b/assets/styles/nethack.css index d095485..047fc40 100644 --- a/assets/styles/nethack.css +++ b/assets/styles/nethack.css @@ -1,11 +1,9 @@ /* Eryn Wells */ :root { - --logentry-background-color: var(--tag-background-color); - --logentry-foreground-color: var(--tag-text-color); -} + --logentry-background-color: var(--tag-background-color); + --logentry-foreground-color: var(--tag-text-color); -:root { --separator-color: rgb(var(--dk-gray)); --box-shadow-color: rgba(var(--dk-gray), 0.8); --body-code-background-color: rgb(var(--dk-gray)); diff --git a/assets/styles/photos.css b/assets/styles/photos/001_photos.css similarity index 53% rename from assets/styles/photos.css rename to assets/styles/photos/001_photos.css index 923bc63..5979819 100644 --- a/assets/styles/photos.css +++ b/assets/styles/photos/001_photos.css @@ -1,3 +1,4 @@ +{{ $gridSize := site.Params.photos.gridSize }} :root { --date-item-background-color: rgb(var(--lt-gray)); @@ -26,16 +27,13 @@ .photos.list { display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr)); gap: 4px; } .photos.list > * { margin-block-end: 0; -} - -.photos.page > nav { - margin-block-end: var(--body-item-spacing); + grid-column: auto; } .photos.list > a { @@ -44,13 +42,11 @@ } .photos.list > a > img { - border-radius: 3px; image-orientation: from-image; } .photos.list > div { background-color: var(--date-item-background-color); - border-radius: 3px; width: 100%; height: 100%; display: flex; @@ -89,73 +85,3 @@ content: ""; } } - -.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: var(--body-item-spacing) 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/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/root.css b/assets/styles/root.css deleted file mode 100644 index 1fddf29..0000000 --- a/assets/styles/root.css +++ /dev/null @@ -1,247 +0,0 @@ -@layer reset, typography, root, layout, template, page, utility; - -: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); - - --separator-color: rgb(var(--lt-gray)); - --header-border-color: var(--separator-color); - --footer-border-color: var(--separator-color); - - --box-shadow-color: rgba(var(--lt-gray), 0.8); - --header-box-shadow-color: var(--box-shadow-color); - - --body-item-spacing: 4rem; - --body-code-background-color: rgb(var(--super-lt-gray)); - - --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); - - --html-background-color: rgb(var(--background)); - - --nav-bulleted-spacing: 0.75rem; - - --platter-background-color: rgba(var(--white), var(--platter-background-opacity)); - --platter-background-opacity: 0.6; - --platter-backdrop-filter: blur(10px); - - --content-width: 80rem; - - --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)); - - --transition-duration: 0.7s; - - --menu-icon-size: 20px; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: var(--black); - - --separator-color: rgb(var(--dk-gray)); - --box-shadow-color: rgba(var(--dk-gray), 0.8); - --body-code-background-color: rgb(var(--dk-gray)); - - --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); - - --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 { text-decoration: none; } - a:hover { - text-decoration: underline; - text-underline-offset: 0.12em; - } - a.hover-only { - color: var(--color); - transition: color 0.2s; - } - a.hover-only:hover { - text-decoration: underline; - transition: color 0.2s; - } - - blockquote { - border-inline-start: 4px solid var(--separator-color); - padding-inline-start: 2rem; - margin-inline-start: 2rem; - } - - code { - background-color: var(--body-code-background-color); - border-radius: 0.25rem; - display: inline-block; - padding-inline: 0.6rem; - } - code.nobg { - background: none; - border-radius: 0; - display: inline-block; - margin: 0; - padding: 0; - } - - details { width: 100%; } - - details:has(#TableOfContents) { - box-sizing: border-box; - border: 1px solid var(--separator-color); - padding: var(--body-item-spacing); - } - - fieldset { - box-sizing: border-box; - border: 1px solid var(--separator-color); - padding: var(--body-item-spacing); - padding-top: calc(var(--body-item-spacing) / 10); - } - - html { background-color: var(--html-background-color); } - - img { - height: auto; - max-width: 100%; - } - - img.circular { - shape-outside: circle(50%); - -webkit-clip-path: circle(50%); - clip-path: circle(50%); - } - - main { - box-sizing: border-box; - max-width: calc(var(--content-width) + 2 * var(--body-item-spacing)); - margin: var(--body-item-spacing) auto; - padding-inline: var(--body-item-spacing); - width: 100%; - } - - nav.bulleted > li:first-child::before { - content: ""; - margin-inline: 0; - } - - nav.bulleted > li::before { - color: var(--heading-color); - content: "•"; - font-size: 60%; - font-weight: normal; - opacity: 80%; - margin-inline: var(--nav-bulleted-spacing); - } - - ul, - ol, - dl, - ul > li, - ol > li, - dl > dt, - ul > li > ul, - ul > li > ol, - ol > li > ul, - ol > li > ol { - margin-inline-start: calc(var(--body-item-spacing) + 2px); - } - - header > span.series { - font-size: 1.75rem; - letter-spacing: 1px; - margin-inline-start: 0.5em; - } - - header > span.series::before { - color: var(--header-series-arrow-foreground-color); - content: "↳"; - margin-inline-end: 0.25em; - } - - .post-list { - list-style: none; - margin: 0; - padding: 0; - } - @supports (display: subgrid) { - .post-list { - align-items: baseline; - display: grid; - gap: 1em; - grid-template-columns: - minmax(150px, max-content) minmax(20px, max-content) 3px auto; - grid-template-areas: "month day line title"; - } - } - - .post-list li { - align-items: baseline; - border-radius: 6px; - display: grid; - gap: 1em; - padding: 0.1em; - } - - .post-title { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 4rem; - } - - .post-title h1 { - flex-grow: 1; - font-size: 1.8em; - margin-block: 0; - padding-bottom: 0; - } - - .post-title > .post-date { - color: var(--light-dim); - display: inline-block; - font-size: 1.75rem; - inline-size: min-content; - letter-spacing: 1px; - margin-block-start: 0.5rem; - white-space: nowrap; - } - - table { - border: 1px solid var(--separator-color); - border-collapse: collapse; - margin-inline: auto; - width: 50%; - } - - td, th { - border: 1px solid var(--separator-color); - padding-inline: 1rem; - } -} 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/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..1505ce9 --- /dev/null +++ b/assets/styles/root/002_layout.css @@ -0,0 +1,449 @@ +: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; + max-width: var(--content-width); + 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_figures.css b/assets/styles/root/050_figures.css deleted file mode 100644 index 7b75591..0000000 --- a/assets/styles/root/050_figures.css +++ /dev/null @@ -1,62 +0,0 @@ -@layer root { - figcaption { - margin-block-start: 0.2em; - text-align: center; - } - - figure { - border-radius: 6px; - margin: 0; - margin-inline: 0; - overflow: hidden; - max-width: var(--content-width); - } - - figure > .container { - align-items: center; - display: flex; - justify-content: center; - gap: var(--body-item-spacing); - } - - figure.bordered { - padding: 0.5rem; - border: 2px solid #eee; - } - - figure a, - figure a:hover { - border: 0; - } - - figure img { - display: block; - border-radius: 6px; - height: auto; - max-width: var(--content-width); - } - - figure svg { - width: 100%; - height: auto; - } - - figure .youtube { - border-radius: 6px; - overflow: hidden; - max-width: var(--content-width); - width: 100%; - } - - .p5-sketch { - display: block; - position: relative; - width: 100%; - } - - .youtube iframe { - aspect-ratio: 16 / 9; - margin-bottom: -3px; - width: 100%; - } -} diff --git a/assets/styles/root/050_main_element_margins.css b/assets/styles/root/050_main_element_margins.css deleted file mode 100644 index 79c3ac6..0000000 --- a/assets/styles/root/050_main_element_margins.css +++ /dev/null @@ -1,8 +0,0 @@ -@layer root { - main > :first-child, - main > article > :first-child { margin-block-start: 0; } - main > :not(:last-child), - main > article > :not(:last-child) { margin-block-end: var(--body-item-spacing); } - main > :last-child, - main > article > :last-child { margin-block-end: 0; } -} diff --git a/assets/styles/root/050_ruby_controls.css b/assets/styles/root/050_ruby.css similarity index 100% rename from assets/styles/root/050_ruby_controls.css rename to assets/styles/root/050_ruby.css diff --git a/assets/styles/root/050_site_header.css b/assets/styles/root/050_site_header.css index a0a33ad..05eda7f 100644 --- a/assets/styles/root/050_site_header.css +++ b/assets/styles/root/050_site_header.css @@ -17,100 +17,13 @@ } } - - header.site h1 > a:hover { text-decoration: none; } - - header.site { - display: flex; - width: 100%; - z-index: 10000; - } - - 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; - } - - 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; } - } - - @media (max-width: 435px) { - header.site nav:first-of-type { order: 5; } - } - - nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); } - nav.social > li:first-child { margin-inline-start: 0; } - - .social { - display: block flex; - letter-spacing: 2px; - margin-left: auto; - order: 2; - } - - .social > li > a { - background-image: var(--url); - background-repeat: no-repeat; - background-size: var(--menu-icon-size); - display: block; - height: var(--menu-icon-size); - width: var(--menu-icon-size); - } - - .social > li > a > span { - display: none; - } - - .social > li + li:before { - color: var(--dark); - padding: 0 0.5rem; - } - - #social-menu-mastodon img { - content: var(--mastodon-icon); - position: relative; - top: 1px; - } - + #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_syntax_highlighting.css b/assets/styles/root/050_syntax_highlighting.css deleted file mode 100644 index b4dc1f6..0000000 --- a/assets/styles/root/050_syntax_highlighting.css +++ /dev/null @@ -1,20 +0,0 @@ -.highlight code { - background-color: inherit; - margin-block: 0.5em; -} - -.highlight .line { - display: grid; - grid-template-columns: max-content auto; -} - -.highlight .ln a { - -webkit-user-select: none; - -moz-use-select: none; - -ms-user-select: none; - user-select: none; -} - -.highlight .cl { - white-space: pre-wrap; -} diff --git a/assets/styles/root/050_tags_list.css b/assets/styles/root/050_tags_list.css index 7490f3e..a9c60a8 100644 --- a/assets/styles/root/050_tags_list.css +++ b/assets/styles/root/050_tags_list.css @@ -1,5 +1,15 @@ +.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; @@ -12,10 +22,7 @@ ul.tags > li { display: inline-block; font-size: 75%; letter-spacing: 1px; -} - -ul.tags > li:first-child { - margin-inline-start: 0; + margin: 0; } ul.tags > li:hover { @@ -28,6 +35,7 @@ ul.tags > li > a { height: 100%; width: 100%; padding: 0.6rem 1rem; + text-decoration: none; } ul.tags > li > a:hover { @@ -35,10 +43,9 @@ ul.tags > li > a:hover { text-decoration: none; } -ul.tags > li + li { margin-inline-start: 1rem; } -ul.tags > li.chevron + li { margin-inline-start: 0 } +ul.tags > li + li { margin-inline-start: 0; } -ul.tags > .chevron { +.taxonomies > .chevron { align-items: center; border: 0; border-radius: 0; @@ -47,11 +54,7 @@ ul.tags > .chevron { display: flex; justify-content: center; margin-inline-start: 0; - padding-inline-start: 1px; + position: relative; + top: 2px; width: 2rem; } - -ul.tags > .chevron:hover { - color: var(--tag-spacer-foreground-color); - background-color: inherit; -} diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index 13a2ebb..aba2e1d 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -1,7 +1,7 @@ @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"); + url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff"); font-weight: normal; font-style: normal; } @@ -19,39 +19,48 @@ --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; - - --color: rgba(var(--black), 0.8); - --a-color: rgb(var(--mid-blue)); - --a-ruby-color: var(--color); - --heading-color: rgb(var(--black)); - --site-nav-link-color: var(--a-color); - } - @media (prefers-color-scheme: dark) { - :root { - --color: rgba(var(--white), 0.8); - --heading-color: rgb(var(--white)); - } } - a { color: var(--a-color); } - a:visited { color: var(--a-color); } - a.hover-only { color: var(--color); } - a.hover-only:hover { color: var(--a-color); } - a rt, a:hover rt { color: var(--a-ruby-color); } + 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); } + 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 { @@ -59,77 +68,43 @@ line-height: 1; } - h1 { font-size: 305%; } - h2 { font-size: 244%; } - h3 { font-size: 195%; } - h4 { font-size: 156%; } - h5 { font-size: 125%; } - h6 { font-size: 100%; } + 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.site nav > .active { font-weight: bold; } - header.site nav > li { color: var(--site-nav-link-color); } + header > span.series::before { + content: "↳"; + } - 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); } + 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 { - color: var(--heading-color); font-family: var(--font-family-heading); font-weight: 600; letter-spacing: 1pt; line-height: var(--heading-line-height); } - h1.site { - --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)); + h1.gradient { font-family: var(--font-family-site-heading); } - h1.site > a { color: inherit; } + h1.gradient > a { color: inherit; } - @supports not ((background-clip: text) or (-webkit-background-clip: text)) { - h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); } - h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); } - h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); } - h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); } - h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); } - h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); } - h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); } - h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); } - h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); } - h1.site span:nth-child(10n) { color: var(--site-title-color10); } - } - @supports (background-clip: text) or (-webkit-background-clip: text) { - h1.site { - background: - radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%), - radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%), - radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%), - radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%), - radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%), - radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } - } header.site h1.site { font-size: var(--site-header-font-size); @@ -153,20 +128,58 @@ 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 { - color: var(--color); font-family: var(--font-family); font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max)); } - nav.bulleted > li:first-child::before { color: var(--color); } - nav.bulleted > li::before { color: var(--heading-color); } + 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%; } - p { line-height: var(--line-height); } + main:has(header > .post-title > h1) :is(h5, h6) { + font-family: var(--font-family-body); + } - ruby:hover rt { color: var(--color); } + nav.bulleted>li:first-child::before { + content: ""; + } - @media (prefers-color-scheme: dark) { - rt { color: rgba(var(--white), 0.5); } + 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 index eef66bb..d5be152 100644 --- a/assets/styles/root/099_utility.css +++ b/assets/styles/root/099_utility.css @@ -1,8 +1,13 @@ @layer utility { .centered { text-align: center; } - .float-right { float: right; } + + .float-right { + float: right; + justify-self: end; + } .nobreak { white-space: nowrap; } + .noselect { cursor: default; -webkit-user-select: none; @@ -23,4 +28,14 @@ .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/markup.yaml b/config/_default/markup.yaml index f289537..c271d52 100644 --- a/config/_default/markup.yaml +++ b/config/_default/markup.yaml @@ -3,6 +3,6 @@ goldmark: unsafe: true highlight: anchorLineNos: true - lineNos: true + lineNos: false lineNumbersInTable: false noClasses: false diff --git a/config/_default/params.yaml b/config/_default/params.yaml index 7782e00..7776efd 100644 --- a/config/_default/params.yaml +++ b/config/_default/params.yaml @@ -4,3 +4,7 @@ twitter: erynofwales github: erynofwales instagram: erynofwales description: Home page of Eryn Rachel Wells + +photos: + gridSize: 200 + thumbnailSize: 600 diff --git a/content/about/_index.md b/content/about/_index.md index f5afdab..7b2ba05 100644 --- a/content/about/_index.md +++ b/content/about/_index.md @@ -4,10 +4,15 @@ 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. + " --- -{{< circular_image id=me name=me class="float-right" width=200 - alt="A photo of me, wearing a hat, standing in front of a stone background">}} +{{% 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, @@ -17,6 +22,8 @@ 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. +{{% /section %}} + ## Hobbies I've been a musician for most of my life. I started on the piano at age seven, diff --git a/content/about/style.css b/content/about/style.css index b39c308..45d6e31 100644 --- a/content/about/style.css +++ b/content/about/style.css @@ -1,4 +1,17 @@ +@layer page { + main > section > p:not(:last-child) { + margin-bottom: var(--body-item-spacing); + } -img#me { + p:has(img#me) { + display: inline; + grid-column: unset; + margin-bottom: 0; + } + + img#me { + margin: 0; + shape-outside: circle(55%); width: min(200px, 25%); + } } diff --git a/content/test/index.md b/content/test/index.md index a0aa50c..746c31d 100644 --- a/content/test/index.md +++ b/content/test/index.md @@ -6,13 +6,18 @@ resources: - name: gay title: The Gayest Place in Town is my Therapist's Office src: gay.jpeg + params: + alt: " + A doormat with a border of rainbow colored blocks. In the middle, in + a blobby script, it says 'The Gayest Place In Town' + " categories: Test series: "Testing Erynwells.me" tags: ["Test A", "Test B", "テスト"] toc: open --- -# Body Text +## Body Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec @@ -31,7 +36,7 @@ interdum varius sit amet mattis vulputate enim. Eget nunc lobortis mattis aliquam faucibus purus in massa. Amet consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare lectus sit amet est. -# Code Highlighting +## Code Highlighting Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore `magna aliqua`. @@ -58,7 +63,7 @@ int main(int argc, char *argv[]) Amet consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare lectus sit amet est. -# Figures +## Figures Iaculis nunc sed augue lacus viverra vitae congue. Non curabitur gravida arcu ac. Viverra orci sagittis eu volutpat odio facilisis mauris sit. Scelerisque in @@ -107,7 +112,7 @@ faucibus nisl tincidunt. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tellus elementum sagittis vitae et leo duis. Nunc sed id semper risus in hendrerit gravida. -# Block Quotes +## Block Quotes Here's a block quote: @@ -122,7 +127,7 @@ Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Libero nunc consequat interdum varius sit amet mattis vulputate enim. -# Lists +## Lists Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec @@ -158,30 +163,30 @@ Great! Here's a nested list: Woah! -# Headers +## Headers Here are some headers. -# H1 +### H3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec ultrices. Augue eget arcu dictum varius duis at consectetur lorem donec. Donec ac odio tempor orci dapibus ultrices. -## H2 +#### H4 Et leo duis ut diam. Pellentesque id nibh tortor id aliquet lectus. Ac orci `phasellus` egestas tellus rutrum tellus pellentesque eu. Amet commodo nulla facilisi nullam vehicula ipsum. -### H3 +##### H5 Posuere urna nec tincidunt praesent semper feugiat nibh. Phasellus vestibulum lorem sed risus. Consequat semper viverra nam libero justo laoreet sit amet cursus. -#### H4 +###### H6 Ipsum dolor sit amet consectetur adipiscing elit. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Sem viverra aliquet eget sit amet tellus @@ -190,7 +195,7 @@ vulputate enim. Eget nunc lobortis mattis aliquam faucibus purus in massa. Amet consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare lectus sit amet est. -# {{< ruby Japanese ja >}}日本語{{< /ruby >}} +## {{% ruby Japanese ja %}}日本語{{% /ruby %}} Here's some text in {{< ruby Japanese ja >}}日本語{{< /ruby >}} with {{< ruby furigana ja >}}ふりがな{{< /ruby >}}. diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..44de726 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,3 @@ + + {{ .Text | safeHTML }} + diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b137185..77b721a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ block "body" . -}} {{- block "before" . -}}{{- end -}} {{- block "header" . -}}{{ partial "header.html" .}}{{- end -}} -
+
{{ block "main" . }}{{ end }}
{{- block "footer" . -}} diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 58fd86b..2ccb152 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -3,29 +3,26 @@ {{ end }} {{ define "main" }} -
-

{{ .Title }}

-
+
+

{{ .Title }}

+
-{{ partial "table_of_contents.html" . }} -{{ partial "ruby_controls.html" . }} + {{ partial "ruby_controls.html" . }} -{{- $hasContent := false -}} -{{ with .Content }} - {{- $hasContent = true -}} - {{ . }} -{{ end }} - -{{ if .Params.posts | default true }} - {{ if and $hasContent }} -

Posts

+ {{- $hasContent := false -}} + {{ with .Content }} + {{- $hasContent = true -}} + {{ . }} {{ end }} - + {{ if .Params.posts | default true }} + {{ if $hasContent }} +

Posts

+ {{ end }} + + {{- range .Pages -}} + {{ .Render "li_grid_with_date" }} + {{- end -}} {{ end }} {{ end }} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 4464b52..01bb815 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -3,20 +3,38 @@ {{ end }} {{ define "main" }} -
-

{{ .Title }}

-
+
+

{{ .Title }}

+
+
+ {{ .Content }} -{{ .Content }} + {{- range .Data.Terms.Alphabetical -}} +

{{ .Name | title }}

-{{- range .Data.Terms.Alphabetical -}} -

{{ .Name | title }}

-
    - {{- range .WeightedPages -}} -
  • {{ .Title }}
    • - {{- end -}} -
-{{- end -}} + {{- range .WeightedPages -}} +
+
+ +

{{ .Title }}

+
+ + {{ if .Description }} +

{{ .Description }}

+ {{ else if lt .WordCount 110 }} + {{ .Content }} + {{ else }} + {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }} +

{{ .WordCount }} words

+ {{ end }} + + {{ partial "footer_tags.html" . }} + + {{ partial "development/draft_tag.html" . }} +
+ {{- end -}} + {{- end -}} +
{{ end }} {{ define "footer" }} diff --git a/layouts/about/section.atom.atom b/layouts/about/section.atom.atom new file mode 100644 index 0000000..e69de29 diff --git a/layouts/blog/li_grid_with_date.html b/layouts/blog/li_grid_with_date.html index 245f559..57cbda7 100644 --- a/layouts/blog/li_grid_with_date.html +++ b/layouts/blog/li_grid_with_date.html @@ -1,11 +1,19 @@ -
  • - - - {{ .Title }} -
    - {{ with index (.GetTerms "categories") 0 }} - {{ .LinkTitle }} - {{ end }} -
    +
    +
    + +

    {{ .Title }}

    +
    + + {{ if .Description }} +

    {{ .Description }}

    + {{ else if lt .WordCount 110 }} + {{ .Content }} + {{ else }} + {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }} +

    {{ .WordCount }} words

    + {{ end }} + + {{ partial "footer_tags.html" . }} + {{ partial "development/draft_tag.html" . }} -
    • + diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 070b633..07874e0 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -4,14 +4,13 @@ {{ define "main" }} {{- range .Pages.ByDate.GroupByDate "2006" -}} -
    {{ .Key | title }}
    -
      +

      {{ .Key | title }}

      + {{- range .Pages -}} {{- if or (not .Draft) (not hugo.IsProduction) -}} {{- .Render "li_grid_with_date" -}} {{- end -}} {{- end -}} -
    {{- end -}} {{ end }} diff --git a/layouts/blog/section.atom.atom b/layouts/blog/section.atom.atom new file mode 100644 index 0000000..191a04c --- /dev/null +++ b/layouts/blog/section.atom.atom @@ -0,0 +1,29 @@ +{{- $pctx := . -}} +{{- if .IsHome -}} {{ $pctx = .Site }} {{- end -}} +{{- $pages := slice -}} +{{- if or $.IsHome $.IsSection -}} + {{- $pages = $pctx.RegularPages -}} +{{- else -}} + {{- $pages = $pctx.Pages -}} +{{- end -}} +{{- $limit := .Site.Config.Services.RSS.Limit -}} +{{- if ge $limit 1 -}} {{- $pages = $pages | first $limit -}} {{- end -}} +{{ printf "" | safeHTML }} + + {{ .Site.Title }} + + + + {{ if not .Date.IsZero }}{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}{{ end }} + {{ .Permalink }} + {{ with .Site.Author.name }} + + {{ . }} + {{ with $.Site.Author.email }}{{ . }}{{ end }} + {{ $.Site.Home.Permalink }} + + {{ end }} + Hugo {{ hugo.Version }} + © 2020-{{ now.Year }} Eryn Wells + {{ range $pages }}{{ .Render "atom_entry" }}{{ end }} + diff --git a/layouts/index.html b/layouts/index.html index d39322b..0160d19 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,7 @@ {{ define "body" }}
    -

    {{ partial "site_name.html" .Title }}

    +

    {{ partial "site_name.html" .Title }}

    {{ .Content }}
    @@ -9,213 +9,3 @@
    {{ end }} - -{{ define "styles" }} - -{{ end }} diff --git a/layouts/nethack/section.atom.atom b/layouts/nethack/section.atom.atom new file mode 100644 index 0000000..e69de29 diff --git a/layouts/nethack/section.html b/layouts/nethack/section.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/nihongo/section.atom.atom b/layouts/nihongo/section.atom.atom new file mode 100644 index 0000000..e69de29 diff --git a/layouts/nihongo/section.html b/layouts/nihongo/section.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/content_header.html b/layouts/partials/content_header.html index fd54329..93877a7 100644 --- a/layouts/partials/content_header.html +++ b/layouts/partials/content_header.html @@ -1,18 +1,23 @@
    - {{ partial "development/draft_tag.html" . }} -
    -

    {{ .Title }}

    - {{ if and (not (eq .Section "about")) .Date }} -
    - {{ end }} -
    +

    {{ .Title }}

    + + {{ if and (not (eq .Section "about")) .Date }} + + {{ end }} + {{- if .Params.series -}} {{- $series := .GetTerms "series" -}} + {{- if gt (len $series) 1 -}} {{- errorf "More than one series for %s" .Permalink -}} {{- end -}} + {{- with index $series 0 -}} - {{ .Title }} + + {{ .Title }} + {{- end -}} {{- end -}} + + {{ partial "development/draft_tag.html" . }}
    diff --git a/layouts/partials/development/draft_tag.html b/layouts/partials/development/draft_tag.html index ee7f673..d12573e 100644 --- a/layouts/partials/development/draft_tag.html +++ b/layouts/partials/development/draft_tag.html @@ -1 +1 @@ -{{ if .Draft }}d{{ end }} +{{ if .Draft }}draft{{ end }} diff --git a/layouts/partials/footer_tags.html b/layouts/partials/footer_tags.html index 6e88463..d9f65de 100644 --- a/layouts/partials/footer_tags.html +++ b/layouts/partials/footer_tags.html @@ -1,24 +1,28 @@ -{{- if or .Params.categories .Params.tags -}} -
      - {{- if .Params.categories -}} - {{- $categories := .GetTerms "categories" -}} - {{- if gt (len $categories) 1 -}} - {{- errorf "More than one category for %q" .Path -}} +
      + {{- if or .Params.categories .Params.tags -}} +
        + {{- if .Params.categories -}} + {{- $categories := .GetTerms "categories" -}} + {{- if gt (len $categories) 1 -}} + {{- errorf "More than one category for %q" .Path -}} + {{- end -}} + + {{- with index (.GetTerms "categories") 0 -}} +
      • {{ .LinkTitle }}
        • + {{- end -}} + {{- end -}} +
      + + {{- if and .Params.categories .Params.tags -}} +
      ⏵
      {{- end -}} - {{- with index (.GetTerms "categories") 0 -}} -
    • {{ .LinkTitle }}
      • +
        + {{- if .Params.tags -}} + {{- range .GetTerms "tags" -}} +
      • {{ .LinkTitle }}
        • + {{- end -}} {{- end -}} +
      {{- end -}} - - {{- if and .Params.categories .Params.tags -}} -
    • ⏵
      • - {{- end -}} - - {{- if .Params.tags -}} - {{- range .GetTerms "tags" -}} -
    • {{ .LinkTitle }}
      • - {{- end -}} - {{- end -}} -
    -{{- end -}} + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 562229e..50856b3 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,20 +2,25 @@ {{- $url := .RelPermalink -}}
    -

    +

    {{ partial "site_name.html" site.Params.shortTitle }}

    {{ partial "site_nav.html" . }} diff --git a/layouts/partials/resources/page_css.html b/layouts/partials/resources/page_css.html index 6bd5f43..6bbd568 100644 --- a/layouts/partials/resources/page_css.html +++ b/layouts/partials/resources/page_css.html @@ -1,12 +1,24 @@ {{ $stylesheets := slice }} {{ with .Resources.Match "*.css" }} {{ range . }} - {{ $stylesheets = $stylesheets | append (. | resources.ExecuteAsTemplate .Name .) }} - {{ end }} - {{ if hugo.IsProduction }} - {{ $stylesheets = slice ($stylesheets - | resources.Concat (printf "%s/page.css" $.File.Dir) - | fingerprint "md5") }} + {{ $stylesheets = $stylesheets | append . }} {{ end }} {{ end }} -{{ return $stylesheets }} + +{{ if eq .Kind "home" }} + {{ with resources.Get "styles/home.css" }} + {{ $stylesheets = $stylesheets | append . }} + {{ end }} +{{ end }} + +{{ $processedStylesheets := slice }} +{{ range $stylesheets }} + {{ $processedStylesheets = $processedStylesheets | append (. | resources.ExecuteAsTemplate .Name .) }} +{{ end }} +{{ if hugo.IsProduction }} + {{ $processedStylesheets = slice ($processedStylesheets + | resources.Concat (printf "%s/page.css" $.File.Dir) + | fingerprint "md5") }} +{{ end }} + +{{ return $processedStylesheets }} diff --git a/layouts/partials/resources/root_css.html b/layouts/partials/resources/root_css.html index 81f70ca..aee938d 100644 --- a/layouts/partials/resources/root_css.html +++ b/layouts/partials/resources/root_css.html @@ -1,5 +1,4 @@ -{{ $stylesheets := slice (resources.Get "styles/root.css") - (resources.Get "styles/railroad.css") +{{ $stylesheets := slice (resources.Get "styles/railroad.css") (resources.Get "styles/monokai.css") | append (resources.Match "styles/root/*.css" | sort) }} {{ if not hugo.IsProduction }} diff --git a/layouts/partials/single_main.html b/layouts/partials/single_main.html index 38a1a91..970e27b 100644 --- a/layouts/partials/single_main.html +++ b/layouts/partials/single_main.html @@ -1,9 +1,16 @@ {{ partial "content_header.html" . }} +{{ partial "table_of_contents.html" . }} + {{- $layout := .Params.layout -}} - -{{ .Content }} - +{{- $content := .Content -}} +{{ with $layout := .Params.layout }} +
    + {{ $content }} +
    +{{ else }} + {{ $content }} +{{ end}}