Mercurial Hosting > qwb

comparison src/x.css @ 5:125e599b1217

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
agbubu
author Atarwn Gard <a@qwa.su>
date Tue, 17 Mar 2026 22:18:02 +0500
parents in/x.css@3222f88c0afe
children
comparison
equal deleted inserted replaced
4:ce2b6dde4c10 5:125e599b1217
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:first-child:not(:last-child) {
43 display: inline-block;
44 width: 50%;
45 }
46
47 footer p:nth-child(2) {
48 float: right;
49 text-align: right;
50 }
51
52 nav ul {
53 list-style: none;
54 border-bottom: 1px solid #eee;
55 padding-bottom: 0.5rem;
56 }
57
58 nav ul:last-child:not(:first-child) {
59 text-align: right;
60 }
61
62 nav li {
63 display: inline;
64 margin-right: 1rem;
65 }
66
67 nav a[current] {
68 font-weight: bold;
69 }
70
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
136 /* Dark mode support */
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; }
142 th, td, ul, footer { border-color: #333 !important; }
143 button { background: #eee; color: #111; }
144 input, textarea, button { background-color: #222; color: #ddd; }
145 }