hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format code

Browse Source
This commit is contained in:
daudix
2024-10-26 18:13:34 +03:00
parent eeefe83730
commit 6b70c103c1
17 changed files with 208 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
sass/_article-list.scss
View File

@ -12,10 +12,8 @@
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
border-start-end-radius: 2.125rem; border-start-end-radius: 2.125rem;
border-end-end-radius: 1.8125rem; border-end-end-radius: 1.8125rem;
background-image: background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
linear-gradient(var(--bg-overlay), var(--bg-overlay)), linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
linear-gradient(var(--glass-bg), var(--glass-bg)),
var(--blurnail);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-color: var(--bg-overlay); background-color: var(--bg-overlay);

23
sass/_article.scss
View File

@ -19,7 +19,7 @@
inset-inline-start: 0; inset-inline-start: 0;
} }
&+#heading { & + #heading {
margin-block-start: 35vw; margin-block-start: 35vw;
} }
@ -28,7 +28,7 @@
margin-block-start: 50vw; margin-block-start: 50vw;
} }
&+#heading { & + #heading {
margin-block-start: 2rem; margin-block-start: 2rem;
} }
} }
@ -41,11 +41,16 @@
h1 { h1 {
-webkit-background-clip: text; -webkit-background-clip: text;
margin: 0; margin: 0;
background-image: linear-gradient(to right, var(--fg-muted-4), var(--fg-color), var(--fg-muted-4)); background-image: linear-gradient(
to right,
var(--fg-muted-4),
var(--fg-color),
var(--fg-muted-4)
);
background-clip: text; background-clip: text;
color: transparent; color: transparent;
&+p { & + p {
display: inline; display: inline;
} }
} }
@ -106,7 +111,7 @@
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
&[open] summary~* { &[open] summary ~ * {
transform-origin: bottom right; transform-origin: bottom right;
animation: button-dropdown-open var(--transition); animation: button-dropdown-open var(--transition);
@ -163,7 +168,13 @@
} }
div { div {
--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent); --mask: linear-gradient(
to bottom,
transparent,
black 1rem,
black calc(100% - 1rem),
transparent
);
-webkit-mask-image: var(--mask); -webkit-mask-image: var(--mask);
flex: 1; flex: 1;
mask-image: var(--mask); mask-image: var(--mask);

4
sass/_code.scss
View File

@ -62,7 +62,9 @@ pre {
border-radius: 0; // Unset code block border radius border-radius: 0; // Unset code block border radius
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0; // Unset mark padding padding: 0; // Unset mark padding
color: var(--fg-color); // Unset mark color from accent color to text color color: var(
--fg-color
); // Unset mark color from accent color to text color
} }
// The line numbers already provide some kind of left/right padding // The line numbers already provide some kind of left/right padding

75
sass/_comments.scss
View File

