refactor: optimize fonts, images · ptr.pet/endpoint@0749c30

+1 -1

src/app.html

··· 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 - <link rel="icon" href="%sveltekit.assets%/icons/gaze_site.png" /> 5 + <link rel="icon" href="%sveltekit.assets%/icons/gaze_site.webp" /> 6 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 7 %sveltekit.head% 8 8 </head>

+6 -6

src/routes/+layout.svelte

··· 21 21 } 22 22 23 23 const menuItems: MenuItem[] = [ 24 - { href: '', name: 'home', iconUri: '/icons/home.png' }, 25 - { href: 'entries', name: 'entries', iconUri: '/icons/entries.png' }, 26 - { href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.png' }, 27 - { href: 'about', name: 'about', iconUri: '/icons/about.png' } 24 + { href: '', name: 'home', iconUri: '/icons/home.webp' }, 25 + { href: 'entries', name: 'entries', iconUri: '/icons/entries.webp' }, 26 + { href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.webp' }, 27 + { href: 'about', name: 'about', iconUri: '/icons/about.webp' } 28 28 ]; 29 29 30 30 $: routeComponents = data.route.split('/'); ··· 49 49 <title>{title}</title> 50 50 <meta property="og:site_name" content="gaze.systems" /> 51 51 <meta property="og:url" content="https://gaze.systems/" /> 52 - <meta property="og:image" content="https://gaze.systems/icons/gaze_website.png" /> 52 + <meta property="og:image" content="https://gaze.systems/icons/gaze_website.webp" /> 53 53 </svelte:head> 54 54 55 55 <div ··· 155 155 {@const highlight = isRoute(item.href)} 156 156 <NavButton {highlight} {...item} /> 157 157 {#if doAddPostItem && menuIdx == 1} 158 - <NavButton highlight name={routeComponents[2]} href={data.route.slice(1)} iconUri='/icons/entry.png'/> 158 + <NavButton highlight name={routeComponents[2]} href={data.route.slice(1)} iconUri='/icons/entry.webp'/> 159 159 {/if} 160 160 {/each} 161 161 <div class="hidden md:block grow" />

+4 -4

src/routes/+page.svelte

··· 20 20 21 21 <div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card"> 22 22 <div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto"> 23 - <Window title="readme?" iconUri="/icons/question.png" removePadding> 23 + <Window title="readme?" iconUri="/icons/question.webp" removePadding> 24 24 <div class="flex flex-col p-1.5 gap-1.5 prose prose-ralsei prose-img:m-0 leading-none"> 25 25 <div 26 26 class="flex flex-row gap-3 mx-auto bg-ralsei-black bg-opacity-30 overflow-hidden" ··· 44 44 <div 45 45 class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black bg-opacity-30" 46 46 > 47 - <img class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]" src="/pfp-iojkqpwerojnasduijf.png" alt="my character" title="hi ;)"/> 47 + <img class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]" src="/pfp-iojkqpwerojnasduijf.webp" alt="my character" title="hi ;)"/> 48 48 </div> 49 49 <div 50 50 class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black bg-opacity-30" ··· 99 99 </Window> 100 100 </div> 101 101 <div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto w-full md:w-fit place-items-end"> 102 - <Window title="links!" iconUri="/icons/contact.png"> 102 + <Window title="links!" iconUri="/icons/contact.webp"> 103 103 <div class="prose prose-ralsei prose-ul:leading-[1.1rem] prose-headings:leading-none"> 104 104 <ul> 105 105 <li>discord: yusdacra</li> ··· 176 176 <img 177 177 class="border-4 w-16 h-16 p-2" 178 178 style="border-style: none double none none; image-rendering: pixelated;" 179 - src="/icons/cd_audio.png" 179 + src="/icons/cd_audio.webp" 180 180 /> 181 181 {/if} 182 182 <div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">

src/routes/entries/+layout.ts src/routes/entries/+layout.server.ts

+2 -2

src/routes/entries/+page.svelte

