refactor: optimize fonts, images

2025-02-21 16:07:08 +03:00 · 2025-02-21 16:07:08 +03:00 · 0749c30db0
commit 0749c30db0
parent 7b81f9590d
45 changed files with 40 additions and 36 deletions
--- a/src/app.html
+++ b/src/app.html
@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/icons/gaze_site.png" />
+		<link rel="icon" href="%sveltekit.assets%/icons/gaze_site.webp" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -21,10 +21,10 @@
 	}

 	const menuItems: MenuItem[] = [
-		{ href: '', name: 'home', iconUri: '/icons/home.png' },
-		{ href: 'entries', name: 'entries', iconUri: '/icons/entries.png' },
-		{ href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.png' },
-		{ href: 'about', name: 'about', iconUri: '/icons/about.png' }
+		{ href: '', name: 'home', iconUri: '/icons/home.webp' },
+		{ href: 'entries', name: 'entries', iconUri: '/icons/entries.webp' },
+		{ href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.webp' },
+		{ href: 'about', name: 'about', iconUri: '/icons/about.webp' }
 	];

 	$: routeComponents = data.route.split('/');
@ -49,7 +49,7 @@
 	<title>{title}</title>
 	<meta property="og:site_name" content="gaze.systems" />
 	<meta property="og:url" content="https://gaze.systems/" />
-	<meta property="og:image" content="https://gaze.systems/icons/gaze_website.png" />
+	<meta property="og:image" content="https://gaze.systems/icons/gaze_website.webp" />
 </svelte:head>

 <div
@ -155,7 +155,7 @@
 				{@const highlight = isRoute(item.href)}
 				<NavButton {highlight} {...item} />
 				{#if doAddPostItem && menuIdx == 1}
-					<NavButton highlight name={routeComponents[2]} href={data.route.slice(1)} iconUri='/icons/entry.png'/>
+					<NavButton highlight name={routeComponents[2]} href={data.route.slice(1)} iconUri='/icons/entry.webp'/>
 				{/if}
 			{/each}
 			<div class="hidden md:block grow" />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -20,7 +20,7 @@

 <div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
 	<div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto">
-		<Window title="readme?" iconUri="/icons/question.png" removePadding>
+		<Window title="readme?" iconUri="/icons/question.webp" removePadding>
 			<div class="flex flex-col p-1.5 gap-1.5 prose prose-ralsei prose-img:m-0 leading-none">
 				<div
 					class="flex flex-row gap-3 mx-auto bg-ralsei-black bg-opacity-30 overflow-hidden"
@ -44,7 +44,7 @@
 					<div
 						class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black bg-opacity-30"
 					>
-					<img class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]" src="/pfp-iojkqpwerojnasduijf.png" alt="my character" title="hi ;)"/>
+					<img class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]" src="/pfp-iojkqpwerojnasduijf.webp" alt="my character" title="hi ;)"/>
 					</div>
 					<div
 						class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black bg-opacity-30"
@ -99,7 +99,7 @@
 		</Window>
 	</div>
 	<div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto w-full md:w-fit place-items-end">
-		<Window title="links!" iconUri="/icons/contact.png">
+		<Window title="links!" iconUri="/icons/contact.webp">
 			<div class="prose prose-ralsei prose-ul:leading-[1.1rem] prose-headings:leading-none">
 				<ul>
 					<li>discord: yusdacra</li>
@ -176,7 +176,7 @@
 					<img
 						class="border-4 w-16 h-16 p-2"
 						style="border-style: none double none none; image-rendering: pixelated;"
-						src="/icons/cd_audio.png"
+						src="/icons/cd_audio.webp"
 					/>
 				{/if}
 				<div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">
--- a/src/routes/entries/+layout.server.ts
+++ b/src/routes/entries/+layout.server.ts
--- a/src/routes/entries/+page.svelte
+++ b/src/routes/entries/+page.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 	import Window from '../../components/window.svelte';
-	import type { PostData } from './+layout';
+	import type { PostData } from './+layout.server.js';
 	import LogPage from '../log/+page.svelte';

 	export let data;
