⚡ Moved styles from layouts to assets

assets/css/styles.scss

@@ -1,5 +1,258 @@
 $responsiveWidth: 720px;
 
+html {
+  scroll-behavior: smooth;
+}
+
+::selection {
+  background-color: var(--ac-sel-color);
+  color: var(--act-color);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--fg-light-color);
+  border-radius: 8px;
+  border: 2px solid var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--fg-color);
+}
+
+::placeholder {
+  color: var(--fg-light-color);
+  opacity: 0.3;
+}
+
+* {
+  box-sizing: border-box;
+  outline: 0;
+  border: 0;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  font-weight: 500;
+  font-size: 16px;
+  font-family: "Poppins", "Roboto", "Noto", sans-serif;
+  line-height: 1.5;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  padding: 0;
+  margin: 0;
+}
+
+// Make theme transition smoother.
+body.afterLoad {
+
+  &,
+  & * {
+    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
+  }
+}
+
+body.sticky-footer footer {
+  opacity: 0.25;
+}
+
+a {
+  display: inline-flex;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+header,
+footer {
+  & > div {
+    display: flex;
+    padding: 16px;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper .content {
+  min-height: 100vh;
+}
+
+.header,
+.content,
+.columns,
+.footer {
+  display: flex;
+  flex: 1;
+}
+
+.slide-in {
+  position: relative;
+  animation: slideIn 0.2s forwards ease-in-out;
+}
+
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    left: -16px;
+  }
+
+  100% {
+    opacity: 1;
+    left: 0px;
+  }
+}
+
+.logo {
+  font-size: 22px;
+  color: var(--ac-color);
+}
+
+.tagline {
+  font-size: 18px;
+}
+
+.nav-first {
+  display: flex;
+  order: 1;
+  flex-flow: column;
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  z-index: 1;
+}
+
+.main {
+  flex: 1;
+  order: 2;
+  position: relative;
+  padding: 0 16px;
+}
+
+.nav-second {
+  display: flex;
+  width: 10%;
+  order: 3;
+  // comment this to display
+  display: none;
+}
+
+nav.primary-nav {
+  display: flex;
+  flex-flow: column nowrap;
+  border-bottom: 1px solid var(--brd-color);
+
+  svg {
+    fill: var(--fg-light-color);
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 16px;
+    border-radius: 50%;
+    background-color: var(--brd-color);
+    color: var(--fg-light-color);
+    margin: 8px;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      color: var(--fg-color);
+
+      svg {
+        fill: var(--fg-color);
+      }
+    }
+
+    &.nuxt-link-exact-active {
+      background-color: var(--ac-color);
+      color: var(--act-color);
+      border-radius: 16px;
+
+      svg {
+        fill: var(--act-color);
+      }
+    }
+  }
+}
+
+nav.secondary-nav {
+  display: flex;
+
+  ul {
+    display: flex;
+    flex-flow: column nowrap;
+
+    li {
+      display: flex;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding: 16px;
+        border-radius: 50%;
+        background-color: var(--bg-dark-color);
+        color: var(--fg-light-color);
+        margin: 8px;
+
+        &:hover {
+          color: var(--fg-color);
+        }
+
+        &.current {
+          color: var(--ac-color);
+          fill: var(--ac-color);
+        }
+      }
+    }
+  }
+}
+
+.footer {
+  flex-direction: column;
+}
+
+$responsiveWidth: 720px;
+
+@media (max-width: $responsiveWidth) {
+  .columns {
+    flex-flow: column;
+  }
+
+  .nav-first {
+    width: 100%;
+    background-color: var(--bg-color);
+  }
+
+  nav.primary-nav {
+    flex-flow: row;
+  }
+
+  nav.secondary-nav {
+    display: none;
+  }
+
+  .main {
+    padding: 0 8px;
+  }
+}
+
 h1,
 h2,
 h3 {
@@ -275,7 +528,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  &+label {
+  & + label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -294,7 +547,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked+label:before {
+  &:checked + label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -479,7 +732,7 @@ div.tab {
   display: none;
 }
 
-input[type="radio"]+label {
+input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -490,11 +743,11 @@ input[type="radio"]+label {
   }
 }
 
-input[type="radio"]:checked+label {
+input[type="radio"]:checked + label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked+label+div.tab {
+input[type="radio"]:checked + label + div.tab {
   display: block;
 }
 
@@ -510,7 +763,3 @@ input[type="radio"]:checked+label+div.tab {
 .toasted.bubble .action {
   color: inherit !important;
 }
-
-.wrapper .content {
-    min-height: 100vh;
-}

layouts/default.vue

@@ -157,249 +157,6 @@
 </template>
 
 <style lang="scss">
-  html {
-    scroll-behavior: smooth;
-  }
-
-  ::selection {
-    background-color: var(--ac-sel-color);
-    color: var(--act-color);
-  }
-
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--fg-light-color);
-    border-radius: 8px;
-    border: 2px solid var(--bg-color);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--fg-color);
-  }
-
-  ::placeholder {
-    color: var(--fg-light-color);
-    opacity: 0.3;
-  }
-
-  * {
-    box-sizing: border-box;
-    outline: 0;
-    border: 0;
-  }
-
-  body {
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-    font-weight: 500;
-    font-size: 16px;
-    font-family: "Poppins", "Roboto", "Noto", sans-serif;
-    line-height: 1.5;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    user-select: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  // Make theme transition smoother.
-  body.afterLoad {
-    &,
-    & * {
-      transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
-    }
-  }
-
-  body.sticky-footer footer {
-    opacity: 0.25;
-  }
-
-  a {
-    display: inline-flex;
-    color: inherit;
-    text-decoration: none;
-    font-weight: 700;
-  }
-
-  header,
-  footer {
-    & > div {
-      display: flex;
-      padding: 16px;
-      width: 100%;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-
-  .wrapper {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .header,
-  .content,
-  .columns,
-  .footer {
-    display: flex;
-    flex: 1;
-  }
-
-  .slide-in {
-    position: relative;
-    animation: slideIn 0.2s forwards ease-in-out;
-  }
-
-  @keyframes slideIn {
-    0% {
-      opacity: 0;
-      left: -16px;
-    }
-
-    100% {
-      opacity: 1;
-      left: 0px;
-    }
-  }
-
-  .logo {
-    font-size: 22px;
-    color: var(--ac-color);
-  }
-
-  .tagline {
-    font-size: 18px;
-  }
-
-  .nav-first {
-    display: flex;
-    order: 1;
-    flex-flow: column;
-    position: sticky;
-    top: 0;
-    align-self: flex-start;
-    z-index: 1;
-  }
-
-  .main {
-    flex: 1;
-    order: 2;
-    position: relative;
-    padding: 0 16px;
-  }
-
-  .nav-second {
-    display: flex;
-    width: 10%;
-    order: 3;
-    // comment this to display
-    display: none;
-  }
-
-  nav.primary-nav {
-    display: flex;
-    flex-flow: column nowrap;
-    border-bottom: 1px solid var(--brd-color);
-
-    svg {
-      fill: var(--fg-light-color);
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      padding: 16px;
-      border-radius: 50%;
-      background-color: var(--brd-color);
-      color: var(--fg-light-color);
-      margin: 8px;
-      transition: all 0.2s ease-in-out;
-
-      &:hover {
-        color: var(--fg-color);
-
-        svg {
-          fill: var(--fg-color);
-        }
-      }
-
-      &.nuxt-link-exact-active {
-        background-color: var(--ac-color);
-        color: var(--act-color);
-        border-radius: 16px;
-
-        svg {
-          fill: var(--act-color);
-        }
-      }
-    }
-  }
-
-  nav.secondary-nav {
-    display: flex;
-
-    ul {
-      display: flex;
-      flex-flow: column nowrap;
-
-      li {
-        display: flex;
-
-        a {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          padding: 16px;
-          border-radius: 50%;
-          background-color: var(--bg-dark-color);
-          color: var(--fg-light-color);
-          margin: 8px;
-
-          &:hover {
-            color: var(--fg-color);
-          }
-
-          &.current {
-            color: var(--ac-color);
-            fill: var(--ac-color);
-          }
-        }
-      }
-    }
-  }
-
-  .footer {
-    flex-direction: column;
-  }
-
-  $responsiveWidth: 720px;
-
-  @media (max-width: $responsiveWidth) {
-    .columns {
-      flex-flow: column;
-    }
-    .nav-first {
-      width: 100%;
-      background-color: var(--bg-color);
-    }
-    nav.primary-nav {
-      flex-flow: row;
-    }
-    nav.secondary-nav {
-      display: none;
-    }
-    .main {
-      padding: 0 8px;
-    }
-  }
 </style>
 
 <script>