move files to scss

creating this commit so git don't lose track of the changes

src/assets/css/site.scss

@@ -1,19 +1,19 @@
-body,
-html {
+@mixin fullpage {
     margin: 0;
     padding: 0;
     height: 100%;
 }
 
-.clipForScreenReader {
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
+html {
+    @include fullpage;
+    line-height: 1.35;
+}
+
+body {
+    @include fullpage;
+    overflow-x: hidden;
+    background-color: transparent !important;
+    -webkit-font-smoothing: antialiased;
 }
 
 .material-icons {
@@ -30,10 +30,6 @@ html {
     contain: strict;
 }
 
-html {
-    line-height: 1.35;
-}
-
 .layout-mobile,
 .layout-tv {
     -webkit-touch-callout: none;
@@ -44,12 +40,6 @@ html {
     user-select: none;
 }
 
-body {
-    overflow-x: hidden;
-    background-color: transparent !important;
-    -webkit-font-smoothing: antialiased;
-}
-
 .mainAnimatedPage {
     contain: style size !important;
 }
@@ -62,7 +52,7 @@ body {
     overflow-y: hidden !important;
 }
 
-div[data-role=page] {
+div[data-role="page"] {
     outline: 0;
 }
 
@@ -75,10 +65,10 @@ div[data-role=page] {
     padding-left: 0.15em;
     font-weight: 400;
     white-space: normal !important;
-}
 
-.fieldDescription + .fieldDescription {
-    margin-top: 0.3em;
+    + .fieldDescription {
+        margin-top: 0.3em;
+    }
 }
 
 .content-primary,
@@ -89,9 +79,14 @@ div[data-role=page] {
     padding-bottom: 5em !important;
 }
 
-@media all and (min-width: 50em) {
-    .readOnlyContent,
-    form {
+.readOnlyContent {
+    @media all and (min-width: 50em) {
+        max-width: 54em;
+    }
+}
+
+form {
+    @media all and (min-width: 50em) {
         max-width: 54em;
     }
 }
@@ -111,12 +106,12 @@ div[data-role=page] {
 .headroom {
     will-change: transform;
     transition: transform 200ms linear;
-}
 
-.headroom--pinned {
-    transform: translateY(0%);
-}
+    &--pinned {
+        transform: translateY(0%);
+    }
 
-.headroom--unpinned {
-    transform: translateY(-100%);
+    &--unpinned {
+        transform: translateY(-100%);
+    }
 }