nguyen van thai
215 lines
3.7 KiB
SCSS
215 lines
3.7 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
|
|
|
|
body {
|
|
font-size: 14px;
|
|
font-family: $font-raleway;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
// %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, h2, h3, h4, h5, h6 {
|
|
// font-family: $font-gelasio;
|
|
// }
|
|
|
|
// 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;
|
|
// }
|
|
// }
|
|
|
|
a {
|
|
@apply hover:text-primary font-gelasio font-700 leading-130%;
|
|
}
|
|
|
|
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;
|
|
// }
|
|
// }
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
.container {
|
|
max-width: 1385px;
|
|
}
|
|
|
|
.layout_container {
|
|
|
|
& > .section_layout {
|
|
@apply mt-12 first:mt-0;
|
|
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.collection-container {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
|
& > article.basic-article {
|
|
flex-direction: row!important;
|
|
|
|
& > .basic-article_thumbnail {
|
|
width: 50%!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.emagazine, .infographic, .image {
|
|
p {
|
|
@apply w-full max-w-660px mx-auto text-18px font-raleway leading-180%;
|
|
}
|
|
|
|
figure {
|
|
@apply w-full;
|
|
}
|
|
img {
|
|
@apply mx-auto;
|
|
}
|
|
}
|
|
|
|
.detail-default {
|
|
p {
|
|
@apply text-18px font-raleway leading-180% my-10px;
|
|
}
|
|
} |