From 8d3d2d8b618a725d398144a3aef650cb4049ea24 Mon Sep 17 00:00:00 2001 From: Ungol Date: Tue, 23 Dec 2025 22:27:52 +0100 Subject: [PATCH] refacto: reorganize scss for modularity --- sass/_base.scss | 293 ------------------------------------ sass/_fonts.scss | 6 +- sass/_theme.scss | 9 +- sass/parts/_anchor.scss | 23 +++ sass/parts/_code.scss | 25 +++ sass/parts/_footnote.scss | 17 +++ sass/parts/_misc.scss | 20 +++ sass/parts/_page_title.scss | 32 ++++ sass/parts/_table.scss | 63 ++++++++ sass/styles.scss | 116 +++++++++++++- 10 files changed, 301 insertions(+), 303 deletions(-) delete mode 100644 sass/_base.scss create mode 100644 sass/parts/_anchor.scss create mode 100644 sass/parts/_code.scss create mode 100644 sass/parts/_footnote.scss create mode 100644 sass/parts/_misc.scss create mode 100644 sass/parts/_page_title.scss create mode 100644 sass/parts/_table.scss diff --git a/sass/_base.scss b/sass/_base.scss deleted file mode 100644 index f42847d..0000000 --- a/sass/_base.scss +++ /dev/null @@ -1,293 +0,0 @@ -@use 'fonts'; -@use 'theme'; - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: fonts.$text-font; - scroll-behavior: smooth; -} - -body { - color: var(--text); - background-color: var(--base); - font-size: 1rem; - line-height: 1.75; -} - -article { - max-width: min(700px, 95%); - margin-left: auto; - margin-right: auto; -} - -section { - &.title { - margin-bottom: 2.5rem; - - &>h1.title { - font-size: 3rem; - font-weight: 900; - margin-bottom: 0; - margin-top: 0; - } - - &>p { - &.subtitle { - color: var(--subtext1); - font-size: 1.5rem; - margin-top: 0; - margin-bottom: 2.5rem; - } - - &.metadata { - color: var(--subtext1); - font-size: .8rem; - font-weight: 100; - text-align: center; - margin: 0; - border-bottom-width: 1px; - border-bottom-color: var(--overlay0); - border-bottom-style: solid; - } - } - } -} - -h1 { - font-size: 2rem; - font-weight: medium; - margin-top: 2rem; - margin-bottom: 1rem; -} - -h2 { - font-size: 1.5rem; - margin-bottom: 1rem; - font-weight: medium; -} - -h3 { - font-size: 1.2rem; - margin-bottom: .6rem; - font-weight: medium; -} - -h4 { - font-size: 1.1rem; - font-weight: medium; -} - -h5 { - font-size: 1rem; - font-weight: medium; -} - -h6 { - font-size: .9rem; - font-weight: medium; -} - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; -} - -p { - margin-top: 1.25rem; - margin-bottom: 1.25rem; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - &>a { - visibility: hidden; - opacity: 0; - transition: visibility 0s, opacity 0.5s linear; - } - - &:hover { - &>a { - visibility: visible; - opacity: 1; - } - } -} - -a { - color: var(--blue); - text-decoration: underline; - text-decoration-color: color-mix(in srgb, var(--blue), transparent 40%); - text-decoration-thickness: 0.01rem; - text-underline-offset: 0.3rem; - - &:hover { - color: var(--sky); - } - - &:visited { - color: var(--lavender); - } - - &.zola-anchor { - margin-left: .5rem; - } -} - -li { - &::marker { - color: var(--overlay1); - } -} - -img, -video { - max-width: 100%; - height: auto; - margin-left: auto; - margin-right: auto; - display: block; - border-radius: var(--standard-border-radius); -} - -pre { - font-family: fonts.$mono-font; - padding: 1.25rem; - border-radius: var(--standard-border-radius); - border-style: solid; - border-color: var(--overlay0); - border-width: 0.15rem; - line-height: initial; - overflow-x: scroll; - - &>code { - background-color: initial; - border: initial; - } -} - -code { - font-family: fonts.$mono-font; - background-color: var(--mantle); - padding: .2rem; - border-radius: .3rem; - border-style: dashed; - border-width: .1rem; - border-color: var(--surface0); -} - -table { - border-collapse: separate; - border-spacing: 0; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - margin-left: auto; - margin-right: auto; - overflow-x: scroll; -} - -td, -th { - padding: 0.5rem; - padding: 1rem 1.5rem; - border-style: solid; - border-width: .1rem; - border-color: var(--overlay0); - text-align: start; -} - -th { - background-color: var(--base); - text-transform: uppercase; - font-weight: medium; - font-size: small; - border: none -} - -tr:first-child>td:first-child { - border-top-left-radius: var(--standard-border-radius); -} - -tr:first-child>td:last-child { - border-top-right-radius: var(--standard-border-radius); -} - -tr:last-child>td:first-child { - border-bottom-left-radius: var(--standard-border-radius); -} - -tr:last-child>td:last-child { - border-bottom-right-radius: var(--standard-border-radius); -} - -tr>td:last-child { - border-right-width: .15rem; -} - -tr:first-child>td { - border-top-width: .15rem; -} - -tr>td:first-child { - border-left-width: .15rem; -} - -tr:last-child>td { - border-bottom-width: .15rem; -} - -tr:nth-child(even) td { - background-color: var(--surface0); -} - -hr { - color: var(--overlay0); - margin-top: 3rem; - margin-bottom: 3rem; - width: 50%; - margin-left: auto; - margin-right: auto; - border-style: solid; - border-radius: 1rem; - border-width: 1px; -} - -cite { - &::before { - content: "~ " - } - - font-style: italic; - color: var(--subtext0); -} - -footer.footnotes { - font-size: .8rem; - color: var(--subtext1); - margin-top: 3rem; - border-top: 1px solid var(--overlay0); - - &>ol.footnotes-list>li { - margin-top: 1rem; - - &>p { - margin: { - top: .4rem; - bottom: .4rem; - } - } - } -} \ No newline at end of file diff --git a/sass/_fonts.scss b/sass/_fonts.scss index 2a8f661..0877bbf 100644 --- a/sass/_fonts.scss +++ b/sass/_fonts.scss @@ -80,8 +80,4 @@ src: url("fonts/UbuntuNerdFont/UbuntuMonoNerdFont-RegularItalic.ttf") format(truetype); font-weight: 400; font-style: italic; -} - -$text-font: "Ubuntu Nerd Font", Helvetica, sans-serif; -$title-font: "Ubuntu Nerd Font", Helvetica, sans-serif; -$mono-font: "Ubuntu Mono Nerd Font", monospace; \ No newline at end of file +} \ No newline at end of file diff --git a/sass/_theme.scss b/sass/_theme.scss index 8627547..48324a5 100644 --- a/sass/_theme.scss +++ b/sass/_theme.scss @@ -27,9 +27,12 @@ --mantle: #{light.$mantle}; --crust: #{light.$crust}; - --standard-border-radius: .8rem + --standard-border-radius: .8rem; + --text-font: "Ubuntu Nerd Font", Helvetica, sans-serif; + --title-font: "Ubuntu Nerd Font", Helvetica, sans-serif; + --mono-font: "Ubuntu Mono Nerd Font", monospace; } - + @media (prefers-color-scheme: dark) { :root { color-scheme: dark; @@ -57,7 +60,7 @@ --base: #{dark.$base}; --mantle: #{dark.$mantle}; --crust: #{dark.$crust}; -} + } img, video { diff --git a/sass/parts/_anchor.scss b/sass/parts/_anchor.scss new file mode 100644 index 0000000..39c607d --- /dev/null +++ b/sass/parts/_anchor.scss @@ -0,0 +1,23 @@ +a.zola-anchor { + margin-left: .5rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + &>a { + visibility: hidden; + opacity: 0; + transition: visibility 0s, opacity 0.5s linear; + } + + &:hover { + &>a { + visibility: visible; + opacity: 1; + } + } +} \ No newline at end of file diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss new file mode 100644 index 0000000..0249570 --- /dev/null +++ b/sass/parts/_code.scss @@ -0,0 +1,25 @@ +pre { + font-family: var(--mono-font); + padding: 1.25rem; + border-radius: var(--standard-border-radius); + border-style: solid; + border-color: var(--overlay0); + border-width: 0.15rem; + line-height: initial; + overflow-x: scroll; + + &>code { + background-color: initial; + border: initial; + } +} + +code { + font-family: var(--mono-font); + background-color: var(--mantle); + padding: .2rem; + border-radius: .3rem; + border-style: dashed; + border-width: .1rem; + border-color: var(--surface0); +} \ No newline at end of file diff --git a/sass/parts/_footnote.scss b/sass/parts/_footnote.scss new file mode 100644 index 0000000..891c97b --- /dev/null +++ b/sass/parts/_footnote.scss @@ -0,0 +1,17 @@ +footer.footnotes { + font-size: .8rem; + color: var(--subtext1); + margin-top: 3rem; + border-top: 1px solid var(--overlay0); + + &>ol.footnotes-list>li { + margin-top: 1rem; + + &>p { + margin: { + top: .4rem; + bottom: .4rem; + } + } + } +} \ No newline at end of file diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss new file mode 100644 index 0000000..78fa358 --- /dev/null +++ b/sass/parts/_misc.scss @@ -0,0 +1,20 @@ +hr { + color: var(--overlay0); + margin-top: 3rem; + margin-bottom: 3rem; + width: 50%; + margin-left: auto; + margin-right: auto; + border-style: solid; + border-radius: 1rem; + border-width: 1px; +} + +cite { + &::before { + content: "~ " + } + + font-style: italic; + color: var(--subtext0); +} \ No newline at end of file diff --git a/sass/parts/_page_title.scss b/sass/parts/_page_title.scss new file mode 100644 index 0000000..ae6fe85 --- /dev/null +++ b/sass/parts/_page_title.scss @@ -0,0 +1,32 @@ +section { + &.title { + margin-bottom: 2.5rem; + + &>h1.title { + font-size: 3rem; + font-weight: 900; + margin-bottom: 0; + margin-top: 0; + } + + &>p { + &.subtitle { + color: var(--subtext1); + font-size: 1.5rem; + margin-top: 0; + margin-bottom: 2.5rem; + } + + &.metadata { + color: var(--subtext1); + font-size: .8rem; + font-weight: 100; + text-align: center; + margin: 0; + border-bottom-width: 1px; + border-bottom-color: var(--overlay0); + border-bottom-style: solid; + } + } + } +} \ No newline at end of file diff --git a/sass/parts/_table.scss b/sass/parts/_table.scss new file mode 100644 index 0000000..679a98e --- /dev/null +++ b/sass/parts/_table.scss @@ -0,0 +1,63 @@ +table { + border-collapse: separate; + border-spacing: 0; + margin-top: 1.5rem; + margin-bottom: 1.5rem; + margin-left: auto; + margin-right: auto; + overflow-x: scroll; +} + +td, +th { + padding: 0.5rem; + padding: 1rem 1.5rem; + border-style: solid; + border-width: .1rem; + border-color: var(--overlay0); + text-align: start; +} + +th { + background-color: var(--base); + text-transform: uppercase; + font-weight: medium; + font-size: small; + border: none +} + +tr:first-child>td:first-child { + border-top-left-radius: var(--standard-border-radius); +} + +tr:first-child>td:last-child { + border-top-right-radius: var(--standard-border-radius); +} + +tr:last-child>td:first-child { + border-bottom-left-radius: var(--standard-border-radius); +} + +tr:last-child>td:last-child { + border-bottom-right-radius: var(--standard-border-radius); +} + +tr>td:last-child { + border-right-width: .15rem; +} + +tr:first-child>td { + border-top-width: .15rem; +} + +tr>td:first-child { + border-left-width: .15rem; +} + +tr:last-child>td { + border-bottom-width: .15rem; +} + +tr:nth-child(even) td { + background-color: var(--surface0); +} \ No newline at end of file diff --git a/sass/styles.scss b/sass/styles.scss index 73f805c..3e018c9 100644 --- a/sass/styles.scss +++ b/sass/styles.scss @@ -1,2 +1,114 @@ -@use 'base'; -@use 'shortcodes/callout' \ No newline at end of file +@use 'theme'; +@use 'shortcodes/callout'; +@use 'parts/anchor'; +@use 'parts/code'; +@use 'parts/footnote'; +@use 'parts/misc'; +@use 'parts/page_title'; +@use 'parts/table'; + + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-family: var(--text-font); + scroll-behavior: smooth; +} + +body { + color: var(--text); + background-color: var(--base); + font-size: 1rem; + line-height: 1.75; +} + +article { + max-width: min(700px, 95%); + margin-left: auto; + margin-right: auto; +} + +h1 { + font-size: 2rem; + font-weight: medium; + margin-top: 2rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 1.5rem; + margin-bottom: 1rem; + font-weight: medium; +} + +h3 { + font-size: 1.2rem; + margin-bottom: .6rem; + font-weight: medium; +} + +h4 { + font-size: 1.1rem; + font-weight: medium; +} + +h5 { + font-size: 1rem; + font-weight: medium; +} + +h6 { + font-size: .9rem; + font-weight: medium; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +p { + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} + +a { + color: var(--blue); + text-decoration: underline; + text-decoration-color: color-mix(in srgb, var(--blue), transparent 40%); + text-decoration-thickness: 0.01rem; + text-underline-offset: 0.3rem; + + &:hover { + color: var(--sky); + } + + &:visited { + color: var(--lavender); + } +} + +li { + &::marker { + color: var(--overlay1); + } +} + +img, +video { + max-width: 100%; + height: auto; + margin-left: auto; + margin-right: auto; + display: block; + border-radius: var(--standard-border-radius); +} \ No newline at end of file