@ -26,10 +26,18 @@
margin-block-start: 2rem; margin-block-start: 2rem;
#load-comments:disabled { #load-comments:disabled {
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2)); --shimmer: rgb(
animation: loading-shimmer var(--transition-long) ease-in-out alternate infinite; from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
);
animation: loading-shimmer var(--transition-long) ease-in-out
alternate infinite;
transition: none; transition: none;
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%); background-image: linear-gradient(
to right,
var(--fg-muted-1) 50%,
var(--shimmer) 75%,
var(--fg-muted-1) 100%
);
background-size: 200%; background-size: 200%;
background-color: transparent; background-color: transparent;
@ -81,7 +89,7 @@
border-end-start-radius: 0; border-end-start-radius: 0;
} }
&+.comment-reply { & + .comment-reply {
margin-block-start: -2rem; margin-block-start: -2rem;
border-start-start-radius: 0; border-start-start-radius: 0;
padding-block-start: 2rem; padding-block-start: 2rem;
@ -192,7 +200,6 @@
color: var(--contrast-color); color: var(--contrast-color);
} }
&:active { &:active {
transform: var(--active); transform: var(--active);
} }
@ -225,26 +232,31 @@
details { details {
&[open] { &[open] {
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-image: background-image: linear-gradient(
linear-gradient(to right, to right,
transparent, transparent,
transparent 0.5rem, transparent 0.5rem,
var(--fg-muted-1) 0.5rem, var(--fg-muted-1) 0.5rem,
var(--fg-muted-1) calc(100% - 0.5rem), var(--fg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem), transparent calc(100% - 0.5rem),
transparent), transparent
linear-gradient(to right, ),
linear-gradient(
to right,
transparent, transparent,
transparent 0.5rem, transparent 0.5rem,
var(--bg-color) 0.5rem, var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem), var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem), transparent calc(100% - 0.5rem),
transparent), transparent
repeating-linear-gradient(45deg, ),
repeating-linear-gradient(
45deg,
var(--contrast-color), var(--contrast-color),
var(--contrast-color) 0.25rem, var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem, var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem); var(--accent-color) 0.5rem
);
summary { summary {
border-radius: 0; border-radius: 0;
@ -254,26 +266,31 @@
summary { summary {
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-image: background-image: linear-gradient(
linear-gradient(to right, to right,
transparent, transparent,
transparent 0.5rem, transparent 0.5rem,
var(--fg-muted-1) 0.5rem, var(--fg-muted-1) 0.5rem,
var(--fg-muted-1) calc(100% - 0.5rem), var(--fg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem), transparent calc(100% - 0.5rem),
transparent), transparent
linear-gradient(to right, ),
linear-gradient(
to right,
transparent, transparent,
transparent 0.5rem, transparent 0.5rem,
var(--bg-color) 0.5rem, var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem), var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem), transparent calc(100% - 0.5rem),
transparent), transparent
repeating-linear-gradient(45deg, ),
repeating-linear-gradient(
45deg,
var(--contrast-color), var(--contrast-color),
var(--contrast-color) 0.25rem, var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem, var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem); var(--accent-color) 0.5rem
);
} }
} }
@ -332,10 +349,14 @@
transform: none; transform: none;
margin: 0; margin: 0;
box-shadow: var(--edge-highlight), var(--shadow); box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner-small); border-radius: var(--rounded-corner)
var(--rounded-corner) var(--rounded-corner-small)
var(--rounded-corner-small);
&+figcaption { & + figcaption {
border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner); border-radius: var(--rounded-corner-small)
var(--rounded-corner-small)
var(--rounded-corner) var(--rounded-corner);
} }
} }
} }
@ -348,10 +369,14 @@
img { img {
margin: 0; margin: 0;
border-radius: var(--rounded-corner) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner-small); border-radius: var(--rounded-corner)
var(--rounded-corner) var(--rounded-corner-small)
var(--rounded-corner-small);
&+figcaption { & + figcaption {
border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner); border-radius: var(--rounded-corner-small)
var(--rounded-corner-small)
var(--rounded-corner) var(--rounded-corner);
} }
} }

23
sass/_crt.scss
View File

@ -6,9 +6,11 @@
0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha); 0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-image: radial-gradient(color-mix(in srgb, var(--accent-color) 30%, black), background-image: radial-gradient(
color-mix(in srgb, var(--accent-color) 10%, black) 80%, color-mix(in srgb, var(--accent-color) 30%, black),
color-mix(in srgb, var(--accent-color) 5%, black)); color-mix(in srgb, var(--accent-color) 10%, black) 80%,
color-mix(in srgb, var(--accent-color) 5%, black)
);
pre { pre {
--text-shadow-1: hsl(from var(--accent-color) h s l / 0.5); --text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
@ -53,11 +55,13 @@
z-index: 1; z-index: 1;
animation: scanlines 0.1s linear infinite; animation: scanlines 0.1s linear infinite;
inset: 0; inset: 0;
background-image: repeating-linear-gradient(to bottom, background-image: repeating-linear-gradient(
rgb(0 0 0 / 0.25), to bottom,
rgb(0 0 0 / 0.25) 0.125rem, rgb(0 0 0 / 0.25),
transparent 0.125rem, rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.25rem); transparent 0.125rem,
transparent 0.25rem
);
pointer-events: none; pointer-events: none;
content: ""; content: "";
@ -77,7 +81,8 @@
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
transparent, transparent,
var(--scanline-color) 16rem); var(--scanline-color) 16rem
);
background-size: auto 16rem; background-size: auto 16rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: -16rem; background-position-y: -16rem;

9
sass/_general.scss
View File