@ -11,7 +11,7 @@
 <div class="mx-auto md:max-w-fit flex flex-col-reverse md:flex-row gap-y-4 gap-x-16">
 	<div class="flex flex-col gap-y-4">
 		{#each posts as post}
-		<Window title={post.metadata.title} iconUri='/icons/entry.png'>
+		<Window title={post.metadata.title} iconUri='/icons/entry.webp'>
 			<a
 				href="/entries/{post.path}"
 				title="cd /entries/{post.path}"
--- a/src/routes/entries/_layout.svelte
+++ b/src/routes/entries/_layout.svelte
@ -18,7 +18,7 @@
 </svelte:head>

 <article class="mx-auto max-w-fit flex flex-wrap lg:flex-nowrap gap-4 h-entry">
-	<Window {title} iconUri="/icons/entry.png" entry>
+	<Window {title} iconUri="/icons/entry.webp" entry>
 		<div class="prose prose-ralsei max-w-[80ch] e-content">
 			<slot />
 		</div>
--- a/src/routes/entries/_rss/+server.ts
+++ b/src/routes/entries/_rss/+server.ts
@ -1,5 +1,5 @@
 import { PUBLIC_BASE_URL } from '$env/static/public';
-import { _allPosts, type PostData } from '../+layout.ts';
+import { _allPosts, type PostData } from '../+layout.server.ts';

 const entriesUrl = `${PUBLIC_BASE_URL}/entries`;

--- a/src/routes/guestbook/+page.svelte
+++ b/src/routes/guestbook/+page.svelte
@ -15,7 +15,7 @@
 </script>

 <div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4">
-	<Window title="guestbook" style="ml-auto" iconUri="/icons/guestbook.png">
+	<Window title="guestbook" style="ml-auto" iconUri="/icons/guestbook.webp">
 		<div class="flex flex-col gap-1 max-w-[50ch] leading-6">
 			<div class="prose prose-ralsei leading-6 entry p-2">
 				<p>hia, here is the guestbook if you wanna post anything :)</p>
@ -57,7 +57,7 @@
 			</form>
 		</div>
 	</Window>
