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 { body {
font-family: $default_font; font-family: $default_font;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: $title_font; @extend .base-title;
color: $d-primary-intense;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.title { .title {
&.is-1 { &.is-1 {
color: $d-primary-intense; @extend .base-title;
font-weight: 700;
font-size: 32px; font-size: 32px;
line-height: 37px; line-height: 37px;
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
&.is-2 { &.is-2 {
color: $d-primary-intense; @extend .base-title;
font-size: 20px; font-size: 28px;
line-height: 23px; line-height: 32px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
&.is-3 { &.is-3 {
color: $d-primary-intense; @extend .base-title;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
margin-bottom: 1rem; 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 { .is-1 {
color: $d-primary-intense; color: $d-primary-intense;
font-weight: 700; font-weight: 700;
@ -45,48 +124,44 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
margin-top: 0; margin-top: 0;
} }
.is-2 { .is-2 {
color: $d-primary-intense; color: $d-primary-intense;
font-size: 28px; font-size: 28px;
line-height: 32px; line-height: 32px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.is-3 { .is-3 {
color: $d-primary-intense; @extend .base-title;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.is-4 { .is-4 {
color: $d-primary-intense; @extend .base-title;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.is-5 { .is-5 {
@extend .base-title;
color: #383838; color: #383838;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.is-6 { .is-6 {
@extend .base-title;
color: #383838; color: #383838;
font-family: $title_font;
font-weight: 700;
font-style: normal;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.nobold { .nobold {
font-weight: normal; font-weight: normal;
} }
@ -102,7 +177,46 @@ body {
.icon-success { .icon-success {
fill: $success_color; fill: $success_color;
} }
.has-text-danger { .has-text-danger {
color: red !important; 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;
}
}
}