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