From 1f606219956b9411d277121cc50869931f4e12bb Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Fri, 28 Jun 2024 15:44:12 +0700
Subject: [PATCH] feat: scss

---
 assets/styles/style.scss | 116 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 107 insertions(+), 9 deletions(-)

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index f226929..949f442 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -1,13 +1,111 @@
-// .style_layout {
-//     > .section-container {
-//         > .layout_define {
-//             > .section_layout {
-//                 @apply gap-x-10 #{!important};
-//             }
-//         }
-//     }
-// }
+@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;