From e9a51d99f26d0d0b3b41b7eb28a561a412a523c5 Mon Sep 17 00:00:00 2001 From: Maksym Nedoshev Date: Tue, 29 Oct 2024 13:10:14 +0200 Subject: [PATCH] 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 --- packages/docs/assets/variables.scss | 25 ++++-- packages/docs/components/HeaderBanner.vue | 9 +- .../landing/banners/ScheduleACall.vue | 30 +++++++ packages/docs/components/layout/Header.vue | 4 + packages/docs/components/layout/Sidebar.vue | 5 ++ .../components/layout/header/ThemeSwitch.vue | 20 ++++- .../layout/header/VersionDropdown.vue | 2 +- packages/docs/config/vuestic-config.ts | 71 +++++++++++----- packages/docs/layouts/default.vue | 84 ++++++++++++++++++- packages/docs/pages/index.vue | 2 +- 10 files changed, 215 insertions(+), 37 deletions(-) create mode 100644 packages/docs/components/landing/banners/ScheduleACall.vue diff --git a/packages/docs/assets/variables.scss b/packages/docs/assets/variables.scss index 7906b8b830..a8a0a6e82d 100644 --- 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 index 73ddb57648..4394cd8f10 100644 --- a/packages/docs/components/HeaderBanner.vue +++ b/packages/docs/components/HeaderBanner.vue @@ -7,11 +7,12 @@ 'header-banner--wrapped': wrapped, }" > -
+
- We just released Vuestic Admin 3.0 🤗 + + 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.
diff --git a/packages/docs/components/layout/header/VersionDropdown.vue b/packages/docs/components/layout/header/VersionDropdown.vue index af30a6d89f..25ffae926c 100644 --- a/packages/docs/components/layout/header/VersionDropdown.vue +++ b/packages/docs/components/layout/header/VersionDropdown.vue @@ -12,7 +12,7 @@ const uiVersion = packageUi.version diff --git a/packages/docs/config/vuestic-config.ts b/packages/docs/config/vuestic-config.ts index 51907f1729..8303dea5a8 100644 --- 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 index ffd2f37d64..331ada483e 100644 --- a/packages/docs/layouts/default.vue +++ b/packages/docs/layouts/default.vue @@ -3,7 +3,7 @@ class="docs-layout" >
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 index 270a6ef5be..ad0d6af7cc 100644 --- a/packages/docs/pages/index.vue +++ b/packages/docs/pages/index.vue @@ -4,7 +4,7 @@
- +