|
0
|
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
|
