styles refactoring: move root to css file

pages/_app.tsx

@@ -1,3 +1,4 @@
+import 'src/style.css'
 import App from 'next/app'
 
 export default class MyApp extends App {
@@ -5,36 +6,7 @@ export default class MyApp extends App {
         const { Component, pageProps } = this.props
 
         return (
-            <>
-                <style global jsx>{`
-                    @media (max-width: 31.25em) {
-                        :root {
-                            --smaller-font-size: 0.9rem;
-                            --normal-font-size: 1rem;
-                            --bigger-font-size: 1.1rem;
-                            --big-font-size: 1.3rem;
-                            --biggest-font-size: 2rem;
-
-                            --font-size-h1: 1.5rem;
-                            --font-size-h2: 1.5rem;
-                            --font-size-h3: 1.25rem;
-
-                            --content-thin: 90%;
-                            --content-wide: 90%;
-                        }
-                    }
-
-                    .noscroll { 
-                        overflow: hidden;
-                    }
-
-                    #__next {
-                        height: 100%;
-                    }
-                `}</style>
-
-                <Component {...pageProps} />
-            </>
+            <Component {...pageProps} />
         )
     }
 }

src/style.css

@@ -1,8 +1,7 @@
 :root {
-    //SHADOW
     --white-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
 
-    //FONTS
+    /* FONTS */
     --title-font: Shadow, 'PT Serif', Georgia, serif;
     --text-font: 'PT Sans', Arial, sans-serif;
 
@@ -12,15 +11,12 @@
     --big-font-size: 1.5rem;
     --biggest-font-size: 2.25rem;
 
-    //MENU
+    /* MENU */
     --menu-thickness: 2.5em;
     --menu-colored-mark-thickness: 4px;
     --menu-inactive-item-color: hsl(0, 0%, 50%);
 
-    //ANIMATION
-    $short-duration: 0.3s;
-
-    //SIZE
+    /* SIZE */
     --mobile-width: 31.25em;
     --desktop-width: 59.99999em;
 
@@ -37,7 +33,7 @@
     --text-color: #303030;
     --text-color-second: #ccc;
 
-    //FONTS
+    /* FONTS */
     --font-size-default: 14pt;
     --font-size-second: 0.9rem;
 
@@ -45,7 +41,7 @@
     --font-size-h2: 2.5rem;
     --font-size-h3: 1.5rem;
 
-    //COLOR
+    /* COLOR */
     --dark-color: hsl(0, 0%, 20%);
     --darker-color: hsl(0, 0%, 10%);
     --light-color: hsl(0, 0%, 80%);
@@ -65,13 +61,35 @@
 
     --schedule-row-color: hsl(210, 55%, 90%);
 
-    //MARGINS
+    /* MARGINS */
     --small-margin: 0.2em;
     --half-margin: 0.5em;
     --single-margin: 1em;
     --double-margin: 2em;
     --post-margin: 5em;
 
-    //OTHER
+    /* OTHER */
     --block-border-radius: 3px;
 }
+
+
+@media (max-width: 31.25em) {
+    :root {
+        --smaller-font-size: 0.9rem;
+        --normal-font-size: 1rem;
+        --bigger-font-size: 1.1rem;
+        --big-font-size: 1.3rem;
+        --biggest-font-size: 2rem;
+
+        --font-size-h1: 1.5rem;
+        --font-size-h2: 1.5rem;
+        --font-size-h3: 1.25rem;
+
+        --content-thin: 90%;
+        --content-wide: 90%;
+    }
+}
+
+.noscroll {
+    overflow: hidden;
+}

src/style/album.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .album-block {
   //margin: 1em auto 2em;
 

src/style/components/ArticleTags.scss

@@ -1,5 +1,3 @@
-@import "../variables";
-
 .ArticleTags {
   --article-card-width: 30%;
   --article-card-margin: var(--single-margin) var(--half-margin);

src/style/components/page-collective.scss

@@ -1,23 +0,0 @@
-.page-collective {
-  &.ng-leave {
-    animation: slideOutLeft var(--short-duration) both ease-in;
-  }
-
-  &.ng-enter {
-    animation: slideInRight var(--short-duration) both ease-in;
-  }
-}
-
-.page-collective {
-  &__collective-image {
-    //min-height: 40em;
-  }
-}
-
-@media (max-width: var(--mobile-width)) {
-  .page-collective {
-    &__collective-image {
-      display: none;
-    }
-  }
-}

src/style/components/page-schedule.scss

@@ -1,10 +0,0 @@
-.page-schedule {
-  &.ng-leave {
-    transform-origin: 0% 0%;
-    animation: rotateFall var(--short-duration) both ease-in;
-  }
-
-  &.ng-enter {
-    animation: scaleUp var(--short-duration) both ease-in;
-  }
-}

src/style/components/parallax.scss

@@ -1,5 +1,3 @@
-@import "../variables";
-
 .parallax {
   min-width: 1280px;
   width: 1280px;

src/style/components/timeline-record-instagram.scss

@@ -1,5 +1,3 @@
-@import "../variables";
-
 $user-size: 40px;
 $half-margin: $single-margin/2;
 $image-border-radius: .35em;

src/style/footer.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 footer {
   padding: 0 var(--half-margin) var(--half-margin);
   position: relative;

src/style/style.scss

@@ -15,9 +15,6 @@
 @import "components/album";
 @import "components/parallax";
 
-@import "components/page-schedule";
-@import "components/page-collective";
-
 @import "components/ArticleTags";
 
 @import "main";

src/style/vertical-image.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .vertical-image {
   position: relative;
   width: 100%;