ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

new fonts and full colour theme

Browse Source
This commit is contained in:
Oliver Bryan
2026-02-05 12:22:17 +00:00
parent c47d8ac516
commit 8f3633d11b
2 changed files with 84 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.tsx
View File

@@ -1,4 +1,4 @@
import { Button } from "@/components/ui/button"; import { ThemeToggle } from "@/components/theme-toggle";
function App() { function App() {
return ( return (
@@ -7,13 +7,10 @@ function App() {
"min-h-screen flex flex-col items-center justify-center gap-4 text-2xl" "min-h-screen flex flex-col items-center justify-center gap-4 text-2xl"
} }
> >
<h1 className={"font-avara text-4xl"}>Oliver Bryan</h1> <h1 className={"picnic text-8xl"}>Oliver Bryan</h1>
<Button variant={"outline"} size={"sm"} className=""> <ThemeToggle />
test
</Button>
</div> </div>
); );
} }
export default App; export default App;

153
src/index.css
View File

@@ -1,5 +1,6 @@
@import url("https://fonts.ob248.com/avara");
@import url("https://fonts.ob248.com/commitmono"); @import url("https://fonts.ob248.com/commitmono");
@import url("https://fonts.ob248.com/ft88");
@import url("https://fonts.ob248.com/picnic");
@import "tailwindcss"; @import "tailwindcss";
@@ -8,40 +9,38 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
--bg: "#000000";
--fg: "#ffffff";
--radius: 0.625rem; --radius: 0.625rem;
--background: oklch(1 0 0); --background: #ded6c4;
--foreground: oklch(0.145 0 0); --foreground: #2e2b23;
--card: oklch(1 0 0); --card: #efe6d4;
--card-foreground: oklch(0.145 0 0); --card-foreground: #2e2b23;
--popover: oklch(1 0 0); --popover: #f5ecdb;
--popover-foreground: oklch(0.145 0 0); --popover-foreground: #2e2b23;
--primary: oklch(0.205 0 0); --primary: #5f4a33;
--primary-foreground: oklch(0.985 0 0); --primary-foreground: #f6efe3;
--secondary: oklch(0.97 0 0); --secondary: #e5dccb;
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: #3a3329;
--muted: oklch(0.97 0 0); --muted: #e0d7c7;
--muted-foreground: oklch(0.556 0 0); --muted-foreground: #6e6457;
--accent: oklch(0.97 0 0); --accent: #df7126;
--accent-foreground: oklch(0.205 0 0); --accent-foreground: #5f361b;
--destructive: oklch(0.577 0.245 27.325); --destructive: #b8482b;
--border: oklch(0.922 0 0); --border: #cbbfae;
--input: oklch(0.922 0 0); --input: #d8cfbd;
--ring: oklch(0.708 0 0); --ring: #8f7b60;
--chart-1: oklch(0.646 0.222 41.116); --chart-1: #c6662a;
--chart-2: oklch(0.6 0.118 184.704); --chart-2: #7a6a4b;
--chart-3: oklch(0.398 0.07 227.392); --chart-3: #8f4c2a;
--chart-4: oklch(0.828 0.189 84.429); --chart-4: #a4813a;
--chart-5: oklch(0.769 0.188 70.08); --chart-5: #4f3f2b;
--sidebar: oklch(0.985 0 0); --sidebar: #e8dfcf;
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: #2e2b23;
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: #5f4a33;
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: #f6efe3;
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: #e1c9a8;
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: #3a3329;
--sidebar-border: oklch(0.922 0 0); --sidebar-border: #cbbfae;
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: #8f7b60;
} }
@theme inline { @theme inline {
@@ -86,37 +85,37 @@
} }
.dark { .dark {
--background: oklch(0.145 0 0); --background: #1b1813;
--foreground: oklch(0.985 0 0); --foreground: #f6efe3;
--card: oklch(0.205 0 0); --card: #242019;
--card-foreground: oklch(0.985 0 0); --card-foreground: #f6efe3;
--popover: oklch(0.205 0 0); --popover: #221e17;
--popover-foreground: oklch(0.985 0 0); --popover-foreground: #f6efe3;
--primary: oklch(0.922 0 0); --primary: #e1c9a8;
--primary-foreground: oklch(0.205 0 0); --primary-foreground: #2a241b;
--secondary: oklch(0.269 0 0); --secondary: #2f2a21;
--secondary-foreground: oklch(0.985 0 0); --secondary-foreground: #f1e9dc;
--muted: oklch(0.269 0 0); --muted: #2b261e;
--muted-foreground: oklch(0.708 0 0); --muted-foreground: #b8ad9d;
--accent: oklch(0.269 0 0); --accent: #df7126;
--accent-foreground: oklch(0.985 0 0); --accent-foreground: #2a241b;
--destructive: oklch(0.704 0.191 22.216); --destructive: #cc5a3a;
--border: oklch(1 0 0 / 10%); --border: #3b3328;
--input: oklch(1 0 0 / 15%); --input: #3f372c;
--ring: oklch(0.556 0 0); --ring: #9d8568;
--chart-1: oklch(0.488 0.243 264.376); --chart-1: #df7126;
--chart-2: oklch(0.696 0.17 162.48); --chart-2: #c39a55;
--chart-3: oklch(0.769 0.188 70.08); --chart-3: #a5633a;
--chart-4: oklch(0.627 0.265 303.9); --chart-4: #8a6a3a;
--chart-5: oklch(0.645 0.246 16.439); --chart-5: #f0c27b;
--sidebar: oklch(0.205 0 0); --sidebar: #211d17;
--sidebar-foreground: oklch(0.985 0 0); --sidebar-foreground: #f6efe3;
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary: #e1c9a8;
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: #2a241b;
--sidebar-accent: oklch(0.269 0 0); --sidebar-accent: #2f291f;
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: #f1e9dc;
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: #3b3328;
--sidebar-ring: oklch(0.556 0 0); --sidebar-ring: #9d8568;
} }
@layer base { @layer base {
@@ -131,16 +130,26 @@
body { body {
font-family: "Commit Mono", monospace; font-family: "Commit Mono", monospace;
font-weight: 400; font-weight: 400;
background-color: var(--bg); background-color: var(--background);
color: var(--fg); color: var(--foreground);
} }
.font-avara { .commitmono {
font-family: "Avara", serif; font-family: "Commit Mono", monospace;
font-weight: 400;
}
.ft88 {
font-family: "FT88", serif;
font-weight: 80;
}
.ft88-bold {
font-family: "FT88", serif;
font-weight: 200; font-weight: 200;
} }
.font-avara-bold { .picnic {
font-family: "Avara", serif; font-family: "PicNic", serif;
font-weight: 205; font-weight: 400;
} }