From f2463b6163babe59dfd1606cb0684feaf7f7f831 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 28 Jan 2022 23:47:49 +0100
Subject: [PATCH] feat: move app root into body element

---
 public/index.html |   4 +-
 src/App.vue       | 139 ++++++++++++++++++++--------------------------
 2 files changed, 61 insertions(+), 82 deletions(-)
diff --git a/public/index.html b/public/index.html
index 27aef28..2344454 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,12 +8,10 @@
     <link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
-  <body>
+  <body id="app">
     <noscript>
       <strong>Sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div class="bubbles"></div>
-    <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index f09a6e5..2617370 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <ref-header>
     <img
       class="nav-logo"
       src="@/assets/sebin-smug-icon.png"
@@ -7,31 +7,28 @@
     />
 
     <navigation :routes="routes" />
-  </header>
+  </ref-header>
 
   <main>
     <router-view />
   </main>
 
-  <footer class="footer">
-    <div class="footer__copyright">
-      v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim
-    </div>
-    <ul class="footer__linklist">
-      <li class="footer__linkitem" v-for="(link, idx) in links" :key="idx">
-        <a :href="link.href" class="footer__link">
-          {{ link.text }}
-        </a>
-      </li>
-    </ul>
-  </footer>
+  <ref-footer>
+    <p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
+    <p>
+      Background Pattern &copy;
+      <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
+    </p>
+  </ref-footer>
 </template>
 
 <script>
 import Navigation from "@/components/Navigation.vue";
+import RefHeader from "@/components/Header.vue";
+import RefFooter from "@/components/Footer.vue";
 
 export default {
-  components: { Navigation },
+  components: { Navigation, RefHeader, RefFooter },
   data() {
     return {
       nsfw: false,
@@ -76,7 +73,6 @@ export default {
 @import "~normalize.css";
 
 #app {
-  padding: 5em 0 0 0;
   color: $copy-color;
   font-size: 1.125em;
   -webkit-font-smoothing: antialiased;
@@ -87,38 +83,54 @@ export default {
     font-size: 1.25em;
   }
 
-  @media (min-width: 60em) {
-    padding: 5em 0 7em 0;
-  }
-
   @include mq-bigscreen {
     font-size: 1.5em;
   }
-}
 
-header {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: center;
+  position: relative;
 
-  position: fixed;
-  top: env(safe-area-inset-top);
-  right: env(safe-area-inset-right);
-  left: env(safe-area-inset-left);
+  &:before,
+  &:after {
+    content: "";
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 
-  z-index: 2;
+  &:before {
+    background: url("/subtle-prism.svg");
+    mix-blend-mode: multiply;
+    z-index: -1;
+  }
 
-  max-width: 70em;
-  margin: 1em;
-  padding: 0.5em;
-  border-radius: 0.5em;
-  box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
+  &:after {
+    background: radial-gradient(
+        circle at bottom right,
+        $bg-color-lighter 5%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at top left,
+        $bg-color-light 5%,
+        $bg-color-dark 100%
+      );
 
-  background-color: darken($bg-color-dark, 5%);
+    z-index: -2;
 
-  @media (min-width: 90em) {
-    margin: 1em auto;
+    @include theme(dark) {
+      background: radial-gradient(
+          circle at bottom right,
+          darken($bg-color-lighter, 30%) 5%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at top left,
+          darken($bg-color-light, 10%) 5%,
+          darken($bg-color-dark, 10%) 100%
+        );
+    }
   }
 }
 
@@ -128,50 +140,19 @@ header {
   height: 2em;
   border: 0.125em solid #fff;
   border-radius: 100%;
-  box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
+  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
 }
 
-.footer {
-  padding: 0.75em 0;
-  background-color: $bg-color-light;
-  text-align: center;
+main {
+  min-height: 100vh;
+  padding: 2em 0 1em 0;
+}
 
-  @media (orientation: landscape) {
-    padding: env(safe-area-inset-bottom) 0;
-  }
+.footer p {
+  margin: 0;
 
-  @include mq-desktop {
-    padding: 0.75em 0;
-  }
-
-  @media (min-width: 60em) {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  &__copyright {
-    margin: 0;
-  }
-
-  &__linklist {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-  }
-
-  &__linkitem {
-    font-weight: bold;
-  }
-
-  &__link {
-    color: $copy-color;
-    padding: 0.5em 0.75em;
+  & + p {
+    margin: 0.5em auto 0 auto;
   }
 }
 </style>
