Mae's website :3 maemoon.me
personal website svelte sveltekit
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add theme switching

+85 -15
+1
src/app.html
··· 7 7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 + <script src="https://kit.fontawesome.com/e62e48e8f3.js" crossorigin="anonymous"></script> 10 11 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"> 11 12 %sveltekit.head% 12 13 </head>
+14 -1
src/lib/global.css
··· 1 - :root { 1 + .theme-light { 2 2 --color-bg: #eceff4; 3 3 --color-fg-1: #2e3440; 4 4 --color-fg-2: #3b4252; 5 5 --color-fg-3: #434c5e; 6 6 --color-fg-4: #4c566a; 7 + } 8 + 9 + .theme-dark { 10 + --color-bg: #3b4252; 11 + --color-fg-1: #eceff4; 12 + --color-fg-2: #e5e9f0; 13 + --color-fg-3: #d8dee9; 7 14 } 8 15 9 16 * { ··· 50 57 li { 51 58 list-style: none; 52 59 padding-bottom: 0.2em; 60 + } 61 + 62 + .icon { 63 + width: 1em; 64 + height: 1em; 65 + vertical-align: -0.125em; 53 66 }
+10 -1
src/lib/supportbutton.svelte
··· 1 - <a href='https://ko-fi.com/E1E21270RY' target='_blank'><img height='36' style='border:0px;height:36px;' src='/kofi.webp ' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> 1 + <script> 2 + let { darkMode } = $props(); 3 + </script> 4 + <a href='https://ko-fi.com/E1E21270RY' target='_blank'> 5 + {#if darkMode} 6 + <img height='36' style='border:0px;height:36px;' src='/kofi-dark.webp' border='0' alt='Support me at ko-fi.com' /> 7 + {:else} 8 + <img height='36' style='border:0px;height:36px;' src='/kofi.webp' border='0' alt='Support me at ko-fi.com' /> 9 + {/if} 10 + </a>
+55 -12
src/routes/+layout.svelte
··· 2 2 import Breadcrumb from '../lib/breadcrumb.svelte'; 3 3 import '$lib/global.css'; 4 4 import { blur } from 'svelte/transition'; 5 - 5 + import { theme } from './shared.svelte.js'; 6 6 import { dev } from '$app/environment'; 7 7 import { inject } from '@vercel/analytics'; 8 8 import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit'; 9 + import { onMount } from 'svelte'; 9 10 let { data, children } = $props(); 10 - 11 + 11 12 inject({ mode: dev ? 'development' : 'production' }); 12 13 injectSpeedInsights(); 14 + onMount(() => { 15 + document.body.className = theme.dark ? 'theme-dark' : 'theme-light'; 16 + }); 13 17 </script> 14 18 15 19 <svelte:head> 16 - <meta name="description" content="Mae Moon's personal website and blog"> 20 + <meta name="description" content="Mae Moon's personal website and blog" /> 17 21 </svelte:head> 18 22 19 23 <div id="page"> 20 24 {#key data.currentRoute} 21 - <aside> 22 - <a href="/" class:active={data.currentRoute == "/"}>home</a> 23 - <a href="/blog" class:active={data.currentRoute == "/blog"}>blog</a> 24 - </aside> 25 - <main> 26 - {@render children?.()} 27 - </main> 25 + <aside> 26 + <a href="/" class:active={data.currentRoute == '/'}>home</a> 27 + <a href="/blog" class:active={data.currentRoute.includes('/blog')}>blog</a> 28 + </aside> 29 + <main> 30 + {@render children?.()} 31 + </main> 32 + <button 33 + aria-label="Switch theme" 34 + id="themebutton" 35 + onclick={() => { 36 + theme.dark = !theme.dark; 37 + document.body.className = theme.dark ? 'theme-dark' : 'theme-light'; 38 + }} 39 + > 40 + {#if theme.dark} 41 + <i class="fa-solid fa-moon"></i> 42 + {:else} 43 + <i class="fa-solid fa-sun"></i> 44 + {/if} 45 + </button> 28 46 {/key} 29 47 </div> 30 48 ··· 33 51 display: flex; 34 52 flex-shrink: 1; 35 53 } 54 + 36 55 aside { 37 56 display: flex; 38 57 flex-direction: column; ··· 41 60 padding: 2em; 42 61 flex-basis: 15%; 43 62 } 63 + 44 64 main { 45 65 padding: 2em; 46 66 flex-basis: 50%; 47 67 } 48 68 49 69 .active::before { 50 - content: "* "; 70 + content: '* '; 71 + } 72 + 73 + #themebutton { 74 + position: fixed; 75 + right: 1em; 76 + bottom: 1em; 77 + border: none; 78 + font-size: 2em; 79 + cursor: pointer; 80 + color: var(--color-fg-1); 81 + background-color: transparent; 82 + display: flex; 83 + justify-content: center; 84 + align-items: center; 85 + width: 1.5em; 86 + height: 1.5em; 87 + padding: 0; 88 + transition: 0.1s ease-in-out; 51 89 } 52 - </style> 90 + 91 + #themebutton:hover { 92 + color: var(--color-fg-2); 93 + transform: translate(0, -3px); 94 + } 95 + </style>
+2 -1
src/routes/+page.svelte
··· 1 1 <script> 2 2 import Supportbutton from '../lib/supportbutton.svelte'; 3 3 import { fade } from 'svelte/transition'; 4 + import { theme } from './shared.svelte.js'; 4 5 let { data } = $props(); 5 6 </script> 6 7 ··· 38 39 <a href="/blog"><strong>see more -></strong></a> 39 40 </ul> 40 41 <h2 class="section">Support Me</h2> 41 - <Supportbutton></Supportbutton> 42 + <Supportbutton darkMode={theme.dark}></Supportbutton>
+3
src/routes/shared.svelte.js
··· 1 + export const theme = $state({ 2 + dark: false 3 + });
static/kofi-dark.webp

This is a binary file and will not be displayed.