From 3eddad19c99e6becbb4f532a3e43849930a84d44 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 28 Jan 2022 23:46:24 +0100
Subject: [PATCH] feat: reintroduce header and footer components

---
 src/components/Footer.vue | 22 +++++++++++++
 src/components/Header.vue | 65 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Header.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..bf37004
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,22 @@
+<template>
+  <footer class="footer">
+    <slot></slot>
+  </footer>
+</template>
+
+<script></script>
+
+<style lang="scss">
+@import "@/scss/_variables.scss";
+@import "@/scss/_mixins.scss";
+
+.footer {
+  background: url("/subtle-prism.svg") $bg-color-dark;
+  background-blend-mode: multiply;
+
+  padding: max(1em, env(safe-area-inset-top)) 0
+    max(1em, env(safe-area-inset-bottom)) 0;
+
+  text-align: center;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..0767f3f
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,65 @@
+<template>
+  <header class="header">
+    <slot></slot>
+  </header>
+</template>
+
+<script></script>
+
+<style lang="scss">
+@import "@/scss/_variables.scss";
+@import "@/scss/_mixins.scss";
+
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  position: sticky;
+  top: max(1em, env(safe-area-inset-top));
+  right: max(1em, env(safe-area-inset-right));
+  left: max(1em, env(safe-area-inset-left));
+
+  z-index: 2;
+
+  max-width: 70em;
+  margin: 1em max(1em, env(safe-area-inset-right)) 1em
+    max(1em, env(safe-area-inset-left));
+  padding: 0.5em;
+  border-radius: 0.5em;
+  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
+
+  background: radial-gradient(
+      circle at bottom right,
+      darken($bg-color-lighter, 30%) 20%,
+      transparent 80%
+    ),
+    radial-gradient(
+      circle at top left,
+      darken($sebin-secondary, 20%) 5%,
+      darken($sebin-primary, 20%) 100%
+    );
+
+  @include theme(dark) {
+    background: radial-gradient(
+        circle at bottom right,
+        darken($bg-color-lighter, 35%) 20%,
+        transparent 80%
+      ),
+      radial-gradient(
+        circle at top left,
+        darken($sebin-secondary, 35%) 5%,
+        darken($sebin-primary, 35%) 100%
+      );
+  }
+
+  @include theme(dark) {
+    background-color: $bg-color-dark;
+  }
+
+  @media (min-width: 90em) {
+    margin: 0 auto;
+  }
+}
+</style>