My personal site. theclashfruit.me
0
fork

Configure Feed

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

feat: more responsive stuff & home button

+68 -17
+14 -8
components/NavBar.tsx
··· 24 24 25 25 return ( 26 26 <> 27 - <button 28 - className={styles.navButton} 29 - onClick={() => { 30 - setOpen(!open); 31 - }} 32 - > 33 - {open ? <X size={26} /> : <Menu size={26} />} 34 - </button> 27 + <div className={styles.navButtons}> 28 + <button 29 + className={styles.navButton} 30 + onClick={() => { 31 + setOpen(!open); 32 + }} 33 + > 34 + {open ? <X size={26} /> : <Menu size={26} />} 35 + </button> 36 + 37 + <Link href="/" className={path === '/' ? styles.active : ''}> 38 + <Home size={26} /> 39 + </Link> 40 + </div> 35 41 36 42 <nav 37 43 className={styles.navBar}
+28
styles/components/Footer.module.scss
··· 9 9 10 10 p { 11 11 margin-bottom: 2px; 12 + 13 + &:last-child { 14 + margin: 0; 15 + } 12 16 } 13 17 14 18 ul { ··· 37 41 } 38 42 } 39 43 } 44 + 45 + @media (max-width: 769px) { 46 + flex-direction: column-reverse; 47 + 48 + align-items: center; 49 + justify-content: center; 50 + 51 + gap: 16px; 52 + 53 + p { 54 + text-align: center; 55 + } 56 + 57 + ul { 58 + flex-wrap: wrap; 59 + 60 + align-items: center; 61 + justify-content: center; 62 + } 63 + } 64 + } 65 + 66 + @media (max-width: 769px) { 67 + margin-bottom: calc(16px + 44px); 40 68 } 41 69 }
+26 -9
styles/components/NavBar.module.scss
··· 57 57 width: 100dvw; 58 58 59 59 padding: 16px; 60 - padding-bottom: calc(16px * 2 + 32px); 60 + padding-bottom: calc((2 * 16px + 44px) - 8px); 61 61 62 62 top: 0; 63 63 bottom: 0; ··· 83 83 } 84 84 } 85 85 86 - .navButton { 86 + .navButtons { 87 87 display: none; 88 88 89 - background: var(--secondaryContainer); 90 - color: var(--onSecondaryContainer); 91 - 92 - padding: 8px; 93 - 94 - border: 1px solid var(--outlineVariant); 95 - border-radius: 16px; 89 + gap: 8px; 96 90 97 91 position: fixed; 98 92 ··· 103 97 104 98 @media (max-width: 769px) { 105 99 display: flex; 100 + } 101 + 102 + > button, a { 103 + display: flex; 104 + 105 + align-items: center; 106 + 107 + background: var(--secondaryContainer); 108 + color: var(--onSecondaryContainer); 109 + 110 + padding: 8px; 111 + 112 + border: 1px solid var(--outlineVariant); 113 + border-radius: 16px; 114 + 115 + text-decoration: none; 116 + 117 + cursor: pointer; 118 + 119 + &.active { 120 + background: var(--secondaryContainer); 121 + color: var(--primary) 122 + } 106 123 } 107 124 }