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-start-end-radius: 2.125rem;
border-end-end-radius: 1.8125rem;
background-image:
linear-gradient(var(--bg-overlay), var(--bg-overlay)),
linear-gradient(var(--glass-bg), var(--glass-bg)),
var(--blurnail);
background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
background-position: center;
background-size: cover;
background-color: var(--bg-overlay);

23
sass/_article.scss
View File

@ -19,7 +19,7 @@
inset-inline-start: 0;
}
&+#heading {
& + #heading {
margin-block-start: 35vw;
}
@ -28,7 +28,7 @@
margin-block-start: 50vw;
}
&+#heading {
& + #heading {
margin-block-start: 2rem;
}
}
@ -41,11 +41,16 @@
h1 {
-webkit-background-clip: text;
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;
color: transparent;
&+p {
& + p {
display: inline;
}
}
@ -106,7 +111,7 @@
background-color: transparent;
padding: 0;
&[open] summary~* {
&[open] summary ~ * {
transform-origin: bottom right;
animation: button-dropdown-open var(--transition);
@ -163,7 +168,13 @@
}
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);
flex: 1;
mask-image: var(--mask);

4
sass/_code.scss
View File

@ -62,7 +62,9 @@ pre {
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 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

75
sass/_comments.scss
View File

@ -26,10 +26,18 @@
margin-block-start: 2rem;
#load-comments:disabled {
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
animation: loading-shimmer var(--transition-long) ease-in-out alternate infinite;
--shimmer: rgb(
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;
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-color: transparent;
@ -81,7 +89,7 @@
border-end-start-radius: 0;
}
&+.comment-reply {
& + .comment-reply {
margin-block-start: -2rem;
border-start-start-radius: 0;
padding-block-start: 2rem;
@ -192,7 +200,6 @@
color: var(--contrast-color);
}
&:active {
transform: var(--active);
}
@ -225,26 +232,31 @@
details {
&[open] {
border-radius: var(--rounded-corner-small);
background-image:
linear-gradient(to right,
background-image: linear-gradient(
to right,
transparent,
transparent 0.5rem,
var(--fg-muted-1) 0.5rem,
var(--fg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
linear-gradient(to right,
transparent
),
linear-gradient(
to right,
transparent,
transparent 0.5rem,
var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
repeating-linear-gradient(45deg,
transparent
),
repeating-linear-gradient(
45deg,
var(--contrast-color),
var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem);
var(--accent-color) 0.5rem
);
summary {
border-radius: 0;
@ -254,26 +266,31 @@
summary {
border-radius: var(--rounded-corner-small);
background-image:
linear-gradient(to right,
background-image: linear-gradient(
to right,
transparent,
transparent 0.5rem,
var(--fg-muted-1) 0.5rem,
var(--fg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
linear-gradient(to right,
transparent
),
linear-gradient(
to right,
transparent,
transparent 0.5rem,
var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
repeating-linear-gradient(45deg,
transparent
),
repeating-linear-gradient(
45deg,
var(--contrast-color),
var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem);
var(--accent-color) 0.5rem
);
}
}
@ -332,10 +349,14 @@
transform: none;
margin: 0;
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 {
border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner);
& + figcaption {
border-radius: var(--rounded-corner-small)
var(--rounded-corner-small)
var(--rounded-corner) var(--rounded-corner);
}
}
}
@ -348,10 +369,14 @@
img {
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 {
border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner);
& + figcaption {
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.25rem 1.5rem 0.25rem var(--accent-color-alpha);
border-radius: var(--rounded-corner);
background-image: radial-gradient(color-mix(in srgb, var(--accent-color) 30%, black),
color-mix(in srgb, var(--accent-color) 10%, black) 80%,
color-mix(in srgb, var(--accent-color) 5%, black));
background-image: radial-gradient(
color-mix(in srgb, var(--accent-color) 30%, black),
color-mix(in srgb, var(--accent-color) 10%, black) 80%,
color-mix(in srgb, var(--accent-color) 5%, black)
);
pre {
--text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
@ -53,11 +55,13 @@
z-index: 1;
animation: scanlines 0.1s linear infinite;
inset: 0;
background-image: repeating-linear-gradient(to bottom,
rgb(0 0 0 / 0.25),
rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.125rem,
transparent 0.25rem);
background-image: repeating-linear-gradient(
to bottom,
rgb(0 0 0 / 0.25),
rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.125rem,
transparent 0.25rem
);
pointer-events: none;
content: "";
@ -77,7 +81,8 @@
background-image: linear-gradient(
to bottom,
transparent,
var(--scanline-color) 16rem);
var(--scanline-color) 16rem
);
background-size: auto 16rem;
background-repeat: no-repeat;
background-position-y: -16rem;

9
sass/_general.scss
View File

@ -31,10 +31,14 @@ body {
// Make focused anchor not get covered by nav,
// and flash it with accent color when jumping to it
: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;
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
@ -66,7 +70,6 @@ body {
}
@media (prefers-reduced-motion) {
*,
*::before,
*::after {

14
sass/_media.scss
View File

@ -82,7 +82,10 @@ video {
&:hover,
&:active {
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;
}
@ -98,13 +101,18 @@ video {
}
}
}
}
img {
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;
&:hover {

17
sass/_nav.scss
View File

@ -20,7 +20,7 @@
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem;
background-color: var(--glass-bg);
content: '';
content: "";
}
nav {
@ -36,9 +36,7 @@
backdrop-filter: var(--blur);
transition: var(--transition);
inset-block-start: 0;
box-shadow:
var(--edge-highlight),
var(--shadow-glass);
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 999px;
background-color: var(--glass-bg);
padding: 0.625rem 0.75rem;
@ -364,7 +362,13 @@
}
#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);
display: none;
flex: 1;
@ -400,7 +404,8 @@
&:first-of-type,
&.more-matches {
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;
}

25
sass/_normalize.scss
View File

@ -123,7 +123,10 @@
// 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;
}
@ -201,7 +204,15 @@
// 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;
padding: 0;
}
@ -210,7 +221,15 @@
// 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;
}

11
sass/_pre-container.scss
View File

@ -4,12 +4,19 @@
border-radius: var(--rounded-corner);
.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;
justify-content: space-between;
align-items: center;
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%;
padding: 0.25rem;
height: 2.5rem;

6
sass/_sparkline.scss
View File

@ -12,7 +12,11 @@
flex: 1;
transform-origin: bottom;
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%;
&:hover {

5
sass/_typography.scss
View File

@ -148,7 +148,9 @@ kbd {
display: inline-block;
transition: var(--transition);
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);
background-color: var(--fg-muted-1);
padding: 0.125rem 0.375rem;
@ -291,7 +293,6 @@ details {
}
}
figure {
margin-inline: 0;
}

68
sass/_variables.scss
View File

@ -1,21 +1,21 @@
@mixin theme-variables {
:root {
@content("light");
@content ("light");
}
[data-theme="dark"] {
@content("dark");
@content ("dark");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@content("dark");
@content ("dark");
}
}
}
@include theme-variables using ($theme) {
@if $theme =="dark" {
@if $theme == "dark" {
// COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255);
@ -34,9 +34,7 @@
--yellow-fg: rgb(248 228 92);
color-scheme: dark;
}
@else {
} @else {
// COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
--fg-color: rgb(0 0 0 / 0.8);
@ -47,7 +45,9 @@
--fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6);
--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-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@ -93,21 +93,37 @@
// FONTS
--font-system-ui: system-ui, sans-serif;
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "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-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
serif;
--font-old-style: "Iowan Old Style", "Palatino Linotype",
"URW Palladio L", P052, serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri,
"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-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
--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-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";
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-industrial: Bahnschrift, "DIN Alternate",
"Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed,
sans-serif;
--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-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
--color-opacity: 0.1;
@ -116,8 +132,12 @@
// SHADOWS
--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-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: 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-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);
// STATES

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

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

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

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

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

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

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

@ -1,11 +1,13 @@
#site-nav {
margin-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 {
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 {
@ -16,7 +18,6 @@
&#theme-switcher details summary {
border-radius: var(--rounded-corner);
}
}
#search-container {