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

feat: Rename color variables, tweak some styles

Browse Source
This commit is contained in:
daudix-UFO
2023-12-14 17:14:09 +03:00
parent 5db2d46fbe
commit 41a35ef28f
5 changed files with 136 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
sass/_variables.scss
View File

@ -19,27 +19,20 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
:root {
// GENERAL SETUP
// COLORS
--bg-color: #{$bg-color-l};
--content-width: 720px;
--crt-bg: #{$crt-bg};
--fg-color: rgba(0, 0, 0, 0.8);
--primary-color-alpha: #{$primary-color-alpha};
--primary-color: #{$primary-color};
--rounded-corner-big: 18px;
--rounded-corner-small: 8px;
--rounded-corner: 12px;
// CUSTOM COLOR PALETTE
--fg05: rgba(0, 0, 0, 0.05);
--fg10: rgba(0, 0, 0, 0.1);
--fg20: rgba(0, 0, 0, 0.2);
--fg50: rgba(0, 0, 0, 0.5);
--fg60: rgba(0, 0, 0, 0.6);
--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: #{$nav-bg-l};
--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);
@ -47,15 +40,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
--yellow-bg: rgba(156, 110, 3, 0.1);
--yellow-fg: rgb(156, 110, 3);
// CUSTOM VARIABLES
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
0 2px 6px 2px rgba(0, 0, 0, 0.03);
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
// VARIABLES
--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-big: 18px;
--rounded-corner-small: 8px;
--rounded-corner: 12px;
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
--transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
--transition-long: 800ms;
--transition-longer: 400ms;
@ -66,18 +59,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
:root {
color-scheme: dark;
// GENERAL SETUP
// COLORS
--bg-color: #{$bg-color-d};
--fg-color: rgb(255, 255, 255);
// CUSTOM COLOR PALETTE
--fg05: rgba(255, 255, 255, 0.05);
--fg10: rgba(255, 255, 255, 0.1);
--fg20: rgba(255, 255, 255, 0.2);
--fg50: rgba(255, 255, 255, 0.5);
--fg60: rgba(255, 255, 255, 0.6);
--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: #{$nav-bg-d};
--orange-bg: rgba(255, 190, 111, 0.1);
--orange-fg: rgb(255, 190, 111);
--purple-bg: rgba(220, 138, 221, 0.1);