angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2026-03-21 22:32:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Migrate line heights and font sizes to CSS variables

Browse source
This commit is contained in:
Yannik Rödel 2025-11-18 19:22:59 +01:00 • committed by Yannik Rödel
parent 3d5f92e68e
commit 7a1b6c40f6
6 changed files with 43 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
styles/components/_banner.scss
View file

@ -42,7 +42,7 @@
> div { > div {
display: inline-block; display: inline-block;
padding: var(--gap-s) var(--gap-m); padding: var(--gap-s) var(--gap-m);
font-size: typography.$subheading-size; font-size: var(--text-l);
background-color: colors.$yellow-600; background-color: colors.$yellow-600;
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
@ -66,8 +66,8 @@
> .title { > .title {
padding: 0 var(--gap-m); padding: 0 var(--gap-m);
line-height: 5rem; line-height: var(--scale-xl);
font-size: typography.$title-size; font-size: var(--text-2xl);
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
background-color: colors.$teal-500; background-color: colors.$teal-500;

51
styles/components/_markup.scss
View file

@ -12,8 +12,8 @@ body {
@extend %content-gutter; @extend %content-gutter;
margin-top: var(--gap-2xl); margin-top: var(--gap-2xl);
margin-bottom: var(--gap-l); margin-bottom: var(--gap-l);
font-size: typography.$title-size; font-size: var(--text-2xl);
line-height: typography.$heading-line-height; line-height: var(--scale-s);
text-align: center; text-align: center;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@ -26,17 +26,17 @@ h1 {
@extend %content-gutter; @extend %content-gutter;
margin-top: var(--gap-l); margin-top: var(--gap-l);
margin-bottom: var(--gap-l); margin-bottom: var(--gap-l);
font-size: typography.$heading-size; font-size: var(--text-xl);
line-height: typography.$heading-line-height; line-height: var(--scale-s);
overflow-wrap: anywhere; overflow-wrap: anywhere;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
width: 8rem; width: 8ch;
height: 0.3rem; height: 0.3ex;
margin-top: 0.2rem; margin-top: 0.2ex;
border-radius: 0.5rem; border-radius: 0.3ex;
background-color: colors.$blue-800; background-color: colors.$blue-800;
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
@ -51,8 +51,8 @@ h2 {
%subheading { %subheading {
@extend %content-gutter; @extend %content-gutter;
font-size: typography.$subheading-size; font-size: var(--text-l);
line-height: typography.$heading-line-height; line-height: var(--scale-s);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@ -91,7 +91,7 @@ dd {
em { em {
background-color: colors.$teal-300; background-color: colors.$teal-300;
padding: 0 var(--gap-s) 0 var(--gap-s); padding: 0 0.5ch;
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
background-color: colors.$orange-300; background-color: colors.$orange-300;
@ -129,7 +129,7 @@ blockquote {
> p:only-child > a:only-child > img:only-child { > p:only-child > a:only-child > img:only-child {
display: block; display: block;
max-width: 100%; max-width: 100%;
max-height: 60rem; max-height: max(20em, 80vh);
margin: 0 auto; margin: 0 auto;
} }
} }
@ -141,7 +141,7 @@ blockquote {
max-width: layout.$narrow-content-width; max-width: layout.$narrow-content-width;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
line-height: 3rem; line-height: var(--scale-l);
border: 1px solid colors.$main-text; border: 1px solid colors.$main-text;
transition: transition:
font motion.$subtle, font motion.$subtle,
@ -151,7 +151,6 @@ blockquote {
&:hover { &:hover {
border-color: colors.$blue-800; border-color: colors.$blue-800;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
font-size: 110%;
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
border-color: colors.$brown-800; border-color: colors.$brown-800;
@ -169,27 +168,7 @@ ul.link-grid {
list-style: none; list-style: none;
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
&:not(.large) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
}
&.large {
gap: var(--gap-m);
> li > a {
display: flex;
align-items: center;
> img {
max-width: 6rem;
margin-right: var(--gap-m);
}
}
}
}
&.large {
@extend %narrow-content-gutter;
} }
> li { > li {
@ -206,8 +185,8 @@ ul.link-grid {
> img { > img {
display: block; display: block;
margin: 0 auto var(--gap-s) auto; margin: 0 auto var(--gap-s) auto;
max-width: 100%; max-width: 20ch;
max-height: 6rem; max-height: 5em;
} }
&:hover { &:hover {

16
styles/components/_site.scss
View file

@ -5,7 +5,7 @@
@mixin header-item { @mixin header-item {
padding: 0 var(--gap-m); padding: 0 var(--gap-m);
line-height: 4rem; line-height: var(--scale-xl);
} }
// The site logo text. More specific styles for this element are also present // The site logo text. More specific styles for this element are also present
@ -76,10 +76,6 @@
> ul { > ul {
display: flex; display: flex;
margin-bottom: 0; margin-bottom: 0;
> li {
margin: 0;
}
} }
a { a {
@ -92,6 +88,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
> li {
margin: 0;
}
} }
a { a {
@ -107,10 +107,6 @@
.site-mobile-navigation { .site-mobile-navigation {
cursor: pointer; cursor: pointer;
li {
margin-block: 0;
}
> summary { > summary {
display: block; display: block;
@include header-item; @include header-item;
@ -167,7 +163,7 @@
> .site-logo { > .site-logo {
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
font-size: typography.$subheading-size; font-size: var(--text-l);
text-decoration: none; text-decoration: none;
@include header-item; @include header-item;
} }

4
styles/components/_timeline.scss
View file

@ -47,7 +47,7 @@
> time { > time {
display: block; display: block;
padding-inline: var(--gap-s); padding-inline: var(--gap-s);
font-size: typography.$base-size; font-size: var(--text-m);
font-weight: typography.$normal-weight; font-weight: typography.$normal-weight;
} }
} }
@ -185,7 +185,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: typography.$heading-size; font-size: var(--text-xl);
background-color: #00000077; background-color: #00000077;
color: colors.$gray-50; color: colors.$gray-50;
opacity: 0; opacity: 0;

17
styles/lib/_layout.scss
View file

@ -53,9 +53,22 @@ $wide-content-width: 80rem;
} }
@mixin setup { @mixin setup {
$-gap-lower-base: 1.5rem;
$-gap-upper-base: 2rem;
:root { :root {
$-text-lower-base: 1rem / 20 * 16;
$-text-upper-base: 1rem;
--text-m: #{fluids.harmonic-value(0, $-text-lower-base, $-text-upper-base)};
--text-l: #{fluids.harmonic-value(1, $-text-lower-base, $-text-upper-base)};
--text-xl: #{fluids.harmonic-value(2, $-text-lower-base, $-text-upper-base)};
--text-2xl: #{fluids.harmonic-value(3, $-text-lower-base, $-text-upper-base)};
$-line-height-factor: 1.5;
--scale-s: #{0.8 * $-line-height-factor};
--scale-m: #{$-line-height-factor};
--scale-l: #{1.5 * $-line-height-factor};
--scale-xl: #{1.7 * $-line-height-factor};
$-gap-lower-base: $-text-lower-base * $-line-height-factor;
$-gap-upper-base: $-text-upper-base * $-line-height-factor;
--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)}; --gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)}; --gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)}; --gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};

13
styles/lib/_typography.scss
View file

@ -1,15 +1,6 @@
$normal-weight: 400; $normal-weight: 400;
$emphasized-weight: 600; $emphasized-weight: 600;
// This is the major third type scale.
$base-size: 1rem;
$title-size: 2.44rem;
$heading-size: 1.95rem;
$subheading-size: 1.56rem;
$base-line-height: 1.5;
$heading-line-height: 1.3;
$comfortaa-weights: ( $comfortaa-weights: (
'Light': 300, 'Light': 300,
'Regular': 400, 'Regular': 400,
@ -49,7 +40,7 @@ $comfortaa-weights: (
} }
body { body {
font-size: $base-size; font-size: var(--text-m);
line-height: $base-line-height; line-height: var(--scale-m);
} }
} }