Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

title typo levels responsive too

Browse Source
This commit is contained in:
tykayn 2022-03-21 15:32:15 +01:00 committed by Baptiste Lemoine
parent 0c25809159
commit 0c24b2e602
1 changed files with 139 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/styles/partials/_typo.scss
View File

@ -1,42 +1,121 @@
.base-title {
font-family: $title_font;
color: $d-primary-intense;
font-weight: 700;
font-style: normal;
}
body {
font-family: $default_font;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $title_font;
color: $d-primary-intense;
@extend .base-title;
margin-top: 0;
margin-bottom: 0;
}
.title {
&.is-1 {
color: $d-primary-intense;
font-weight: 700;
@extend .base-title;
font-size: 32px;
line-height: 37px;
margin-top: 0;
margin-bottom: 1rem;
}
&.is-2 {
color: $d-primary-intense;
font-size: 20px;
line-height: 23px;
@extend .base-title;
font-size: 28px;
line-height: 32px;
margin-bottom: 1rem;
}
&.is-3 {
color: $d-primary-intense;
font-family: $title_font;
font-weight: 700;
font-style: normal;
@extend .base-title;
font-size: 24px;
line-height: 28px;
margin-bottom: 1rem;
}
&.is-4 {
@extend .base-title;
font-size: 22px;
line-height: 25px;
margin-bottom: 1rem;
}
&.is-5 {
@extend .base-title;
font-size: 20px;
line-height: 23px;
}
&.is-6 {
@extend .base-title;
font-size: 18px;
line-height: 20px;
}
}
.chapo {
font-weight: 400;
font-size: 20px;
line-height: 23px;
}
.chapo-bold {
@extend .chapo;
font-weight: 700;
}
.chapo-paragraph {
font-weight: 400;
font-size: 18px;
line-height: 21px;
}
.chapo-paragraph-bold {
@extend .chapo-paragraph;
font-weight: 700;
}
.paragraph {
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.paragraph-bold {
@extend .paragraph;
font-weight: 700;
}
.paragraph-detail {
font-weight: 700;
font-size: 14px;
line-height: 16px;
}
.paragraph-detail-bold {
@extend .paragraph-detail;
font-weight: 700;
}
.paragraph-mention {
font-weight: 700;
font-size: 12px;
line-height: 14px;
}
.paragraph-mention-bold {
@extend .paragraph-detail;
font-weight: 700;
}
.is-1 {
color: $d-primary-intense;
font-weight: 700;
@ -45,48 +124,44 @@ body {
margin-bottom: 1rem;
margin-top: 0;
}
.is-2 {
color: $d-primary-intense;
font-size: 28px;
line-height: 32px;
margin-bottom: 1rem;
}
.is-3 {
color: $d-primary-intense;
font-family: $title_font;
font-weight: 700;
font-style: normal;
@extend .base-title;
font-size: 24px;
line-height: 28px;
margin-bottom: 1rem;
}
.is-4 {
color: $d-primary-intense;
font-family: $title_font;
font-weight: 700;
font-style: normal;
@extend .base-title;
font-size: 24px;
line-height: 28px;
margin-bottom: 1rem;
}
.is-5 {
@extend .base-title;
color: #383838;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
.is-6 {
@extend .base-title;
color: #383838;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 16px;
line-height: 20px;
margin-bottom: 1rem;
}
.nobold {
font-weight: normal;
}
@ -102,7 +177,46 @@ body {
.icon-success {
fill: $success_color;
}
.has-text-danger {
color: red !important;
}
}
@media (max-width: 400px) {
.title {
font-family: $title_font;
color: $d-primary-intense;
font-weight: 700;
font-style: normal;
&.is-1 {
font-size: 28px;
line-height: 32px;
}
&.is-2 {
font-size: 24px;
line-height: 28px;
}
&.is-3 {
font-size: 22px;
line-height: 25px;
}
&.is-4 {
font-size: 20px;
line-height: 23px;
}
&.is-5 {
font-size: 18px;
line-height: 21px;
}
&.is-6 {
font-size: 16px;
line-height: 18px;
}
}
}