diff --git a/nuxt.config.ts b/nuxt.config.ts index 0b1ed40..4b921e5 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -47,7 +47,6 @@ export default defineNuxtConfig({ }, piniaPluginPersistedstate: { debug: process.env.NODE_ENV === "development", // log error to console - storage: "cookies", cookieOptions: { sameSite: "lax", // prevent CSRF secure: process.env.NODE_ENV !== "development" // only send over HTTPS diff --git a/public/favicon.ico b/public/favicon.ico index 18993ad..b7d7937 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/app.vue b/src/app.vue index 43b6efb..c433e20 100644 --- a/src/app.vue +++ b/src/app.vue @@ -12,6 +12,9 @@ import { useStateStore } from "@/stores/stateStore"; const router = useRouter(); const store = useStateStore(); +// Set dark theme +store.applyColorMode(); + useHead({ titleTemplate: (titleChunk: string | undefined): string | null => { return titleChunk ? `${titleChunk} - website-vue` : 'website-vue'; diff --git a/src/app/spa-loading-template.html b/src/app/spa-loading-template.html index a269337..d8fa59a 100644 --- a/src/app/spa-loading-template.html +++ b/src/app/spa-loading-template.html @@ -1,41 +1,85 @@ -
- + .loader { + display: block; + position: fixed; + z-index: 1031; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 36px; + height: 36px; + box-sizing: border-box; + border: solid 2px transparent; + border-top-color: #000; + border-left-color: #000; + border-bottom-color: #efefef; + border-right-color: #efefef; + border-radius: 50%; + -webkit-animation: loader 400ms linear infinite; + animation: loader 400ms linear infinite; + } + + .dark .loader { + border-top-color: #fff !important; + border-left-color: #fff !important; + border-bottom-color: #444 !important; + border-right-color: #444 !important; + } + + @-webkit-keyframes loader { + 0% { + -webkit-transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + -webkit-transform: translate(-50%, -50%) rotate(360deg); + } + } + + @keyframes loader { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } + } + + + +
+ + + diff --git a/src/components.d.ts b/src/components.d.ts index 3b2c90f..8f9cf39 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -10,6 +10,7 @@ declare module 'vue' { export interface GlobalComponents { IBi0Circle: typeof import('~icons/bi/0-circle')['default'] IBiActivity: typeof import('~icons/bi/activity')['default'] + IFaAdjust: typeof import('~icons/fa/adjust')['default'] IFaAngellist: typeof import('~icons/fa/angellist')['default'] IFaCheck: typeof import('~icons/fa/check')['default'] IFaClone: typeof import('~icons/fa/clone')['default'] @@ -22,6 +23,7 @@ declare module 'vue' { IFaLink: typeof import('~icons/fa/link')['default'] IFaLinkedinSquare: typeof import('~icons/fa/linkedin-square')['default'] IFaMoonO: typeof import('~icons/fa/moon-o')['default'] + IFaSolidMoon: typeof import('~icons/fa-solid/moon')['default'] IFaSolidSun: typeof import('~icons/fa-solid/sun')['default'] IMdiAccountBox: typeof import('~icons/mdi/account-box')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/ColorMode.vue b/src/components/ColorMode.vue new file mode 100644 index 0000000..66c2fd1 --- /dev/null +++ b/src/components/ColorMode.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/components/ToggleColorMode.vue b/src/components/ToggleColorMode.vue deleted file mode 100644 index 1626f5e..0000000 --- a/src/components/ToggleColorMode.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - - - diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 261de41..ae98472 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -10,7 +10,7 @@ - +