From c1b7bdbbb483d6264d2e2ea32b2f2303573cf5a5 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:48:34 +0100
Subject: [PATCH] refactor: migrate Header component

---
 src/components/Header.vue     | 65 -----------------------------------
 src/components/SiteHeader.vue | 32 +++++++++++++++++
 2 files changed, 32 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/Header.vue
 create mode 100644 src/components/SiteHeader.vue

diff --git a/src/components/Header.vue b/src/components/Header.vue
deleted file mode 100644
index 0767f3f..0000000
--- a/src/components/Header.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<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>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
new file mode 100644
index 0000000..c9762d3
--- /dev/null
+++ b/src/components/SiteHeader.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts"></script>
+
+<template>
+  <header class="header">
+    <slot></slot>
+  </header>
+</template>
+
+<style lang="scss">
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  position: sticky;
+  top: var(--container-spacing-top-safe);
+  right: var(--container-spacing-right-safe);
+  left: var(--container-spacing-left-safe);
+
+  background: var(--header-background);
+
+  max-width: 70rem;
+
+  margin: var(--header-margin);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+
+  box-shadow: var(--container-box-shadow);
+  z-index: 1;
+}
+</style>