+1 -3

src/components/rewrite/CustomCursor.astro

··· 49 49 translate: 50% -75%; 50 50 rotate: 25deg; 51 51 transform-origin: top left; 52 52 - filter: drop-shadow( 53 53 - color-mix(in oklch, var(--color-canvas-text) 25%, transparent) 1px 1px 2px 54 54 - ); 52 52 + filter: drop-shadow(color-mix(in oklch, var(--color-canvas-text) 25%, transparent) 1px 1px 2px); 55 53 transition: opacity 100ms linear; 56 54 57 55 @starting-style {

+1 -1

src/components/rewrite/SeasonLayout.astro

··· 53 53 54 54 aside { 55 55 @media (width < 48rem) { 56 56 - margin-block-start: 8px; 57 56 margin-inline: clamp(16px, 10.2857px + 1.7857vw, 24px); 58 57 } 59 58 ··· 121 120 122 121 h1 { 123 122 display: inline-block; 123 123 + scroll-margin-block-start: 16px; 124 124 } 125 125 </style>

+15 -28

src/components/rewrite/SiteFooter.astro

··· 1 1 - --- 2 2 - import { Icon } from 'astro-icon/components'; 3 3 - --- 4 4 - 5 1 <footer> 6 2 <div class="footer-inner"> 7 3 <div class="cluster"> ··· 11 7 <a href="/sitemap-0.xml"> 12 8 <span>Sitemap</span> 13 9 </a> 14 14 - <a href="https://github.com/ghustvn/life_series" rel="external"> 15 15 - <span class="cluster gap-text-icon"> 16 16 - <Icon 17 17 - name="lucide:github" 18 18 - title="GitHub" 19 19 - role="img" 20 20 - /> 21 21 - <span>Source code</span> 22 22 - </span> 23 23 - </a> 24 10 </div> 25 11 </div> 26 12 </footer> 27 13 28 14 <style> 29 15 footer { 30 30 - padding-block: 8px; 31 31 - } 32 32 - 33 33 - footer a { 34 34 - padding-block: 8px; 35 35 - 36 36 - &:focus-visible { 37 37 - outline: none; 38 38 - 39 39 - > span { 40 40 - outline: 2px solid var(--color-canvas-text); 41 41 - outline-offset: 4px; 42 42 - } 43 43 - } 16 16 + padding-block-start: 8px; 17 17 + padding-block-end: 5vh; 44 18 } 45 19 46 20 .footer-inner { ··· 53 27 54 28 @media (width >= 48rem) { 55 29 margin-inline: clamp(24px, -44.7367px + 8.9501vw, 128px); 30 30 + } 31 31 + } 32 32 + 33 33 + a { 34 34 + padding-block: 8px; 35 35 + 36 36 + &:focus-visible { 37 37 + outline: none; 38 38 + 39 39 + > span { 40 40 + outline: 2px solid var(--color-canvas-text); 41 41 + outline-offset: 4px; 42 42 + } 56 43 } 57 44 } 58 45 </style>

+27 -6

src/components/rewrite/VideoItem.astro

··· 7 7 const { ytId, title } = Astro.props; 8 8 --- 9 9 10 10 - <a href={`https://www.youtube.com/watch?v=${ytId}`}> 10 10 + <a href={`https://www.youtube.com/watch?v=${ytId}`} target="_blank" rel="noopener noreferrer"> 11 11 + <span aria-hidden="true">{title}</span> 11 12 <img 12 13 src={`https://i.ytimg.com/vi_webp/${ytId}/maxresdefault.webp`} 13 14 alt={`Watch "${title}" on YouTube`} ··· 15 16 height="720" 16 17 loading="lazy" 17 18 decoding="async" 19 19 + data-fallback-state="max" 20 20 + data-fallback-hq={`https://i.ytimg.com/vi_webp/${ytId}/hqdefault.webp`} 21 21 + onload="if (this.dataset.fallbackState !== 'hq' && this.naturalWidth <= 120 && this.naturalHeight <= 90) { this.dataset.fallbackState = 'hq'; this.src = this.dataset.fallbackHq; }" 22 22 + onerror="if (this.dataset.fallbackState === 'hq') { return; } this.dataset.fallbackState = 'hq'; this.src = this.dataset.fallbackHq;" 18 23 /> 19 24 </a> 20 25 21 26 <style> 22 27 a { 23 23 - display: block; 24 24 - max-width: 1080px; 25 25 - aspect-ratio: 16 / 9; 28 28 + display: grid; 29 29 + border-radius: 8px; 30 30 + text-decoration: none; 26 31 27 32 &:focus-visible { 28 33 outline-offset: 8px; 29 34 outline: 4px solid; 30 35 } 36 36 + 37 37 + > * { 38 38 + grid-area: 1 / 1; 39 39 + border-radius: inherit; 40 40 + } 41 41 + } 42 42 + 43 43 + span { 44 44 + padding: clamp(0.5rem, 0.1429rem + 1.7857cqi, 1rem); 45 45 + z-index: 1; 46 46 + font-size: clamp(1rem, 0.8214rem + 0.8929cqi, 1.25rem); 47 47 + font-weight: var(--font-weight-heading); 48 48 + line-height: 1.1; 49 49 + text-wrap: balance; 50 50 + color: #ffffff; 51 51 + text-shadow: 0 0 2px oklch(0% 0 0 / 0.5); 52 52 + background-image: linear-gradient(to bottom, oklch(0% 0 0 / 0.72) 0%, oklch(0% 0 0 / 0.45) 20%, oklch(0% 0 0 / 0.0) 40%); 31 53 } 32 54 33 55 img { 34 34 - inline-size: 100%; 35 35 - block-size: 100%; 56 56 + aspect-ratio: 16 / 9; 36 57 object-fit: cover; 37 58 background-color: var(--color-surface-1); 38 59 }

+2 -2

src/pages/rewrite/seasons/[season_id]/[member_name].astro

··· 121 121 <ol role="list" class="flow session-list"> 122 122 {sessions.map((session, i) => ( 123 123 <li> 124 124 - <VideoItem ytId={session.id} title={`Session ${i + 1} - ${session.title}`} /> 124 124 + <VideoItem ytId={session.id} title={session.title} /> 125 125 </li> 126 126 ))} 127 127 </ol> ··· 183 183 } 184 184 185 185 .session-list > * + * { 186 186 - --flow-space: clamp(24px, -4.5714px + 8.9286cqi, 64px); 186 186 + --flow-space: clamp(48px, 25.7391px + 6.9565cqi, 160px); 187 187 } 188 188 </style>

+2 -5

src/pages/rewrite/seasons/[season_id]/sessions/[session_id].astro

··· 119 119 <h2 id={member}> 120 120 <MemberItem memberName={member} /> 121 121 </h2> 122 122 - <a 123 123 - href={`/rewrite/seasons/${season.id}/${member}`} 124 124 - aria-describedby={member} 125 125 - > 122 122 + <a href={`/rewrite/seasons/${season.id}/${member}`} aria-describedby={member}> 126 123 All sessions 127 124 </a> 128 125 </div> ··· 227 224 } 228 225 229 226 .video-list { 230 230 - --flow-space: clamp(24px, -4.5714px + 8.9286cqi, 64px); 227 227 + --flow-space: clamp(48px, 25.7391px + 6.9565cqi, 160px); 231 228 margin-block-start: 16px; 232 229 } 233 230

+2 -4

src/styles/rewrite/global.css

··· 70 70 } 71 71 72 72 h1, 73 73 - h2, 74 74 - h3 { 73 73 + h2 { 75 74 margin: 0; 76 75 } 77 76 78 77 h1, 79 79 - h2, 80 80 - h3 { 78 78 + h2 { 81 79 font-size: 1rem; 82 80 font-weight: var(--font-weight-heading); 83 81 }