From 2f1669a7a8a831fc5b7bc73b74bda08d5c821e83 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 6 Mar 2022 10:27:50 -0500
Subject: [PATCH] Add banner

---
 .vuepress/theme/Layout.vue         | 99 +++++++++++++++++-------------
 .vuepress/theme/styles/sidebar.css |  6 +-
 2 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue
index 500d09a7..5ce4e23f 100644
--- a/.vuepress/theme/Layout.vue
+++ b/.vuepress/theme/Layout.vue
@@ -1,35 +1,46 @@
 <template>
-  <div
-    class="theme-container"
-    :class="pageClasses"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
-  >
-    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
-    <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
-    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
-      <slot name="sidebar-top" slot="top" />
-      <slot name="sidebar-bottom" slot="bottom" />
-    </Sidebar>
-    <div class="custom-layout" v-if="$page.frontmatter.layout">
-      <component :is="$page.frontmatter.layout" />
+  <div>
+    <div class="fixed h-12 w-full z-50 top-0">
+      <div class="h-12 w-full bg-black flex items-center justify-center px-4">
+        <p class="text-grey-lightest font-semibold">
+          Stand with Ukraine 🇺🇦&nbsp;
+          <a class="text-blue-lighter" href="https://www.savethechildren.org/us/where-we-work/ukraine" target="_blank" rel="noindex nofollow noopener">Donate</a>
+          <a class="text-blue-lighter" href="https://razomforukraine.org/" target="_blank" rel="noindex nofollow noopener">Today.</a>
+        </p>
+      </div>
+    </div>
+    <div
+        class="theme-container mt-12"
+        :class="pageClasses"
+        @touchstart="onTouchStart"
+        @touchend="onTouchEnd"
+    >
+      <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
+      <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
+      <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+        <slot name="sidebar-top" slot="top"/>
+        <slot name="sidebar-bottom" slot="bottom"/>
+      </Sidebar>
+      <div class="custom-layout" v-if="$page.frontmatter.layout">
+        <component :is="$page.frontmatter.layout"/>
+      </div>
+      <Home v-else-if="$page.frontmatter.home"/>
+      <Page v-else :sidebar-items="sidebarItems">
+        <slot name="page-top" slot="top"/>
+        <slot name="page-bottom" slot="bottom"/>
+      </Page>
     </div>
-    <Home v-else-if="$page.frontmatter.home" />
-    <Page v-else :sidebar-items="sidebarItems">
-      <slot name="page-top" slot="top" />
-      <slot name="page-bottom" slot="bottom" />
-    </Page>
   </div>
 </template>
 
 <script>
-import Vue from "vue";
-import nprogress from "nprogress";
-import Home from "./Home.vue";
-import Navbar from "./Navbar.vue";
-import Page from "./Page.vue";
-import Sidebar from "./Sidebar.vue";
-import { resolveSidebarItems } from "./util";
+import Vue from 'vue';
+import nprogress from 'nprogress';
+import Home from './Home.vue';
+import Navbar from './Navbar.vue';
+import Page from './Page.vue';
+import Sidebar from './Sidebar.vue';
+import { resolveSidebarItems } from './util';
 
 export default {
   components: { Home, Page, Sidebar, Navbar },
@@ -47,37 +58,37 @@ export default {
         return false;
       }
       return (
-        this.$title ||
-        themeConfig.logo ||
-        themeConfig.repo ||
-        themeConfig.nav ||
-        this.$themeLocaleConfig.nav
+          this.$title ||
+          themeConfig.logo ||
+          themeConfig.repo ||
+          themeConfig.nav ||
+          this.$themeLocaleConfig.nav
       );
     },
     shouldShowSidebar() {
       const { frontmatter } = this.$page;
       return (
-        !frontmatter.layout &&
-        !frontmatter.home &&
-        frontmatter.sidebar !== false &&
-        this.sidebarItems.length
+          !frontmatter.layout &&
+          !frontmatter.home &&
+          frontmatter.sidebar !== false &&
+          this.sidebarItems.length
       );
     },
     sidebarItems() {
       return resolveSidebarItems(
-        this.$page,
-        this.$route,
-        this.$site,
-        this.$localePath
+          this.$page,
+          this.$route,
+          this.$site,
+          this.$localePath
       );
     },
     pageClasses() {
       const userPageClass = this.$page.frontmatter.pageClass;
       return [
         {
-          "no-navbar": !this.shouldShowNavbar,
-          "sidebar-open": this.isSidebarOpen,
-          "no-sidebar": !this.shouldShowSidebar
+          'no-navbar': !this.shouldShowNavbar,
+          'sidebar-open': this.isSidebarOpen,
+          'no-sidebar': !this.shouldShowSidebar
         },
         userPageClass
       ];
@@ -85,7 +96,7 @@ export default {
   },
 
   mounted() {
-    window.addEventListener("scroll", this.onScroll);
+    window.addEventListener('scroll', this.onScroll);
 
     // configure progress bar
     nprogress.configure({ showSpinner: false });
@@ -105,7 +116,7 @@ export default {
 
   methods: {
     toggleSidebar(to) {
-      this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen;
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen;
     },
     // side swipe
     onTouchStart(e) {
diff --git a/.vuepress/theme/styles/sidebar.css b/.vuepress/theme/styles/sidebar.css
index 195f0c4d..e4addb88 100644
--- a/.vuepress/theme/styles/sidebar.css
+++ b/.vuepress/theme/styles/sidebar.css
@@ -6,7 +6,7 @@ $arrow-bg: #000;
     }
 
     @apply .fixed .left-0 .bottom-0 .bg-white .overflow-auto .border-r .border-grey-lighter .py-8;
-    top: 56px;
+    top: calc(3rem + 56px);
     width: 20rem;
     font-size: 15px;
 
@@ -116,14 +116,14 @@ $arrow-bg: #000;
                     border-right: 4px solid transparent;
                     border-top: 6px solid #b8c2cc;
                 }
-                
+
             }
 
             .items {
                 @apply .absolute .right-0 .bg-white .shadow .p-1 .mt-1;
                 border-radius: 1rem;
                 z-index: 100;
-                
+
                 .item {
                     @apply .select-none .rounded-full .cursor-pointer .px-2 .border .border-white;
                     white-space: nowrap;