seth/cdn.how
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add font-face definitions and improve CSS styling for links and scrollbar

Browse source
This commit is contained in:
Seth 2025-01-20 16:17:58 -05:00
parent 876d018239
commit 469db4d154
No known key found for this signature in database
GPG key ID: 8B7A2C60CDF65CAC
6 changed files with 105 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
build.ts
View file

@ -7,7 +7,10 @@ const build = async (minify: boolean) => {
experimentalCss: true, experimentalCss: true,
splitting: true, splitting: true,
sourcemap: "linked", sourcemap: "linked",
minify minify,
loader: {
".woff2": "file",
}
}); });
const end = Date.now(); const end = Date.now();
console.log("Did build", built.success, built.logs); console.log("Did build", built.success, built.logs);

2
index.ts
View file

@ -3,7 +3,7 @@ import { watch } from "node:fs";
const build = async () => { const build = async () => {
const build = await import("./build"); const build = await import("./build");
build.default(false); await build.default(false);
} }
watch(import.meta.dir, { recursive: true }, async (_, file) => { watch(import.meta.dir, { recursive: true }, async (_, file) => {

61
src/Font.css Normal file
View file

@ -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;
}

89
src/components/App.css
View file

@ -1,92 +1,3 @@
@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 { .container {
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
overflow: scroll; overflow: scroll;

13
src/components/IconAnchor/IconAnchor.css
View file

@ -1,3 +1,16 @@
.IconAnchor { .IconAnchor {
margin: 5px; 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 */
}

26
src/index.css
View file

@ -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;
}