mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-06 08:14:40 +00:00
Page Redesign (90% Done for PC)
This commit is contained in:
parent
af9ac7f452
commit
ee8e03f2ab
GPG key ID:
858E8EE696525EED
27 changed files with 1470 additions and 18 deletions
|
|
@ -1 +1,28 @@
|
|||
console.log("Hello via Bun!");
|
||||
import { Log } from "./utils";
|
||||
import { renderToString } from "react-dom/server";
|
||||
import fs from "fs";
|
||||
import Base from "./templates/Base";
|
||||
import Title from "./templates/Title";
|
||||
import Bento from "./templates/Bento";
|
||||
|
||||
const environment: "prod" | "dev" =
|
||||
(process.env.ENVIRONMENT as "prod" | "dev") || "prod";
|
||||
const log = new Log();
|
||||
|
||||
if (environment == "dev") {
|
||||
log.warn("Running in a dev mode!");
|
||||
}
|
||||
|
||||
if (!fs.existsSync("out")) fs.mkdirSync("out");
|
||||
|
||||
const html = renderToString(
|
||||
<Base isDev={environment == "dev"}>
|
||||
<Title />
|
||||
<Bento />
|
||||
</Base>
|
||||
);
|
||||
fs.cpSync("src/static", "out/static", { recursive: true });
|
||||
if (environment == "dev") {
|
||||
fs.cpSync("src/static_dev", "out/static/js", { recursive: true });
|
||||
}
|
||||
fs.writeFileSync("out/index.html", `<!DOCTYPE html />${html}`);
|
||||
|
|
|
|||
14
src/input.css
Normal file
14
src/input.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
.ubuntu-mono-regular {
|
||||
font-family: "Ubuntu Mono", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sometype-mono-regular {
|
||||
font-family: "Sometype Mono", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
992
src/static/css/tailwind.css
Normal file
992
src/static/css/tailwind.css
Normal file
|
|
@ -0,0 +1,992 @@
|
|||
/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--color-red-50: oklch(0.971 0.013 17.38);
|
||||
--color-red-100: oklch(0.936 0.032 17.717);
|
||||
--color-red-200: oklch(0.885 0.062 18.334);
|
||||
--color-red-300: oklch(0.808 0.114 19.571);
|
||||
--color-red-400: oklch(0.704 0.191 22.216);
|
||||
--color-red-500: oklch(0.637 0.237 25.331);
|
||||
--color-red-600: oklch(0.577 0.245 27.325);
|
||||
--color-red-700: oklch(0.505 0.213 27.518);
|
||||
--color-red-800: oklch(0.444 0.177 26.899);
|
||||
--color-red-900: oklch(0.396 0.141 25.723);
|
||||
--color-red-950: oklch(0.258 0.092 26.042);
|
||||
--color-orange-50: oklch(0.98 0.016 73.684);
|
||||
--color-orange-100: oklch(0.954 0.038 75.164);
|
||||
--color-orange-200: oklch(0.901 0.076 70.697);
|
||||
--color-orange-300: oklch(0.837 0.128 66.29);
|
||||
--color-orange-400: oklch(0.75 0.183 55.934);
|
||||
--color-orange-500: oklch(0.705 0.213 47.604);
|
||||
--color-orange-600: oklch(0.646 0.222 41.116);
|
||||
--color-orange-700: oklch(0.553 0.195 38.402);
|
||||
--color-orange-800: oklch(0.47 0.157 37.304);
|
||||
--color-orange-900: oklch(0.408 0.123 38.172);
|
||||
--color-orange-950: oklch(0.266 0.079 36.259);
|
||||
--color-amber-50: oklch(0.987 0.022 95.277);
|
||||
--color-amber-100: oklch(0.962 0.059 95.617);
|
||||
--color-amber-200: oklch(0.924 0.12 95.746);
|
||||
--color-amber-300: oklch(0.879 0.169 91.605);
|
||||
--color-amber-400: oklch(0.828 0.189 84.429);
|
||||
--color-amber-500: oklch(0.769 0.188 70.08);
|
||||
--color-amber-600: oklch(0.666 0.179 58.318);
|
||||
--color-amber-700: oklch(0.555 0.163 48.998);
|
||||
--color-amber-800: oklch(0.473 0.137 46.201);
|
||||
--color-amber-900: oklch(0.414 0.112 45.904);
|
||||
--color-amber-950: oklch(0.279 0.077 45.635);
|
||||
--color-yellow-50: oklch(0.987 0.026 102.212);
|
||||
--color-yellow-100: oklch(0.973 0.071 103.193);
|
||||
--color-yellow-200: oklch(0.945 0.129 101.54);
|
||||
--color-yellow-300: oklch(0.905 0.182 98.111);
|
||||
--color-yellow-400: oklch(0.852 0.199 91.936);
|
||||
--color-yellow-500: oklch(0.795 0.184 86.047);
|
||||
--color-yellow-600: oklch(0.681 0.162 75.834);
|
||||
--color-yellow-700: oklch(0.554 0.135 66.442);
|
||||
--color-yellow-800: oklch(0.476 0.114 61.907);
|
||||
--color-yellow-900: oklch(0.421 0.095 57.708);
|
||||
--color-yellow-950: oklch(0.286 0.066 53.813);
|
||||
--color-lime-50: oklch(0.986 0.031 120.757);
|
||||
--color-lime-100: oklch(0.967 0.067 122.328);
|
||||
--color-lime-200: oklch(0.938 0.127 124.321);
|
||||
--color-lime-300: oklch(0.897 0.196 126.665);
|
||||
--color-lime-400: oklch(0.841 0.238 128.85);
|
||||
--color-lime-500: oklch(0.768 0.233 130.85);
|
||||
--color-lime-600: oklch(0.648 0.2 131.684);
|
||||
--color-lime-700: oklch(0.532 0.157 131.589);
|
||||
--color-lime-800: oklch(0.453 0.124 130.933);
|
||||
--color-lime-900: oklch(0.405 0.101 131.063);
|
||||
--color-lime-950: oklch(0.274 0.072 132.109);
|
||||
--color-green-50: oklch(0.982 0.018 155.826);
|
||||
--color-green-100: oklch(0.962 0.044 156.743);
|
||||
--color-green-200: oklch(0.925 0.084 155.995);
|
||||
--color-green-300: oklch(0.871 0.15 154.449);
|
||||
--color-green-400: oklch(0.792 0.209 151.711);
|
||||
--color-green-500: oklch(0.723 0.219 149.579);
|
||||
--color-green-600: oklch(0.627 0.194 149.214);
|
||||
--color-green-700: oklch(0.527 0.154 150.069);
|
||||
--color-green-800: oklch(0.448 0.119 151.328);
|
||||
--color-green-900: oklch(0.393 0.095 152.535);
|
||||
--color-green-950: oklch(0.266 0.065 152.934);
|
||||
--color-emerald-50: oklch(0.979 0.021 166.113);
|
||||
--color-emerald-100: oklch(0.95 0.052 163.051);
|
||||
--color-emerald-200: oklch(0.905 0.093 164.15);
|
||||
--color-emerald-300: oklch(0.845 0.143 164.978);
|
||||
--color-emerald-400: oklch(0.765 0.177 163.223);
|
||||
--color-emerald-500: oklch(0.696 0.17 162.48);
|
||||
--color-emerald-600: oklch(0.596 0.145 163.225);
|
||||
--color-emerald-700: oklch(0.508 0.118 165.612);
|
||||
--color-emerald-800: oklch(0.432 0.095 166.913);
|
||||
--color-emerald-900: oklch(0.378 0.077 168.94);
|
||||
--color-emerald-950: oklch(0.262 0.051 172.552);
|
||||
--color-teal-50: oklch(0.984 0.014 180.72);
|
||||
--color-teal-100: oklch(0.953 0.051 180.801);
|
||||
--color-teal-200: oklch(0.91 0.096 180.426);
|
||||
--color-teal-300: oklch(0.855 0.138 181.071);
|
||||
--color-teal-400: oklch(0.777 0.152 181.912);
|
||||
--color-teal-500: oklch(0.704 0.14 182.503);
|
||||
--color-teal-600: oklch(0.6 0.118 184.704);
|
||||
--color-teal-700: oklch(0.511 0.096 186.391);
|
||||
--color-teal-800: oklch(0.437 0.078 188.216);
|
||||
--color-teal-900: oklch(0.386 0.063 188.416);
|
||||
--color-teal-950: oklch(0.277 0.046 192.524);
|
||||
--color-cyan-50: oklch(0.984 0.019 200.873);
|
||||
--color-cyan-100: oklch(0.956 0.045 203.388);
|
||||
--color-cyan-200: oklch(0.917 0.08 205.041);
|
||||
--color-cyan-300: oklch(0.865 0.127 207.078);
|
||||
--color-cyan-400: oklch(0.789 0.154 211.53);
|
||||
--color-cyan-500: oklch(0.715 0.143 215.221);
|
||||
--color-cyan-600: oklch(0.609 0.126 221.723);
|
||||
--color-cyan-700: oklch(0.52 0.105 223.128);
|
||||
--color-cyan-800: oklch(0.45 0.085 224.283);
|
||||
--color-cyan-900: oklch(0.398 0.07 227.392);
|
||||
--color-cyan-950: oklch(0.302 0.056 229.695);
|
||||
--color-sky-50: oklch(0.977 0.013 236.62);
|
||||
--color-sky-100: oklch(0.951 0.026 236.824);
|
||||
--color-sky-200: oklch(0.901 0.058 230.902);
|
||||
--color-sky-300: oklch(0.828 0.111 230.318);
|
||||
--color-sky-400: oklch(0.746 0.16 232.661);
|
||||
--color-sky-500: oklch(0.685 0.169 237.323);
|
||||
--color-sky-600: oklch(0.588 0.158 241.966);
|
||||
--color-sky-700: oklch(0.5 0.134 242.749);
|
||||
--color-sky-800: oklch(0.443 0.11 240.79);
|
||||
--color-sky-900: oklch(0.391 0.09 240.876);
|
||||
--color-sky-950: oklch(0.293 0.066 243.157);
|
||||
--color-blue-50: oklch(0.97 0.014 254.604);
|
||||
--color-blue-100: oklch(0.932 0.032 255.585);
|
||||
--color-blue-200: oklch(0.882 0.059 254.128);
|
||||
--color-blue-300: oklch(0.809 0.105 251.813);
|
||||
--color-blue-400: oklch(0.707 0.165 254.624);
|
||||
--color-blue-500: oklch(0.623 0.214 259.815);
|
||||
--color-blue-600: oklch(0.546 0.245 262.881);
|
||||
--color-blue-700: oklch(0.488 0.243 264.376);
|
||||
--color-blue-800: oklch(0.424 0.199 265.638);
|
||||
--color-blue-900: oklch(0.379 0.146 265.522);
|
||||
--color-blue-950: oklch(0.282 0.091 267.935);
|
||||
--color-indigo-50: oklch(0.962 0.018 272.314);
|
||||
--color-indigo-100: oklch(0.93 0.034 272.788);
|
||||
--color-indigo-200: oklch(0.87 0.065 274.039);
|
||||
--color-indigo-300: oklch(0.785 0.115 274.713);
|
||||
--color-indigo-400: oklch(0.673 0.182 276.935);
|
||||
--color-indigo-500: oklch(0.585 0.233 277.117);
|
||||
--color-indigo-600: oklch(0.511 0.262 276.966);
|
||||
--color-indigo-700: oklch(0.457 0.24 277.023);
|
||||
--color-indigo-800: oklch(0.398 0.195 277.366);
|
||||
--color-indigo-900: oklch(0.359 0.144 278.697);
|
||||
--color-indigo-950: oklch(0.257 0.09 281.288);
|
||||
--color-violet-50: oklch(0.969 0.016 293.756);
|
||||
--color-violet-100: oklch(0.943 0.029 294.588);
|
||||
--color-violet-200: oklch(0.894 0.057 293.283);
|
||||
--color-violet-300: oklch(0.811 0.111 293.571);
|
||||
--color-violet-400: oklch(0.702 0.183 293.541);
|
||||
--color-violet-500: oklch(0.606 0.25 292.717);
|
||||
--color-violet-600: oklch(0.541 0.281 293.009);
|
||||
--color-violet-700: oklch(0.491 0.27 292.581);
|
||||
--color-violet-800: oklch(0.432 0.232 292.759);
|
||||
--color-violet-900: oklch(0.38 0.189 293.745);
|
||||
--color-violet-950: oklch(0.283 0.141 291.089);
|
||||
--color-purple-50: oklch(0.977 0.014 308.299);
|
||||
--color-purple-100: oklch(0.946 0.033 307.174);
|
||||
--color-purple-200: oklch(0.902 0.063 306.703);
|
||||
--color-purple-300: oklch(0.827 0.119 306.383);
|
||||
--color-purple-400: oklch(0.714 0.203 305.504);
|
||||
--color-purple-500: oklch(0.627 0.265 303.9);
|
||||
--color-purple-600: oklch(0.558 0.288 302.321);
|
||||
--color-purple-700: oklch(0.496 0.265 301.924);
|
||||
--color-purple-800: oklch(0.438 0.218 303.724);
|
||||
--color-purple-900: oklch(0.381 0.176 304.987);
|
||||
--color-purple-950: oklch(0.291 0.149 302.717);
|
||||
--color-fuchsia-50: oklch(0.977 0.017 320.058);
|
||||
--color-fuchsia-100: oklch(0.952 0.037 318.852);
|
||||
--color-fuchsia-200: oklch(0.903 0.076 319.62);
|
||||
--color-fuchsia-300: oklch(0.833 0.145 321.434);
|
||||
--color-fuchsia-400: oklch(0.74 0.238 322.16);
|
||||
--color-fuchsia-500: oklch(0.667 0.295 322.15);
|
||||
--color-fuchsia-600: oklch(0.591 0.293 322.896);
|
||||
--color-fuchsia-700: oklch(0.518 0.253 323.949);
|
||||
--color-fuchsia-800: oklch(0.452 0.211 324.591);
|
||||
--color-fuchsia-900: oklch(0.401 0.17 325.612);
|
||||
--color-fuchsia-950: oklch(0.293 0.136 325.661);
|
||||
--color-pink-50: oklch(0.971 0.014 343.198);
|
||||
--color-pink-100: oklch(0.948 0.028 342.258);
|
||||
--color-pink-200: oklch(0.899 0.061 343.231);
|
||||
--color-pink-300: oklch(0.823 0.12 346.018);
|
||||
--color-pink-400: oklch(0.718 0.202 349.761);
|
||||
--color-pink-500: oklch(0.656 0.241 354.308);
|
||||
--color-pink-600: oklch(0.592 0.249 0.584);
|
||||
--color-pink-700: oklch(0.525 0.223 3.958);
|
||||
--color-pink-800: oklch(0.459 0.187 3.815);
|
||||
--color-pink-900: oklch(0.408 0.153 2.432);
|
||||
--color-pink-950: oklch(0.284 0.109 3.907);
|
||||
--color-rose-50: oklch(0.969 0.015 12.422);
|
||||
--color-rose-100: oklch(0.941 0.03 12.58);
|
||||
--color-rose-200: oklch(0.892 0.058 10.001);
|
||||
--color-rose-300: oklch(0.81 0.117 11.638);
|
||||
--color-rose-400: oklch(0.712 0.194 13.428);
|
||||
--color-rose-500: oklch(0.645 0.246 16.439);
|
||||
--color-rose-600: oklch(0.586 0.253 17.585);
|
||||
--color-rose-700: oklch(0.514 0.222 16.935);
|
||||
--color-rose-800: oklch(0.455 0.188 13.697);
|
||||
--color-rose-900: oklch(0.41 0.159 10.272);
|
||||
--color-rose-950: oklch(0.271 0.105 12.094);
|
||||
--color-slate-50: oklch(0.984 0.003 247.858);
|
||||
--color-slate-100: oklch(0.968 0.007 247.896);
|
||||
--color-slate-200: oklch(0.929 0.013 255.508);
|
||||
--color-slate-300: oklch(0.869 0.022 252.894);
|
||||
--color-slate-400: oklch(0.704 0.04 256.788);
|
||||
--color-slate-500: oklch(0.554 0.046 257.417);
|
||||
--color-slate-600: oklch(0.446 0.043 257.281);
|
||||
--color-slate-700: oklch(0.372 0.044 257.287);
|
||||
--color-slate-800: oklch(0.279 0.041 260.031);
|
||||
--color-slate-900: oklch(0.208 0.042 265.755);
|
||||
--color-slate-950: oklch(0.129 0.042 264.695);
|
||||
--color-gray-50: oklch(0.985 0.002 247.839);
|
||||
--color-gray-100: oklch(0.967 0.003 264.542);
|
||||
--color-gray-200: oklch(0.928 0.006 264.531);
|
||||
--color-gray-300: oklch(0.872 0.01 258.338);
|
||||
--color-gray-400: oklch(0.707 0.022 261.325);
|
||||
--color-gray-500: oklch(0.551 0.027 264.364);
|
||||
--color-gray-600: oklch(0.446 0.03 256.802);
|
||||
--color-gray-700: oklch(0.373 0.034 259.733);
|
||||
--color-gray-800: oklch(0.278 0.033 256.848);
|
||||
--color-gray-900: oklch(0.21 0.034 264.665);
|
||||
--color-gray-950: oklch(0.13 0.028 261.692);
|
||||
--color-zinc-50: oklch(0.985 0 0);
|
||||
--color-zinc-100: oklch(0.967 0.001 286.375);
|
||||
--color-zinc-200: oklch(0.92 0.004 286.32);
|
||||
--color-zinc-300: oklch(0.871 0.006 286.286);
|
||||
--color-zinc-400: oklch(0.705 0.015 286.067);
|
||||
--color-zinc-500: oklch(0.552 0.016 285.938);
|
||||
--color-zinc-600: oklch(0.442 0.017 285.786);
|
||||
--color-zinc-700: oklch(0.37 0.013 285.805);
|
||||
--color-zinc-800: oklch(0.274 0.006 286.033);
|
||||
--color-zinc-900: oklch(0.21 0.006 285.885);
|
||||
--color-zinc-950: oklch(0.141 0.005 285.823);
|
||||
--color-neutral-50: oklch(0.985 0 0);
|
||||
--color-neutral-100: oklch(0.97 0 0);
|
||||
--color-neutral-200: oklch(0.922 0 0);
|
||||
--color-neutral-300: oklch(0.87 0 0);
|
||||
--color-neutral-400: oklch(0.708 0 0);
|
||||
--color-neutral-500: oklch(0.556 0 0);
|
||||
--color-neutral-600: oklch(0.439 0 0);
|
||||
--color-neutral-700: oklch(0.371 0 0);
|
||||
--color-neutral-800: oklch(0.269 0 0);
|
||||
--color-neutral-900: oklch(0.205 0 0);
|
||||
--color-neutral-950: oklch(0.145 0 0);
|
||||
--color-stone-50: oklch(0.985 0.001 106.423);
|
||||
--color-stone-100: oklch(0.97 0.001 106.424);
|
||||
--color-stone-200: oklch(0.923 0.003 48.717);
|
||||
--color-stone-300: oklch(0.869 0.005 56.366);
|
||||
--color-stone-400: oklch(0.709 0.01 56.259);
|
||||
--color-stone-500: oklch(0.553 0.013 58.071);
|
||||
--color-stone-600: oklch(0.444 0.011 73.639);
|
||||
--color-stone-700: oklch(0.374 0.01 67.558);
|
||||
--color-stone-800: oklch(0.268 0.007 34.298);
|
||||
--color-stone-900: oklch(0.216 0.006 56.043);
|
||||
--color-stone-950: oklch(0.147 0.004 49.25);
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--breakpoint-sm: 40rem;
|
||||
--breakpoint-md: 48rem;
|
||||
--breakpoint-lg: 64rem;
|
||||
--breakpoint-xl: 80rem;
|
||||
--breakpoint-2xl: 96rem;
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--text-7xl: 4.5rem;
|
||||
--text-7xl--line-height: 1;
|
||||
--text-8xl: 6rem;
|
||||
--text-8xl--line-height: 1;
|
||||
--text-9xl: 8rem;
|
||||
--text-9xl--line-height: 1;
|
||||
--font-weight-thin: 100;
|
||||
--font-weight-extralight: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
--font-weight-black: 900;
|
||||
--tracking-tighter: -0.05em;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--tracking-wide: 0.025em;
|
||||
--tracking-wider: 0.05em;
|
||||
--tracking-widest: 0.1em;
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
--radius-xs: 0.125rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
--radius-3xl: 1.5rem;
|
||||
--radius-4xl: 2rem;
|
||||
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
||||
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
||||
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
||||
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
||||
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
||||
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
||||
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
||||
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
||||
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
||||
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--animate-bounce: bounce 1s infinite;
|
||||
--blur-xs: 4px;
|
||||
--blur-sm: 8px;
|
||||
--blur-md: 12px;
|
||||
--blur-lg: 16px;
|
||||
--blur-xl: 24px;
|
||||
--blur-2xl: 40px;
|
||||
--blur-3xl: 64px;
|
||||
--perspective-dramatic: 100px;
|
||||
--perspective-near: 300px;
|
||||
--perspective-normal: 500px;
|
||||
--perspective-midrange: 800px;
|
||||
--perspective-distant: 1200px;
|
||||
--aspect-video: 16 / 9;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-font-feature-settings: var(--font-sans--font-feature-settings);
|
||||
--default-font-variation-settings: var(
|
||||
--font-sans--font-variation-settings
|
||||
);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
--default-mono-font-feature-settings: var(
|
||||
--font-mono--font-feature-settings
|
||||
);
|
||||
--default-mono-font-variation-settings: var(
|
||||
--font-mono--font-variation-settings
|
||||
);
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid;
|
||||
}
|
||||
html, :host {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
|
||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||
font-variation-settings: var( --default-font-variation-settings, normal );
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
line-height: inherit;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code, kbd, samp, pre {
|
||||
font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
|
||||
font-feature-settings: var( --default-mono-font-feature-settings, normal );
|
||||
font-variation-settings: var( --default-mono-font-variation-settings, normal );
|
||||
font-size: 1em;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.inset-0 {
|
||||
inset: calc(var(--spacing) * 0);
|
||||
}
|
||||
.-z-10 {
|
||||
z-index: calc(10 * -1);
|
||||
}
|
||||
.col-\[1\] {
|
||||
grid-column: 1;
|
||||
}
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.row-\[1\] {
|
||||
grid-row: 1;
|
||||
}
|
||||
.row-\[4\] {
|
||||
grid-row: 4;
|
||||
}
|
||||
.row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
.row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
.row-start-1 {
|
||||
grid-row-start: 1;
|
||||
}
|
||||
.row-start-2 {
|
||||
grid-row-start: 2;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 40rem) {
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@media (width >= 64rem) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@media (width >= 80rem) {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@media (width >= 96rem) {
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.aspect-video {
|
||||
aspect-ratio: var(--aspect-video);
|
||||
}
|
||||
.h-8 {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.h-12 {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-\[114px\] {
|
||||
height: 114px;
|
||||
}
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.max-h-\[512px\] {
|
||||
max-height: 512px;
|
||||
}
|
||||
.min-h-\[438px\] {
|
||||
min-height: 438px;
|
||||
}
|
||||
.w-\[114px\] {
|
||||
width: 114px;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-\[60\%\] {
|
||||
max-width: 60%;
|
||||
}
|
||||
.max-w-\[75\%\] {
|
||||
max-width: 75%;
|
||||
}
|
||||
.max-w-\[590px\] {
|
||||
max-width: 590px;
|
||||
}
|
||||
.max-w-\[1210px\] {
|
||||
max-width: 1210px;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.scale-140 {
|
||||
--tw-scale-x: 140%;
|
||||
--tw-scale-y: 140%;
|
||||
--tw-scale-z: 140%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
.scale-150 {
|
||||
--tw-scale-x: 150%;
|
||||
--tw-scale-y: 150%;
|
||||
--tw-scale-z: 150%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-\[repeat\(4\,minmax\(0\,280px\)\)\] {
|
||||
grid-template-columns: repeat(4,minmax(0,280px));
|
||||
}
|
||||
.grid-rows-1 {
|
||||
grid-template-rows: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
.grid-rows-\[repeat\(4\,minmax\(0\,136px\)\)\] {
|
||||
grid-template-rows: repeat(4,minmax(0,136px));
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-col-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.gap-1 {
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
.bg-\[\#1A0F05\] {
|
||||
background-color: #1A0F05;
|
||||
}
|
||||
.bg-\[\#3B0D25\] {
|
||||
background-color: #3B0D25;
|
||||
}
|
||||
.bg-\[var\(--color\)\] {
|
||||
background-color: var(--color);
|
||||
}
|
||||
.bg-gradient-to-r {
|
||||
--tw-gradient-position: to right in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.from-\[var\(--color\)\/0\] {
|
||||
--tw-gradient-from: var(--color)/0;
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-\[var\(--color\)\] {
|
||||
--tw-gradient-to: var(--color);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-\[50\%\] {
|
||||
--tw-gradient-to-position: 50%;
|
||||
}
|
||||
.to-\[75\%\] {
|
||||
--tw-gradient-to-position: 75%;
|
||||
}
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.object-center {
|
||||
object-position: center;
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.p-8 {
|
||||
padding: calc(var(--spacing) * 8);
|
||||
}
|
||||
.px-8 {
|
||||
padding-inline: calc(var(--spacing) * 8);
|
||||
}
|
||||
.py-8 {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.py-14 {
|
||||
padding-block: calc(var(--spacing) * 14);
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||
}
|
||||
.text-\[24px\] {
|
||||
font-size: 24px;
|
||||
}
|
||||
.text-\[32px\] {
|
||||
font-size: 32px;
|
||||
}
|
||||
.text-\[64px\] {
|
||||
font-size: 64px;
|
||||
}
|
||||
.leading-none {
|
||||
--tw-leading: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
.tracking-tighter {
|
||||
--tw-tracking: var(--tracking-tighter);
|
||||
letter-spacing: var(--tracking-tighter);
|
||||
}
|
||||
.text-\[\#FF851A\] {
|
||||
color: #FF851A;
|
||||
}
|
||||
.text-black {
|
||||
color: var(--color-black);
|
||||
}
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.hover\:border-\[\#FF851A\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: #FF851A;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:flex-shrink-1 {
|
||||
@media (width >= 40rem) {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
.md\:scale-95 {
|
||||
@media (width >= 48rem) {
|
||||
--tw-scale-x: 95%;
|
||||
--tw-scale-y: 95%;
|
||||
--tw-scale-z: 95%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.md\:scale-100 {
|
||||
@media (width >= 48rem) {
|
||||
--tw-scale-x: 100%;
|
||||
--tw-scale-y: 100%;
|
||||
--tw-scale-z: 100%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.md\:py-0 {
|
||||
@media (width >= 48rem) {
|
||||
padding-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.md\:text-\[32px\] {
|
||||
@media (width >= 48rem) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.md\:text-\[48px\] {
|
||||
@media (width >= 48rem) {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
.md\:text-\[128px\] {
|
||||
@media (width >= 48rem) {
|
||||
font-size: 128px;
|
||||
}
|
||||
}
|
||||
.md\:tracking-normal {
|
||||
@media (width >= 48rem) {
|
||||
--tw-tracking: var(--tracking-normal);
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
}
|
||||
.lg\:scale-90 {
|
||||
@media (width >= 64rem) {
|
||||
--tw-scale-x: 90%;
|
||||
--tw-scale-y: 90%;
|
||||
--tw-scale-z: 90%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.xl\:mt-2 {
|
||||
@media (width >= 80rem) {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.xl\:max-h-none {
|
||||
@media (width >= 80rem) {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
.xl\:scale-95 {
|
||||
@media (width >= 80rem) {
|
||||
--tw-scale-x: 95%;
|
||||
--tw-scale-y: 95%;
|
||||
--tw-scale-z: 95%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.xl\:flex-row {
|
||||
@media (width >= 80rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ubuntu-mono-regular {
|
||||
font-family: "Ubuntu Mono", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.sometype-mono-regular {
|
||||
font-family: "Sometype Mono", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes ping {
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
@property --tw-scale-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-gradient-position {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-via {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-to {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-via-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
@property --tw-gradient-via-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 50%;
|
||||
}
|
||||
@property --tw-gradient-to-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-leading {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-tracking {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
BIN
src/static/images/card-blur.png
Normal file
BIN
src/static/images/card-blur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 959 KiB |
BIN
src/static/images/card.png
Normal file
BIN
src/static/images/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/static/images/cards/immich.png
Normal file
BIN
src/static/images/cards/immich.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
src/static/images/cards/linkwarden.png
Normal file
BIN
src/static/images/cards/linkwarden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/static/images/cards/matrix.png
Normal file
BIN
src/static/images/cards/matrix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/static/images/cards/nextcloud.png
Normal file
BIN
src/static/images/cards/nextcloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/static/images/cards/vaultwarden.png
Normal file
BIN
src/static/images/cards/vaultwarden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/static/images/cards/xbb.png
Normal file
BIN
src/static/images/cards/xbb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/static/images/logos/immich.png
Normal file
BIN
src/static/images/logos/immich.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/static/images/logos/linkwarden.png
Normal file
BIN
src/static/images/logos/linkwarden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/static/images/logos/matrix.png
Normal file
BIN
src/static/images/logos/matrix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/static/images/logos/nextcloud.png
Normal file
BIN
src/static/images/logos/nextcloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/static/images/logos/vaultwarden.png
Normal file
BIN
src/static/images/logos/vaultwarden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/logos/xbb.png
Normal file
BIN
src/static/images/logos/xbb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
38
src/templates/Base.tsx
Normal file
38
src/templates/Base.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from "react";
|
||||
|
||||
interface BaseProps {
|
||||
children: React.ReactNode;
|
||||
isDev?: boolean;
|
||||
}
|
||||
|
||||
export default function Base({ children, isDev }: BaseProps) {
|
||||
return (
|
||||
<>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
<title>WAH.su</title>
|
||||
{isDev ? <script src="/static/js/hotreload.js"></script> : ""}
|
||||
<link rel="stylesheet" href="/static/css/tailwind.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"></link>
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin="anonymous"
|
||||
></link>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
||||
rel="stylesheet"
|
||||
></link>
|
||||
</head>
|
||||
<body className="bg-[#1A0F05] container mx-auto max-w-[1210px] text-white py-8 overflow-x-hidden">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
</>
|
||||
);
|
||||
}
|
||||
67
src/templates/Bento.tsx
Normal file
67
src/templates/Bento.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import BentoCard from "./BentoCards/BentoCard";
|
||||
import Footer from "./Footer";
|
||||
|
||||
export default function Bento() {
|
||||
return (
|
||||
<div className="w-full grid grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
|
||||
<BentoCard
|
||||
logo="/static/images/logos/xbb.png"
|
||||
image="/static/images/cards/xbb.png"
|
||||
title="XBackBone"
|
||||
color="#111827"
|
||||
description="Image uploading with ShareX compatibility."
|
||||
className="row-[1]"
|
||||
link="https://file.wah.su"
|
||||
/>
|
||||
<BentoCard
|
||||
logo="/static/images/logos/matrix.png"
|
||||
image="/static/images/cards/matrix.png"
|
||||
title="Matrix"
|
||||
color="#111827"
|
||||
description="An open network for secure, decentralised communication."
|
||||
className="row-[1]"
|
||||
link="https://chat.wah.su"
|
||||
/>
|
||||
<BentoCard
|
||||
type="large"
|
||||
logo="/static/images/logos/nextcloud.png"
|
||||
image="/static/images/cards/nextcloud.png"
|
||||
title="NextCloud"
|
||||
color="#fff"
|
||||
description="Privacy-Friendly, productivity suite, offering file sharing and collaboration tools."
|
||||
className="row-start-1 text-black"
|
||||
link="https://cloud.wah.su"
|
||||
/>
|
||||
<BentoCard
|
||||
type="big"
|
||||
logo="/static/images/logos/vaultwarden.png"
|
||||
image="/static/images/cards/vaultwarden.png"
|
||||
title="Vaultwarden"
|
||||
color="#fff"
|
||||
description="Unofficial Bitwarden password manager compatible server."
|
||||
className="row-start-2 text-black"
|
||||
link="https://vault.wah.su"
|
||||
/>
|
||||
<BentoCard
|
||||
type="big"
|
||||
logo="/static/images/logos/immich.png"
|
||||
image="/static/images/cards/immich.png"
|
||||
title="Immich"
|
||||
color="#000"
|
||||
description="Platform for managing and browsing your photos. Privacy-Friendly Google Photos alternative."
|
||||
className="row-start-2"
|
||||
link="https://photos.wah.su"
|
||||
/>
|
||||
<BentoCard
|
||||
logo="/static/images/logos/linkwarden.png"
|
||||
image="/static/images/cards/linkwarden.png"
|
||||
title="Linkwarden"
|
||||
color="#111827"
|
||||
description="Bookmark manager to collect, organize, and preserve webpages."
|
||||
className="row-[4]"
|
||||
link="https://links.wah.su"
|
||||
/>
|
||||
<Footer className="col-span-full col-start-2" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
src/templates/BentoCards/BentoCard.tsx
Normal file
31
src/templates/BentoCards/BentoCard.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import BentoCardSmall from "./Small";
|
||||
import BentoCardNormal from "./Normal";
|
||||
import BentoCardBig from "./Big";
|
||||
import BentoCardLarge from "./Large";
|
||||
|
||||
export interface BentoCardProps {
|
||||
type?: "small" | "normal" | "big" | "large";
|
||||
color: string;
|
||||
image?: string;
|
||||
logo: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export default function BentoCard(props: BentoCardProps) {
|
||||
if (!props.type || props.type == "normal") {
|
||||
return <BentoCardNormal {...props} />;
|
||||
}
|
||||
if (props.type == "small") {
|
||||
return <BentoCardSmall {...props} />;
|
||||
}
|
||||
if (props.type == "big") {
|
||||
return <BentoCardBig {...props} />;
|
||||
}
|
||||
if (props.type == "large") {
|
||||
return <BentoCardLarge {...props} />;
|
||||
}
|
||||
return <div>NOTHING</div>;
|
||||
}
|
||||
77
src/templates/BentoCards/Big.tsx
Normal file
77
src/templates/BentoCards/Big.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import type { BentoCardProps } from "./BentoCard";
|
||||
|
||||
export default function BentoCardBig({
|
||||
color,
|
||||
image,
|
||||
logo,
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
link,
|
||||
}: BentoCardProps) {
|
||||
if (link) {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
className={`block relative bg-[var(--color)] row-span-2 ${className} overflow-hidden p-2 gap-4 rounded-xl border flex flex-col items-end justify-center border-transparent hover:border-[#FF851A] transition-colors`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
{image ? (
|
||||
<>
|
||||
<img
|
||||
className="absolute inset-0 object-cover w-full h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[50%] "
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
></div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="relative flex justify-end">
|
||||
<div className="ml-auto flex flex-col gap-1 items-center justify-center">
|
||||
<img src={logo} alt="" className="h-8" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="relative sometype-mono-regular max-w-[75%] text-right ">
|
||||
{description}
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={`block relative bg-[var(--color)] row-span-2 ${className} overflow-hidden p-2 gap-4 rounded-xl border flex flex-col items-end justify-center border-transparent hover:border-[#FF851A] transition-colors`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
{image ? (
|
||||
<>
|
||||
<img
|
||||
className="absolute inset-0 object-cover w-full h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[50%] "
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
></div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="relative flex justify-end">
|
||||
<div className="ml-auto flex flex-col gap-1 items-center justify-center">
|
||||
<img src={logo} alt="" className="h-8" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="relative sometype-mono-regular max-w-[75%] text-right ">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
src/templates/BentoCards/Large.tsx
Normal file
77
src/templates/BentoCards/Large.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import type { BentoCardProps } from "./BentoCard";
|
||||
|
||||
export default function BentoCardLarge({
|
||||
color,
|
||||
image,
|
||||
logo,
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
link,
|
||||
}: BentoCardProps) {
|
||||
if (link) {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
className={`block relative bg-[var(--color)] row-span-3 col-span-2 ${className} overflow-hidden p-2 gap-4 rounded-xl border flex flex-col items-end justify-center border-transparent hover:border-[#FF851A] transition-colors`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
{image ? (
|
||||
<>
|
||||
<img
|
||||
className="absolute inset-0 object-cover w-full h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
></div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="relative flex justify-end">
|
||||
<div className="ml-auto flex flex-col gap-1 items-center justify-center">
|
||||
<img src={logo} alt="" className="h-12" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="relative sometype-mono-regular max-w-[60%] text-right ">
|
||||
{description}
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={`block relative bg-[var(--color)] row-span-3 col-span-2 ${className} overflow-hidden p-2 gap-4 rounded-xl border flex flex-col items-end justify-center border-transparent hover:border-[#FF851A] transition-colors`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
{image ? (
|
||||
<>
|
||||
<img
|
||||
className="absolute inset-0 object-cover w-full h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
></div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="relative flex justify-end">
|
||||
<div className="ml-auto flex flex-col gap-1 items-center justify-center">
|
||||
<img src={logo} alt="" className="h-12" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="relative sometype-mono-regular max-w-[60%] text-right ">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
src/templates/BentoCards/Normal.tsx
Normal file
77
src/templates/BentoCards/Normal.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import type { BentoCardProps } from "./BentoCard";
|
||||
|
||||
export default function BentoCardNormal({
|
||||
color,
|
||||
image,
|
||||
logo,
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
link,
|
||||
}: BentoCardProps) {
|
||||
if (link) {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
className={`block relative w-full h-full bg-[var(--color)] aspect-video ${className} overflow-hidden p-2 rounded-xl border border-transparent hover:border-[#FF851A] transition-colors`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
{image ? (
|
||||
<>
|
||||
<img
|
||||
className="absolute inset-0 object-cover object-center w-full h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
></div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="relative flex justify-end">
|
||||
<div className="ml-auto flex flex-col gap-1 items-center justify-center">
|
||||
<img src={logo} alt="" className="h-8" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="relative sometype-mono-regular text-right">{description}</p>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={`block relative w-full h-full bg-[var(--color)] aspect-video ${className} overflow-hidden p-2 rounded-xl`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
{image ? (
|
||||
<>
|
||||
<img
|
||||
className="absolute inset-0 object-cover object-center w-full h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
></div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="relative flex justify-end">
|
||||
<div className="ml-auto flex flex-col gap-1 items-center justify-center">
|
||||
<img src={logo} alt="" className="h-8" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="relative sometype-mono-regular text-right">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
src/templates/BentoCards/Small.tsx
Normal file
31
src/templates/BentoCards/Small.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import type { BentoCardProps } from "./BentoCard";
|
||||
|
||||
export default function BentoCardSmall({
|
||||
color,
|
||||
logo,
|
||||
title,
|
||||
className,
|
||||
link
|
||||
}: BentoCardProps) {
|
||||
if (link) {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
className={`block w-[114px] h-[114px] bg-[var(--color)] aspect-square ${className} p-2 rounded-xl flex flex-col gap-2 items-center justify-center border border-transparent hover:border-[#FF851A] transition-colors`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
<img src={logo} alt="" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={`block w-[114px] h-[114px] bg-[var(--color)] aspect-square ${className} p-2 rounded-xl flex flex-col gap-2 items-center justify-center`}
|
||||
style={{ "--color": color } as React.CSSProperties}
|
||||
>
|
||||
<img src={logo} alt="" />
|
||||
<p className="ubuntu-mono-regular text-lg">{title}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
src/templates/Footer.tsx
Normal file
11
src/templates/Footer.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
interface FooterProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Footer({ className }: FooterProps) {
|
||||
return (
|
||||
<div
|
||||
className={`bg-[#3B0D25] w-full h-full ${className} rounded-xl p-8 flex items-center justify-center gap-8`}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
19
src/templates/Title.tsx
Normal file
19
src/templates/Title.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export default function Title() {
|
||||
return (
|
||||
<div className=" min-h-[438px] flex gap-4 px-8 flex-col-reverse xl:flex-row items-center justify-center">
|
||||
<div className="flex items-center justify-center gap-4 flex-col max-w-[590px]">
|
||||
<h1 className="text-[#FF851A] text-[64px] md:text-[128px] ubuntu-mono-regular leading-none">
|
||||
WAH.su<span className="text-[32px] md:text-[48px]">(d0)</span>
|
||||
</h1>
|
||||
<p className="text-white ubuntu-mono-regular text-[24px] md:text-[32px] tracking-tighter md:tracking-normal leading-none">
|
||||
A tech non-company with a whole lot of wah—100% tech, 100%
|
||||
non-company, 200% wah!
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 grid-rows-1 flex-shrink-0 sm:flex-shrink-1 py-14 md:py-0">
|
||||
<img className="col-[1] row-[1] scale-150 max-h-[512px] xl:max-h-none md:scale-100 -z-10" src="/static/images/card-blur.png" alt=""></img>
|
||||
<img className="col-[1] row-[1] scale-140 md:scale-95 lg:scale-90 xl:scale-95 xl:mt-2 max-h-[512px] xl:max-h-none" src="/static/images/card.png" alt="Sleeping red panda on the tree"></img>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/watch.ts
25
src/watch.ts
|
|
@ -10,7 +10,6 @@ import { WebSocketServer } from "ws";
|
|||
let triggered = 0;
|
||||
const delay = 1000;
|
||||
|
||||
let SIGINTCount = 0;
|
||||
let WSclients: any[] = [];
|
||||
|
||||
const log = new Log();
|
||||
|
|
@ -40,11 +39,12 @@ function onChange() {
|
|||
}
|
||||
|
||||
function onExit() {
|
||||
fs.rmdirSync("out", { recursive: true });
|
||||
fs.rmdirSync(path.join(__dirname, "../out"), { recursive: true });
|
||||
log.info("Deleted 'out' folder");
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const watcher = chokidar.watch(["./src", "./stickerpacks", "./static"], {
|
||||
const watcher = chokidar.watch(["./src", "./static"], {
|
||||
ignored: (filePath, stats) => filePath.endsWith("watch.ts"),
|
||||
atomic: true,
|
||||
awaitWriteFinish: true,
|
||||
|
|
@ -65,20 +65,8 @@ function startServerWithRebuild() {
|
|||
});
|
||||
|
||||
process.on("SIGINT", () => {
|
||||
SIGINTCount += 1;
|
||||
if (WSclients.length > 0) {
|
||||
async function _closeWS() {
|
||||
WSclients.forEach(async (ws) => await ws.close());
|
||||
}
|
||||
_closeWS();
|
||||
}
|
||||
if (SIGINTCount == 1) {
|
||||
log.info("Gracefully shutdown and cleanup...");
|
||||
onExit();
|
||||
} else if (SIGINTCount >= 3) {
|
||||
log.info("Received 3+ SIGINT signals. Force exit...");
|
||||
process.exit(0);
|
||||
}
|
||||
log.info("Gracefully shutdown and cleanup...");
|
||||
onExit();
|
||||
});
|
||||
|
||||
app.use(express.static(folder));
|
||||
|
|
@ -100,6 +88,9 @@ function startServerWithRebuild() {
|
|||
onChange();
|
||||
});
|
||||
});
|
||||
app.on("close", () => {
|
||||
log.info("Server closed");
|
||||
});
|
||||
}
|
||||
|
||||
startServerWithRebuild();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue