MoreStrive
157 lines
2.4 KiB
SCSS
157 lines
2.4 KiB
SCSS
@import url("https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
|
|
|
|
// Variables
|
|
$font-gelasio: "Gelasio", serif;
|
|
$font-raleway: "Raleway", sans-serif;
|
|
|
|
$color-primary: #ED1C24;
|
|
$color-brown: #9E1E0F;
|
|
$color-text: #151411;
|
|
$color-paragraph: #AFADB5;
|
|
$color-placeholder: #F9F9F9;
|
|
$color-line: #EDEDED;
|
|
|
|
|
|
// Mixins
|
|
|
|
// extends
|
|
%headings {
|
|
color: $color-text;
|
|
font-family: $font-gelasio;
|
|
line-height: 130%;
|
|
font-weight: 700;
|
|
}
|
|
|
|
%label {
|
|
color: $color-text;
|
|
font-family: $font-raleway;
|
|
line-height: 130%;
|
|
font-weight: 700;
|
|
}
|
|
|
|
%paragraph {
|
|
color: $color-paragraph;
|
|
font-family: $font-raleway;
|
|
line-height: 180%;
|
|
font-weight: 500;
|
|
}
|
|
|
|
h1 a {
|
|
@extend %headings;
|
|
font-size: 64px;
|
|
}
|
|
|
|
h2 a{
|
|
@extend %headings;
|
|
font-size: 44px;
|
|
}
|
|
|
|
h3 a{
|
|
@extend %headings;
|
|
font-size: 24px;
|
|
}
|
|
|
|
h4 a{
|
|
@extend %headings;
|
|
font-size: 20px;
|
|
}
|
|
|
|
h5 a{
|
|
@extend %headings;
|
|
font-size: 18px;
|
|
}
|
|
|
|
h6 a{
|
|
@extend %headings;
|
|
font-size: 16px;
|
|
}
|
|
|
|
h6.h6-plus a {
|
|
@extend %headings;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
label {
|
|
&.label-l1 {
|
|
@extend %label;
|
|
font-size: 18px;
|
|
}
|
|
|
|
&.label-l2 {
|
|
@extend %label;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&.label-l3 {
|
|
@extend %label;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
&.paragraph-p1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
&.paragraph-p2 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&.paragraph-p2 {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
figure {
|
|
margin: auto !important;
|
|
}
|
|
|
|
img {
|
|
object-fit: cover!important;
|
|
}
|
|
|
|
.content {
|
|
& p {
|
|
@apply mb-2 font-arial leading-160%;
|
|
}
|
|
|
|
& #title {
|
|
@apply font-merriweather font-bold leading-150%;
|
|
}
|
|
|
|
& #intro, & #sub {
|
|
@apply font-arial font-medium leading-160%;
|
|
}
|
|
|
|
& audio {
|
|
@apply w-full;
|
|
}
|
|
|
|
& document, & a, & custom-figure, & author {
|
|
@apply cursor-pointer text-primary-600;
|
|
}
|
|
}
|
|
|
|
div[layout="TYPE:Detail-LAYOUT:image"] {
|
|
& p,& figure.align-center-image, & #sub, & #title, & #intro, & #breadcrumb, & #navigation__bottom {
|
|
@apply lg:max-w-640px mx-auto;
|
|
}
|
|
}
|
|
|
|
div[layout="ARTICLE_PAGE"] {
|
|
& figure{
|
|
@apply w-full items-center flex justify-center;
|
|
}
|
|
}
|
|
|
|
.container-long {
|
|
& .section_layout.grid {
|
|
@apply md:gap-20px
|
|
}
|
|
}
|