chore(docs): force halloween theme (#4411)

* chore(docs): force halloween theme * fix(docs): background on small screen * chore(docs): landing theme * chore(docs): add new banner * chore: update epicmax banner
epicmaxco · Oct 29, 2024 · e9a51d9 · e9a51d9
1 parent 4779819
commit e9a51d9
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 37 deletions.
diff --git a/packages/docs/assets/variables.scss b/packages/docs/assets/variables.scss
@@ -1,12 +1,21 @@
 :root {
-  --bg-header: #2450BE;
-  --bg-preview-1: #2450BE;
-  --bg-preview-2: #557DE2;
-  --bg-partners: #335DC9;
-  --bg-customize-1: #4D2CC1;
-  --bg-customize-2: #847EE2;
-  --bg-seamless: #F4F9FC;
-  --bg-admin: #F4F9FC;
+  // --bg-header: #2450BE;
+  // --bg-preview-1: #2450BE;
+  // --bg-preview-2: #557DE2;
+  // --bg-partners: #335DC9;
+  // --bg-customize-1: #4D2CC1;
+  // --bg-customize-2: #847EE2;
+  // --bg-seamless: #F4F9FC;
+  // --bg-admin: #F4F9FC;
+
+  --bg-header: #b44f10;
+  --bg-preview-1: #a74a11;
+  --bg-preview-2: #a72e16;
+  --bg-partners: #621708;
+  --bg-customize-1: #210505;
+  --bg-customize-2: #000;
+  --bg-seamless: #38120a;
+  --bg-admin: #481308;
 
   --header-height: 4rem;
   --header-z-index: 2000;

diff --git a/packages/docs/components/HeaderBanner.vue b/packages/docs/components/HeaderBanner.vue
@@ -7,11 +7,12 @@
         'header-banner--wrapped': wrapped,
       }"
     >
-      <div class="header__wrapper">
+      <div class="header__wrapper flex sm:flex-row flex-col">
         <div class="header-banner__left">
           <!-- Replace back to vuestic later -->
           <!-- <a :href="`https://github.com/epicmaxco/vuestic-ui/releases/tag/v${uiVersion}`">We just released&nbsp;<strong>Vuestic {{ uiVersion }} 🤗</strong></a> -->
-          <a href="https://admin.vuestic.dev/">We just released <strong>Vuestic Admin 3.0</strong> 🤗</a>
+          <!-- <a href="https://admin.vuestic.dev/">We just released <strong>Vuestic Admin 3.0</strong> 🤗</a> -->
+          <span>Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.</span>
 
           <!--          <div class="header-banner__left-links">-->
           <!-- <a
@@ -80,7 +81,7 @@
             href="https://epicmax.co/?ref=vuestic-header"
             target="blank"
           >
-            🔥🔥🔥 Hire us
+            <span class="text-nowrap">🔥🔥🔥 Hire us</span>
           </VaButton>
           <VaButton
             v-if="closeable"
@@ -152,7 +153,7 @@ const hide = () => {
 
   min-height: 40px;
   padding: 0.5rem 0;
-  background-color: #012875;
+  background-color: color-mix(in srgb, var(--va-primary) 80%, black 50%);
   font-size: 0.9rem;
   color: $text-color;
   flex-shrink: 0;

diff --git a/packages/docs/components/landing/banners/ScheduleACall.vue b/packages/docs/components/landing/banners/ScheduleACall.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="event-banner">
+    <h2 class="va-h3">
+      Do You Need to <span class="va-text-primary">Migrate</span> Your Project to Vue 3?
+    </h2>
+    <p class="va-text max-w-[1000px] text-center">
+      Schedule a free call with our CTO to discuss your specific project needs. We'll assess your current setup and help you make the best decision for your business. Let's get your app ready for the future!
+    </p>
+    <VaButton to="https://calendly.com/epicmax/30min" target="blank">
+      Schedule a Call
+    </VaButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+.event-banner {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background-color: color-mix(in srgb, var(--bg-partners) 80%, black 20%);
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+}
+</style>
diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
@@ -194,7 +194,11 @@ onMounted(() => {
 }
 
 .header {
+  // Halloween background
   box-shadow: 0 2px 8px var(--va-shadow);
+  background-image: url("https://i.imgur.com/BNkuj2J.png");
+  background-position: center;
+  background-blend-mode: multiply;
 
   &.va-navbar {
     padding: var(--navbar-padding);

diff --git a/packages/docs/components/layout/Sidebar.vue b/packages/docs/components/layout/Sidebar.vue
@@ -178,6 +178,11 @@ export default defineComponent({
 @import "@/assets/smart-grid.scss";
 
 .sidebar {
+  // Halloween background
+  background-image: url("https://i.imgur.com/fLEstk9.png");
+  background-repeat: no-repeat;
+  background-blend-mode: multiply;
+
   &__collapse-custom-header {
     position: relative;
     padding: 1rem 1.2rem;

diff --git a/packages/docs/components/layout/header/ThemeSwitch.vue b/packages/docs/components/layout/header/ThemeSwitch.vue
@@ -1,6 +1,24 @@
 <template>
   <div>
     <VaSwitch
+      :model-value="false"
+      color="#5123a1"
+      off-color="#ffd300"
+      style="--va-switch-checker-background-color: #252723;"
+      class="theme-switch-button"
+      name="Switch theme"
+      :aria-label="`Switch theme to ${isDark ? 'light' : 'dark'}`"
+    >
+      <template #innerLabel>
+        <div class="va-text-center">
+          <VaIcon
+            size="24px"
+            :name="'fas-ghost'"
+          />
+        </div>
+      </template>
+    </VaSwitch>
+    <!-- <VaSwitch
       v-model="isDark"
       color="#5123a1"
       off-color="#ffd300"
@@ -17,7 +35,7 @@
           />
         </div>
       </template>
-    </VaSwitch>
+    </VaSwitch> -->
   </div>
 </template>
 

diff --git a/packages/docs/components/layout/header/VersionDropdown.vue b/packages/docs/components/layout/header/VersionDropdown.vue
@@ -12,7 +12,7 @@ const uiVersion = packageUi.version
 
 <style lang="scss">
 .version-dropdown {
-  color: var(--va-text-primary);
   font-weight: 600;
+  opacity: 0.8;
 }
 </style>
diff --git a/packages/docs/config/vuestic-config.ts b/packages/docs/config/vuestic-config.ts
@@ -13,6 +13,26 @@ const VaButtonLandingHeader = {
   'hover-opacity': '1',
 }
 
+const halloweenColors = {
+  primary: '#e36414',
+  secondary: '#EDE8E8',
+  success: '#3D9209',
+  info: '#158DE3',
+  danger: '#E42222',
+  warning: '#FFD43A',
+
+  // Background Colors
+  backgroundPrimary: '#000',
+  backgroundSecondary: '#210505',
+  backgroundElement: '#941b0c',
+  backgroundBorder: '#621708',
+  // secondary: '#666E75',
+  // backgroundPrimary: '#FFFFFF',
+  backgroundSidebar: '#130C0C',
+  backgroundLanding: '#f4f9fc',
+  backgroundLandingBorder: 'rgba(155, 179, 206, 0.8)',
+}
+
 export const VuesticConfig = defineVuesticConfig({
   icons,
   components: {
@@ -26,6 +46,9 @@ export const VuesticConfig = defineVuesticConfig({
     VaBacktop: {
       target: scrollWrapperSelector,
     },
+    VaSidebar: {
+      color: 'backgroundSidebar',
+    },
     presets: {
       VaButton: {
         addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
@@ -47,32 +70,38 @@ export const VuesticConfig = defineVuesticConfig({
   },
   colors: {
     presets: {
+      // Halloween colors
       light: {
-        secondary: '#666E75',
-        backgroundPrimary: '#FFFFFF',
-        backgroundLanding: '#f4f9fc',
-        backgroundLandingBorder: 'rgba(155, 179, 206, 0.8)',
+        ...halloweenColors
       },
       dark: {
-        // TODO: Check color contrast:  current primary is bad
-        // primary: '#5389F3',
-        secondary: '#818992',
-        backgroundLanding: '#070d14',
-        backgroundLandingBorder: 'rgba(43, 49, 56, 0.8)',
+        ...halloweenColors
       },
+
+      // light: {
+      //   secondary: '#666E75',
+      //   backgroundPrimary: '#FFFFFF',
+      //   backgroundLanding: '#f4f9fc',
+      //   backgroundLandingBorder: 'rgba(155, 179, 206, 0.8)',
+      // },
+      // dark: {
+      //   secondary: '#818992',
+      //   backgroundLanding: '#070d14',
+      //   backgroundLandingBorder: 'rgba(43, 49, 56, 0.8)',
+      // },
       landing: {
-        primary: '#1827A7',
-        secondary: '#767C88',
-        success: '#3D9209',
-        info: '#158DE3',
-        danger: '#E42222',
-        warning: '#FFD43A',
+        // primary: '#1827A7',
+        // secondary: '#767C88',
+        // success: '#3D9209',
+        // info: '#158DE3',
+        // danger: '#E42222',
+        // warning: '#FFD43A',
 
-        // Background Colors
-        backgroundPrimary: '#f6f6f6',
-        backgroundSecondary: '#FFFFFF',
-        backgroundElement: '#ECF0F1',
-        backgroundBorder: '#DEE5F2',
+        // // Background Colors
+        // backgroundPrimary: '#f6f6f6',
+        // backgroundSecondary: '#FFFFFF',
+        // backgroundElement: '#ECF0F1',
+        // backgroundBorder: '#DEE5F2',
 
         // Text Colors
         textPrimary: '#262824',
@@ -81,6 +110,8 @@ export const VuesticConfig = defineVuesticConfig({
         // Misc
         shadow: 'rgba(0, 0, 0, 0.12)',
         focus: '#49A8FF',
+
+        ...halloweenColors,
       },
     },
   },

diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
@@ -3,7 +3,7 @@
     class="docs-layout"
   >
     <div
-      v-if="false"
+      v-show="doShowLoader"
       class="docs-layout__loader"
     />
     <VaLayout
@@ -43,6 +43,7 @@ const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(!breakpoints.smDown)
 const isOptionsVisible = ref(false)
+const doShowLoader = ref(true)
 
 watch(() => breakpoints.smDown, (newValue: boolean) => {
   isSidebarVisible.value = !newValue
@@ -57,9 +58,41 @@ afterEach(() => {
   isOptionsVisible.value = false
 })
 
+
+// Halloween background animation
+const mouse = ref({ x: 0, y: 0 })
+const mouseInertia = ref({ x: 0, y: 0 })
+
+const onMouseMove = (e: MouseEvent) => {
+  mouse.value = { x: e.clientX, y: e.clientY }
+  mouseInertia.value = {
+    x: mouseInertia.value.x * 0.9 + (mouse.value.x - mouseInertia.value.x) * 0.1,
+    y: mouseInertia.value.y * 0.9 + (mouse.value.y - mouseInertia.value.y) * 0.1,
+  }
+}
+
 onMounted(() => {
   scrollToElement()
   isSidebarVisible.value = !breakpoints.smDown
+  setTimeout(() => {
+    doShowLoader.value = false
+  }, 300);
+
+  window.addEventListener('mousemove', onMouseMove)
+
+  const resetInertia = () => {
+    mouseInertia.value = {
+      x: mouseInertia.value.x * 0.9 + -1 * 0.1,
+      y: mouseInertia.value.y * 0.9 + -1 * 0.1,
+    }
+    requestAnimationFrame(resetInertia)
+  }
+
+  requestAnimationFrame(resetInertia)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onMouseMove)
 })
 
 useHead({
@@ -90,6 +123,49 @@ html {
 
 .docs-layout {
   font-family: var(--va-font-family);
+  // Halloween background
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    min-height: 100vh;
+    width: 100%;
+    background-image: url("https://i.imgur.com/rpnciUN.png");
+    background-size: 30%;
+    background-color: #000;
+    z-index: 0;
+    opacity: 0.5;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: radial-gradient(circle at v-bind("mouse.x + 'px'") v-bind("mouse.y + 'px'"), transparent 0%, #000 v-bind("(mouseInertia.x + mouseInertia.y) * 0.5 + 'px'"));
+    background-size: 200%;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  & > * {
+    z-index: 1;
+  }
+
+  @keyframes background-jump {
+    0% {
+      background-position: center;
+    }
+    50% {
+      background-position: center 45%;
+    }
+    100% {
+      background-position: center;
+    }
+  }
 
   &__loader {
     position: fixed;
@@ -99,6 +175,11 @@ html {
     height: 100%;
     z-index: 9999999;
     background: var(--va-background-primary);
+    // Halloween loader
+    background-image: url("https://i.imgur.com/yLvFZoB.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    animation: background-jump 1s infinite;
   }
 
   &__main-section {
@@ -112,7 +193,6 @@ html {
     width: 100%;
     display: flex;
     justify-content: center;
-    background: var(--va-background-primary);
   }
 
   &__page-content {