From d77ebed26990b47bf8b82ff7f2042c312bffe208 Mon Sep 17 00:00:00 2001 From: David Lapshin Date: Mon, 20 May 2024 16:14:58 +0300 Subject: [PATCH] Some initial sass refactoring (breaking change!) Well, it's not a breaking change if you don't restyle duckquill heavily :) --- sass/_aside.scss | 15 ++ sass/_code.scss | 64 ++++++++ sass/_containers.scss | 63 ++++++++ sass/_details.scss | 9 ++ sass/_general.scss | 60 ++++++++ sass/_kbd.scss | 19 +++ sass/_main.scss | 312 --------------------------------------- sass/_nav.scss | 2 +- sass/_pre-container.scss | 58 -------- sass/_table.scss | 33 +++++ sass/_typography.scss | 93 ++++++++++++ sass/style.scss | 9 +- 12 files changed, 365 insertions(+), 372 deletions(-) create mode 100644 sass/_aside.scss create mode 100644 sass/_code.scss create mode 100644 sass/_containers.scss create mode 100644 sass/_details.scss create mode 100644 sass/_general.scss create mode 100644 sass/_kbd.scss delete mode 100644 sass/_main.scss create mode 100644 sass/_table.scss create mode 100644 sass/_typography.scss diff --git a/sass/_aside.scss b/sass/_aside.scss new file mode 100644 index 0000000..56f00f2 --- /dev/null +++ b/sass/_aside.scss @@ -0,0 +1,15 @@ +aside { + float: right; + margin-inline-start: 1rem; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--primary-color-alpha); + padding: 1rem; + width: 30%; + + @media only screen and (max-width: 720px) { + float: none; + margin-inline-start: 0; + width: 100%; + } +} diff --git a/sass/_code.scss b/sass/_code.scss new file mode 100644 index 0000000..d39af87 --- /dev/null +++ b/sass/_code.scss @@ -0,0 +1,64 @@ +// CODE +pre, +code, +kbd { + font-family: var(--font-monospace-code); +} + +code:not(pre code) { + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-2); + padding: 0.125rem 0.375rem; + color: var(--red-fg); +} + +pre { + margin: 1rem 0 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + padding: 1rem; + max-width: 100vw; + overflow: auto; + line-height: normal; + + table td { + border: none; + padding: 0; + } + + // The line number cells + table td:nth-of-type(1) { + user-select: none; + text-align: center; + } + + mark { + display: block; + box-shadow: none; + border-radius: 0; // Unset code block border radius + background-color: var(--fg-muted-1); + padding: 0; // Unset mark padding + color: var(--fg-color); // Unset mark color from primary color to text color + } + + table { + box-shadow: none; + border-radius: 0; + border-collapse: collapse; + width: 100%; + table-layout: auto; + overflow: auto; + + tr { + &:nth-child(even) { + background-color: unset; + } + } + } + + // The line numbers already provide some kind of left/right padding + &[data-linenos] { + padding: 1rem 0; + } +} diff --git a/sass/_containers.scss b/sass/_containers.scss new file mode 100644 index 0000000..bff5b1f --- /dev/null +++ b/sass/_containers.scss @@ -0,0 +1,63 @@ +.container { + margin: 0 auto; + width: min(var(--container-width), 90%); +} + +.pre-container { + position: relative; + + code { + margin-right: 3rem; + } + + button { + -webkit-backdrop-filter: var(--blur); + all: unset; + display: inline-flex; + position: absolute; + top: 0.5rem; + right: 0.5rem; + backdrop-filter: var(--blur); + transition-duration: var(--transition); + transition-property: background-color, transform; + cursor: pointer; + box-shadow: var(--edge-highlight); + border-radius: 50%; + background-color: var(--fg-muted-1); + padding: 0.5rem; + width: 1rem; + height: 1rem; + + &:hover { + background-color: var(--fg-muted-2); + + i { + background-color: var(--fg-muted-5); + } + } + + &:active { + transform: scale(var(--active)); + } + + &.active { + background-color: var(--primary-color-alpha); + + i { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); + background-color: var(--primary-color); + } + } + + i { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); + display: inline-block; + mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); + transition: background-color var(--transition); + background-color: var(--fg-muted-4); + width: 1rem; + height: 1rem; + } + } +} diff --git a/sass/_details.scss b/sass/_details.scss new file mode 100644 index 0000000..72589db --- /dev/null +++ b/sass/_details.scss @@ -0,0 +1,9 @@ +details { + border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); + padding: 1rem; + + &>summary { + cursor: pointer; + } +} diff --git a/sass/_general.scss b/sass/_general.scss new file mode 100644 index 0000000..a652475 --- /dev/null +++ b/sass/_general.scss @@ -0,0 +1,60 @@ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + // scrollbar-color: var(--primary-color) transparent; + accent-color: var(--primary-color); + font-size: 16px; + overflow-wrap: break-word; + + // Smaller font size on mobile + // @media only screen and (max-width: 480px) { + // font-size: 14px; + // } +} + +html, +body { + margin: 0; + padding: 0; +} + +body { + display: grid; // Put footer at the bottom for short pages, such as the 404 + grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer + background: var(--bg-color); + min-height: 100vh; + color: var(--fg-color); + line-height: 1.6; + font-family: var(--font-system-ui), var(--font-emoji); +} + +// Style text selection to use primary color +::selection { + background-color: var(--primary-color); + color: var(--fg-color); +} + +// Make focused anchor not get covered by nav, +// and flash it with primary color when jumping to it +:target:not(#main) { + animation: var(--transition-long) 1s highlight-in-out; + scroll-margin-top: 15vh; + color: var(--primary-color); + text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; + + @keyframes highlight-in-out { + 50% { + font-weight: bolder; + letter-spacing: 0.0125em; + } + } + + @media (prefers-reduced-motion) { + animation: none; + } +} diff --git a/sass/_kbd.scss b/sass/_kbd.scss new file mode 100644 index 0000000..facd0e4 --- /dev/null +++ b/sass/_kbd.scss @@ -0,0 +1,19 @@ +kbd { + display: inline-block; + transition-duration: var(--transition); + transition-property: transform, box-shadow, background-color; + cursor: pointer; + box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-2); + padding: 0.125rem 0.375rem; + font-size: 0.8rem; + line-height: normal; + + // Small nice thingy, keys can be pressed! + &:active { + transform: translateY(2px); + box-shadow: inset 0 1px 0 var(--fg-muted-2); + background-color: var(--fg-muted-3); + } +} diff --git a/sass/_main.scss b/sass/_main.scss deleted file mode 100644 index 8073649..0000000 --- a/sass/_main.scss +++ /dev/null @@ -1,312 +0,0 @@ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; - // scrollbar-color: var(--primary-color) transparent; - accent-color: var(--primary-color); - font-size: 16px; - overflow-wrap: break-word; - - // Smaller font size on mobile - // @media only screen and (max-width: 480px) { - // font-size: 14px; - // } -} - -html, -body { - margin: 0; - padding: 0; -} - -body { - display: grid; // Put footer at the bottom for short pages, such as the 404 - grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer - background: var(--bg-color); - min-height: 100vh; - color: var(--fg-color); - line-height: 1.6; - font-family: var(--font-system-ui), var(--font-emoji); -} - -// Style text selection to use primary color -::selection { - background-color: var(--primary-color); - color: var(--fg-color); -} - -// Make focused anchor not get covered by nav, -// and flash it with primary color when jumping to it -:target:not(#main) { - animation: var(--transition-long) 1s highlight-in-out; - scroll-margin-top: 15vh; - color: var(--primary-color); - text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; - - @keyframes highlight-in-out { - 50% { - font-weight: bolder; - letter-spacing: 0.0125em; - } - } - - @media (prefers-reduced-motion) { - animation: none; - } -} - -// LAYOUT -.container { - margin: 0 auto; - width: min(var(--container-width), 90%); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 3rem 0 1rem; - font-weight: lighter; - line-height: normal; - font-family: var(--font-antique); - letter-spacing: -0.05em; -} - -h1 { - font-size: 2.5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -a { - color: var(--primary-color); - font-weight: bold; - - &:hover { - -webkit-text-decoration: underline wavy; - text-decoration: underline wavy; - } -} - -small { - color: var(--fg-muted-5); - font-size: 0.8rem; -} - -dl { - padding: 0; - - dt { - margin-top: 1rem; - padding: 0; - font-weight: bold; - font-size: 1rem; - } - - dd { - margin-bottom: 1rem; - padding: 0; - } -} - -hr { - margin: 2rem auto; - border: none; - border-top: 3px double var(--fg-muted-2); - overflow: visible; - color: var(--fg-muted-4); - font-size: 1.5rem; - text-align: center; - - &::after { - position: relative; - top: -1.5rem; - background: var(--bg-color); - padding: 0 0.25rem; - content: "☙❧"; - } -} - -blockquote { - margin: 0; - border-left: 0.25rem solid var(--primary-color); - padding: 0 0.75rem; - color: var(--fg-muted-5); -} - -abbr[title] { - -webkit-text-decoration: underline dotted; - cursor: help; - text-decoration: underline dotted; -} - -aside { - float: right; - margin-inline-start: 1rem; - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - background-color: var(--primary-color-alpha); - padding: 1rem; - width: 30%; - - @media only screen and (max-width: 720px) { - float: none; - margin-inline-start: 0; - width: 100%; - } -} - -// CODE -pre, -code, -kbd { - font-family: var(--font-monospace-code); -} - -code:not(pre code) { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner-small); - background-color: var(--fg-muted-2); - padding: 0.125rem 0.375rem; - color: var(--red-fg); -} - -pre { - margin: 1rem 0 1rem; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - padding: 1rem; - max-width: 100vw; - overflow: auto; - line-height: normal; - - table td { - border: none; - padding: 0; - } - - // The line number cells - table td:nth-of-type(1) { - user-select: none; - text-align: center; - } - - mark { - display: block; - box-shadow: none; - border-radius: 0; // Unset code block border radius - background-color: var(--fg-muted-1); - padding: 0; // Unset mark padding - color: var(--fg-color); // Unset mark color from primary color to text color - } - - table { - box-shadow: none; - border-radius: 0; - border-collapse: collapse; - width: 100%; - table-layout: auto; - overflow: auto; - - tr { - &:nth-child(even) { - background-color: unset; - } - } - } - - // The line numbers already provide some kind of left/right padding - &[data-linenos] { - padding: 1rem 0; - } -} - -kbd { - display: inline-block; - transition-duration: var(--transition); - transition-property: transform, box-shadow, background-color; - cursor: pointer; - box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); - border-radius: var(--rounded-corner-small); - background-color: var(--fg-muted-2); - padding: 0.125rem 0.375rem; - font-size: 0.8rem; - line-height: normal; - - // Small nice thingy, keys can be pressed! - &:active { - transform: translateY(2px); - box-shadow: inset 0 1px 0 var(--fg-muted-2); - background-color: var(--fg-muted-3); - } -} - -mark { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner-small); - background-color: var(--primary-color-alpha); - padding: 0.125rem 0.375rem; - color: var(--primary-color); -} - -figcaption { - color: var(--fg-muted-4); - font-size: 0.8rem; - text-align: center; -} - -details { - border-radius: var(--rounded-corner); - background-color: var(--fg-muted-1); - padding: 1rem; - - &>summary { - cursor: pointer; - } -} - -// TABLES -table { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - border-collapse: collapse; - width: 100%; - table-layout: fixed; - overflow: hidden; - - th { - font-weight: bold; - } - - th, - td { - padding: 0.5rem 1rem; - } - - tr { - &:nth-child(even) { - background-color: var(--fg-muted-1); - } - - th { - background-color: var(--fg-muted-2); - } - } -} - -td, -th { - padding: 0; -} diff --git a/sass/_nav.scss b/sass/_nav.scss index aa1ba09..80e5014 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -8,7 +8,7 @@ box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5); border-radius: 26px; background-color: var(--nav-bg); - max-width: min(calc(var(--container-width) + 10rem), 90%); + max-width: min(var(--container-width), 90%); nav { display: flex; diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index 5aaa14f..e69de29 100644 --- a/sass/_pre-container.scss +++ b/sass/_pre-container.scss @@ -1,58 +0,0 @@ -.pre-container { - position: relative; - - code { - margin-right: 3rem; - } - - button { - -webkit-backdrop-filter: var(--blur); - all: unset; - display: inline-flex; - position: absolute; - top: 0.5rem; - right: 0.5rem; - backdrop-filter: var(--blur); - transition-duration: var(--transition); - transition-property: background-color, transform; - cursor: pointer; - box-shadow: var(--edge-highlight); - border-radius: 50%; - background-color: var(--fg-muted-1); - padding: 0.5rem; - width: 1rem; - height: 1rem; - - &:hover { - background-color: var(--fg-muted-2); - - i { - background-color: var(--fg-muted-5); - } - } - - &:active { - transform: scale(var(--active)); - } - - &.active { - background-color: var(--primary-color-alpha); - - i { - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); - background-color: var(--primary-color); - } - } - - i { - -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); - display: inline-block; - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); - transition: background-color var(--transition); - background-color: var(--fg-muted-4); - width: 1rem; - height: 1rem; - } - } -} diff --git a/sass/_table.scss b/sass/_table.scss new file mode 100644 index 0000000..e5e2dc5 --- /dev/null +++ b/sass/_table.scss @@ -0,0 +1,33 @@ +// TABLE +table { + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + border-collapse: collapse; + width: 100%; + table-layout: fixed; + overflow: hidden; + + th { + font-weight: bold; + } + + th, + td { + padding: 0.5rem 1rem; + } + + tr { + &:nth-child(even) { + background-color: var(--fg-muted-1); + } + + th { + background-color: var(--fg-muted-2); + } + } +} + +td, +th { + padding: 0; +} diff --git a/sass/_typography.scss b/sass/_typography.scss new file mode 100644 index 0000000..0c55e0a --- /dev/null +++ b/sass/_typography.scss @@ -0,0 +1,93 @@ +// HEADINGS +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 3rem 0 1rem; + font-weight: lighter; + line-height: normal; + font-family: var(--font-antique); + letter-spacing: -0.05em; +} + +h1 { + font-size: 2.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +small { + color: var(--fg-muted-5); + font-size: 0.8rem; +} + +abbr[title] { + -webkit-text-decoration: underline dotted; + cursor: help; + text-decoration: underline dotted; +} + +figcaption { + color: var(--fg-muted-4); + font-size: 0.8rem; + text-align: center; +} + +blockquote { + margin: 0; + border-left: 0.25rem solid var(--primary-color); + padding: 0 0.75rem; + color: var(--fg-muted-5); +} + +mark { + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--primary-color-alpha); + padding: 0.125rem 0.375rem; + color: var(--primary-color); +} + +a { + color: var(--primary-color); + font-weight: bold; + + &:hover { + -webkit-text-decoration: underline wavy; + text-decoration: underline wavy; + } +} + +hr { + margin: 2rem auto; + border: none; + border-top: 3px double var(--fg-muted-2); + overflow: visible; + color: var(--fg-muted-4); + font-size: 1.5rem; + text-align: center; + + &::after { + position: relative; + top: -1.5rem; + background: var(--bg-color); + padding: 0 0.25rem; + content: "☙❧"; + } +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1rem; +} diff --git a/sass/style.scss b/sass/style.scss index c21cb81..5606540 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -7,21 +7,28 @@ @use "normalize"; @use "variables"; -@use "main"; @use "article-list"; +@use "aside"; @use "buttons"; +@use "code"; @use "comments"; +@use "containers"; @use "crt"; +@use "details"; @use "external"; @use "footer"; +@use "general"; @use "icon"; @use "johnvertisement"; +@use "kbd"; @use "media"; @use "nav"; @use "not-found"; @use "post-nav"; @use "pre-container"; @use "statements"; +@use "table"; @use "tags"; +@use "typography"; @use "zola-anchor";