mivodev/mivodev.github.io
1
0
Fork 0
mirror of https://github.com/mivodev/mivodev.github.io.git synced 2026-01-26 13:32:07 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add custom VitePress layout with a dynamic background featuring a grid pattern and glowing orbs.

Browse Source
This commit is contained in:
dyzulk
2026-01-19 16:41:52 +07:00
parent 2ba0d48919
commit 6d343f1256
1 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.vitepress/theme/Layout.vue
View File

@@ -25,6 +25,13 @@ const { Layout } = DefaultTheme
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
--orb-opacity-max: 0.2;
--orb-opacity-min: 0.15;
}
:root.dark .mivo-bg {
--orb-opacity-max: 0.05;
--orb-opacity-min: 0.03;
} }
.mivo-grid { .mivo-grid {
@@ -43,14 +50,10 @@ const { Layout } = DefaultTheme
position: absolute; position: absolute;
border-radius: 9999px; border-radius: 9999px;
filter: blur(100px); filter: blur(100px);
opacity: 0.2; opacity: var(--orb-opacity-max);
animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} }
:root.dark .mivo-orb {
opacity: 0.05;
}
.orb-1 { .orb-1 {
top: -20%; top: -20%;
left: -10%; left: -10%;
@@ -71,12 +74,7 @@ const { Layout } = DefaultTheme
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 0.2; } 0%, 100% { opacity: var(--orb-opacity-max); }
50% { opacity: 0.15; } 50% { opacity: var(--orb-opacity-min); }
}
:root.dark @keyframes pulse {
0%, 100% { opacity: 0.05; }
50% { opacity: 0.03; }
} }
</style> </style>