refactor: extract variables

assets/scss/_home.scss

@@ -0,0 +1,48 @@
+@import 'variables';
+
+#home-main {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: space-between;
+    height: 100vh;
+
+    max-width: 720px;
+    margin: auto;
+    font-size: 1.5rem;
+
+    @media (max-width: 768px) {
+        margin-left: 24px;
+    }
+}
+
+#home-center {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 16vh;
+}
+
+#home-title {
+    color: $color-dark;
+    font-family: $default-font;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+#home-nav {
+    display: flex;
+    flex-direction: column;
+
+    a {
+        color: $color-light-dark;
+        font-family: $default-font;
+        font-size: 40px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%;
+        text-decoration-line: underline;
+    }
+
+}

assets/scss/_variables.scss

@@ -0,0 +1,5 @@
+$default-font: 'Inter', sans-serif;
+$color-dark: #202020;
+$color-medium-dark: #303030;
+$color-grey: #5C5C5C;
+$color-light-dark: #252525;

assets/scss/style.scss

@@ -1,6 +1,7 @@
 @import "_syntax.scss";
+@import "home";
 
-$font-inter: 'Inter', sans-serif;
+$default-font: 'Inter', sans-serif;
 $color-dark: #202020;
 $color-medium-dark: #303030;
 $color-grey: #5C5C5C;
@@ -65,38 +66,6 @@ body {
     margin: 0;
 }
 
-#home-main {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    justify-content: space-between;
-    height: 100vh;
-
-    max-width: 720px;
-    margin: auto;
-
-    font-size: 1.5rem;
-
-    @media (max-width: 768px) {
-        margin-left: 24px;
-    }
-}
-
-#home-center {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: 10vh;
-}
-
-#home-title {
-    color: #202020;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-}
-
 #post-title {
     color: #202020;
     font-family: Inter;
@@ -137,23 +106,6 @@ body {
     }
 }
 
-#home-nav {
-    display: flex;
-    flex-direction: column;
-
-    a {
-        color: #252525;
-        font-family: Inter;
-        font-size: 40px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 150%;
-        /* 60px */
-        text-decoration-line: underline;
-    }
-
-}
-
 #home-footer {
     @extend %footer-shared;
 }

resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json

@@ -1 +1 @@
-{"Target":"css/style.min.682f60937cda65aa30e003286b93e0c1f9d4c3ad1c90c7c69c3a762af1b19465.css","MediaType":"text/css","Data":{"Integrity":"sha256-aC9gk3zaZaow4AMoa5PgwfnUw60ckMfGnDp2KvGxlGU="}}
+{"Target":"css/style.min.a77d767cbae6cbbfcdb47cbbf0fd53933b11c9cda0327457cbeaba4e78ba951d.css","MediaType":"text/css","Data":{"Integrity":"sha256-p312fLrmy7/NtHy78P1TkzsRyc2gMnRXy+q6Tni6lR0="}}