vod frog, frog with the vods
5
fork

Configure Feed

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

reduce wave frequency, more spacing between sections, bigger title, more card padding

goose.art 381f5311 70513c12

+10 -9
+1 -1
src/lib/FrogHeader.svelte
··· 15 15 16 16 <style> 17 17 .frog-header { 18 - padding: 30px 20px 10px; 18 + padding: 30px 20px 30px; 19 19 position: relative; 20 20 } 21 21
+1 -1
src/lib/VideoCard.svelte
··· 318 318 } 319 319 320 320 .info { 321 - padding: 10px 6px 4px; 321 + padding: 14px 10px 8px; 322 322 } 323 323 324 324 .title {
+2 -2
src/lib/WavyBorder.svelte
··· 25 25 const edgeParams = [0, 1, 2, 3].map((e) => ({ 26 26 phase1: seededRandom(s, e * 10 + 1) * Math.PI * 2, 27 27 phase2: seededRandom(s, e * 10 + 2) * Math.PI * 2, 28 - freq1: 2 + seededRandom(s, e * 10 + 3) * 2, 29 - freq2: 4 + seededRandom(s, e * 10 + 4) * 3, 28 + freq1: 1.5 + seededRandom(s, e * 10 + 3) * 1.5, 29 + freq2: 3 + seededRandom(s, e * 10 + 4) * 2, 30 30 ampScale: 0.7 + seededRandom(s, e * 10 + 5) * 0.6, 31 31 })); 32 32
+6 -5
src/routes/+page.svelte
··· 97 97 <section class="player-section"> 98 98 <VideoPlayer src={getPlaylistUrl(selectedVideo.uri)} /> 99 99 <div class="player-info"> 100 - <WavyBorder seed="player-info" fill="#39FF44" strokeColor="#0A182B" strokeWidth={1.8} padding="clamp(40px, 6vw, 60px)"> 100 + <WavyBorder seed="player-info" fill="#39FF44" strokeColor="#0A182B" strokeWidth={1.8} padding={48}> 101 101 <h2 class="player-title">{selectedVideo.value.title}</h2> 102 102 <p class="player-meta"> 103 103 <span class="creator-tag" ··· 141 141 } 142 142 143 143 .player-section { 144 - margin-bottom: 30px; 144 + margin-bottom: 40px; 145 + margin-top: 20px; 145 146 padding: 0 10px; 146 147 } 147 148 148 149 .player-info { 149 - padding: 14px 4px; 150 + padding: 20px 4px; 150 151 } 151 152 152 153 .player-title { 153 154 margin: 0; 154 - font-family: "Fang", system-ui, sans-serif; 155 - font-size: 1.2rem; 155 + font-family: "PicNic", cursive, system-ui; 156 + font-size: clamp(1.4rem, 3vw, 2rem); 156 157 color: #0a182b; 157 158 } 158 159