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

A bunch of breaking changes for no reason except for "I didn't like it"

Browse Source 
I mean, this release has breaking changes anyway, why not break all the
stuff I wanted to break?
This commit is contained in:
daudix
2024-09-14 03:31:25 +03:00
parent 1722b95bea
commit a1946ae0b2
23 changed files with 121 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
sass/_article-list.scss
View File

@ -14,12 +14,12 @@
border-radius: var(--rounded-corner);
border-start-end-radius: 2.125rem;
border-end-end-radius: 1.8125rem;
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 1rem;
overflow: hidden;
&:hover {
outline-color: var(--primary-color);
outline-color: var(--accent-color);
outline-offset: 0.5rem;
}
@ -36,11 +36,11 @@
justify-content: flex-end;
a {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}
}

4
sass/_buttons.scss
View File

@ -44,11 +44,11 @@ button.inline-button {
&.colored {
box-shadow: none;
background-color: transparent;
color: var(--primary-color);
color: var(--accent-color);
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
}
}
}

2
sass/_code.scss
View File

@ -62,7 +62,7 @@ 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 primary 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

14
sass/_comments.scss
View File

@ -26,7 +26,7 @@
margin-block-start: 2rem;
#load-comments {
--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
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;
@ -140,12 +140,12 @@
}
&.op {
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding-inline-start: 0.625rem;
color: var(--primary-color);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
&::before {
@ -163,7 +163,7 @@
mask-size: cover;
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--primary-color);
background-color: var(--accent-color);
width: 0.75rem;
height: 0.75rem;
content: "";
@ -195,13 +195,13 @@
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
line-height: 1.25;
text-decoration: none;
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}

20
sass/_crt.scss
View File

