my personal site
0
fork

Configure Feed

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

Update style.css

+48 -64
+48 -64
style.css
··· 1 - /* Enable cross-document view transitions (smooth page transitions) */ 2 - @view-transition { 3 - navigation: auto; 4 - } 5 - 6 - /* Keyframes for page transition animations (slide out to left, slide in from right) */ 7 - @keyframes slide-out-left { 8 - from { transform: translateX(0); opacity: 1; } 9 - to { transform: translateX(-100%); opacity: 0; } 10 - } 11 - @keyframes slide-in-right { 12 - from { transform: translateX(100%); opacity: 0; } 13 - to { transform: translateX(0); opacity: 1; } 14 - } 15 - ::view-transition-old(root) { 16 - animation: 0.4s ease-in both slide-out-left; 17 - } 18 - ::view-transition-new(root) { 19 - animation: 0.4s ease-out both slide-in-right; 20 - } 21 - 22 - /* Color theme variables */ 1 + /* Directional View Transition setup */ 23 2 :root { 3 + /* Color theme variables */ 24 4 --bg-color: #ffffff; 25 5 --text-color: #333333; 26 6 --link-color: #3498db; ··· 28 8 --input-bg: #ffffff; 29 9 --input-text: #000000; 30 10 --input-border: #cccccc; 11 + 12 + /* Default transition animations (will be overridden dynamically) */ 13 + --vt-old-animation: 0.4s ease-in both slide-out-left; 14 + --vt-new-animation: 0.4s ease-out both slide-in-right; 31 15 } 16 + 17 + /* Dark theme overrides */ 32 18 .dark-theme { 33 19 --bg-color: #1a1a1a; 34 20 --text-color: #e0e0e0; 35 - --link-color: #3498db; /* use same accent for dark */ 36 - --link-hover-color: #5dade2; /* lighten accent on hover in dark mode */ 21 + --link-color: #3498db; 22 + --link-hover-color: #5dade2; 37 23 --input-bg: #333333; 38 24 --input-text: #f0f0f0; 39 25 --input-border: #555555; 40 26 } 41 27 28 + /* Directional keyframes */ 29 + @keyframes slide-out-left { 30 + from { transform: translateX(0); opacity: 1; } 31 + to { transform: translateX(-100%); opacity: 0; } 32 + } 33 + @keyframes slide-out-right { 34 + from { transform: translateX(0); opacity: 1; } 35 + to { transform: translateX(100%); opacity: 0; } 36 + } 37 + @keyframes slide-in-left { 38 + from { transform: translateX(-100%); opacity: 0; } 39 + to { transform: translateX(0); opacity: 1; } 40 + } 41 + @keyframes slide-in-right { 42 + from { transform: translateX(100%); opacity: 0; } 43 + to { transform: translateX(0); opacity: 1; } 44 + } 45 + 46 + /* View Transition API hooks */ 47 + ::view-transition-old(root) { 48 + animation: var(--vt-old-animation); 49 + } 50 + ::view-transition-new(root) { 51 + animation: var(--vt-new-animation); 52 + } 53 + 42 54 /* Global resets/base styles */ 43 55 * { 44 56 box-sizing: border-box; ··· 70 82 font-size: 1.2em; 71 83 text-decoration: none; 72 84 color: var(--text-color); 73 - margin-right: auto; /* push navigation links to the right */ 85 + margin-right: auto; 74 86 } 75 87 .menu { 76 88 list-style: none; ··· 107 119 color: var(--bg-color); 108 120 } 109 121 110 - /* Responsive adjustments: hide brand name on very small screens to save space */ 122 + /* Responsive adjustments */ 111 123 @media (max-width: 400px) { 112 124 .brand { display: none; } 113 125 header nav { justify-content: space-between; } ··· 125 137 height: 150px; 126 138 object-fit: cover; 127 139 border-radius: 50%; 128 - } 129 - .intro-text { 130 - /* additional intro text styling if needed */ 131 140 } 132 141 .intro-text h1 { 133 142 margin: 0 0 0.3rem; ··· 143 152 } 144 153 145 154 /* Typography & element spacing */ 146 - h1 { 147 - font-size: 2em; 148 - margin: 1rem 0; 149 - } 150 - h2 { 151 - font-size: 1.5em; 152 - margin: 1.5rem 0 0.75rem; 153 - } 154 - h3 { 155 - font-size: 1.2em; 156 - margin: 1rem 0 0.5rem; 157 - } 158 - h1, h2, h3, h4, strong { 159 - color: var(--text-color); 160 - } 161 - small { 162 - opacity: 0.7; 163 - } 164 - p { 165 - margin: 0.5rem 0 1rem; 166 - } 155 + h1 { font-size: 2em; margin: 1rem 0; } 156 + h2 { font-size: 1.5em; margin: 1.5rem 0 0.75rem; } 157 + h3 { font-size: 1.2em; margin: 1rem 0 0.5rem; } 158 + small { opacity: 0.7; } 159 + p { margin: 0.5rem 0 1rem; } 167 160 ul { 168 161 padding-left: 1.2rem; 169 162 margin: 0.5rem 0 1rem; 170 163 } 171 - ul li { 172 - margin-bottom: 0.5rem; 173 - } 164 + ul li { margin-bottom: 0.5rem; } 174 165 175 - /* Buttons (including links styled as buttons) */ 166 + /* Buttons */ 176 167 .btn { 177 168 display: inline-block; 178 169 background: var(--link-color); ··· 185 176 } 186 177 .btn:hover { 187 178 background: var(--link-hover-color); 188 - text-decoration: none; 189 179 } 190 180 191 181 /* Form styles */ 192 - form p { 193 - margin: 0 0 1rem; 194 - } 195 - label { 196 - font-weight: 500; 197 - } 182 + form p { margin: 0 0 1rem; } 183 + label { font-weight: 500; } 198 184 input[type=text], input[type=email], textarea { 199 185 width: 100%; 200 186 padding: 0.5rem; ··· 204 190 border-radius: 4px; 205 191 font: inherit; 206 192 } 207 - textarea { 208 - resize: vertical; 209 - } 193 + textarea { resize: vertical; }