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

Add font size variables for consistent typography

Browse Source
This commit is contained in:
daudix
2024-09-15 22:19:35 +03:00
parent 213bb1ddf9
commit b651470c1d
12 changed files with 88 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
sass/_variables.scss
View File

@ -15,7 +15,7 @@
}
@include theme-variables using ($theme) {
@if $theme == "dark" {
@if $theme =="dark" {
// COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255);
@ -60,22 +60,35 @@
--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
--yellow-fg: rgb(156 110 3);
// VARIABLES
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem);
--color-opacity: 0.1;
// CONTAINERS
--container-width: 720px;
--dim-opacity: 0.8;
--disabled-opacity: 0.6;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--hover: scale(1.1);
// CORNERS
--rounded-corner-small: 0.5rem;
--rounded-corner: 0.75rem;
--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;
// FILTERS
--blur: saturate(180%) blur(0.75rem);
// FONT SIZES
--font-size-xx-small: 0.625rem;
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-medium: 1rem;
--font-size-large: 1.25rem;
--font-size-x-large: 1.5rem;
--font-size-xx-large: 2rem;
--font-size-xxx-large: 3rem;
// FONT SIZES (RELATIVE)
--font-size-xx-small-em: 0.625em;
--font-size-x-small-em: 0.75em;
--font-size-small-em: 0.875em;
--font-size-medium-em: 1em;
--font-size-large-em: 1.25em;
--font-size-x-large-em: 1.5em;
--font-size-xx-large-em: 2em;
--font-size-xxx-large-em: 3em;
// FONTS
--font-system-ui: system-ui, sans-serif;
@ -94,5 +107,24 @@
--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";
// OPACITY
--disabled-opacity: 0.6;
--dim-opacity: 0.8;
--color-opacity: 0.1;
// SHADOWS
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--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);
// STATES
--hover: scale(1.1);
--active: scale(0.9);
// TRANSITIONS
--transition-long: 0.8s;
--transition-longer: 0.4s;
--transition: 0.2s;
}
}