A system for building static webapps
0
fork

Configure Feed

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

chore: update styles

+232 -66
+232 -66
packages/hono/static/styles.css
··· 1 + :root { 2 + --bg: #f1f5f9; 3 + --surface: #ffffff; 4 + --border: #e5e7eb; 5 + --text: #111827; 6 + --text-muted: #6b7280; 7 + --text-subtle: #9ca3af; 8 + --primary: #2563eb; 9 + --primary-dark: #1d4ed8; 10 + --danger: #dc2626; 11 + --success: #16a34a; 12 + --radius: 4px; 13 + } 14 + 1 15 * { 2 16 box-sizing: border-box; 3 17 margin: 0; 4 18 padding: 0; 5 19 } 20 + 6 21 body { 7 - font-family: 8 - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 9 - background: #f5f5f5; 10 - color: #333; 11 - line-height: 1.6; 22 + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 23 + background: var(--bg); 24 + color: var(--text); 25 + line-height: 1.5; 26 + font-size: 0.9375rem; 27 + } 28 + 29 + a { 30 + color: var(--primary); 31 + text-decoration: none; 32 + } 33 + 34 + a:hover { 35 + text-decoration: underline; 12 36 } 37 + 13 38 .container { 14 39 max-width: 800px; 15 40 margin: 0 auto; 16 - padding: 2rem; 41 + padding: 1.5rem 2rem; 17 42 } 43 + 18 44 header { 19 - background: #fff; 20 - border-bottom: 1px solid #e0e0e0; 21 - padding: 1rem 2rem; 45 + background: var(--surface); 46 + padding: 0.5rem 1.5rem; 22 47 display: flex; 23 48 justify-content: space-between; 24 49 align-items: center; 50 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); 25 51 } 52 + 26 53 header h1 { 27 - font-size: 1.25rem; 28 - font-weight: 600; 54 + font-size: 0.9375rem; 55 + font-weight: 700; 56 + letter-spacing: -0.01em; 29 57 } 58 + 30 59 nav a { 31 - margin-left: 1.5rem; 32 - color: #666; 60 + margin-left: 1.25rem; 61 + color: var(--text-muted); 33 62 text-decoration: none; 63 + font-size: 0.875rem; 34 64 } 65 + 35 66 nav a:hover { 36 - color: #333; 67 + color: var(--text); 68 + text-decoration: none; 37 69 } 70 + 38 71 .card { 39 - background: #fff; 40 - border-radius: 8px; 41 - padding: 1.5rem; 72 + background: var(--surface); 73 + border-radius: var(--radius); 74 + padding: 1.25rem; 42 75 margin-bottom: 1rem; 43 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 44 76 } 77 + 45 78 h2 { 46 - font-size: 1.25rem; 79 + font-size: 0.75rem; 80 + font-weight: 600; 81 + text-transform: uppercase; 82 + letter-spacing: 0.06em; 83 + color: var(--text-muted); 47 84 margin-bottom: 1rem; 48 85 } 86 + 49 87 .form-group { 50 - margin-bottom: 1rem; 88 + margin-bottom: 0.875rem; 51 89 } 90 + 52 91 label { 53 92 display: block; 54 - margin-bottom: 0.5rem; 93 + margin-bottom: 0.375rem; 55 94 font-weight: 500; 95 + font-size: 0.875rem; 56 96 } 97 + 57 98 input, select, textarea { 58 99 width: 100%; 59 - padding: 0.75rem; 60 - border: 1px solid #ddd; 61 - border-radius: 4px; 62 - font-size: 1rem; 100 + padding: 0.5rem 0.625rem; 101 + border: 1px solid var(--border); 102 + border-radius: var(--radius); 103 + font-size: 0.875rem; 63 104 font-family: inherit; 105 + background: var(--surface); 106 + color: var(--text); 107 + transition: border-color 0.15s, box-shadow 0.15s; 64 108 } 109 + 110 + input:focus, select:focus, textarea:focus { 111 + outline: none; 112 + border-color: var(--primary); 113 + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); 114 + } 115 + 65 116 button { 66 - background: #2563eb; 117 + display: inline-flex; 118 + align-items: center; 119 + justify-content: center; 120 + gap: 0.375rem; 121 + padding: 0.4375rem 0.875rem; 122 + border: 1px solid var(--primary-dark); 123 + border-radius: var(--radius); 124 + background: var(--primary); 67 125 color: #fff; 68 - border: none; 69 - padding: 0.75rem 1.5rem; 70 - border-radius: 4px; 71 - font-size: 1rem; 126 + font-size: 0.875rem; 127 + font-family: inherit; 128 + font-weight: 500; 72 129 cursor: pointer; 130 + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 0 rgba(0, 0, 0, 0.05); 131 + transition: background 0.1s, box-shadow 0.1s; 73 132 } 133 + 74 134 button:hover { 75 - background: #1d4ed8; 135 + background: var(--primary-dark); 136 + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.06); 137 + } 138 + 139 + button:active { 140 + box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.1); 76 141 } 142 + 77 143 button.danger { 78 - background: #dc2626; 144 + background: var(--surface); 145 + border-color: var(--border); 146 + color: var(--danger); 147 + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.03); 79 148 } 149 + 80 150 button.danger:hover { 81 - background: #b91c1c; 151 + background: #fef2f2; 152 + border-color: #fca5a5; 153 + color: #b91c1c; 154 + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.04); 82 155 } 156 + 83 157 button.secondary { 84 - background: #6b7280; 158 + background: var(--surface); 159 + border-color: var(--border); 160 + color: var(--text-muted); 161 + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.03); 85 162 } 163 + 86 164 button.secondary:hover { 87 - background: #4b5563; 165 + background: #f9fafb; 166 + color: var(--text); 167 + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.1), 0 2px 1px 0 rgba(0, 0, 0, 0.04); 88 168 } 169 + 89 170 .error { 90 - color: #dc2626; 171 + color: var(--danger); 172 + font-size: 0.875rem; 91 173 margin-bottom: 1rem; 174 + padding: 0.625rem 0.75rem; 175 + background: #fef2f2; 176 + border: 1px solid #fca5a5; 177 + border-radius: var(--radius); 92 178 } 179 + 93 180 .success { 94 - color: #16a34a; 181 + color: var(--success); 182 + font-size: 0.875rem; 95 183 margin-bottom: 1rem; 184 + padding: 0.625rem 0.75rem; 185 + background: #f0fdf4; 186 + border: 1px solid #86efac; 187 + border-radius: var(--radius); 96 188 } 189 + 97 190 table { 98 191 width: 100%; 99 192 border-collapse: collapse; 193 + font-size: 0.875rem; 100 194 } 195 + 101 196 th, td { 102 - padding: 0.75rem; 197 + padding: 0.625rem 0.75rem; 103 198 text-align: left; 104 - border-bottom: 1px solid #e0e0e0; 199 + border-bottom: 1px solid var(--border); 105 200 } 201 + 106 202 th { 203 + font-size: 0.75rem; 107 204 font-weight: 600; 108 - color: #666; 205 + text-transform: uppercase; 206 + letter-spacing: 0.05em; 207 + color: var(--text-muted); 109 208 } 209 + 110 210 .actions { 111 211 display: flex; 112 - gap: 0.5rem; 212 + gap: 0.375rem; 113 213 } 214 + 114 215 .actions button { 115 - padding: 0.5rem 1rem; 116 - font-size: 0.875rem; 216 + padding: 0.25rem 0.625rem; 217 + font-size: 0.8125rem; 117 218 } 219 + 118 220 .empty { 119 - color: #999; 221 + color: var(--text-subtle); 222 + font-size: 0.875rem; 120 223 font-style: italic; 224 + padding: 0.5rem 0; 121 225 } 226 + 122 227 .app-name { 123 - font-weight: 600; 228 + font-weight: 500; 124 229 } 230 + 125 231 .app-meta { 126 - color: #666; 127 - font-size: 0.875rem; 232 + color: var(--text-muted); 233 + font-size: 0.8125rem; 128 234 } 235 + 129 236 code { 130 237 background: #f3f4f6; 131 - padding: 0.25rem 0.5rem; 132 - border-radius: 4px; 133 - font-size: 0.875rem; 238 + padding: 0.15rem 0.4rem; 239 + border-radius: 3px; 240 + font-size: 0.8125rem; 241 + font-family: IBMPlexMono, ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; 242 + color: #374151; 134 243 } 244 + 135 245 .token-item { 136 246 display: flex; 137 247 align-items: center; 138 - padding: 0.75rem 0; 139 - border-bottom: 1px solid #e0e0e0; 248 + padding: 0.625rem 0; 249 + border-bottom: 1px solid var(--border); 140 250 } 251 + 141 252 .token-item:last-of-type { 142 253 border-bottom: none; 143 254 } 255 + 144 256 .token-info { 145 257 flex: 1; 146 258 } 259 + 147 260 .token-name { 148 261 font-weight: 500; 262 + font-size: 0.875rem; 149 263 } 264 + 150 265 .token-meta { 151 266 display: block; 152 - font-size: 0.8rem; 153 - color: #666; 154 - margin-top: 0.125rem; 267 + font-size: 0.75rem; 268 + color: var(--text-muted); 269 + margin-top: 0.1rem; 155 270 } 271 + 156 272 button.small { 157 - padding: 0.375rem 0.75rem; 158 - font-size: 0.875rem; 273 + padding: 0.25rem 0.5rem; 274 + font-size: 0.8125rem; 275 + min-height: 26px; 159 276 } 277 + 160 278 dialog { 161 - border: none; 162 - border-radius: 8px; 279 + border: 1px solid var(--border); 280 + border-radius: 6px; 163 281 padding: 1.5rem; 164 282 max-width: 460px; 165 283 width: 90vw; 166 - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); 284 + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 167 285 } 286 + 168 287 dialog::backdrop { 169 - background: rgba(0, 0, 0, 0.45); 288 + background: rgba(0, 0, 0, 0.3); 170 289 } 290 + 171 291 dialog h3 { 172 - font-size: 1.1rem; 292 + font-size: 0.9375rem; 293 + font-weight: 600; 173 294 margin-bottom: 1.25rem; 174 295 } 296 + 175 297 dialog hr { 176 298 border: none; 177 - border-top: 1px solid #e5e7eb; 299 + border-top: 1px solid var(--border); 178 300 margin: 1.25rem 0; 179 301 } 302 + 180 303 dl { 181 304 display: grid; 182 305 grid-template-columns: auto 1fr; 183 306 gap: 0.375rem 1rem; 184 307 } 308 + 185 309 dt { 186 310 font-weight: 600; 187 - color: #666; 188 - font-size: 0.85rem; 311 + color: var(--text-muted); 312 + font-size: 0.8125rem; 189 313 } 314 + 190 315 dd { 191 - font-size: 0.85rem; 316 + font-size: 0.8125rem; 192 317 word-break: break-all; 318 + color: var(--text); 193 319 } 320 + 194 321 .dialog-header { 195 322 display: flex; 196 323 justify-content: space-between; 197 324 align-items: center; 198 325 margin-bottom: 1.25rem; 199 326 } 327 + 200 328 .dialog-footer { 201 329 display: flex; 202 330 justify-content: space-between; 203 331 align-items: center; 204 332 margin-top: 1.25rem; 205 333 } 334 + 335 + @media (prefers-color-scheme: dark) { 336 + :root { 337 + --bg: #111827; 338 + --surface: #1f2937; 339 + --border: #374151; 340 + --text: #f9fafb; 341 + --text-muted: #9ca3af; 342 + --text-subtle: #6b7280; 343 + } 344 + 345 + code { 346 + background: #374151; 347 + color: #e5e7eb; 348 + } 349 + 350 + button.secondary:hover { 351 + background: #374151; 352 + } 353 + 354 + button.danger:hover { 355 + background: #1c0505; 356 + border-color: #7f1d1d; 357 + color: #fca5a5; 358 + } 359 + 360 + .error { 361 + background: #1c0505; 362 + border-color: #7f1d1d; 363 + color: #fca5a5; 364 + } 365 + 366 + .success { 367 + background: #052e16; 368 + border-color: #166534; 369 + color: #86efac; 370 + } 371 + }