··· 1 1 <script lang="ts"> 2 2 import Window from '../../components/window.svelte'; 3 - import type { PostData } from './+layout'; 3 + import type { PostData } from './+layout.server.js'; 4 4 import LogPage from '../log/+page.svelte'; 5 5 6 6 export let data; ··· 11 11 <div class="mx-auto md:max-w-fit flex flex-col-reverse md:flex-row gap-y-4 gap-x-16"> 12 12 <div class="flex flex-col gap-y-4"> 13 13 {#each posts as post} 14 - <Window title={post.metadata.title} iconUri='/icons/entry.png'> 14 + <Window title={post.metadata.title} iconUri='/icons/entry.webp'> 15 15 <a 16 16 href="/entries/{post.path}" 17 17 title="cd /entries/{post.path}"

+1 -1

src/routes/entries/_layout.svelte

··· 18 18 </svelte:head> 19 19 20 20 <article class="mx-auto max-w-fit flex flex-wrap lg:flex-nowrap gap-4 h-entry"> 21 - <Window {title} iconUri="/icons/entry.png" entry> 21 + <Window {title} iconUri="/icons/entry.webp" entry> 22 22 <div class="prose prose-ralsei max-w-[80ch] e-content"> 23 23 <slot /> 24 24 </div>

+1 -1

src/routes/entries/_rss/+server.ts

··· 1 1 import { PUBLIC_BASE_URL } from '$env/static/public'; 2 - import { _allPosts, type PostData } from '../+layout.ts'; 2 + import { _allPosts, type PostData } from '../+layout.server.ts'; 3 3 4 4 const entriesUrl = `${PUBLIC_BASE_URL}/entries`; 5 5

+2 -2

src/routes/guestbook/+page.svelte

··· 15 15 </script> 16 16 17 17 <div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4"> 18 - <Window title="guestbook" style="ml-auto" iconUri="/icons/guestbook.png"> 18 + <Window title="guestbook" style="ml-auto" iconUri="/icons/guestbook.webp"> 19 19 <div class="flex flex-col gap-1 max-w-[50ch] leading-6"> 20 20 <div class="prose prose-ralsei leading-6 entry p-2"> 21 21 <p>hia, here is the guestbook if you wanna post anything :)</p> ··· 57 57 </form> 58 58 </div> 59 59 </Window> 60 - <Window id='guestbookentries' style="mr-auto" title="entries" iconUri="/icons/entries.png" removePadding> 60 + <Window id='guestbookentries' style="mr-auto" title="entries" iconUri="/icons/entries.webp" removePadding> 61 61 <div class="flex flex-col gap-2 md:gap-4 2xl:w-[60ch]"> 62 62 {#if data.getRatelimited} 63 63 <p class="text-error">

+1 -1

src/routes/lateststuff.md

··· 6 6 7 7 currently working on a game under the name `packet.runner`, read some very WIP stuff about it [here](https://doc.gaze.systems/LsE08EU7QOSKm7xps_treA). 8 8 9 - ![WIP character model screenshot](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:dfl62fgb7wtjj3fcbb72naae/bafkreig2rk5tbwp4ncsbuw67u66pv5tvimfv47pusubnkcnao6fowbltlu@jpeg) 9 + ![WIP character model screenshot](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:dfl62fgb7wtjj3fcbb72naae/bafkreig2rk5tbwp4ncsbuw67u66pv5tvimfv47pusubnkcnao6fowbltlu@webp)

+14 -10

src/styles/app.css

··· 8 8 :root { 9 9 @apply font-sans-serif bg-ralsei-black text-ralsei-white; 10 10 @apply prose-code:font-monospace prose-headings:font-monospace; 11 - cursor: url('/icons/gaze_closed.png'), default; 11 + cursor: url('/icons/gaze_closed.webp'), default; 12 12 scrollbar-color: theme(colors.ralsei.green.dark) transparent; 13 13 } 14 14 ··· 76 76 77 77 a,button,input[type=submit] { 78 78 @apply text-shadow-green; 79 - cursor: url('/icons/gaze.png'), pointer; 79 + cursor: url('/icons/gaze.webp'), pointer; 80 80 } 81 81 82 82 @font-face { ··· 87 87 88 88 @font-face { 89 89 font-family: 'Comic Sans'; 90 - font-style: normal; 90 + src: url('/fonts/subset-ComicSansMS-Italic.woff2') format('woff2'); 91 + font-weight: normal; 92 + font-style: italic; 91 93 font-display: swap; 92 - src: url('/fonts/comic.woff2') format('woff2'); 93 94 } 94 - 95 + 95 96 @font-face { 96 97 font-family: 'Comic Sans'; 98 + src: url('/fonts/subset-ComicSansMS.woff2') format('woff2'); 99 + font-weight: normal; 97 100 font-style: normal; 98 - font-weight: bold; 99 101 font-display: swap; 100 - src: url('/fonts/comicbd.woff2') format('woff2'); 101 102 } 102 - 103 + 103 104 @font-face { 104 105 font-family: 'Comic Sans'; 105 - font-style: italic; 106 + src: url('/fonts/subset-ComicSansMS-Bold.woff2') format('woff2'); 107 + font-weight: bold; 108 + font-style: normal; 106 109 font-display: swap; 107 - src: url('/fonts/comici.woff2') format('woff2'); 108 110 } 111 + 112 + 109 113 110 114 .animate-squiggle { 111 115 animation: squigglevision 0.3s infinite;

static/88x31.gif