@ -2,23 +2,23 @@
margin: 1rem 0 1rem;
box-shadow:
var(--edge-highlight),
0 0 0 0.0625rem var(--primary-color-alpha),
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
0 0 0 0.0625rem 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);
border-radius: var(--rounded-corner);
background-image: radial-gradient(color-mix(in srgb, var(--primary-color) 30%, black),
color-mix(in srgb, var(--primary-color) 10%, black) 80%,
color-mix(in srgb, var(--primary-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(--primary-color) h s l / 0.5);
--text-shadow-2: hsl(from var(--primary-color) h calc(s * 2) l);
--text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
--text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
animation: flicker 0.25s alternate infinite;
margin: 0;
box-shadow: none;
background-color: transparent !important;
padding: 1rem 1rem;
color: var(--primary-color);
color: var(--accent-color);
text-shadow:
var(--text-shadow-1) 0 0 0.25rem,
var(--text-shadow-2) 0 0 0.75rem;
@ -69,7 +69,7 @@
}
&::after {
--scanline-color: rgb(from var(--primary-color) r g b / 0.05);
--scanline-color: rgb(from var(--accent-color) r g b / 0.05);
display: block;
position: absolute;
animation: scanline 5s linear infinite;

2
sass/_external.scss
View File

@ -7,7 +7,7 @@ a.external::after {
mask-image: var(--icon);
mask-size: cover;
margin-inline-start: 0.25rem;
background-color: var(--primary-color);
background-color: var(--accent-color);
width: max(0.75rem, 0.75em);
height: max(0.75rem, 0.75em);
content: "";

10
sass/_footer.scss
View File

@ -44,11 +44,11 @@
&.active {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}
}
@ -122,12 +122,12 @@
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
text-decoration: none;
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}

4
sass/_footnotes-list.scss
View File

@ -21,14 +21,14 @@
user-select: none;
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
a + a[href*="#fr-"],
li:target a[href*="#fr-"] {
opacity: var(--disabled);
background-color: var(--primary-color);
background-color: var(--accent-color);
&:hover {
opacity: 1;

18
sass/_general.scss
View File

@ -4,8 +4,8 @@
:root {
scroll-behavior: smooth;
scrollbar-color: var(--primary-color) transparent;
accent-color: var(--primary-color);
scrollbar-color: var(--accent-color) transparent;
accent-color: var(--accent-color);
font-size: 16px;
// Smaller font size on mobile
@ -27,25 +27,25 @@ body {
overflow-wrap: break-word;
}
// Style text selection to use primary color
// Style text selection to use accent color
::selection {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
}
// Make focused anchor not get covered by nav,
// and flash it with primary color when jumping to it
// and flash it with accent color when jumping to it
:target:not(#main) {
transition: all var(--transition), scroll-margin-block-start 0s;
scroll-margin-block-start: 15vh;
color: var(--primary-color);
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
color: var(--accent-color);
text-shadow: var(--accent-color-alpha) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem;
}
// Custom focus indicator
:focus-visible {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color);
outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem;
}
@ -53,7 +53,7 @@ body {
@supports not selector(:focus-visible) {
:focus {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color);
outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem;
}
}

8
sass/_input.scss
View File

@ -39,11 +39,11 @@ input[type="checkbox"] {
&:checked {
border: 0.15rem solid transparent;
background-color: var(--primary-color);
background-color: var(--accent-color);
&:disabled {
border: 0.15rem solid transparent;
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
&::before {
opacity: 0.8;
@ -124,7 +124,7 @@ input[type="checkbox"] {
}
&:checked {
background-color: var(--primary-color);
background-color: var(--accent-color);
&::before {
transform: translateX(1rem);
@ -169,7 +169,7 @@ input[type="range"] {
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 999px;
background: var(--primary-color);
background: var(--accent-color);
width: 100%;
height: 0.5rem;

18
sass/_nav.scss
View File

@ -82,11 +82,11 @@
a.active {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
color: var(--contrast-color);
.icon {
@ -95,7 +95,7 @@
}
.icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
@ -112,7 +112,7 @@
}
&.active {
color: var(--primary-color);
color: var(--accent-color);
&:hover {
color: var(--contrast-color);
@ -123,7 +123,7 @@
}
.icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
@ -317,14 +317,14 @@
}
.active {
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
.icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
&:hover {
background-color: var(--primary-color);
background-color: var(--accent-color);
.icon {
background-color: var(--contrast-color);

4
sass/_post-nav.scss
View File

@ -14,10 +14,10 @@
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
.post-title {
color: var(--primary-color);
color: var(--accent-color);
}
}

6
sass/_pre-container.scss
View File

@ -4,7 +4,7 @@
border-radius: var(--rounded-corner);
.header {
--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
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-size: 200%;
@ -70,13 +70,13 @@
button {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
.icon {
--icon: 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");
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}

8
sass/_tags.scss
View File

@ -28,13 +28,13 @@
white-space: nowrap;
&:hover {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
text-decoration: none;
.count {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
}
}

16
sass/_typography.scss
View File

@ -49,7 +49,7 @@ figcaption {
blockquote {
margin: 0;
border-radius: 0.25rem;
border-inline-start: 0.25rem solid var(--primary-color);
border-inline-start: 0.25rem solid var(--accent-color);
padding: 0 0.75rem;
color: var(--fg-muted-5);
}
@ -65,8 +65,8 @@ q {
}
mark {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
}
del {
@ -111,7 +111,7 @@ progress {
background-color: var(--fg-muted-1);
width: 100%;
height: 0.5rem;
color: var(--primary-color);
color: var(--accent-color);
&:indeterminate {
background-color: var(--fg-muted-1);
@ -127,12 +127,12 @@ progress {
&::-moz-progress-bar {
border-radius: 999px;
background-color: var(--primary-color);
background-color: var(--accent-color);
}
&::-webkit-progress-value {
border-radius: 999px;
background-color: var(--primary-color);
background-color: var(--accent-color);
}
}
@ -159,7 +159,7 @@ kbd {
}
a {
color: var(--primary-color);
color: var(--accent-color);
font-weight: bold;
text-decoration-thickness: max(1px, 0.0625em);
@ -202,7 +202,7 @@ aside {
margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
padding: 1rem;
width: 30%;

6
sass/_variables.scss
View File

@ -17,7 +17,7 @@
@include theme-variables using ($theme) {
@if $theme == "dark" {
// COLORS
--bg-color: color-mix(in srgb, var(--primary-color) 10%, black);
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
@ -37,7 +37,7 @@
@else {
// COLORS
--bg-color: color-mix(in srgb, var(--primary-color) 20%, white);
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
--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));
@ -52,7 +52,7 @@
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105);
--nav-bg: rgb(242 242 242 / 0.7);
--primary-color-alpha: rgb(from var(--primary-color) r g b / var(--color-opacity));
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172);
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));

4
sass/_zola-anchor.scss
View File

@ -16,7 +16,7 @@ h6 {
margin: 0 0.25em;
&:hover .icon {
background-color: var(--primary-color);
background-color: var(--accent-color);
}
&:active {
@ -41,5 +41,5 @@ h6 {
}
:target .zola-anchor .icon {
background-color: var(--primary-color-alpha);
background-color: var(--accent-color-alpha);
}