mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2026-03-21 22:32:17 +00:00
Migrate line heights and font sizes to CSS variables
This commit is contained in:
parent
31d756672c
commit
ec07ec65e3
6 changed files with 43 additions and 64 deletions
|
|
@ -42,7 +42,7 @@
|
|||
> div {
|
||||
display: inline-block;
|
||||
padding: var(--gap-s) var(--gap-m);
|
||||
font-size: typography.$subheading-size;
|
||||
font-size: var(--text-l);
|
||||
background-color: colors.$yellow-600;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
|
|
@ -66,8 +66,8 @@
|
|||
|
||||
> .title {
|
||||
padding: 0 var(--gap-m);
|
||||
line-height: 5rem;
|
||||
font-size: typography.$title-size;
|
||||
line-height: var(--scale-xl);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: typography.$emphasized-weight;
|
||||
background-color: colors.$teal-500;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ body {
|
|||
@extend %content-gutter;
|
||||
margin-top: var(--gap-2xl);
|
||||
margin-bottom: var(--gap-l);
|
||||
font-size: typography.$title-size;
|
||||
line-height: typography.$heading-line-height;
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--scale-s);
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
|
@ -26,17 +26,17 @@ h1 {
|
|||
@extend %content-gutter;
|
||||
margin-top: var(--gap-l);
|
||||
margin-bottom: var(--gap-l);
|
||||
font-size: typography.$heading-size;
|
||||
line-height: typography.$heading-line-height;
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--scale-s);
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 8rem;
|
||||
height: 0.3rem;
|
||||
margin-top: 0.2rem;
|
||||
border-radius: 0.5rem;
|
||||
width: 8ch;
|
||||
height: 0.3ex;
|
||||
margin-top: 0.2ex;
|
||||
border-radius: 0.3ex;
|
||||
background-color: colors.$blue-800;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
|
|
@ -51,8 +51,8 @@ h2 {
|
|||
|
||||
%subheading {
|
||||
@extend %content-gutter;
|
||||
font-size: typography.$subheading-size;
|
||||
line-height: typography.$heading-line-height;
|
||||
font-size: var(--text-l);
|
||||
line-height: var(--scale-s);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ dd {
|
|||
|
||||
em {
|
||||
background-color: colors.$teal-300;
|
||||
padding: 0 var(--gap-s) 0 var(--gap-s);
|
||||
padding: 0 0.5ch;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
background-color: colors.$orange-300;
|
||||
|
|
@ -129,7 +129,7 @@ blockquote {
|
|||
> p:only-child > a:only-child > img:only-child {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 60rem;
|
||||
max-height: max(20em, 80vh);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -141,7 +141,7 @@ blockquote {
|
|||
max-width: layout.$narrow-content-width;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 3rem;
|
||||
line-height: var(--scale-l);
|
||||
border: 1px solid colors.$main-text;
|
||||
transition:
|
||||
font motion.$subtle,
|
||||
|
|
@ -151,7 +151,6 @@ blockquote {
|
|||
&:hover {
|
||||
border-color: colors.$blue-800;
|
||||
font-weight: typography.$emphasized-weight;
|
||||
font-size: 110%;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
border-color: colors.$brown-800;
|
||||
|
|
@ -169,29 +168,9 @@ ul.link-grid {
|
|||
list-style: none;
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
&:not(.large) {
|
||||
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 {
|
||||
> a {
|
||||
display: inline-block;
|
||||
|
|
@ -206,8 +185,8 @@ ul.link-grid {
|
|||
> img {
|
||||
display: block;
|
||||
margin: 0 auto var(--gap-s) auto;
|
||||
max-width: 100%;
|
||||
max-height: 6rem;
|
||||
max-width: 20ch;
|
||||
max-height: 5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
@mixin header-item {
|
||||
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
|
||||
|
|
@ -76,10 +76,6 @@
|
|||
> ul {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -92,6 +88,10 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -107,10 +107,6 @@
|
|||
.site-mobile-navigation {
|
||||
cursor: pointer;
|
||||
|
||||
li {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
> summary {
|
||||
display: block;
|
||||
@include header-item;
|
||||
|
|
@ -167,7 +163,7 @@
|
|||
> .site-logo {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
font-size: typography.$subheading-size;
|
||||
font-size: var(--text-l);
|
||||
text-decoration: none;
|
||||
@include header-item;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
> time {
|
||||
display: block;
|
||||
padding-inline: var(--gap-s);
|
||||
font-size: typography.$base-size;
|
||||
font-size: var(--text-m);
|
||||
font-weight: typography.$normal-weight;
|
||||
}
|
||||
}
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: typography.$heading-size;
|
||||
font-size: var(--text-xl);
|
||||
background-color: #00000077;
|
||||
color: colors.$gray-50;
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -53,9 +53,22 @@ $wide-content-width: 80rem;
|
|||
}
|
||||
|
||||
@mixin setup {
|
||||
$-gap-lower-base: 1.5rem;
|
||||
$-gap-upper-base: 2rem;
|
||||
: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-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
|
||||
--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,6 @@
|
|||
$normal-weight: 400;
|
||||
$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: (
|
||||
'Light': 300,
|
||||
'Regular': 400,
|
||||
|
|
@ -49,7 +40,7 @@ $comfortaa-weights: (
|
|||
}
|
||||
|
||||
body {
|
||||
font-size: $base-size;
|
||||
line-height: $base-line-height;
|
||||
font-size: var(--text-m);
|
||||
line-height: var(--scale-m);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue