Mercurial Hosting > qwb

comparison in/x.css @ 0:ac64aa92dea1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial
author Atarwn Gard <a@qwa.su>
date Fri, 13 Mar 2026 13:13:07 +0500
parents
children 72124c0555c8
comparison
equal deleted inserted replaced
-1:000000000000 0:ac64aa92dea1
1 /* 1. The Reset: Neutralizing browser quirks across engines */
2 * {
3 box-sizing: border-box;
4 margin: 0;
5 padding: 0;
6 }
7
8 /* 2. Typography: Manrope with system fallbacks for lightweight browsers */
9 @font-face {
10 font-family: 'Manrope';
11 src: url('https://qwaderton.org/Manrope-VariableFont_wght.woff2') format('woff2-variations');
12 font-weight: 100 800;
13 }
14
15 html {
16 font-size: 100%;
17 -webkit-text-size-adjust: 100%;
18 }
19
20 body {
21 font-family: 'Manrope', system-ui, -apple-system, sans-serif;
22 line-height: 1.6;
23 color: #333;
24 background: #fff;
25 max-width: 45rem; /* The "Golden Width" for readability */
26 margin: 2rem auto;
27 padding: 0 1rem;
28 text-rendering: optimizeLegibility;
29 }
30
31 /* 3. Semantic Layout: No classes needed */
32 header, nav, main, section, footer {
33 display: block; /* Fix for older browsers */
34 margin-bottom: 2rem;
35 }
36
37 footer {
38 border-top: 1px solid #eee;
39 padding-top: 0.5rem;
40 }
41
42 footer p {
43 float: left;
44 width: 50%;
45 }
46
47 footer p:nth-child(2) {
48 text-align: right;
49 }
50
51 nav ul {
52 list-style: none;
53 padding-bottom: 0.5rem;
54 }
55
56 nav ul:first-child:not(:last-child) {
57 float: left;
58 }
59
60 nav ul:last-child {
61 border-bottom: 1px solid #eee;
62 }
63
64 nav ul:nth-child(2) {
65 text-align: right;
66 }
67
68 nav li {
69 display: inline;
70 margin-right: 1rem;
71 }
72
73 /* 4. Elements */
74 h1, h2, h3, h4 {
75 line-height: 1.2;
76 margin-top: 2rem;
77 margin-bottom: 1rem;
78 font-weight: 700;
79 }
80
81 a { color: #0070f3; text-decoration: none; }
82 a:hover { text-decoration: underline; }
83
84 p, blockquote, ul, ol, dl, table, pre {
85 margin-bottom: 1.5rem;
86 }
87
88 blockquote {
89 border-left: 4px solid #eee;
90 padding-left: 1rem;
91 font-style: italic;
92 }
93
94 img, video {
95 max-width: 100%;
96 height: auto;
97 }
98
99 /* 5. Tables & Forms: Standardized for basic engines */
100 table {
101 width: 100%;
102 border-collapse: collapse;
103 }
104
105 th, td {
106 padding: 0.5rem;
107 text-align: left;
108 border-bottom: 1px solid #eee;
109 }
110
111 input, textarea, button, select {
112 font-family: inherit;
113 font-size: 1rem;
114 padding: 0.5rem;
115 margin-bottom: 1rem;
116 display: block;
117 }
118
119 input[type="checkbox"],input[type="radio"] {
120 display: inline
121 }
122
123 button, select {
124 width: auto;
125 cursor: pointer;
126 background: #333;
127 color: #fff;
128 border: none;
129 border-radius: 4px;
130 }
131
132 @media (max-width: 46rem) {
133 li {
134 margin-left: 1rem;
135 }
136 }
137
138 /* Dark mode support for modern browsers (ignored by NetSurf/Chawan) */
139 @media (prefers-color-scheme: dark) {
140 body { background: #1a1a1a; color: #eee; }
141 h1, h2, h3 { color: #fff; }
142 a { color: #3291ff; }
143 blockquote { border-color: #444; }
144 th, td { border-color: #333; }
145 button { background: #eee; color: #111; }
146 input, textarea, button { background-color: #222; color: #ddd; }
147 nav ul:last-child, footer { border-color: #333; }
148 }
149