From 469db4d154cccd3b0fe007a732ee8261003ab348 Mon Sep 17 00:00:00 2001 From: wont-stream Date: Mon, 20 Jan 2025 16:17:58 -0500 Subject: [PATCH] Add font-face definitions and improve CSS styling for links and scrollbar --- build.ts | 5 +- index.ts | 2 +- src/Font.css | 61 ++++++++++++++++ src/components/App.css | 91 +----------------------- src/components/IconAnchor/IconAnchor.css | 13 ++++ src/index.css | 26 ++++++- 6 files changed, 105 insertions(+), 93 deletions(-) create mode 100644 src/Font.css diff --git a/build.ts b/build.ts index 8096f71..70527ac 100644 --- a/build.ts +++ b/build.ts @@ -7,7 +7,10 @@ const build = async (minify: boolean) => { experimentalCss: true, splitting: true, sourcemap: "linked", - minify + minify, + loader: { + ".woff2": "file", + } }); const end = Date.now(); console.log("Did build", built.success, built.logs); diff --git a/index.ts b/index.ts index 6a294aa..701ef44 100644 --- a/index.ts +++ b/index.ts @@ -3,7 +3,7 @@ import { watch } from "node:fs"; const build = async () => { const build = await import("./build"); - build.default(false); + await build.default(false); } watch(import.meta.dir, { recursive: true }, async (_, file) => { diff --git a/src/Font.css b/src/Font.css new file mode 100644 index 0000000..e6ef06b --- /dev/null +++ b/src/Font.css @@ -0,0 +1,61 @@ +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/Black.woff2") format("woff2"); + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/BlackItalic.woff2") format("woff2"); + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/Bold.woff2") format("woff2"); + font-style: normal; + font-weight: 700; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/BoldItalic.woff2") format("woff2"); + font-style: italic; + font-weight: 700; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/Book.woff2") format("woff2"); + font-style: normal; + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/BookItalic.woff2"); + font-style: italic; + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/Medium.woff2"); + font-style: normal; + font-weight: 500; + font-display: swap; +} + +@font-face { + font-family: "Circular Std"; + src: url("../../public/circularstd/MediumItalic.woff2"); + font-style: italic; + font-weight: 500; + font-display: swap; +} \ No newline at end of file diff --git a/src/components/App.css b/src/components/App.css index 7bafe33..f71f0dd 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -1,94 +1,5 @@ -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/Black.woff2") format("woff2"); - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/BlackItalic.woff2") format("woff2"); - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/Bold.woff2") format("woff2"); - font-style: normal; - font-weight: 700; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/BoldItalic.woff2") format("woff2"); - font-style: italic; - font-weight: 700; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/Book.woff2") format("woff2"); - font-style: normal; - font-weight: 400; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/BookItalic.woff2"); - font-style: italic; - font-weight: 400; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/Medium.woff2"); - font-style: normal; - font-weight: 500; - font-display: swap; -} - -@font-face { - font-family: "Circular Std"; - src: url("../../public/circularstd/MediumItalic.woff2"); - font-style: italic; - font-weight: 500; - font-display: swap; -} - -html, -body { - margin: 0; - padding: 0; - height: 100vh; - width: 100vw; - font-family: "Circular Std", sans-serif; - background-color: #111; - overflow: hidden; - scrollbar-width: thin; - scrollbar-color: #333 #222; -} - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: #222; -} - -::-webkit-scrollbar-thumb { - background-color: #333; - border-radius: 10px; -} - .container { scroll-snap-type: y mandatory; overflow: scroll; height: 100vh; -} +} \ No newline at end of file diff --git a/src/components/IconAnchor/IconAnchor.css b/src/components/IconAnchor/IconAnchor.css index 06238ea..2b0012e 100644 --- a/src/components/IconAnchor/IconAnchor.css +++ b/src/components/IconAnchor/IconAnchor.css @@ -1,3 +1,16 @@ .IconAnchor { margin: 5px; } + +a { + color: #DCDCDC; /* Warm orange for default link */ + text-decoration: none; /* Remove underline */ +} + +a:hover { + color: #808080; /* Brighter red-orange on hover */ +} + +a:active { + color: #A9A9A9; /* Darker orange when active */ +} diff --git a/src/index.css b/src/index.css index 2edaf35..b7e80a3 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,25 @@ -@import "modern-normalize"; +html, +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100vw; + background-color: #111; + overflow: hidden; + scrollbar-width: thin; + scrollbar-color: #333 #222; +} + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: #222; +} + +::-webkit-scrollbar-thumb { + background-color: #333; + border-radius: 10px; +}