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

m0ksem · web-flow · commit 5eace0f0c4c7 · 2024-10-29T13:10:14.000+02:00
* chore(docs): force halloween theme

* fix(docs): background on small screen

* chore(docs): landing theme

* chore(docs): add new banner

* chore: update epicmax banner
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 {
diff --git a/packages/docs/pages/index.vue b/packages/docs/pages/index.vue

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const uiVersion = packageUi.version`
`12`	`12`
`13`	`13`	`<style lang="scss">`
`14`	`14`	`.version-dropdown {`
`15`		`- color: var(--va-text-primary);`
`16`	`15`	`font-weight: 600;`
	`16`	`+ opacity: 0.8;`
`17`	`17`	`}`
`18`	`18`	`</style>`