@ -31,10 +31,14 @@ body {
// Make focused anchor not get covered by nav, // Make focused anchor not get covered by nav,
// and flash it with accent color when jumping to it // and flash it with accent color when jumping to it
:target:not(#main) { :target:not(#main) {
transition: all var(--transition), scroll-margin-block-start 0s; transition:
all var(--transition),
scroll-margin-block-start 0s;
scroll-margin-block-start: 15vh; scroll-margin-block-start: 15vh;
color: var(--accent-color); color: var(--accent-color);
text-shadow: var(--accent-color-alpha) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem; text-shadow:
var(--accent-color-alpha) 0 0 0.25rem,
var(--accent-color) 0 0 0.75rem;
} }
// Custom focus indicator // Custom focus indicator
@ -66,7 +70,6 @@ body {
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
*, *,
*::before, *::before,
*::after { *::after {

14
sass/_media.scss
View File

@ -82,7 +82,10 @@ video {
&:hover, &:hover,
&:active { &:active {
opacity: 1; opacity: 1;
clip-path: inset(-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small)); clip-path: inset(
-0.75rem -0.75rem -0.75rem -0.75rem round
var(--rounded-corner-small)
);
filter: none; filter: none;
} }
@ -98,13 +101,18 @@ video {
} }
} }
} }
} }
img { img {
transition: var(--transition-longer); transition: var(--transition-longer);
&:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"], .emoji) { &:not(
.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji
) {
cursor: zoom-in; cursor: zoom-in;
&:hover { &:hover {

17
sass/_nav.scss
View File

@ -20,7 +20,7 @@
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem; border-radius: 1.625rem;
background-color: var(--glass-bg); background-color: var(--glass-bg);
content: ''; content: "";
} }
nav { nav {
@ -36,9 +36,7 @@
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
transition: var(--transition); transition: var(--transition);
inset-block-start: 0; inset-block-start: 0;
box-shadow: box-shadow: var(--edge-highlight), var(--shadow-glass);
var(--edge-highlight),
var(--shadow-glass);
border-radius: 999px; border-radius: 999px;
background-color: var(--glass-bg); background-color: var(--glass-bg);
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
@ -364,7 +362,13 @@
} }
#search-results { #search-results {
--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent); --mask: linear-gradient(
to bottom,
transparent,
black 1rem,
black calc(100% - 1rem),
transparent
);
-webkit-mask-image: var(--mask); -webkit-mask-image: var(--mask);
display: none; display: none;
flex: 1; flex: 1;
@ -400,7 +404,8 @@
&:first-of-type, &:first-of-type,
&.more-matches { &.more-matches {
margin-block-start: 0.5rem; margin-block-start: 0.5rem;
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2); border-block-start: max(1px, 0.0625rem) solid
var(--fg-muted-2);
padding-block-start: 0.25rem; padding-block-start: 0.25rem;
} }

25
sass/_normalize.scss
View File

@ -123,7 +123,10 @@
// Correct the inability to style buttons in iOS and Safari. // Correct the inability to style buttons in iOS and Safari.
// //
:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { :where(
button,
input:is([type="button" i], [type="reset" i], [type="submit" i])
) {
-webkit-appearance: button; -webkit-appearance: button;
} }
@ -201,7 +204,15 @@
// Remove the inner border and padding of focus outlines in Firefox. // Remove the inner border and padding of focus outlines in Firefox.
// //
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { :where(
button,
input:is(
[type="button" i],
[type="color" i],
[type="reset" i],
[type="submit" i]
)
)::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
@ -210,7 +221,15 @@
// Restore the focus outline styles unset by the previous rule in Firefox. // Restore the focus outline styles unset by the previous rule in Firefox.
// //
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { :where(
button,
input:is(
[type="button" i],
[type="color" i],
[type="reset" i],
[type="submit" i]
)
)::-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }

11
sass/_pre-container.scss
View File

@ -4,12 +4,19 @@
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
.header { .header {
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2)); --shimmer: rgb(
from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%); background-image: linear-gradient(
to right,
var(--fg-muted-1) 50%,
var(--shimmer) 75%,
var(--fg-muted-1) 100%
);
background-size: 200%; background-size: 200%;
padding: 0.25rem; padding: 0.25rem;
height: 2.5rem; height: 2.5rem;

6
sass/_sparkline.scss
View File

@ -12,7 +12,11 @@
flex: 1; flex: 1;
transform-origin: bottom; transform-origin: bottom;
transition: var(--transition); transition: var(--transition);
background-image: linear-gradient(to top, var(--accent-color) var(--bar-height), transparent var(--bar-height)); background-image: linear-gradient(
to top,
var(--accent-color) var(--bar-height),
transparent var(--bar-height)
);
height: 100%; height: 100%;
&:hover { &:hover {

5
sass/_typography.scss
View File

@ -148,7 +148,9 @@ kbd {
display: inline-block; display: inline-block;
transition: var(--transition); transition: var(--transition);
cursor: pointer; cursor: pointer;
box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2); box-shadow:
var(--edge-highlight),
inset 0 -0.125rem 0 var(--fg-muted-2);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
@ -291,7 +293,6 @@ details {
} }
} }
figure { figure {
margin-inline: 0; margin-inline: 0;
} }

