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

1
sass/_article-list.scss
View File

@ -30,6 +30,7 @@
h3 {
margin: 0;
line-height: 1;
a:hover::after {
transform: none;

6
sass/_buttons.scss
View File

@ -2,6 +2,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
margin-block-start: 4rem;
}
@ -21,10 +22,11 @@ button.inline-button {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 0.5rem 1rem;
padding: 0.75rem 1rem;
color: var(--fg-muted-5);
font-weight: bold;
font-size: smaller;
font-size: var(--font-size-small);
line-height: 1;
&:hover {
background-color: var(--fg-muted-2);

2
sass/_code.scss
View File

@ -12,7 +12,7 @@ code:not(pre code) {
background-color: var(--fg-muted-1);
padding: 0.125rem 0.375rem;
color: var(--red-fg);
font-size: smaller;
font-size: var(--font-size-small-em);
}
pre {

13
sass/_comments.scss
View File

@ -64,7 +64,7 @@
margin-block-start: 0;
color: var(--fg-muted-4);
font-weight: bold;
font-size: x-large;
font-size: var(--font-size-x-large);
text-align: center;
}
@ -123,9 +123,10 @@
box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.25rem 0.75rem;
padding: 0.375rem 0.75rem;
color: var(--fg-muted-5);
font-size: smaller;
font-size: var(--font-size-small);
line-height: 1;
text-decoration: none;
&:hover {
@ -192,8 +193,8 @@
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
line-height: normal;
padding: 0.25rem 0.375rem;
line-height: 1;
text-decoration: none;
&:hover {
@ -220,7 +221,7 @@
time {
grid-area: time;
margin-block-start: 0.5rem;
font-size: smaller;
font-size: var(--font-size-small);
a {
color: var(--fg-muted-5);

3
sass/_footer.scss
View File

@ -120,7 +120,8 @@
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
padding: 0.25rem 0.375rem;
line-height: 1;
text-decoration: none;
&:hover {

8
sass/_nav.scss
View File

@ -146,8 +146,8 @@
}
.circle {
padding: 0.5rem 0.625rem;
line-height: normal;
padding: 0.625rem 0.625rem;
line-height: 0;
&::before {
display: none;
@ -168,7 +168,7 @@
border: none;
border-radius: 999px;
background-color: transparent;
font-size: 1rem;
font-size: var(--font-size-medium);
}
details {
@ -314,7 +314,7 @@
padding: 0.5rem 0.75rem;
width: 100%;
color: inherit;
font-size: 1rem;
font-size: var(--font-size-medium);
&::placeholder {
opacity: 1;

5
sass/_statements.scss
View File

@ -2,7 +2,7 @@
margin: 1rem 0;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
padding: 0.75rem 1rem;
padding: 1rem;
:last-child {
margin-block-end: 0;
@ -21,7 +21,8 @@
}
.big {
font-size: x-large;
font-size: var(--font-size-x-large);
line-height: 1;
.icon {
margin-inline-end: 0.375rem;

13
sass/_tags.scss
View File

@ -22,9 +22,10 @@
box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.2031rem 0.75rem;
padding: 0.375rem 0.75rem;
color: var(--fg-muted-5);
font-size: small;
font-size: var(--font-size-small);
line-height: 1;
text-decoration: none;
white-space: nowrap;
@ -47,8 +48,8 @@
display: inline-block;
padding-inline-start: 0.75rem;
padding-inline-end: 0.5rem;
padding-block-start: 0.2031rem;
padding-block-end: 0.2031rem;
padding-block-start: 0.375rem;
padding-block-end: 0.375rem;
}
.count {
@ -58,8 +59,8 @@
background-color: var(--fg-muted-1);
padding-inline-start: 0.5rem;
padding-inline-end: 0.625rem;
padding-block-start: 0.2031rem;
padding-block-end: 0.2031rem;
padding-block-start: 0.375rem;
padding-block-end: 0.375rem;
font-variant-numeric: tabular-nums;

23
sass/_typography.scss
View File

@ -8,37 +8,38 @@ h6 {
text-wrap: balance;
margin: 2rem 0 1rem;
font-weight: lighter;
line-height: 1;
font-family: var(--font-antique);
letter-spacing: -0.05em;
}
h1 {
font-size: 2.5rem;
font-size: var(--font-size-xxx-large);
}
h2 {
font-size: 2rem;
font-size: var(--font-size-xx-large);
}
h3 {
font-size: 1.5rem;
font-size: var(--font-size-x-large);
}
h4 {
font-size: 1.25rem;
font-size: var(--font-size-large);
}
h5 {
font-size: 1rem;
font-size: var(--font-size-medium);
}
h6 {
font-size: 0.75rem;
font-size: var(--font-size-small);
}
small {
color: var(--fg-muted-5);
font-size: smaller;
font-size: var(--font-size-small-em);
}
abbr[title] {
@ -50,7 +51,7 @@ abbr[title] {
figcaption {
color: var(--fg-muted-4);
font-size: smaller;
font-size: var(--font-size-small-em);
text-align: center;
}
@ -94,7 +95,7 @@ ins {
samp {
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
font-size: smaller;
font-size: var(--font-size-small-em);
}
q {
@ -151,7 +152,7 @@ kbd {
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-1);
padding: 0.125rem 0.375rem;
font-size: smaller;
font-size: var(--font-size-small-em);
// Small nice thingy, keys can be pressed!
&:active {
@ -183,7 +184,7 @@ hr {
top: -1.75rem;
content: "☙❧";
color: var(--fg-muted-4);
font-size: 2rem;
font-size: var(--font-size-xx-large);
// An ugly hack to fix mirroring in rtl
:root[dir*="rtl"] & {

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;
}
}