diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 803422b8a..83240492f 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -8,7 +8,9 @@ import Layout from '../custom/Layout.vue' import '@unocss/reset/tailwind.css' import 'uno.css' +import './nixie.css' import './style.css' +import '@fontsource-variable/quicksand' import '@fontsource-variable/dm-sans' import '@fontsource/dm-mono' import '@fontsource/dm-serif-display' diff --git a/docs/.vitepress/theme/nixie.css b/docs/.vitepress/theme/nixie.css new file mode 100644 index 000000000..353ade4fd --- /dev/null +++ b/docs/.vitepress/theme/nixie.css @@ -0,0 +1,149 @@ +.devlog-steins-gate-divergence-meter-heading { + font-family: 'Quicksand Variable', sans-serif; + font-weight: 300; + font-size: 2.5rem; + color: rgb(255 159 32) !important; + text-shadow: + 0 0 5px rgb(241 153 87), + 0 0 10px rgb(255 110 0); + animation: flicker 2s infinite; + display: flex; + gap: 3px; +} + +.nixie-digit { + position: relative; + display: inline-block; + width: 24px; + display: inline-flex; + justify-content: center; + background: #170d04; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + box-shadow: inset 0px 0px 2px 0px #fff; +} + +.dark .nixie-digit { + box-shadow: inset 0px 0px 2px 0px #4c320085; +} + +.nixie-digit::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: 3px 3px; + background-image: repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + #ff9f001a 2px, + rgb(221 214 213 / 0%) 3px + ), + repeating-linear-gradient(0deg, transparent, transparent 2px, #ff9f001a 2px, rgb(196 184 182 / 0%) 3px); + pointer-events: none; + z-index: 4; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.dark .nixie-digit::before { + background-image: repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + #0000001a 2px, + rgb(0 0 0 / 0%) 3px), + repeating-linear-gradient(0deg, transparent, transparent 2px, #0000001a 2px, rgb(0 0 0 / 0%) 3px); +} + +/* Subtle glass reflection effect */ +.nixie-digit::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: 3px 3px; + background-image: repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + #ff9f001a 2px, + rgb(221 214 213 / 0%) 3px + ), + repeating-linear-gradient(0deg, transparent, transparent 2px, #ff9f001a 2px, rgb(196 184 182 / 0%) 3px); + pointer-events: none; + z-index: 2; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.dark .nixie-digit::after { + background-image: repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + #8f59001a 2px, + rgb(208 197 196 / 0%) 3px), + repeating-linear-gradient(0deg, transparent, transparent 2px, #6740001a 2px, rgb(196 184 182 / 0%) 3px); +} + +[data-theme='dark'] .devlog-steins-gate-divergence-meter-heading { + color: rgb(255, 157, 77) !important; + text-shadow: + 0 0 7px #ff6a00, + 0 0 10px #ff6a00; +} + +[data-theme='dark'] .nixie-digit { + background: transparent; + box-shadow: none; +} + +[data-theme='dark'] .nixie-digit::before { + background-image: repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(30, 30, 30, 0.1) 2px, + rgba(30, 30, 30, 0.1) 3px + ), + repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(30, 30, 30, 0.1) 2px, rgba(30, 30, 30, 0.1) 3px); +} + +[data-theme='dark'] .nixie-digit::after { + height: 35%; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); + border: none; +} + +@keyframes flicker { + 0% { + opacity: 1; + } + 92% { + opacity: 1; + } + 93% { + opacity: 0.8; + } + 94% { + opacity: 1; + } + 98% { + opacity: 0.9; + } + 100% { + opacity: 1; + } +} diff --git a/docs/package.json b/docs/package.json index 5c735ca55..99c7997cd 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,8 +15,10 @@ "dependencies": { "@fontsource-variable/comfortaa": "^5.2.6", "@fontsource-variable/dm-sans": "^5.2.6", + "@fontsource-variable/quicksand": "^5.2.8", "@fontsource/dm-mono": "^5.2.6", "@fontsource/dm-serif-display": "^5.2.6", + "@fontsource/quicksand": "^5.2.8", "@proj-airi/chromatic": "^1.0.0", "@proj-airi/i18n": "workspace:^", "@vueuse/core": "^13.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ced045b3b..68850f147 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1008,12 +1008,18 @@ importers: '@fontsource-variable/dm-sans': specifier: ^5.2.6 version: 5.2.6 + '@fontsource-variable/quicksand': + specifier: ^5.2.8 + version: 5.2.8 '@fontsource/dm-mono': specifier: ^5.2.6 version: 5.2.6 '@fontsource/dm-serif-display': specifier: ^5.2.6 version: 5.2.6 + '@fontsource/quicksand': + specifier: ^5.2.8 + version: 5.2.8 '@proj-airi/chromatic': specifier: ^1.0.0 version: 1.0.0 @@ -3587,6 +3593,9 @@ packages: '@fontsource/m-plus-rounded-1c@5.2.8': resolution: {integrity: sha512-XBW1hHdfvVlcohcUtvihWVprqtQJgDJWzsml0zU0l01qU7y6Ryu/mVnMfqMgzNGRqlrRgYGqytKOZFQZsG7H/w==} + '@fontsource/quicksand@5.2.8': + resolution: {integrity: sha512-YRgnt2eQfNrk5OWqYJZmFoi6B6sioRIbjKJj3/l5CnezeE0TzD8XL35Q4fRNfHLpOzLi/ckNvTZySBHVVP1G6w==} + '@fontsource/sniglet@5.2.6': resolution: {integrity: sha512-tYtYJEvHwBHIAspZJ7AsiFHAPcL31EVTMktf6cVNsGIHlhKW1Ea9Z0vb0/jL8TY65HVTvAK0s3zez8hEg1hHDQ==} @@ -14937,6 +14946,8 @@ snapshots: '@fontsource/m-plus-rounded-1c@5.2.8': {} + '@fontsource/quicksand@5.2.8': {} + '@fontsource/sniglet@5.2.6': {} '@formkit/auto-animate@0.8.2': {}