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

Use modern RGB format (fixes #54)

Browse Source
This commit is contained in:
daudix
2024-08-23 23:18:59 +03:00
parent 8411000de7
commit 7808d906f1
8 changed files with 162 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
sass/_crt.scss
View File

@ -1,8 +1,13 @@
.crt {
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);
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);
border-radius: var(--rounded-corner);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
background: radial-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.85)),
var(--primary-color);
pre {
animation: flicker 0.25s alternate infinite;
@ -11,7 +16,9 @@
background-color: transparent !important;
padding: 1rem 1rem;
color: var(--primary-color) !important;
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
text-shadow:
var(--primary-color-alpha) 0 0 0.25rem,
var(--primary-color) 0 0 0.75rem;
@keyframes flicker {
25% {
@ -43,7 +50,13 @@
z-index: 1;
animation: scanlines 0.1s linear infinite;
inset: 0;
background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(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: "";
@ -59,7 +72,12 @@
position: absolute;
animation: scanline 5s linear infinite;
inset: 0;
background-image: linear-gradient(to bottom, transparent, var(--primary-color-alpha) 7rem, transparent 8rem);
background-image: linear-gradient(
to bottom,
transparent,
var(--primary-color-alpha) 7rem,
transparent 8rem
);
background-size: auto 8rem;
background-repeat: no-repeat;
background-position-y: -8rem;

35
sass/_nav.scss
View File

@ -5,7 +5,9 @@
z-index: 999;
backdrop-filter: var(--blur);
margin: 1rem auto;
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 1.625rem;
background-color: var(--nav-bg);
max-width: 90%;
@ -27,7 +29,9 @@
z-index: 999;
backdrop-filter: var(--blur);
transition: var(--transition);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 999px;
background-color: var(--nav-bg);
padding: 0.5rem 0.75rem;
@ -56,7 +60,14 @@
list-style: none;
@media only screen and (max-width: 480px) {
&:not(#search, #language-switcher, #theme-switcher, #theme-switcher li, #feed, #repo) {
&:not(
#search,
#language-switcher,
#theme-switcher,
#theme-switcher li,
#feed,
#repo
) {
flex: 0 0 100%;
}
}
@ -190,7 +201,8 @@
right: unset;
bottom: 0.25rem;
left: -0.5rem;
border-inline-end: 0.25rem solid var(--fg-muted-2);
border-inline-end: 0.25rem solid
var(--fg-muted-2);
border-block-end: none;
border-start-end-radius: 0.25rem;
border-end-start-radius: 0;
@ -213,7 +225,8 @@
right: unset;
bottom: 0;
left: -0.5rem;
border-inline-end: 0.25rem solid var(--primary-color);
border-inline-end: 0.25rem solid
var(--primary-color);
border-block-end: none;
content: "";
@ -329,7 +342,9 @@
transform: translate(-50%, 1rem);
z-index: 1;
backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
background-color: var(--nav-bg);
padding: 0.25rem;
@ -355,7 +370,9 @@
}
ul {
border-radius: calc(var(--rounded-corner) + 0.25rem);
border-radius: calc(
var(--rounded-corner) + 0.25rem
);
}
}
}
@ -473,7 +490,9 @@
flex-direction: column;
gap: 0.5rem;
backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg);
padding: 0.5rem;

138
sass/_variables.scss
View File

@ -1,47 +1,48 @@
@mixin theme-variables($theme) {
@if $theme =="dark" {
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
--fg-color: rgb(255, 255, 255);
--fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1);
--fg-muted-3: rgba(255, 255, 255, 0.2);
--fg-muted-4: rgba(255, 255, 255, 0.5);
--fg-muted-5: rgba(255, 255, 255, 0.6);
--nav-bg: rgba(25, 25, 25, 0.7);
--blue-bg: rgba(153, 193, 241, 0.1);
--blue-fg: rgb(153, 193, 241);
--green-bg: rgba(143, 240, 164, 0.1);
--green-fg: rgb(143, 240, 164);
--purple-bg: rgba(220, 138, 221, 0.1);
--purple-fg: rgb(220, 138, 221);
--red-bg: rgba(226, 97, 81, 0.1);
--red-fg: rgb(246, 97, 81);
--yellow-bg: rgba(248, 228, 92, 0.1);
--yellow-fg: rgb(248, 228, 92);
--star-featured: rgba(248, 228, 92, 0.05);
@if $theme == "dark" {
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
--fg-muted-3: rgb(255 255 255 / 0.2);
--fg-muted-4: rgb(255 255 255 / 0.5);
--fg-muted-5: rgb(255 255 255 / 0.6);
--nav-bg: rgb(25 25 25 / 0.7);
--blue-bg: rgb(153 193 241 / 0.1);
--blue-fg: rgb(153 193 241);
--green-bg: rgb(143 240 164 / 0.1);
--green-fg: rgb(143 240 164);
--purple-bg: rgb(220 138 221 / 0.1);
--purple-fg: rgb(220 138 221);
--red-bg: rgb(226 97 81 / 0.1);
--red-fg: rgb(246 97 81);
--yellow-bg: rgb(248 228 92 / 0.1);
--yellow-fg: rgb(248 228 92);
--star-featured: rgb(248 228 92 / 0.05);
color-scheme: dark;
}
@else {
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
--fg-color: rgba(0, 0, 0, 0.8);
--fg-muted-1: rgba(0, 0, 0, 0.05);
--fg-muted-2: rgba(0, 0, 0, 0.1);
--fg-muted-3: rgba(0, 0, 0, 0.2);
--fg-muted-4: rgba(0, 0, 0, 0.5);
--fg-muted-5: rgba(0, 0, 0, 0.6);
--nav-bg: rgba(242, 242, 242, 0.7);
--blue-bg: rgba(53, 132, 228, 0.1);
--blue-fg: rgb(53, 132, 228);
--green-bg: rgba(38, 162, 105, 0.1);
--green-fg: rgb(38, 162, 105);
--purple-bg: rgba(145, 65, 172, 0.1);
--purple-fg: rgb(145, 65, 172);
--red-bg: rgba(224, 27, 36, 0.1);
--red-fg: rgb(224, 27, 36);
--yellow-bg: rgba(156, 110, 3, 0.1);
--yellow-fg: rgb(156, 110, 3);
--star-featured: rgba(156, 110, 3, 0.15);
} @else {
--bg-color: linear-gradient(
rgb(255 255 255 / 0.8),
rgb(255 255 255 / 0.8)
);
--fg-color: rgb(0 0 0 / 0.8);
--fg-muted-1: rgb(0 0 0 / 0.05);
--fg-muted-2: rgb(0 0 0 / 0.1);
--fg-muted-3: rgb(0 0 0 / 0.2);
--fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6);
--nav-bg: rgb(242 242 242 / 0.7);
--blue-bg: rgb(53 132 228 / 0.1);
--blue-fg: rgb(53 132 228);
--green-bg: rgb(38 162 105 / 0.1);
--green-fg: rgb(38 162 105);
--purple-bg: rgb(145 65 172 / 0.1);
--purple-fg: rgb(145 65 172);
--red-bg: rgb(224 27 36 / 0.1);
--red-fg: rgb(224 27 36);
--yellow-bg: rgb(156 110 3 / 0.1);
--yellow-fg: rgb(156 110 3);
--star-featured: rgb(156 110 3 / 0.15);
}
}
@ -52,32 +53,51 @@
--active: 0.9;
--blur: saturate(180%) blur(0.75rem);
--container-width: 720px;
--edge-highlight: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1);
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--rounded-corner-small: 0.5rem;
--rounded-corner: 0.75rem;
--shadow-raised: 0 0 0 0.0625rem rgba(0, 0, 0, 0.06), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.14), 0 0.25rem 0.75rem 0.25rem rgba(0, 0, 0, 0.06);
--shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07), 0 0.125rem 0.375rem 0.125rem rgba(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);
--transition-long: 0.8s;
--transition-longer: 0.4s;
--transition: 0.2s;
// 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";
}
[data-theme="dark"] {