host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit text font size, line height and icon size

Browse source
This commit is contained in:
Paul Nicoué 2022-12-20 12:13:49 +01:00
parent 8ea65a3c93
commit 4177b0c140
5 changed files with 64 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

20
assets/css/main.scss
View file

@ -17,26 +17,6 @@ body {
color: var(--black);
}
h1 {
font-family: var(--title-font-family);
font-size: var(--h1-font-size);
line-height: var(--h1-line-height);
}
h2 {
font-family: var(--text-font-family);
font-size: var(--h2-font-size);
line-height: var(--h2-line-height);
margin: 0 0 4rem 0;
}
h3 {
font-family: var(--text-font-family);
font-size: var(--h3-font-size);
line-height: var(--h3-line-height);
margin: 2rem 0 1rem 0;
}
strong {
font-weight: var(--bold-font-weight);
}

43
assets/css/partials/variables.scss
View file

@ -7,21 +7,12 @@
// Fonts
--text-font-family: Helvetica, Arial, sans-serif;
--title-font-family: Helvetica, Arial, sans-serif;
--regular-font-weight: 400;
--medium-font-weight: 500;
--semi-bold-font-weight: 600;
--bold-font-weight: 700;
--text-font-size: 0.9rem;
--text-line-height: calc(var(--text-font-size) * 1);
--footnote-font-size: 0.8rem;
--footnote-line-height: calc(var(--footnote-font-size) * 1.2);
--h1-font-size: 1.6rem;
--h1-line-height: calc(var(--h1-font-size) * 1.2);
--h2-font-size: 1.4rem;
--h2-line-height: calc(var(--h2-font-size) * 1.2);
--h3-font-size: 1.2rem;
--h3-line-height: calc(var(--h3-font-size) * 1.2);
--text-font-size: 1rem;
--text-line-height: calc(var(--text-font-size) * 1.2);
// Dimensions
@ -38,3 +29,33 @@
$tablet-media-query: 48rem;
$desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
// Fonts
--text-font-size: 0.95rem;
--text-line-height: calc(var(--text-font-size) * 1.1);
// Dimensions
--icon-size: 3rem;
}
}
@media screen and (min-width: $desktop-media-query) {
:root {
// Fonts
--text-font-size: 0.9rem;
--text-line-height: calc(var(--text-font-size) * 1);
// Dimensions
--icon-size: 2.8rem;
}
}