-	<Window id='guestbookentries' style="mr-auto" title="entries" iconUri="/icons/entries.png" removePadding>
+	<Window id='guestbookentries' style="mr-auto" title="entries" iconUri="/icons/entries.webp" removePadding>
 		<div class="flex flex-col gap-2 md:gap-4 2xl:w-[60ch]">
 			{#if data.getRatelimited}
 				<p class="text-error">
--- a/src/routes/lateststuff.md
+++ b/src/routes/lateststuff.md
@ -6,4 +6,4 @@ layout = false

 currently working on a game under the name `packet.runner`, read some very WIP stuff about it [here](https://doc.gaze.systems/LsE08EU7QOSKm7xps_treA).

-![WIP character model screenshot](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:dfl62fgb7wtjj3fcbb72naae/bafkreig2rk5tbwp4ncsbuw67u66pv5tvimfv47pusubnkcnao6fowbltlu@jpeg)
+![WIP character model screenshot](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:dfl62fgb7wtjj3fcbb72naae/bafkreig2rk5tbwp4ncsbuw67u66pv5tvimfv47pusubnkcnao6fowbltlu@webp)
--- a/src/styles/app.css
+++ b/src/styles/app.css
@ -8,7 +8,7 @@
    :root {
        @apply font-sans-serif bg-ralsei-black text-ralsei-white;
        @apply prose-code:font-monospace prose-headings:font-monospace;
-        cursor: url('/icons/gaze_closed.png'), default;
+        cursor: url('/icons/gaze_closed.webp'), default;
        scrollbar-color: theme(colors.ralsei.green.dark) transparent;
    }

@ -76,7 +76,7 @@

    a,button,input[type=submit] {
        @apply text-shadow-green;
-        cursor: url('/icons/gaze.png'), pointer;
+        cursor: url('/icons/gaze.webp'), pointer;
    }

    @font-face {
@ -87,25 +87,29 @@

    @font-face {
        font-family: 'Comic Sans';
-        font-style: normal;
-        font-display: swap;
-        src: url('/fonts/comic.woff2') format('woff2');
-    }
-
-    @font-face {
-        font-family: 'Comic Sans';
-        font-style: normal;
-        font-weight: bold;
-        font-display: swap;
-        src: url('/fonts/comicbd.woff2') format('woff2');
-    }
-
-    @font-face {
-        font-family: 'Comic Sans';
+        src: url('/fonts/subset-ComicSansMS-Italic.woff2') format('woff2');
+        font-weight: normal;
        font-style: italic;
        font-display: swap;
-        src: url('/fonts/comici.woff2') format('woff2');
    }
+    
+    @font-face {
+        font-family: 'Comic Sans';
+        src: url('/fonts/subset-ComicSansMS.woff2') format('woff2');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+    
+    @font-face {
+        font-family: 'Comic Sans';
+        src: url('/fonts/subset-ComicSansMS-Bold.woff2') format('woff2');
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+    }
+    
+    

    .animate-squiggle {
        animation: squigglevision 0.3s infinite;
--- a/static/88x31.gif
+++ b/static/88x31.gif
--- a/static/88x31_midnight.gif
+++ b/static/88x31_midnight.gif
--- a/static/88x31_sunrise.gif
+++ b/static/88x31_sunrise.gif
--- a/static/fonts/comic.woff2
+++ b/static/fonts/comic.woff2
--- a/static/fonts/comicbd.woff2
+++ b/static/fonts/comicbd.woff2
--- a/static/fonts/comici.woff2
+++ b/static/fonts/comici.woff2
--- a/static/fonts/subset-ComicSansMS-Bold.woff2
+++ b/static/fonts/subset-ComicSansMS-Bold.woff2
--- a/static/fonts/subset-ComicSansMS-Italic.woff2
+++ b/static/fonts/subset-ComicSansMS-Italic.woff2
--- a/static/fonts/subset-ComicSansMS.woff2
+++ b/static/fonts/subset-ComicSansMS.woff2
--- a/static/icons/about.png
+++ b/static/icons/about.png
--- a/static/icons/about.webp
+++ b/static/icons/about.webp
--- a/static/icons/cd_audio.png
+++ b/static/icons/cd_audio.png
--- a/static/icons/cd_audio.webp
+++ b/static/icons/cd_audio.webp
--- a/static/icons/contact.png
+++ b/static/icons/contact.png
--- a/static/icons/contact.webp
+++ b/static/icons/contact.webp
--- a/static/icons/entries.png
+++ b/static/icons/entries.png
--- a/static/icons/entries.webp
+++ b/static/icons/entries.webp
--- a/static/icons/entry.png
+++ b/static/icons/entry.png
--- a/static/icons/entry.webp
+++ b/static/icons/entry.webp
--- a/static/icons/gaze.png
+++ b/static/icons/gaze.png
--- a/static/icons/gaze.webp
+++ b/static/icons/gaze.webp
--- a/static/icons/gaze_closed.png
+++ b/static/icons/gaze_closed.png
--- a/static/icons/gaze_closed.webp
+++ b/static/icons/gaze_closed.webp
--- a/static/icons/gaze_site.png
+++ b/static/icons/gaze_site.png
--- a/static/icons/gaze_site.webp
+++ b/static/icons/gaze_site.webp
--- a/static/icons/guestbook.png
+++ b/static/icons/guestbook.png
--- a/static/icons/guestbook.webp
+++ b/static/icons/guestbook.webp
--- a/static/icons/home.png
+++ b/static/icons/home.png
--- a/static/icons/home.webp
+++ b/static/icons/home.webp
--- a/static/icons/question.png
+++ b/static/icons/question.png
--- a/static/icons/question.webp
+++ b/static/icons/question.webp
--- a/static/icons/warning.png
+++ b/static/icons/warning.png
--- a/static/icons/warning.webp
+++ b/static/icons/warning.webp
--- a/static/pfp-iojkqpwerojnasduijf.png
+++ b/static/pfp-iojkqpwerojnasduijf.png
--- a/static/pfp-iojkqpwerojnasduijf.webp
+++ b/static/pfp-iojkqpwerojnasduijf.webp