Mercurial Hosting > qwb
diff out/x.css @ 5:125e599b1217
agbubu
| author | Atarwn Gard <a@qwa.su> |
|---|---|
| date | Tue, 17 Mar 2026 22:18:02 +0500 |
| parents | in/x.css@3222f88c0afe |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/out/x.css Tue Mar 17 22:18:02 2026 +0500 @@ -0,0 +1,145 @@ +/* 1. The Reset: Neutralizing browser quirks across engines */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* 2. Typography: Manrope with system fallbacks for lightweight browsers */ +@font-face { + font-family: 'Manrope'; + src: url('https://qwaderton.org/Manrope-VariableFont_wght.woff2') format('woff2-variations'); + font-weight: 100 800; +} + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + font-family: 'Manrope', system-ui, -apple-system, sans-serif; + line-height: 1.6; + color: #333; + background: #fff; + max-width: 45rem; /* The "Golden Width" for readability */ + margin: 2rem auto; + padding: 0 1rem; + text-rendering: optimizeLegibility; +} + +/* 3. Semantic Layout: No classes needed */ +header, nav, main, section, footer { + display: block; /* Fix for older browsers */ + margin-bottom: 2rem; +} + +footer { + border-top: 1px solid #eee; + padding-top: 0.5rem; +} + +footer p:first-child:not(:last-child) { + display: inline-block; + width: 50%; +} + +footer p:nth-child(2) { + float: right; + text-align: right; +} + +nav ul { + list-style: none; + border-bottom: 1px solid #eee; + padding-bottom: 0.5rem; +} + +nav ul:last-child:not(:first-child) { + text-align: right; +} + +nav li { + display: inline; + margin-right: 1rem; +} + +nav a[current] { + font-weight: bold; +} + +/* 4. Elements */ +h1, h2, h3, h4 { + line-height: 1.2; + margin-top: 2rem; + margin-bottom: 1rem; + font-weight: 700; +} + +a { color: #0070f3; text-decoration: none; } +a:hover { text-decoration: underline; } + +p, blockquote, ul, ol, dl, table, pre { + margin-bottom: 1.5rem; +} + +blockquote { + border-left: 4px solid #eee; + padding-left: 1rem; + font-style: italic; +} + +img, video { + max-width: 100%; + height: auto; +} + +/* 5. Tables & Forms: Standardized for basic engines */ +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 0.5rem; + text-align: left; + border-bottom: 1px solid #eee; +} + +input, textarea, button, select { + font-family: inherit; + font-size: 1rem; + padding: 0.5rem; + margin-bottom: 1rem; + display: block; +} + +input[type="checkbox"],input[type="radio"] { + display: inline +} + +button, select { + width: auto; + cursor: pointer; + background: #333; + color: #fff; + border: none; + border-radius: 4px; +} + +@media (max-width: 46rem) { + li { + margin-left: 1rem; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + body { background: #1a1a1a; color: #eee; } + h1, h2, h3 { color: #fff; } + a { color: #3291ff; } + blockquote { border-color: #444; } + th, td, ul, footer { border-color: #333 !important; } + button { background: #eee; color: #111; } + input, textarea, button { background-color: #222; color: #ddd; } +}
