my personal site
0
fork

Configure Feed

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

Create style.css

+209
+209
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 */ 23 + :root { 24 + --bg-color: #ffffff; 25 + --text-color: #333333; 26 + --link-color: #3498db; 27 + --link-hover-color: #1D6FA5; 28 + --input-bg: #ffffff; 29 + --input-text: #000000; 30 + --input-border: #cccccc; 31 + } 32 + .dark-theme { 33 + --bg-color: #1a1a1a; 34 + --text-color: #e0e0e0; 35 + --link-color: #3498db; /* use same accent for dark */ 36 + --link-hover-color: #5dade2; /* lighten accent on hover in dark mode */ 37 + --input-bg: #333333; 38 + --input-text: #f0f0f0; 39 + --input-border: #555555; 40 + } 41 + 42 + /* Global resets/base styles */ 43 + * { 44 + box-sizing: border-box; 45 + } 46 + html, body { 47 + margin: 0; 48 + padding: 0; 49 + background: var(--bg-color); 50 + color: var(--text-color); 51 + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 52 + font-size: 16px; 53 + line-height: 1.6; 54 + } 55 + 56 + /* Layout containers */ 57 + .container { 58 + max-width: 800px; 59 + margin: 0 auto; 60 + padding: 1rem; 61 + } 62 + 63 + /* Header navigation */ 64 + header nav { 65 + display: flex; 66 + align-items: center; 67 + } 68 + .brand { 69 + font-weight: bold; 70 + font-size: 1.2em; 71 + text-decoration: none; 72 + color: var(--text-color); 73 + margin-right: auto; /* push navigation links to the right */ 74 + } 75 + .menu { 76 + list-style: none; 77 + margin: 0; 78 + padding: 0; 79 + display: flex; 80 + } 81 + .menu li + li { 82 + margin-left: 1rem; 83 + } 84 + nav a { 85 + text-decoration: none; 86 + color: var(--link-color); 87 + } 88 + nav a:hover { 89 + text-decoration: underline; 90 + } 91 + nav a.active { 92 + text-decoration: underline; 93 + font-weight: bold; 94 + } 95 + /* Theme toggle button */ 96 + #theme-toggle { 97 + margin-left: 1rem; 98 + padding: 0.25rem 0.6rem; 99 + border: 1px solid var(--text-color); 100 + background: none; 101 + color: var(--text-color); 102 + border-radius: 4px; 103 + cursor: pointer; 104 + } 105 + #theme-toggle:hover { 106 + background: var(--text-color); 107 + color: var(--bg-color); 108 + } 109 + 110 + /* Responsive adjustments: hide brand name on very small screens to save space */ 111 + @media (max-width: 400px) { 112 + .brand { display: none; } 113 + header nav { justify-content: space-between; } 114 + } 115 + 116 + /* Intro (About section) */ 117 + .intro { 118 + display: flex; 119 + align-items: flex-start; 120 + gap: 2rem; 121 + margin: 2rem 0; 122 + } 123 + .headshot { 124 + width: 150px; 125 + height: 150px; 126 + object-fit: cover; 127 + border-radius: 50%; 128 + } 129 + .intro-text { 130 + /* additional intro text styling if needed */ 131 + } 132 + .intro-text h1 { 133 + margin: 0 0 0.3rem; 134 + } 135 + .tagline { 136 + font-style: italic; 137 + opacity: 0.8; 138 + margin: 0 0 1rem; 139 + } 140 + .tagline .sep { 141 + opacity: 0.5; 142 + margin: 0 0.4em; 143 + } 144 + 145 + /* 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 + } 167 + ul { 168 + padding-left: 1.2rem; 169 + margin: 0.5rem 0 1rem; 170 + } 171 + ul li { 172 + margin-bottom: 0.5rem; 173 + } 174 + 175 + /* Buttons (including links styled as buttons) */ 176 + .btn { 177 + display: inline-block; 178 + background: var(--link-color); 179 + color: #fff; 180 + text-decoration: none; 181 + padding: 0.5rem 1rem; 182 + border: none; 183 + border-radius: 4px; 184 + cursor: pointer; 185 + } 186 + .btn:hover { 187 + background: var(--link-hover-color); 188 + text-decoration: none; 189 + } 190 + 191 + /* Form styles */ 192 + form p { 193 + margin: 0 0 1rem; 194 + } 195 + label { 196 + font-weight: 500; 197 + } 198 + input[type=text], input[type=email], textarea { 199 + width: 100%; 200 + padding: 0.5rem; 201 + background: var(--input-bg); 202 + color: var(--input-text); 203 + border: 1px solid var(--input-border); 204 + border-radius: 4px; 205 + font: inherit; 206 + } 207 + textarea { 208 + resize: vertical; 209 + }