[frontend] Restructure scss files and add scss variables

kibicara-frontend/angular.json

@@ -26,8 +26,11 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "src/styles.scss"
+              "src/sass/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/sass"]
+            },
             "scripts": []
           },
           "configurations": {
@@ -88,8 +91,11 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "src/styles.scss"
+              "src/sass/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/sass"]
+            },
             "scripts": []
           }
         },

kibicara-frontend/src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .content {
-  margin-top: 64px;
+  margin-top: $toolbar-height;
 }

kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.scss

@@ -17,7 +17,6 @@
 }
 
 .textarea {
-  box-sizing: border-box;
   resize: none;
   max-width: 100%;
   max-height: 100%;
@@ -27,7 +26,6 @@
 }
 
 .markdown {
-  box-sizing: border-box;
   border: thin solid black;
   background-color: #fafafa;
   padding: 10px;

kibicara-frontend/src/app/dashboard/hoods/hoods.component.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .title {
   text-align: left;
   padding-top: 10%;
@@ -12,8 +14,8 @@
 
 h1 {
   line-height: 3rem;
-  font-size: 46px;
-  font-weight: 500;
+  font-size: $h1-font-size;
+  font-weight: $h1-font-weight;
 }
 
 p {

kibicara-frontend/src/app/hoodspage/hoodspage.component.scss

@@ -6,7 +6,6 @@
   padding-top: 10px;
   border: 1px solid #949494;
   border-radius: 24px;
-  box-sizing: border-box;
   z-index: 10;
 }
 
@@ -27,7 +26,6 @@ h1 {
   text-transform: uppercase;
   font-size: 3.4rem;
   color: white;
-  box-sizing: border-box;
   font-weight: bold;
 }
 
@@ -36,5 +34,4 @@ h1 {
   background: url("../../assets/hoods2.jpg");
   background-size: 100%;
   width: 100%;
-  box-sizing: border-box;
 }

kibicara-frontend/src/app/shared/heading-one/heading-one.component.scss

@@ -1,12 +1,14 @@
+@import "variables";
+
 .h1 {
-  background-color: #46277a;
+  background-color: $h1-color;
   height: 10%;
   min-height: 70px;
   padding-left: 10%;
   padding-top: 5%;
   color: white;
-  font-size: 46px;
-  font-weight: 500;
+  font-size: $h1-font-size;
+  font-weight: $h1-font-weight;
   @media (max-width: 600px) {
     padding-top: 10%;
     font-size: 30px;

kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .example-spacer {
   flex: 1 auto;
 }
@@ -21,6 +23,6 @@
   left: 0;
   right: 0;
   z-index: 1000;
-  min-height: 64px;
-  max-height: 64px;
+  min-height: $toolbar-height;
+  max-height: $toolbar-height;
 }

kibicara-frontend/src/sass/_variables.scss

@@ -0,0 +1,5 @@
+$toolbar-height: 64px;
+
+$h1-color: #46277a;
+$h1-font-size: 46px;
+$h1-font-weight: 500;

kibicara-frontend/src/sass/styles.scss

@@ -1,5 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
+@import "./variables";
+
 html,
 body {
   height: 100%;