angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tweak some font styles

Browse source
This commit is contained in:
Yannik Rödel 2021-08-06 15:23:14 +02:00
parent b7afe85d1c
commit 2e62832756
3 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
styles/_base.scss
View file

@ -1,54 +1,56 @@
@use 'colors'; @use 'colors';
@use 'layout'; @use 'layout';
@use 'typography';
body { body {
margin: 0; margin: 0;
color: colors.$main-text; color: colors.$main-text;
} }
h2 { %title {
margin: layout.$normal-gap 0 layout.$large-gap 0; margin: layout.$huge-gap 0 layout.$large-gap 0;
font-size: 2.2rem; font-size: typography.$title-size;
line-height: 4rem; line-height: typography.$heading-line-height;
text-align: center;
&:first-child {
margin-top: 0;
} }
h1 {
@extend %title;
}
%heading {
margin: layout.$large-gap 0 layout.$normal-gap 0;
font-size: typography.$heading-size;
line-height: typography.$heading-line-height;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
width: 8rem; width: 8rem;
height: 0.3rem; height: 0.3rem;
margin-top: 0.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: colors.$blue-800; background-color: colors.$blue-800;
} }
} }
h3 { h2 {
@extend %heading;
}
%subheading {
margin: layout.$normal-gap 0;
font-size: typography.$subheading-size;
line-height: typography.$heading-line-height;
margin: layout.$normal-gap 0; margin: layout.$normal-gap 0;
font-size: 1.6rem;
line-height: 2rem;
&:first-child {
margin-top: 0;
}
} }
section > h2:first-child { h3 {
margin-top: 0; @extend %subheading;
} }
p { p {
margin: layout.$normal-gap 0; margin: layout.$normal-gap 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
} }
a { a {

8
styles/_components.scss
View file

@ -1,3 +1,4 @@
@use 'base';
@use 'colors'; @use 'colors';
@use 'layout'; @use 'layout';
@use 'typography'; @use 'typography';
@ -43,7 +44,6 @@
a { a {
display: block; display: block;
padding: layout.$small-gap; padding: layout.$small-gap;
font-size: typography.$large-size;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -115,7 +115,7 @@
> .site-logo { > .site-logo {
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
font-size: typography.$large-size; font-size: typography.$subheading-size;
text-decoration: none; text-decoration: none;
@include header-item; @include header-item;
} }
@ -193,7 +193,7 @@
> div { > div {
display: inline-block; display: inline-block;
padding: layout.$small-gap layout.$normal-gap; padding: layout.$small-gap layout.$normal-gap;
font-size: typography.$large-size; font-size: typography.$subheading-size;
background-color: colors.$yellow-600; background-color: colors.$yellow-600;
> p:first-child { > p:first-child {
@ -208,7 +208,7 @@
> .title { > .title {
padding: 0 layout.$normal-gap; padding: 0 layout.$normal-gap;
line-height: 5rem; line-height: 5rem;
font-size: typography.$huge-size; font-size: typography.$title-size;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
background-color: colors.$teal-500; background-color: colors.$teal-500;
} }

14
styles/_typography.scss
View file

@ -1,9 +1,13 @@
$normal-weight: 400; $normal-weight: 400;
$emphasized-weight: 600; $emphasized-weight: 600;
$normal-size: 1rem; $base-size: 1rem;
$large-size: 1.5rem; $title-size: 2.44rem;
$huge-size: 2.2rem; $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,
@ -36,7 +40,6 @@ html {
font-size: 100%; font-size: 100%;
font-family: Comfortaa, $fallback-fonts; font-family: Comfortaa, $fallback-fonts;
font-weight: $normal-weight; font-weight: $normal-weight;
line-height: 1.5;
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
font-family: 'Comfortaa Variable', $fallback-fonts; font-family: 'Comfortaa Variable', $fallback-fonts;
@ -44,5 +47,6 @@ html {
} }
body { body {
font-size: 1.2rem; font-size: $base-size;
line-height: $base-line-height;
} }