From 3766168bea2165ad77de15f9d0dfe3ec1be12a07 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Thu, 10 Oct 2024 23:06:23 -0700 Subject: [PATCH] Remove assets/styles --- assets/styles/blog/002_grid.css | 9 - assets/styles/development.css | 105 ------ assets/styles/home.css | 207 ----------- assets/styles/monokai.css | 198 ---------- assets/styles/nethack.css | 113 ------ assets/styles/photos/001_photos.css | 87 ----- assets/styles/photos/050_page.css | 34 -- assets/styles/photos/050_params.css | 68 ---- assets/styles/railroad.css | 64 ---- assets/styles/root/000_layers.css | 1 - assets/styles/root/001_reset.css | 7 - assets/styles/root/002_colors.css | 224 ------------ assets/styles/root/002_layout.css | 456 ------------------------ assets/styles/root/010_interactions.css | 14 - assets/styles/root/050_ruby.css | 25 -- assets/styles/root/050_site_footer.css | 41 --- assets/styles/root/050_site_header.css | 29 -- assets/styles/root/050_tags_list.css | 60 ---- assets/styles/root/050_typography.css | 188 ---------- assets/styles/root/099_utility.css | 43 --- 20 files changed, 1973 deletions(-) delete mode 100644 assets/styles/blog/002_grid.css delete mode 100644 assets/styles/development.css delete mode 100644 assets/styles/home.css delete mode 100644 assets/styles/monokai.css delete mode 100644 assets/styles/nethack.css delete mode 100644 assets/styles/photos/001_photos.css delete mode 100644 assets/styles/photos/050_page.css delete mode 100644 assets/styles/photos/050_params.css delete mode 100644 assets/styles/railroad.css delete mode 100644 assets/styles/root/000_layers.css delete mode 100644 assets/styles/root/001_reset.css delete mode 100644 assets/styles/root/002_colors.css delete mode 100644 assets/styles/root/002_layout.css delete mode 100644 assets/styles/root/010_interactions.css delete mode 100644 assets/styles/root/050_ruby.css delete mode 100644 assets/styles/root/050_site_footer.css delete mode 100644 assets/styles/root/050_site_header.css delete mode 100644 assets/styles/root/050_tags_list.css delete mode 100644 assets/styles/root/050_typography.css delete mode 100644 assets/styles/root/099_utility.css diff --git a/assets/styles/blog/002_grid.css b/assets/styles/blog/002_grid.css deleted file mode 100644 index d1f289a..0000000 --- a/assets/styles/blog/002_grid.css +++ /dev/null @@ -1,9 +0,0 @@ -/* 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 deleted file mode 100644 index fb1a795..0000000 --- a/assets/styles/development.css +++ /dev/null @@ -1,105 +0,0 @@ -/* 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 deleted file mode 100644 index 5a20cd5..0000000 --- a/assets/styles/home.css +++ /dev/null @@ -1,207 +0,0 @@ -@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 deleted file mode 100644 index 271e13f..0000000 --- a/assets/styles/monokai.css +++ /dev/null @@ -1,198 +0,0 @@ -: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 deleted file mode 100644 index aee5fce..0000000 --- a/assets/styles/nethack.css +++ /dev/null @@ -1,113 +0,0 @@ -/* 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 deleted file mode 100644 index 5979819..0000000 --- a/assets/styles/photos/001_photos.css +++ /dev/null @@ -1,87 +0,0 @@ -{{ $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 deleted file mode 100644 index 7af5542..0000000 --- a/assets/styles/photos/050_page.css +++ /dev/null @@ -1,34 +0,0 @@ -@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 deleted file mode 100644 index 2dcc7b4..0000000 --- a/assets/styles/photos/050_params.css +++ /dev/null @@ -1,68 +0,0 @@ -.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 deleted file mode 100644 index 6a75b33..0000000 --- a/assets/styles/railroad.css +++ /dev/null @@ -1,64 +0,0 @@ -: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 deleted file mode 100644 index 622ca5c..0000000 --- a/assets/styles/root/000_layers.css +++ /dev/null @@ -1 +0,0 @@ -@layer reset, typography, root, layout, section, page, utility; diff --git a/assets/styles/root/001_reset.css b/assets/styles/root/001_reset.css deleted file mode 100644 index 0d3eeb7..0000000 --- a/assets/styles/root/001_reset.css +++ /dev/null @@ -1,7 +0,0 @@ -@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 deleted file mode 100644 index abdfa1b..0000000 --- a/assets/styles/root/002_colors.css +++ /dev/null @@ -1,224 +0,0 @@ -: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 deleted file mode 100644 index 68a9d79..0000000 --- a/assets/styles/root/002_layout.css +++ /dev/null @@ -1,456 +0,0 @@ -: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; - } - - .content-header > .series { - margin-inline-start: 0.5em; - width: 100%; - } - - .content-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, - .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 deleted file mode 100644 index 955448b..0000000 --- a/assets/styles/root/010_interactions.css +++ /dev/null @@ -1,14 +0,0 @@ -/* 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 deleted file mode 100644 index c8f4b9a..0000000 --- a/assets/styles/root/050_ruby.css +++ /dev/null @@ -1,25 +0,0 @@ -@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 deleted file mode 100644 index 7e006b3..0000000 --- a/assets/styles/root/050_site_footer.css +++ /dev/null @@ -1,41 +0,0 @@ -@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 deleted file mode 100644 index 05eda7f..0000000 --- a/assets/styles/root/050_site_header.css +++ /dev/null @@ -1,29 +0,0 @@ -@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 deleted file mode 100644 index a9c60a8..0000000 --- a/assets/styles/root/050_tags_list.css +++ /dev/null @@ -1,60 +0,0 @@ -.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 deleted file mode 100644 index 4341d3b..0000000 --- a/assets/styles/root/050_typography.css +++ /dev/null @@ -1,188 +0,0 @@ -@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 deleted file mode 100644 index 7cf252e..0000000 --- a/assets/styles/root/099_utility.css +++ /dev/null @@ -1,43 +0,0 @@ -@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; - } -}