Korbs/sudovanilla-website
1
Fork 0
Code Issues Pull requests Activity

update

Browse source
This commit is contained in:
Korbs 2024-09-19 13:43:34 -04:00
parent 9828661511
commit 403567c195
7 changed files with 100 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
astro.config.mjs
View file

@ -82,5 +82,16 @@ export default defineConfig({
}, },
devToolbar: { devToolbar: {
enabled: false enabled: false
} },
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "astro-color-mode/use-color-mode.scss" as *;
`,
},
},
},
},
}); });

BIN
bun.lockb
View file

Binary file not shown.

1
package.json
View file

@ -24,6 +24,7 @@
"@minpluto/zorn": "^0.4.5", "@minpluto/zorn": "^0.4.5",
"astro": "^4.14.5", "astro": "^4.14.5",
"astro-auto-import": "^0.4.2", "astro-auto-import": "^0.4.2",
"astro-color-mode": "^0.7.1",
"astro-json-element": "^1.1.4", "astro-json-element": "^1.1.4",
"astro-robots-txt": "^1.0.0", "astro-robots-txt": "^1.0.0",
"astro-tooltips": "^0.6.2", "astro-tooltips": "^0.6.2",

4
src/components/global/Head.astro
View file

@ -2,6 +2,7 @@
const { Title, Description } = Astro.props; const { Title, Description } = Astro.props;
import { ViewTransitions } from 'astro:transitions'; import { ViewTransitions } from 'astro:transitions';
import { Tooltips } from 'astro-tooltips'; import { Tooltips } from 'astro-tooltips';
import { ColorMode } from 'astro-color-mode';
--- ---
<head> <head>
@ -39,4 +40,7 @@ import { Tooltips } from 'astro-tooltips';
<!-- Tooltip --> <!-- Tooltip -->
<Tooltips interactive={false} delay={[15, 14000]} /> <Tooltips interactive={false} delay={[15, 14000]} />
<!-- Color Mode -->
<ColorMode/>
</head> </head>

12
src/components/global/Header.astro
View file

@ -22,7 +22,9 @@ import SudoVanilla from "@components/global/SudoVanillaLogo.astro";
// Icons // Icons
import { import {
MenuScale HalfMoon,
MenuScale,
SunLight
} from '@iconoir/vue' } from '@iconoir/vue'
--- ---
@ -58,6 +60,10 @@ import {
</noscript> </noscript>
<a title={StatusText} class="header-link-item" href="https://status.sudovanilla.org/">Status</a> <a title={StatusText} class="header-link-item" href="https://status.sudovanilla.org/">Status</a>
<button id="toggle-da-theme" data-color-mode-switch style="display: none;"></button>
<button onclick="document.querySelector('#toggle-da-theme').click()" data-color-mode-switch class="theme-toggle-button theme-is-light"><SunLight/></button>
<button onclick="document.querySelector('#toggle-da-theme').click()" data-color-mode-switch class="theme-toggle-button theme-is-dark"><HalfMoon/></button>
</div> </div>
</div> </div>
{ {
@ -101,9 +107,9 @@ import {
function () { function () {
if (window.scrollY > 50) { if (window.scrollY > 50) {
document.querySelector(".header-row-bottom").style.position = "fixed"; document.querySelector(".header-row-bottom").style.position = "fixed";
document.querySelector(".header-row-bottom").style.boxShadow = "0px -40px 19px 20px black"; document.querySelector(".header-row-bottom").style.boxShadow = "0px -40px 19px 20px var(--box-shadow-color)";
document.getElementById("show-w-scroll").style.opacity = "1"; document.getElementById("show-w-scroll").style.opacity = "1";
document.getElementById("show-w-scroll").style.width = "96px"; document.getElementById("show-w-scroll").style.width = "100px";
} else { } else {
document.querySelector(".header-row-bottom").style.position = "inherit"; document.querySelector(".header-row-bottom").style.position = "inherit";
document.querySelector(".header-row-bottom").style.boxShadow = "none"; document.querySelector(".header-row-bottom").style.boxShadow = "none";

2
src/pages/index.astro
View file

@ -56,9 +56,7 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
Title="Ennie and Yoyki: Non-Girly Games" Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://md.sudovanilla.org/images/eay-p-v.jpg" Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm" Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
CustomControlsWithMenu
Milieu Milieu
SettingsMenu
></Zorn> ></Zorn>
</LargeCard> </LargeCard>
<LargeCard <LargeCard

74
src/styles/index.scss
View file

@ -98,4 +98,78 @@ a {
margin-top: 151px; margin-top: 151px;
max-width: 1200px; max-width: 1200px;
width: 100%; width: 100%;
}
.theme-toggle-button {
color: gray;
background: transparent;
border: none;
}
:is(body) {
@include color-mode(light) {
color: black !important;
background-color: white !important;
:root {
--box-shadow-color: white;
}
.theme-is-light {display: inherit}
.theme-is-dark {display: none}
.service-links a {
color: black !important;
}
header {
a {
color: black !important;
}
.sudovanilla-logo img {
filter: invert(1);
}
}
.large-card {
a {
background: rgb(234, 234, 234) !important;
color: black !important;
}
}
.sidebar {
* {
color: black !important;
}
}
}
@include color-mode(dark) {
color: white !important;
background-color: black !important;
:root {
--box-shadow-color: black;
}
.theme-is-light {display: none}
.theme-is-dark {display: inherit}
.service-links a {
color: white !important;
}
header {
.header-row-bottom {
backdrop-filter: blur(24px) brightness(0.7);
}
a {
color: white !important;
}
.sudovanilla-logo img {
filter: invert(0);
}
}
.large-card {
a {
background: transparent !important;
color: white !important;
}
}
.sidebar {
* {
color: white !important;
}
}
}
} }