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

Scale up the blurnail on hover, percents suck, decimals are more readable

Browse Source
This commit is contained in:
daudix
2024-09-18 18:44:43 +03:00
parent a6602357e6
commit 2469f64eb7
14 changed files with 69 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
sass/_variables.scss
View File

@ -19,13 +19,13 @@
// COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 5%);
--fg-muted-2: rgb(255 255 255 / 10%);
--fg-muted-3: rgb(255 255 255 / 20%);
--fg-muted-4: rgb(255 255 255 / 50%);
--fg-muted-5: rgb(255 255 255 / 60%);
--fg-contrast: rgb(0 0 0 / 80%);
--nav-bg: rgb(25 25 25 / 70%);
--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);
--fg-contrast: rgb(0 0 0 / 0.8);
--nav-bg: rgb(25 25 25 / 0.7);
--blue-fg: rgb(153 193 241);
--brown-fg: rgb(205 171 143);
--green-fg: rgb(143 240 164);
@ -34,7 +34,7 @@
--yellow-fg: rgb(248 228 92);
// FILTERS
--blurnail-blur: brightness(25%) blur(1rem);
--blurnail-blur: brightness(0.25) blur(1rem);
color-scheme: dark;
}
@ -46,16 +46,16 @@
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
--brown-fg: rgb(99 69 44);
--fg-color: rgb(0 0 0 / 80%);
--fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255);
--fg-muted-1: rgb(0 0 0 / 5%);
--fg-muted-2: rgb(0 0 0 / 10%);
--fg-muted-3: rgb(0 0 0 / 20%);
--fg-muted-4: rgb(0 0 0 / 50%);
--fg-muted-5: rgb(0 0 0 / 60%);
--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);
--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 / 70%);
--nav-bg: rgb(242 242 242 / 0.7);
--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);
@ -72,8 +72,8 @@
--rounded-corner-small: 0.5rem;
// FILTERS
--blur: saturate(180%) blur(0.75rem);
--blurnail-blur: contrast(25%) brightness(175%) blur(1rem);
--blur: saturate(1.8) blur(0.75rem);
--blurnail-blur: contrast(0.25) brightness(1.75) blur(1rem);
// FONT SIZES
--font-size-xx-small: 0.625rem;
@ -114,19 +114,19 @@
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// OPACITY
--color-opacity: 10%;
--dim-opacity: 80%;
--disabled-opacity: 60%;
--color-opacity: 0.1;
--dim-opacity: 0.8;
--disabled-opacity: 0.6;
// SHADOWS
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 10%);
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 3%), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 7%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 3%);
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 6%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 14%), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 6%);
--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 50%);
--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-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
// STATES
--hover: scale(110%);
--active: scale(90%);
--hover: scale(1.1);
--active: scale(0.9);
// TRANSITIONS
--transition: 0.2s;