vod frog, frog with the vods
5
fork

Configure Feed

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

replace SVG plant overlay with real fern photo, white made transparent

+15 -67
+11 -62
src/lib/PlantOverlay.svelte
··· 1 1 <script lang="ts"> 2 - let { side }: { side: 'left' | 'right' } = $props(); 2 + // Fern leaves overlay using a real photo with transparent background 3 3 </script> 4 4 5 - <div class="plant-overlay {side}"> 6 - <svg viewBox="0 0 160 900" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> 7 - {#if side === 'left'} 8 - <!-- Main stem --> 9 - <path 10 - d="M 50 900 Q 55 780 42 660 Q 35 540 48 420 Q 55 300 40 180 Q 30 80 50 0" 11 - stroke="#0A182B" 12 - stroke-width="7" 13 - fill="none" 14 - stroke-linecap="round" 15 - /> 16 - <!-- Large leaves --> 17 - <ellipse cx="42" cy="140" rx="40" ry="14" fill="#0A182B" transform="rotate(-35 42 140)" /> 18 - <ellipse cx="48" cy="290" rx="44" ry="15" fill="#0A182B" transform="rotate(25 48 290)" /> 19 - <ellipse cx="38" cy="440" rx="38" ry="13" fill="#0A182B" transform="rotate(-30 38 440)" /> 20 - <ellipse cx="52" cy="570" rx="42" ry="14" fill="#0A182B" transform="rotate(20 52 570)" /> 21 - <ellipse cx="44" cy="710" rx="40" ry="14" fill="#0A182B" transform="rotate(-22 44 710)" /> 22 - <ellipse cx="48" cy="830" rx="36" ry="12" fill="#0A182B" transform="rotate(18 48 830)" /> 23 - <!-- Smaller accent leaves --> 24 - <ellipse cx="55" cy="210" rx="28" ry="10" fill="#0A182B" transform="rotate(40 55 210)" /> 25 - <ellipse cx="50" cy="370" rx="24" ry="9" fill="#0A182B" transform="rotate(35 50 370)" /> 26 - <ellipse cx="45" cy="510" rx="30" ry="11" fill="#0A182B" transform="rotate(-28 45 510)" /> 27 - <ellipse cx="52" cy="650" rx="26" ry="9" fill="#0A182B" transform="rotate(30 52 650)" /> 28 - <ellipse cx="40" cy="780" rx="22" ry="8" fill="#0A182B" transform="rotate(-25 40 780)" /> 29 - {:else} 30 - <!-- Main stem --> 31 - <path 32 - d="M 110 900 Q 105 780 118 660 Q 125 540 112 420 Q 105 300 120 180 Q 130 80 110 0" 33 - stroke="#0A182B" 34 - stroke-width="7" 35 - fill="none" 36 - stroke-linecap="round" 37 - /> 38 - <!-- Large leaves --> 39 - <ellipse cx="118" cy="170" rx="40" ry="14" fill="#0A182B" transform="rotate(35 118 170)" /> 40 - <ellipse cx="112" cy="320" rx="44" ry="15" fill="#0A182B" transform="rotate(-25 112 320)" /> 41 - <ellipse cx="122" cy="470" rx="38" ry="13" fill="#0A182B" transform="rotate(30 122 470)" /> 42 - <ellipse cx="108" cy="610" rx="42" ry="14" fill="#0A182B" transform="rotate(-20 108 610)" /> 43 - <ellipse cx="116" cy="750" rx="40" ry="14" fill="#0A182B" transform="rotate(22 116 750)" /> 44 - <ellipse cx="112" cy="860" rx="36" ry="12" fill="#0A182B" transform="rotate(-18 112 860)" /> 45 - <!-- Smaller accent leaves --> 46 - <ellipse cx="105" cy="240" rx="28" ry="10" fill="#0A182B" transform="rotate(-40 105 240)" /> 47 - <ellipse cx="110" cy="400" rx="24" ry="9" fill="#0A182B" transform="rotate(-35 110 400)" /> 48 - <ellipse cx="115" cy="540" rx="30" ry="11" fill="#0A182B" transform="rotate(28 115 540)" /> 49 - <ellipse cx="108" cy="680" rx="26" ry="9" fill="#0A182B" transform="rotate(-30 108 680)" /> 50 - {/if} 51 - </svg> 5 + <div class="plant-overlay"> 6 + <img src="/leaves.png" alt="" class="leaves" /> 52 7 </div> 53 8 54 9 <style> 55 10 .plant-overlay { 56 11 position: fixed; 57 - top: 0; 58 - bottom: 0; 59 - width: 100px; 12 + inset: 0; 60 13 z-index: 100; 61 14 pointer-events: none; 62 - opacity: 0.85; 63 - } 64 - 65 - .plant-overlay.left { 66 - left: 10px; 67 - } 68 - 69 - .plant-overlay.right { 70 - right: 10px; 15 + overflow: hidden; 71 16 } 72 17 73 - .plant-overlay svg { 18 + .leaves { 19 + position: absolute; 20 + inset: 0; 74 21 width: 100%; 75 22 height: 100%; 23 + object-fit: cover; 24 + opacity: 0.85; 76 25 } 77 26 78 - @media (max-width: 900px) { 27 + @media (max-width: 768px) { 79 28 .plant-overlay { 80 29 display: none; 81 30 }
+2 -2
src/lib/theme.ts
··· 44 44 const r3 = seededRandom(seed, 2); 45 45 46 46 return { 47 - rotation: (r1 - 0.5) * 4, // -2 to +2 degrees 47 + rotation: (r1 - 0.5) * 6, // -3 to +3 degrees 48 48 translateX: (r2 - 0.5) * 12, // -6 to +6 px 49 - translateY: (r3 - 0.5) * 8, // -4 to +4 px 49 + translateY: (r3 - 0.5) * 60, // -30 to +30 px 50 50 }; 51 51 } 52 52
+1 -2
src/routes/+layout.svelte
··· 19 19 </svelte:head> 20 20 21 21 <MeshBackground /> 22 - <PlantOverlay side="left" /> 23 - <PlantOverlay side="right" /> 22 + <PlantOverlay /> 24 23 25 24 {@render children()} 26 25
+1 -1
src/routes/+page.svelte
··· 13 13 import FrogHeader from "$lib/FrogHeader.svelte"; 14 14 import WavyBorder from "$lib/WavyBorder.svelte"; 15 15 16 - const PAGE_SIZE = 10; 16 + const PAGE_SIZE = 9; 17 17 18 18 let videos: VideoRecord[] = $state([]); 19 19 let loading = $state(false);
static/leaves.png

This is a binary file and will not be displayed.