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

52
styles/_base.scss
View file

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

8
styles/_components.scss
View file

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

14
styles/_typography.scss
View file

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