My personal site. theclashfruit.me
0
fork

Configure Feed

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

chore: some design changes

+179 -182
+7 -5
app/(main)/layout.tsx
··· 16 16 <> 17 17 <Header /> 18 18 19 - <Container as="main" className={styles.main}> 19 + <aside className={styles.sideBar}> 20 20 <NavBar /> 21 + </aside> 21 22 22 - <ViewTransition> 23 - <div>{children}</div> 24 - </ViewTransition> 25 - </Container> 23 + <ViewTransition> 24 + <main> 25 + {children} 26 + </main> 27 + </ViewTransition> 26 28 27 29 <Footer /> 28 30 </>
+2 -1
app/(main)/links/page.tsx
··· 89 89 style={{ 90 90 display: 'flex', 91 91 flexWrap: 'wrap', 92 - gap: '4px' 92 + gap: '4px', 93 + marginBottom: '8px' 93 94 }} 94 95 > 95 96 {buttons.map((btn, i) => (
+77 -79
components/Footer.tsx
··· 16 16 export default function Footer() { 17 17 return ( 18 18 <footer className={styles.footer}> 19 - <Container> 20 - <div> 21 - <p> 22 - Copyright &copy; {new Date().getFullYear()}{' '} 23 - <Link href="https://theclashfruit.me">TheClashFruit</Link>. 24 - </p> 25 - <p> 26 - Licensed under{' '} 27 - <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/"> 28 - CC BY-NC-SA 4.0 29 - </Link>{' '} 30 - unless otherwise noted. 31 - </p> 32 - </div> 19 + <div> 20 + <p> 21 + Copyright &copy; {new Date().getFullYear()}{' '} 22 + <Link href="https://theclashfruit.me">TheClashFruit</Link>. 23 + </p> 24 + <p> 25 + Licensed under{' '} 26 + <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/"> 27 + CC BY-NC-SA 4.0 28 + </Link>{' '} 29 + unless otherwise noted. 30 + </p> 31 + </div> 33 32 34 - <div> 35 - <ul> 36 - <li> 37 - <Link 38 - href="https://bsky.app/profile/theclashfruit.me" 39 - target="_blank" 40 - rel="noopener noreferrer me" 41 - title="Bluesky" 42 - > 43 - <SiBluesky /> 44 - </Link> 45 - </li> 46 - <li> 47 - <Link 48 - href="https://wetdry.world/@TheClashFruit" 49 - target="_blank" 50 - rel="noopener noreferrer me" 51 - title="Mastodon" 52 - > 53 - <SiMastodon /> 54 - </Link> 55 - </li> 56 - <li> 57 - <Link 58 - href="https://github.com/TheClashFruit" 59 - target="_blank" 60 - rel="noopener noreferrer me" 61 - title="GitHub" 62 - > 63 - <SiGithub /> 64 - </Link> 65 - </li> 66 - <li> 67 - <Link 68 - href="https://tangled.org/theclashfruit.me" 69 - target="_blank" 70 - rel="noopener noreferrer me" 71 - title="Tangled" 72 - > 73 - <SiTangled /> 74 - </Link> 75 - </li> 76 - <li> 77 - <Link 78 - href="https://ko-fi.com/theclashfruit" 79 - target="_blank" 80 - rel="noopener noreferrer me" 81 - title="Ko-Fi" 82 - > 83 - <SiKofi /> 84 - </Link> 85 - </li> 86 - <li> 87 - <Link 88 - href="https://discord.gg/CWEApqJ6rc" 89 - target="_blank" 90 - rel="noopener noreferrer me" 91 - title="Discord" 92 - > 93 - <SiDiscord /> 94 - </Link> 95 - </li> 96 - </ul> 97 - </div> 98 - </Container> 33 + <div> 34 + <ul> 35 + <li> 36 + <Link 37 + href="https://bsky.app/profile/theclashfruit.me" 38 + target="_blank" 39 + rel="noopener noreferrer me" 40 + title="Bluesky" 41 + > 42 + <SiBluesky /> 43 + </Link> 44 + </li> 45 + <li> 46 + <Link 47 + href="https://wetdry.world/@TheClashFruit" 48 + target="_blank" 49 + rel="noopener noreferrer me" 50 + title="Mastodon" 51 + > 52 + <SiMastodon /> 53 + </Link> 54 + </li> 55 + <li> 56 + <Link 57 + href="https://github.com/TheClashFruit" 58 + target="_blank" 59 + rel="noopener noreferrer me" 60 + title="GitHub" 61 + > 62 + <SiGithub /> 63 + </Link> 64 + </li> 65 + <li> 66 + <Link 67 + href="https://tangled.org/theclashfruit.me" 68 + target="_blank" 69 + rel="noopener noreferrer me" 70 + title="Tangled" 71 + > 72 + <SiTangled /> 73 + </Link> 74 + </li> 75 + <li> 76 + <Link 77 + href="https://ko-fi.com/theclashfruit" 78 + target="_blank" 79 + rel="noopener noreferrer me" 80 + title="Ko-Fi" 81 + > 82 + <SiKofi /> 83 + </Link> 84 + </li> 85 + <li> 86 + <Link 87 + href="https://discord.gg/CWEApqJ6rc" 88 + target="_blank" 89 + rel="noopener noreferrer me" 90 + title="Discord" 91 + > 92 + <SiDiscord /> 93 + </Link> 94 + </li> 95 + </ul> 96 + </div> 99 97 </footer> 100 98 ); 101 99 }
+5 -7
components/Header.tsx
··· 7 7 export default function Header() { 8 8 return ( 9 9 <header className={styles.header}> 10 - <Container> 11 - <div className={styles.navHeader}> 12 - <Leaf size={32} /> 13 - </div> 14 - 15 - <h1>TheClashFruit</h1> 16 - </Container> 10 + <div className={styles.nav}> 11 + <Leaf size={32} /> 12 + </div> 13 + 14 + <h1>TheClashFruit</h1> 17 15 </header> 18 16 ); 19 17 }
+38 -42
styles/components/Footer.module.scss
··· 1 1 .footer { 2 - > div { 3 - display: flex; 4 - 5 - justify-content: space-between; 6 - align-items: center; 2 + display: flex; 7 3 8 - padding: 16px; 4 + justify-content: space-between; 5 + align-items: center; 9 6 10 - p { 11 - margin-bottom: 2px; 12 - 13 - &:last-child { 14 - margin: 0; 15 - } 7 + p { 8 + margin-bottom: 2px; 9 + 10 + &:last-child { 11 + margin: 0; 16 12 } 13 + } 17 14 18 - ul { 19 - display: flex; 15 + ul { 16 + display: flex; 20 17 21 - list-style: none; 18 + list-style: none; 22 19 23 - gap: 4px; 20 + gap: 4px; 24 21 25 - > li > a { 26 - display: flex; 22 + > li > a { 23 + display: flex; 27 24 28 - padding: 8px; 25 + padding: 8px; 29 26 30 - color: var(--inverseSurface); 27 + color: var(--inverseSurface); 31 28 32 - text-decoration: none; 29 + text-decoration: none; 33 30 34 - border-radius: 50%; 31 + border-radius: 50%; 35 32 36 - transition: background 150ms; 33 + transition: background 150ms; 37 34 38 - &:hover { 39 - color: var(--primary); 40 - background: color-mix(var(--primary) 20%, transparent 80%); 41 - } 35 + &:hover { 36 + color: var(--primary); 37 + background: color-mix(var(--primary) 20%, transparent 80%); 42 38 } 43 39 } 40 + } 44 41 45 - @media (max-width: 769px) { 46 - flex-direction: column-reverse; 42 + @media (max-width: 769px) { 43 + flex-direction: column-reverse; 47 44 48 - align-items: center; 49 - justify-content: center; 45 + align-items: center; 46 + justify-content: center; 50 47 51 - gap: 16px; 48 + gap: 16px; 52 49 53 - p { 54 - text-align: center; 55 - } 50 + p { 51 + text-align: center; 52 + } 53 + 54 + ul { 55 + flex-wrap: wrap; 56 56 57 - ul { 58 - flex-wrap: wrap; 59 - 60 - align-items: center; 61 - justify-content: center; 62 - } 57 + align-items: center; 58 + justify-content: center; 63 59 } 64 60 } 65 - 61 + 66 62 @media (max-width: 769px) { 67 63 margin-bottom: calc(16px + 44px); 68 64 }
+23 -23
styles/components/Header.module.scss
··· 1 1 .header { 2 - > div { 3 - display: flex; 2 + padding: 16px calc(50vw - 50%); 4 3 5 - align-items: center; 4 + margin: 0 calc(50% - 50vw) 0; 5 + margin-top: -16px; 6 6 7 - gap: 16px; 7 + display: flex; 8 8 9 - padding: 16px; 9 + align-items: center; 10 10 11 - > .navHeader { 12 - width: 215px; 11 + gap: 16px; 13 12 14 - display: flex; 13 + h1 { 14 + margin: 0; 15 15 16 - align-items: center; 17 - justify-content: end; 16 + font-size: 180%; 17 + font-weight: 600; 18 + } 18 19 19 - > svg { 20 - color: var(--primary); 21 - } 22 - 23 - @media (max-width: 769px) { 24 - width: fit-content; 25 - } 26 - } 20 + .nav { 21 + display: flex; 22 + 23 + align-items: center; 24 + justify-content: end; 25 + 26 + width: 215px; 27 27 28 - > h1 { 29 - margin: 0; 28 + position: absolute; 29 + left: calc(50% - 40ch - 215px); 30 + } 30 31 31 - font-size: 180%; 32 - font-weight: 600; 33 - } 32 + svg { 33 + color: var(--primary); 34 34 } 35 35 }
+15 -7
styles/globals.scss
··· 16 16 color: var(--onSurface); 17 17 18 18 min-height: 100svh; 19 + max-width: 80ch; 19 20 20 - display: flex; 21 - flex-direction: column; 21 + margin: 0 auto; 22 + padding: 16px; 22 23 23 24 > main { 24 - flex: 1; 25 - 26 - ul, ol { 25 + margin-bottom: 16px; 26 + 27 + min-height: calc(100dvh - 75px - 50px - (2 * 16px)); 28 + 29 + @media (max-width: 769px) { 30 + min-height: calc(100dvh - 75px - 106px - 60px - (2 * 16px)); 31 + } 32 + 33 + ul, 34 + ol { 27 35 margin-bottom: 8px; 28 - 36 + 29 37 &:last-child { 30 38 margin-bottom: 0; 31 39 } ··· 46 54 } 47 55 48 56 // View Transition 49 - // TODO: Add some fancy anim 57 + // TODO: Add some fancy anim
+8 -16
styles/layout/Main.module.scss
··· 1 - .main { 2 - display: flex; 3 - 4 - align-items: flex-start; 1 + .sideBar { 2 + position: absolute; 5 3 6 - gap: 16px; 4 + left: calc(50% - ((80ch) / 2) - (215px)); 5 + 6 + width: 215px; 7 + } 7 8 9 + .main { 8 10 padding: 0 16px; 9 - 10 - > div { 11 - flex: 1; 12 - 13 - max-width: calc(100% - (16px + 215px)); 14 - 15 - @media (max-width: 769px) { 16 - max-width: 100%; 17 - } 18 - } 19 11 } 20 12 21 13 .error { 22 14 h2 { 23 15 font-weight: 600; 24 16 } 25 - } 17 + }
+2
styles/pages/Links.module.scss
··· 1 1 .button { 2 + display: flex; 3 + 2 4 transition: 150ms; 3 5 4 6 > img:not([src$=".svg"]) {
+2 -2
styles/typography.module.scss
··· 4 4 font-size: 100%; 5 5 font-weight: 400; 6 6 7 - line-height: 1.35; 7 + line-height: 1.5; 8 8 } 9 9 10 10 ::selection { ··· 24 24 } 25 25 26 26 h1 { 27 - font-size: 210%; 27 + font-size: 200%; 28 28 } 29 29 30 30 h2 {