68
sass/_variables.scss
View File

@ -1,21 +1,21 @@
@mixin theme-variables { @mixin theme-variables {
:root { :root {
@content("light"); @content ("light");
} }
[data-theme="dark"] { [data-theme="dark"] {
@content("dark"); @content ("dark");
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
@content("dark"); @content ("dark");
} }
} }
} }
@include theme-variables using ($theme) { @include theme-variables using ($theme) {
@if $theme =="dark" { @if $theme == "dark" {
// COLORS // COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black); --bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255); --fg-color: rgb(255 255 255);
@ -34,9 +34,7 @@
--yellow-fg: rgb(248 228 92); --yellow-fg: rgb(248 228 92);
color-scheme: dark; color-scheme: dark;
} } @else {
@else {
// COLORS // COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white); --bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
--fg-color: rgb(0 0 0 / 0.8); --fg-color: rgb(0 0 0 / 0.8);
@ -47,7 +45,9 @@
--fg-muted-4: rgb(0 0 0 / 0.5); --fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6); --fg-muted-5: rgb(0 0 0 / 0.6);
--glass-bg: rgb(242 242 242 / 0.7); --glass-bg: rgb(242 242 242 / 0.7);
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity)); --accent-color-alpha: rgb(
from var(--accent-color) r g b / var(--color-opacity)
);
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity)); --blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228); --blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity)); --brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@ -93,21 +93,37 @@
// FONTS // FONTS
--font-system-ui: system-ui, sans-serif; --font-system-ui: system-ui, sans-serif;
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; --font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; --font-old-style: "Iowan Old Style", "Palatino Linotype",
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif; "URW Palladio L", P052, serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif; --font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri,
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif; "DejaVu Sans", source-sans-pro, sans-serif;
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
source-sans-pro, sans-serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
sans-serif;
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
"Nimbus Sans", Arial, sans-serif;
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace; --font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif; Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif; --font-industrial: Bahnschrift, "DIN Alternate",
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif; "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed,
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif; sans-serif;
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif; --font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive; Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold",
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; Calibri, source-sans-pro, sans-serif;
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
"DejaVu Serif", "Sitka Small", serif;
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
"URW Bookman L", "Georgia Pro", Georgia, serif;
--font-didone: Didot, "Bodoni MT", "Noto Serif Display",
"URW Palladio L", P052, Sylfaen, serif;
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
casual, cursive;
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
// OPACITY // OPACITY
--color-opacity: 0.1; --color-opacity: 0.1;
@ -116,8 +132,12 @@
// SHADOWS // SHADOWS
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1); --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03); --shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06); 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5); --shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
// STATES // STATES

1
sass/mods/_classic-nav.scss
View File

@ -24,7 +24,6 @@
&#theme-switcher details summary { &#theme-switcher details summary {
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
} }
} }
#home { #home {

2
sass/mods/_modern-headings.scss
View File

@ -5,7 +5,7 @@ h4,
h5, h5,
h6 { h6 {
font-weight: bold; font-weight: bold;
font-family: var(--font-system-ui) font-family: var(--font-system-ui);
} }
h1 { h1 {

6
sass/mods/_no-edge-highlight.scss
View File

@ -1,7 +1,7 @@
@import "../_variables.scss"; @import "../_variables.scss";
@include theme-variables using ($theme) { @include theme-variables using ($theme) {
@if $theme == "light" { @if $theme == "light" {
--edge-highlight: 0 0 transparent; --edge-highlight: 0 0 transparent;
} }
} }

7
sass/mods/_sticked-nav.scss
View File

@ -1,11 +1,13 @@
#site-nav { #site-nav {
margin-block-start: 0; margin-block-start: 0;
inset-block-start: 0; inset-block-start: 0;
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem); border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem)
calc(var(--rounded-corner) + 0.5rem);
&::before { &::before {
box-shadow: var(--shadow-glass); box-shadow: var(--shadow-glass);
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem); border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem)
calc(var(--rounded-corner) + 0.5rem);
} }
nav ul li { nav ul li {
@ -16,7 +18,6 @@
&#theme-switcher details summary { &#theme-switcher details summary {
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
} }
} }
#search-container { #search-container {