dev vouch dev on at. thats about it atvouch.dev
8
fork

Configure Feed

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

change styling a bit

Luna 038dff69 01e2acce

+199 -69
+2
frontend/index.html
··· 3 3 <head> 4 4 <meta charset="UTF-8" /> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 + <link rel="preconnect" href="https://fonts.googleapis.com" /> 7 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 6 8 <title>atvouch</title> 7 9 </head> 8 10 <body>
+197 -69
frontend/src/App.css
··· 1 + @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap'); 2 + 3 + :root { 4 + --bg: #0c0c0c; 5 + --bg-raised: #141412; 6 + --bg-input: #1a1a17; 7 + --border: #2a2a25; 8 + --border-strong: #3a3a33; 9 + --text: #e8e4de; 10 + --text-dim: #8a867e; 11 + --text-faint: #5a5750; 12 + --accent: #00ff88; 13 + --accent-dim: #00cc6d; 14 + --accent-bg: #00ff8808; 15 + --error: #ff5f56; 16 + --error-bg: #ff5f5608; 17 + --serif: 'Instrument Serif', Georgia, serif; 18 + --sans: 'DM Sans', system-ui, sans-serif; 19 + --mono: 'JetBrains Mono', 'Courier New', monospace; 20 + } 21 + 1 22 * { 2 23 box-sizing: border-box; 3 24 margin: 0; 4 25 padding: 0; 26 + } 27 + 28 + ::selection { 29 + background: var(--accent); 30 + color: var(--bg); 5 31 } 6 32 7 33 body { 8 - font-family: system-ui, -apple-system, sans-serif; 9 - background: #0a0a0a; 10 - color: #e0e0e0; 11 - line-height: 1.5; 34 + font-family: var(--sans); 35 + font-size: 14px; 36 + background: var(--bg); 37 + color: var(--text); 38 + line-height: 1.65; 39 + -webkit-font-smoothing: antialiased; 12 40 } 13 41 42 + /* ── layout ── */ 43 + 14 44 .container { 15 - max-width: 900px; 45 + max-width: 960px; 16 46 margin: 0 auto; 17 - padding: 2rem 1rem; 47 + padding: 3rem 2rem; 18 48 } 19 49 20 50 h1 { 21 - font-size: 1.5rem; 22 - margin-bottom: 1.5rem; 23 - color: #fff; 51 + font-family: var(--sans); 52 + font-size: 3.5rem; 53 + font-weight: 400; 54 + font-style: normal; 55 + color: var(--text); 56 + letter-spacing: -0.03em; 57 + margin-bottom: 2.5rem; 58 + line-height: 1; 59 + } 60 + 61 + h1::after { 62 + content: ''; 63 + display: block; 64 + width: 100%; 65 + height: 2px; 66 + background: var(--accent); 67 + margin-top: 1rem; 24 68 } 25 69 26 70 h2 { 27 - font-size: 1.1rem; 28 - margin-bottom: 0.75rem; 29 - color: #ccc; 71 + font-family: var(--sans); 72 + font-size: 1.5rem; 73 + font-weight: 400; 74 + color: var(--text); 75 + letter-spacing: -0.01em; 76 + margin-bottom: 1rem; 77 + line-height: 1.2; 30 78 } 31 79 80 + /* ── topbar ── */ 81 + 32 82 .topbar { 33 83 display: flex; 34 84 align-items: center; 35 85 justify-content: space-between; 36 86 gap: 1rem; 37 - padding: 0.5rem 0; 38 - border-bottom: 1px solid #222; 39 - margin-bottom: 1rem; 87 + padding: 0.75rem 0; 88 + border-bottom: 2px solid var(--border); 89 + margin-bottom: 2rem; 90 + } 91 + 92 + .topbar span { 93 + font-size: 12px; 94 + color: var(--text-dim); 95 + letter-spacing: 0.02em; 96 + text-transform: uppercase; 40 97 } 41 98 42 99 .topbar code { 43 - font-size: 0.85rem; 44 - color: #aaa; 100 + font-family: var(--mono); 101 + font-size: 12px; 102 + color: var(--accent); 103 + text-transform: none; 45 104 } 46 105 106 + /* ── two-column layout ── */ 107 + 47 108 .layout { 48 109 display: flex; 49 - gap: 1.5rem; 110 + gap: 2rem; 50 111 align-items: flex-start; 51 112 } 52 113 53 114 .sidebar { 54 - width: 240px; 115 + width: 260px; 55 116 flex-shrink: 0; 56 - border: 1px solid #222; 57 - border-radius: 8px; 58 - padding: 1rem; 117 + border: 1px solid var(--border); 118 + border-top: 3px solid var(--accent); 119 + padding: 1.25rem; 120 + background: var(--bg-raised); 59 121 } 60 122 61 123 .main-panel { ··· 63 125 min-width: 0; 64 126 } 65 127 128 + /* ── sections ── */ 129 + 66 130 section { 67 131 margin-bottom: 1.5rem; 68 - padding: 1rem; 69 - border: 1px solid #222; 70 - border-radius: 8px; 132 + padding: 1.25rem; 133 + border: 1px solid var(--border); 134 + border-left: 3px solid var(--border-strong); 135 + background: var(--bg-raised); 136 + transition: border-left-color 0.2s ease; 137 + } 138 + 139 + section:hover { 140 + border-left-color: var(--accent); 71 141 } 72 142 73 143 section:last-child { 74 144 margin-bottom: 0; 75 145 } 76 146 147 + /* ── text helpers ── */ 148 + 77 149 .muted { 78 - color: #666; 79 - font-size: 0.85rem; 150 + color: var(--text-faint); 151 + font-size: 12px; 152 + letter-spacing: 0.03em; 153 + text-transform: uppercase; 80 154 } 81 155 156 + /* ── form fields ── */ 157 + 82 158 .field { 83 159 display: flex; 84 - gap: 0.5rem; 160 + gap: 0; 85 161 } 86 162 87 163 input[type="text"] { 88 164 flex: 1; 89 - padding: 0.5rem 0.75rem; 90 - border: 1px solid #333; 91 - border-radius: 6px; 92 - background: #141414; 93 - color: #e0e0e0; 94 - font-size: 0.9rem; 165 + padding: 0.6rem 0.85rem; 166 + border: 1px solid var(--border); 167 + border-right: none; 168 + background: var(--bg-input); 169 + color: var(--text); 170 + font-family: var(--mono); 171 + font-size: 13px; 172 + transition: border-color 0.15s ease; 95 173 } 96 174 97 175 input[type="text"]::placeholder { 98 - color: #666; 176 + color: var(--text-faint); 177 + font-style: italic; 178 + font-family: var(--sans); 179 + font-size: 13px; 99 180 } 100 181 101 182 input[type="text"]:focus { 102 183 outline: none; 103 - border-color: #555; 184 + border-color: var(--accent); 185 + background: var(--bg); 104 186 } 105 187 106 188 button { 107 - padding: 0.5rem 1rem; 108 - border: 1px solid #333; 109 - border-radius: 6px; 110 - background: #1a1a1a; 111 - color: #e0e0e0; 189 + padding: 0.6rem 1.2rem; 190 + border: 1px solid var(--border); 191 + background: var(--bg-input); 192 + color: var(--text); 112 193 cursor: pointer; 113 - font-size: 0.9rem; 194 + font-family: var(--sans); 195 + font-size: 13px; 196 + font-weight: 700; 197 + letter-spacing: 0.06em; 198 + text-transform: uppercase; 114 199 white-space: nowrap; 200 + transition: all 0.15s ease; 115 201 } 116 202 117 203 button:hover:not(:disabled) { 118 - background: #252525; 119 - border-color: #444; 204 + background: var(--accent); 205 + color: var(--bg); 206 + border-color: var(--accent); 120 207 } 121 208 122 209 button:disabled { 123 - opacity: 0.5; 210 + opacity: 0.35; 124 211 cursor: not-allowed; 125 212 } 126 213 214 + /* ── topbar logout button ── */ 215 + 216 + .topbar button { 217 + font-size: 11px; 218 + padding: 0.4rem 0.8rem; 219 + border-color: var(--border); 220 + } 221 + 222 + /* ── pre / code output ── */ 223 + 127 224 pre { 128 - background: #141414; 129 - border: 1px solid #222; 130 - border-radius: 6px; 131 - padding: 0.75rem; 225 + background: var(--bg); 226 + border: 1px solid var(--border); 227 + border-left: 3px solid var(--text-faint); 228 + padding: 0.85rem 1rem; 132 229 overflow-x: auto; 133 - font-size: 0.85rem; 134 - margin-top: 0.5rem; 230 + font-family: var(--mono); 231 + font-size: 12px; 232 + margin-top: 0.75rem; 135 233 white-space: pre-wrap; 136 234 word-break: break-all; 235 + line-height: 1.7; 236 + color: var(--text-dim); 137 237 } 138 238 239 + /* ── messages ── */ 240 + 139 241 .error { 140 - color: #f87171; 141 - background: #1c0a0a; 142 - border: 1px solid #3b1111; 143 - border-radius: 6px; 144 - padding: 0.5rem 0.75rem; 145 - margin-top: 0.5rem; 146 - font-size: 0.85rem; 242 + color: var(--error); 243 + background: var(--error-bg); 244 + border: 1px solid var(--error); 245 + border-left: 3px solid var(--error); 246 + padding: 0.6rem 0.85rem; 247 + margin-top: 0.75rem; 248 + font-size: 12px; 147 249 } 148 250 149 251 .success { 150 - color: #4ade80; 151 - border-color: #113b11; 252 + color: var(--accent); 253 + border-color: var(--accent); 254 + border-left: 3px solid var(--accent); 255 + background: var(--accent-bg); 152 256 } 153 257 258 + /* ── login form ── */ 259 + 154 260 form { 155 261 margin: 0; 156 262 } 157 263 264 + /* ── vouch list ── */ 265 + 158 266 .vouch-list { 159 267 list-style: none; 160 - margin-top: 0.5rem; 268 + margin-top: 0.75rem; 161 269 } 162 270 163 271 .vouch-list li { 164 272 display: flex; 165 273 justify-content: space-between; 166 - align-items: center; 167 - padding: 0.4rem 0; 168 - border-bottom: 1px solid #1a1a1a; 169 - font-size: 0.85rem; 170 - gap: 0.5rem; 274 + align-items: baseline; 275 + padding: 0.5rem 0; 276 + border-bottom: 1px solid var(--border); 277 + font-size: 12px; 278 + gap: 0.75rem; 171 279 } 172 280 173 281 .vouch-list li:last-child { 174 282 border-bottom: none; 175 283 } 176 284 285 + .vouch-list li::before { 286 + content: '\2713'; 287 + color: var(--accent); 288 + font-size: 10px; 289 + margin-right: 0.25rem; 290 + flex-shrink: 0; 291 + } 292 + 177 293 .vouch-handle { 178 - color: #e0e0e0; 294 + color: var(--text); 179 295 overflow: hidden; 180 296 text-overflow: ellipsis; 181 297 white-space: nowrap; 298 + flex: 1; 182 299 } 183 300 184 301 .vouch-date { 185 - color: #666; 186 - font-size: 0.75rem; 302 + color: var(--text-faint); 303 + font-size: 11px; 187 304 flex-shrink: 0; 305 + font-variant-numeric: tabular-nums; 188 306 } 307 + 308 + /* ── responsive ── */ 189 309 190 310 @media (max-width: 640px) { 311 + .container { 312 + padding: 2rem 1rem; 313 + } 314 + 315 + h1 { 316 + font-size: 2.5rem; 317 + } 318 + 191 319 .layout { 192 320 flex-direction: column; 193 321 }