EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add line-heights and missing main-title styling

Browse source
This commit is contained in:
lilith 2025-03-06 02:05:50 +01:00
commit bacc3b9bc9
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
8 changed files with 87 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

26
styleguide/assets/style/base.css
View file

@ -91,6 +91,11 @@
--color-light-accent-3: #932f0a; --color-light-accent-3: #932f0a;
--color-cmyk-primary: var(--color-dark-primary); --color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary); --color-cmyk-secondary: var(--color-dark-secondary);
--line-height-loose: 1.4;
--line-height-relaxed: 1.3;
--line-height-base: 1.2;
--line-height-snug: 1.1;
--line-height-tight: 1;
--text-xs: 0.75rem; --text-xs: 0.75rem;
--text-sm: 0.875rem; --text-sm: 0.875rem;
--text-base: 1rem; --text-base: 1rem;
@ -100,6 +105,8 @@
--text-3xl: 1.875rem; --text-3xl: 1.875rem;
--text-4xl: 2.25rem; --text-4xl: 2.25rem;
--text-5xl: 3rem; --text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
--container-3xs: 16rem; --container-3xs: 16rem;
--container-2xs: 18rem; --container-2xs: 18rem;
--container-xs: 20rem; --container-xs: 20rem;
@ -433,8 +440,10 @@ body {
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
line-height: var(--line-height-base);
} }
.main-title,
h1, h1,
.h1, .h1,
h2, h2,
@ -452,40 +461,45 @@ h6,
margin: 1rem 0; margin: 1rem 0;
} }
.main-title {
font-size: var(--text-7xl);
line-height: var(--line-height-base);
}
h1, h1,
.h1 { .h1 {
font-size: var(--text-5xl); font-size: var(--text-5xl);
line-height: var(); line-height: var(--line-height-base);
} }
h2, h2,
.h2 { .h2 {
font-size: var(--text-4xl); font-size: var(--text-4xl);
line-height: var(); line-height: var(--line-height-base);
} }
h3, h3,
.h3 { .h3 {
font-size: var(--text-3xl); font-size: var(--text-3xl);
line-height: var(); line-height: var(--line-height-base);
} }
h4, h4,
.h4 { .h4 {
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h5, h5,
.h5 { .h5 {
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h6, h6,
.h6 { .h6 {
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: var(); line-height: var(--line-height-loose);
} }
pre { pre {

2
styleguide/assets/style/base.css.map
View file

File diff suppressed because one or more lines are too long

27
styleguide/assets/style/base.scss
View file

@ -105,6 +105,12 @@ $mobile-navigation-height: 4rem;
--color-cmyk-primary: var(--color-dark-primary); --color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary); --color-cmyk-secondary: var(--color-dark-secondary);
--line-height-loose: 1.4;
--line-height-relaxed: 1.3;
--line-height-base: 1.2;
--line-height-snug: 1.1;
--line-height-tight: 1;
--text-xs: 0.75rem; --text-xs: 0.75rem;
--text-sm: 0.875rem; --text-sm: 0.875rem;
--text-base: 1rem; --text-base: 1rem;
@ -114,6 +120,8 @@ $mobile-navigation-height: 4rem;
--text-3xl: 1.875rem; --text-3xl: 1.875rem;
--text-4xl: 2.25rem; --text-4xl: 2.25rem;
--text-5xl: 3rem; --text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
--container-3xs: 16rem; --container-3xs: 16rem;
--container-2xs: 18rem; --container-2xs: 18rem;
@ -349,8 +357,10 @@ body {
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
line-height: var(--line-height-base);
} }
.main-title,
h1, h1,
.h1, .h1,
h2, h2,
@ -368,40 +378,45 @@ h6,
margin: 1rem 0; margin: 1rem 0;
} }
.main-title {
font-size: var(--text-7xl);
line-height: var(--line-height-base);
}
h1, h1,
.h1 { .h1 {
font-size: var(--text-5xl); font-size: var(--text-5xl);
line-height: var(); line-height: var(--line-height-base);
} }
h2, h2,
.h2 { .h2 {
font-size: var(--text-4xl); font-size: var(--text-4xl);
line-height: var(); line-height: var(--line-height-base);
} }
h3, h3,
.h3 { .h3 {
font-size: var(--text-3xl); font-size: var(--text-3xl);
line-height: var(); line-height: var(--line-height-base);
} }
h4, h4,
.h4 { .h4 {
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h5, h5,
.h5 { .h5 {
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h6, h6,
.h6 { .h6 {
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: var(); line-height: var(--line-height-loose);
} }
pre { pre {

27
styleguide/assets/style/merch.css
View file

@ -91,6 +91,11 @@
--color-light-accent-3: #932f0a; --color-light-accent-3: #932f0a;
--color-cmyk-primary: var(--color-dark-primary); --color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary); --color-cmyk-secondary: var(--color-dark-secondary);
--line-height-loose: 1.4;
--line-height-relaxed: 1.3;
--line-height-base: 1.2;
--line-height-snug: 1.1;
--line-height-tight: 1;
--text-xs: 0.75rem; --text-xs: 0.75rem;
--text-sm: 0.875rem; --text-sm: 0.875rem;
--text-base: 1rem; --text-base: 1rem;
@ -100,6 +105,8 @@
--text-3xl: 1.875rem; --text-3xl: 1.875rem;
--text-4xl: 2.25rem; --text-4xl: 2.25rem;
--text-5xl: 3rem; --text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
--container-3xs: 16rem; --container-3xs: 16rem;
--container-2xs: 18rem; --container-2xs: 18rem;
--container-xs: 20rem; --container-xs: 20rem;
@ -433,8 +440,10 @@ body {
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
line-height: var(--line-height-base);
} }
.main-title,
h1, h1,
.h1, .h1,
h2, h2,
@ -452,40 +461,45 @@ h6,
margin: 1rem 0; margin: 1rem 0;
} }
.main-title {
font-size: var(--text-7xl);
line-height: var(--line-height-base);
}
h1, h1,
.h1 { .h1 {
font-size: var(--text-5xl); font-size: var(--text-5xl);
line-height: var(); line-height: var(--line-height-base);
} }
h2, h2,
.h2 { .h2 {
font-size: var(--text-4xl); font-size: var(--text-4xl);
line-height: var(); line-height: var(--line-height-base);
} }
h3, h3,
.h3 { .h3 {
font-size: var(--text-3xl); font-size: var(--text-3xl);
line-height: var(); line-height: var(--line-height-base);
} }
h4, h4,
.h4 { .h4 {
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h5, h5,
.h5 { .h5 {
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h6, h6,
.h6 { .h6 {
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: var(); line-height: var(--line-height-loose);
} }
pre { pre {
@ -707,6 +721,7 @@ body header #backToWiki > img {
body header #backToWiki:hover > img { body header #backToWiki:hover > img {
transform: scale(1.05); transform: scale(1.05);
} }
body .main-title,
body h1, body h1,
body .h1, body .h1,
body h2, body h2,

2
styleguide/assets/style/merch.css.map
View file

File diff suppressed because one or more lines are too long

27
styleguide/assets/style/styleguide.css
View file

@ -91,6 +91,11 @@
--color-light-accent-3: #932f0a; --color-light-accent-3: #932f0a;
--color-cmyk-primary: var(--color-dark-primary); --color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary); --color-cmyk-secondary: var(--color-dark-secondary);
--line-height-loose: 1.4;
--line-height-relaxed: 1.3;
--line-height-base: 1.2;
--line-height-snug: 1.1;
--line-height-tight: 1;
--text-xs: 0.75rem; --text-xs: 0.75rem;
--text-sm: 0.875rem; --text-sm: 0.875rem;
--text-base: 1rem; --text-base: 1rem;
@ -100,6 +105,8 @@
--text-3xl: 1.875rem; --text-3xl: 1.875rem;
--text-4xl: 2.25rem; --text-4xl: 2.25rem;
--text-5xl: 3rem; --text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
--container-3xs: 16rem; --container-3xs: 16rem;
--container-2xs: 18rem; --container-2xs: 18rem;
--container-xs: 20rem; --container-xs: 20rem;
@ -433,8 +440,10 @@ body {
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
line-height: var(--line-height-base);
} }
.main-title,
h1, h1,
.h1, .h1,
h2, h2,
@ -452,40 +461,45 @@ h6,
margin: 1rem 0; margin: 1rem 0;
} }
.main-title {
font-size: var(--text-7xl);
line-height: var(--line-height-base);
}
h1, h1,
.h1 { .h1 {
font-size: var(--text-5xl); font-size: var(--text-5xl);
line-height: var(); line-height: var(--line-height-base);
} }
h2, h2,
.h2 { .h2 {
font-size: var(--text-4xl); font-size: var(--text-4xl);
line-height: var(); line-height: var(--line-height-base);
} }
h3, h3,
.h3 { .h3 {
font-size: var(--text-3xl); font-size: var(--text-3xl);
line-height: var(); line-height: var(--line-height-base);
} }
h4, h4,
.h4 { .h4 {
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h5, h5,
.h5 { .h5 {
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(); line-height: var(--line-height-loose);
} }
h6, h6,
.h6 { .h6 {
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: var(); line-height: var(--line-height-loose);
} }
pre { pre {
@ -707,6 +721,7 @@ body header #backToWiki > img {
body header #backToWiki:hover > img { body header #backToWiki:hover > img {
transform: scale(1.05); transform: scale(1.05);
} }
body .main-title,
body h1, body h1,
body .h1, body .h1,
body h2, body h2,

2
styleguide/assets/style/styleguide.css.map
View file

File diff suppressed because one or more lines are too long

1
styleguide/assets/style/styleguide.scss
View file

@ -40,6 +40,7 @@ body {
} }
} }
.main-title,
h1, h1,
.h1, .h1,
h2, h2,