130 lines
2.5 KiB
SCSS
130 lines
2.5 KiB
SCSS
@mixin cd28-title($desktop-size, $mobile-size, $weight, $color) {
|
|
color: $color;
|
|
letter-spacing: $letterspacing-1;
|
|
line-height: $lineheight-1;
|
|
font-size: $mobile-size;
|
|
font-weight: $weight;
|
|
margin-top: 0em;
|
|
margin-bottom: 1em;
|
|
|
|
@media($min-desktop-viewport) {
|
|
font-size: $desktop-size;
|
|
}
|
|
}
|
|
|
|
.cd28-title-header {
|
|
margin: 0 0 0 1em;
|
|
line-height: 1;
|
|
font-weight: $font-weight-4;
|
|
letter-spacing: $letterspacing-0;
|
|
color: $gray-7;
|
|
}
|
|
|
|
@mixin cd28-big-title($desktop-header-size, $mobile-header-size) {
|
|
position: relative;
|
|
min-height: 2em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: end;
|
|
padding-bottom: 1em;
|
|
|
|
& .cd28-title-header {
|
|
font-size: $mobile-header-size;
|
|
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $desktop-header-size;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 2.5em;
|
|
height: 1em;
|
|
display: block;
|
|
content: "";
|
|
background: url("img/title-img-yellow.svg");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
@media($min-desktop-viewport) {
|
|
padding-left: 2.6em;
|
|
padding-bottom: 0;
|
|
&::before {
|
|
bottom: auto;
|
|
top: 0.8em;
|
|
}
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
@include cd28-title($font-size-9, $font-size-8, $font-weight-8, $gray-9);
|
|
}
|
|
|
|
%big-title-1 {
|
|
@extend h1;
|
|
@include cd28-big-title($font-size-7, $font-size-6);
|
|
}
|
|
|
|
h2 {
|
|
@include cd28-title($font-size-8, $font-size-7, $font-weight-8, $gray-9);
|
|
}
|
|
|
|
%big-title-2 {
|
|
@extend h2;
|
|
@include cd28-big-title($font-size-6, $font-size-5);
|
|
}
|
|
|
|
h3 { @include cd28-title($font-size-7, $font-size-6, $font-weight-7, $gray-9); }
|
|
h4 { @include cd28-title($font-size-6, $font-size-5, $font-weight-7, $gray-9); }
|
|
h5 { @include cd28-title($font-size-5, $font-size-3, $font-weight-7, $gray-9); }
|
|
h6 { @include cd28-title($font-size-4, $font-size-2, $font-weight-6, $gray-7); }
|
|
|
|
header, main, footer {
|
|
font-weight: $font-weight-5;
|
|
font-size: $font-size-1;
|
|
line-height: $lineheight-3;
|
|
letter-spacing: $letterspacing-0;
|
|
|
|
& .small {
|
|
font-size: $font-size-0;
|
|
}
|
|
|
|
& .large {
|
|
font-size: $font-size-2;
|
|
}
|
|
}
|
|
|
|
%title {
|
|
letter-spacing: $letterspacing-1;
|
|
line-height: $lineheight-1;
|
|
@media ($max-mobile-viewport) {
|
|
font-size: $font-size-3;
|
|
}
|
|
}
|
|
|
|
@mixin link($color, $hover-color) {
|
|
color: $color;
|
|
background: transparent;
|
|
|
|
&:hover, &:focus {
|
|
outline: none;
|
|
background: $color;
|
|
color: $hover-color;
|
|
font-weight: $font-weight-5;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@include link($blue-5, white);
|
|
}
|
|
|
|
.cd28-external-link {
|
|
&::after {
|
|
content: "\ecaf"; // external-link-line
|
|
font-family: "RemixIcon";
|
|
}
|
|
}
|