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

feat: Use primary color specified in config

Browse Source 
Sorry, not sorry iPhone users, get a phone on which you are able to use something different than Safari, or get a newer one :)
This commit is contained in:
daudix
2024-01-20 20:13:23 +03:00
parent 1d80b2d169
commit e01e715745
6 changed files with 31 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
sass/_crt.scss
View File

@ -1,8 +1,13 @@
.crt {
margin: 1rem 0 1rem;
border-radius: var(--rounded-corner);
box-shadow: var(--glow);
background: var(--crt-bg);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 5%, transparent),
0 2px 6px 2px color-mix(in srgb, var(--primary-color) 5%, transparent),
0 4px 24px 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
background-image: radial-gradient(
color-mix(in srgb, var(--primary-color) 20%, black),
color-mix(in srgb, var(--primary-color) 10%, black)
);
pre {
color: var(--primary-color);
@ -47,6 +52,10 @@
transform: translateY(0px);
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
.cursor {
@ -63,4 +72,8 @@
opacity: 1;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}

27
sass/_variables.scss
View File

@ -1,24 +1,6 @@
@use "sass:color";
$primary-color: #ff7800;
$primary-color-alpha: color.scale($primary-color, $alpha: -80%);
$bg-color-l: color.scale($primary-color, $lightness: 80%);
$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);
$crt-bg: radial-gradient(
color.scale($primary-color, $lightness: -80%),
color.scale($primary-color, $lightness: -90%)
);
$glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
:root {
// COLORS
--bg-color: #{$bg-color-l};
--crt-bg: #{$crt-bg};
--bg-color: var(--bg-color-l);
--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);
@ -28,8 +10,6 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
--nav-bg: rgba(242, 242, 242, 0.7);
--orange-bg: rgba(255, 120, 0, 0.1);
--orange-fg: rgb(255, 120, 0);
--primary-color-alpha: #{$primary-color-alpha};
--primary-color: #{$primary-color};
--purple-bg: rgba(145, 65, 172, 0.1);
--purple-fg: rgb(145, 65, 172);
--red-bg: rgba(224, 27, 36, 0.1);
@ -39,10 +19,11 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
// VARIABLES
--active: 0.9;
--bg-color-l: color-mix(in srgb, var(--primary-color) 20%, white);
--bg-color-d: color-mix(in srgb, var(--primary-color) 10%, black);
--content-width: 720px;
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
--glow: #{$glow};
--rounded-corner-small: 8px;
--rounded-corner: 12px;
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
@ -60,7 +41,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
color-scheme: dark;
// COLORS
--bg-color: #{$bg-color-d};
--bg-color: var(--bg-color-d);
--fg-color: rgb(255, 255, 255);
--fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1);