diff --git a/package.json b/package.json index f412e04..a5f4697 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "@unocss/preset-icons": "^0.48.4", + "@unocss/preset-web-fonts": "^0.48.4", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte3": "^4.0.0", diff --git a/src/lib/style.css b/src/lib/style.css index c921910..4ea4d9f 100644 --- a/src/lib/style.css +++ b/src/lib/style.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.co/css2?family=Open+Sans&display=swap'); - :root { --purple-color: #7a00ec; --brighter-purple-color: #9d41f3; @@ -42,7 +40,6 @@ html { .h1dance { margin-top: 0; margin: 0; - color: var(--brighter-purple-color); } .bg { @@ -53,7 +50,6 @@ body { background-repeat: no-repeat; background-size: cover; height: 100%; - color: var(--brighter-purple-color); margin: 0px; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; @@ -90,21 +86,15 @@ body { border-radius: 50%; transition: all 0.5s ease-in-out; margin-bottom: -20px; - color: var(--purple-color); - filter:hue-rotate(0deg); } #profilepicture:hover { height: 125px; width: 125px; - color: var(--glowish-yellow); - animation: rainbow 1s steps(36) infinite; } .middle { - position: absolute; - transform: translate(-50%, -50%); text-align: center; top: 50%; left: 50%; @@ -141,55 +131,18 @@ img { text-align: center; } -@media only screen and (max-width: 600px) { - body { - font-size: calc(9px + 1vmin); - background-image: url('/images/BG_FHD_darker_mb.png'); - } - .pfp-holder { - margin-top: -50%; - margin-left: 0%; - position: static; - } - img { - padding: 6px; - } -} - - - - - -#backmob { - object-fit: fill; - overflow: hidden; - height: 100%; - animation: rainbow 20s steps(120) infinite; -} - - -.banner { - padding: 10px; - text-align: center; - background: #6e0000; - color: white; - font-size: 15px; - animation: fadeInOut linear 5s infinite; -} - -.banner:hover { - animation: none; -} - -@keyframes fadeInOut { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; + + +@media (prefers-color-scheme: dark) { + html { + --primary: #151515; + --secondary: #252525; + --tertiary: #353535; + --text: #ffffffde; + --grey: #5454547a; + --alt: #333; + --alt-text: #ddd; + color-scheme: dark; } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 844fdcb..0627323 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,7 +7,7 @@ -
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a6b608a..62b59c4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,34 +1,24 @@ - - + +
- -
+
- -

{data.name}

-

{@html data.description}

+

{data.name}

+

{@html data.description}

-
+
- - - - + + + +
-
-
- Bio | Projects
-
-

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 0c3d811..8f8b0c9 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -5,8 +5,8 @@
-
-
-

h

+
+
+

About

\ No newline at end of file diff --git a/unocss.config.ts b/unocss.config.ts index 0479810..57d8704 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -4,7 +4,8 @@ import { presetTypography, transformerVariantGroup, transformerDirectives, - presetWind + presetWind, + presetWebFonts } from "unocss"; import { extractorSvelte } from "unocss"; @@ -24,6 +25,14 @@ export default defineConfig({ presetWind({ dark: "class" /* use dark: "class" when adding manual JS*/ + }), + presetWebFonts({ + provider: 'bunny', + fonts: { + sans: 'Outfit', + mono: ['Fira Code'], + + } }) ], diff --git a/vite.config.ts b/vite.config.ts index cd19efd..5ab06d5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,6 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite'; import type { UserConfig } from 'vite'; import UnoCSS from 'unocss/vite'; import presetIcons from '@unocss/preset-icons'; +import presetWebFonts from '@unocss/preset-web-fonts' const config: UserConfig = { plugins: [sveltekit(), UnoCSS(),