|
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
|
|
2
|
42 footer p:first-child:not(:last-child) {
|
|
|
43 display: inline-block;
|
|
0
|
44 width: 50%;
|
|
|
45 }
|
|
|
46
|
|
|
47 footer p:nth-child(2) {
|
|
2
|
48 float: right;
|
|
0
|
49 text-align: right;
|
|
|
50 }
|
|
|
51
|
|
|
52 nav ul {
|
|
|
53 list-style: none;
|
|
2
|
54 border-bottom: 1px solid #eee;
|
|
0
|
55 padding-bottom: 0.5rem;
|
|
|
56 }
|
|
|
57
|
|
5
|
58 nav ul:last-child:not(:first-child) {
|
|
2
|
59 text-align: right;
|
|
0
|
60 }
|
|
|
61
|
|
|
62 nav li {
|
|
|
63 display: inline;
|
|
|
64 margin-right: 1rem;
|
|
|
65 }
|
|
|
66
|
|
5
|
67 nav a[current] {
|
|
|
68 font-weight: bold;
|
|
|
69 }
|
|
|
70
|
|
0
|
71 /* 4. Elements */
|
|
|
72 h1, h2, h3, h4 {
|
|
|
73 line-height: 1.2;
|
|
|
74 margin-top: 2rem;
|
|
|
75 margin-bottom: 1rem;
|
|
|
76 font-weight: 700;
|
|
|
77 }
|
|
|
78
|
|
|
79 a { color: #0070f3; text-decoration: none; }
|
|
|
80 a:hover { text-decoration: underline; }
|
|
|
81
|
|
|
82 p, blockquote, ul, ol, dl, table, pre {
|
|
|
83 margin-bottom: 1.5rem;
|
|
|
84 }
|
|
|
85
|
|
|
86 blockquote {
|
|
|
87 border-left: 4px solid #eee;
|
|
|
88 padding-left: 1rem;
|
|
|
89 font-style: italic;
|
|
|
90 }
|
|
|
91
|
|
|
92 img, video {
|
|
|
93 max-width: 100%;
|
|
|
94 height: auto;
|
|
|
95 }
|
|
|
96
|
|
|
97 /* 5. Tables & Forms: Standardized for basic engines */
|
|
|
98 table {
|
|
|
99 width: 100%;
|
|
|
100 border-collapse: collapse;
|
|
|
101 }
|
|
|
102
|
|
|
103 th, td {
|
|
|
104 padding: 0.5rem;
|
|
|
105 text-align: left;
|
|
|
106 border-bottom: 1px solid #eee;
|
|
|
107 }
|
|
|
108
|
|
|
109 input, textarea, button, select {
|
|
|
110 font-family: inherit;
|
|
|
111 font-size: 1rem;
|
|
|
112 padding: 0.5rem;
|
|
|
113 margin-bottom: 1rem;
|
|
|
114 display: block;
|
|
|
115 }
|
|
|
116
|
|
|
117 input[type="checkbox"],input[type="radio"] {
|
|
|
118 display: inline
|
|
|
119 }
|
|
|
120
|
|
|
121 button, select {
|
|
|
122 width: auto;
|
|
|
123 cursor: pointer;
|
|
|
124 background: #333;
|
|
|
125 color: #fff;
|
|
|
126 border: none;
|
|
|
127 border-radius: 4px;
|
|
|
128 }
|
|
|
129
|
|
|
130 @media (max-width: 46rem) {
|
|
|
131 li {
|
|
|
132 margin-left: 1rem;
|
|
|
133 }
|
|
|
134 }
|
|
|
135
|
|
2
|
136 /* Dark mode support */
|
|
0
|
137 @media (prefers-color-scheme: dark) {
|
|
|
138 body { background: #1a1a1a; color: #eee; }
|
|
|
139 h1, h2, h3 { color: #fff; }
|
|
|
140 a { color: #3291ff; }
|
|
|
141 blockquote { border-color: #444; }
|
|
2
|
142 th, td, ul, footer { border-color: #333 !important; }
|
|
0
|
143 button { background: #eee; color: #111; }
|
|
|
144 input, textarea, button { background-color: #222; color: #ddd; }
|
|
|
145 }
|
