Rust library to generate static websites
erika.florist
1/* Reset and base styles */
2* {
3 box-sizing: border-box;
4}
5body {
6 margin: 0;
7 padding: 0;
8 font-family:
9 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10 line-height: 1.6;
11 color: #333;
12 min-height: 100vh;
13}
14
15/* Layout */
16.container {
17 max-width: 1024px;
18 margin: 0 auto;
19 padding: 48px 24px;
20}
21
22.header {
23 text-align: center;
24 margin-bottom: 48px;
25}
26
27.header h1 {
28 font-size: 2.5rem;
29 font-weight: bold;
30 color: #1a1a1a;
31 margin: 0 0 16px 0;
32}
33
34.header p {
35 font-size: 1.25rem;
36 color: #666;
37 margin: 0;
38}
39
40.footer {
41 margin-top: 48px;
42 text-align: center;
43 color: #888;
44}
45
46/* Component styles */
47.prose {
48 font-size: 1.125rem;
49 color: #374151;
50 line-height: 1.75;
51}
52
53/* Heading styles */
54.anchor-link {
55 opacity: 0;
56 transition: opacity 0.2s;
57 text-decoration: none;
58 color: #ba1f33;
59}
60h1:hover .anchor-link,
61h2:hover .anchor-link,
62h3:hover .anchor-link,
63h4:hover .anchor-link,
64h5:hover .anchor-link,
65h6:hover .anchor-link {
66 opacity: 1;
67}
68
69/* Link styles */
70.external-link {
71 color: #ba1f33;
72 text-decoration: none;
73}
74.external-link:hover {
75 text-decoration: underline;
76}
77.external-link::after {
78 content: "↗";
79 color: #ba1f33;
80}
81
82.internal-link {
83 color: #ba1f33;
84 text-decoration: none;
85}
86.internal-link:hover {
87 text-decoration: underline;
88}
89
90/* Image styles */
91.image-wrapper {
92 margin: 24px 0;
93 text-align: center;
94}
95.responsive-image {
96 max-width: 100%;
97 height: auto;
98 border-radius: 8px;
99 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
100}
101.image-wrapper figcaption {
102 margin-top: 8px;
103 font-style: italic;
104 color: #666;
105 font-size: 0.9rem;
106}
107
108/* Strong and emphasis */
109.gradient-text {
110 font-weight: bold;
111 background: linear-gradient(to right, #ba1f33, #fa3252);
112 -webkit-background-clip: text;
113 -webkit-text-fill-color: transparent;
114 background-clip: text;
115}
116
117.emphasis-text {
118 font-style: italic;
119 color: #ba1f33;
120}
121
122/* Code styles */
123.inline-code {
124 background-color: #f3f4f6;
125 color: #dc2626;
126 padding: 2px 4px;
127 border-radius: 4px;
128 font-family:
129 "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
130 font-size: 0.875rem;
131}
132
133/* Code blocks */
134pre {
135 background-color: #1a202c;
136 color: #e2e8f0;
137 padding: 16px;
138 border-radius: 8px;
139 overflow-x: auto;
140 margin: 16px 0;
141 border: 1px solid #2d3748;
142}
143
144pre code {
145 background: none;
146 color: inherit;
147 padding: 0;
148 border-radius: 0;
149 font-family:
150 "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
151 font-size: 0.875rem;
152 line-height: 1.5;
153}
154
155/* Blockquote styles */
156.blockquote-note,
157.blockquote-tip,
158.blockquote-warning,
159.blockquote-important,
160.blockquote-caution {
161 padding: 16px;
162 margin: 16px 0;
163 border-radius: 8px;
164 display: flex;
165 align-items: center;
166 gap: 12px;
167}
168
169.blockquote-note {
170 border-left: 4px solid #3b82f6;
171 background-color: #eff6ff;
172}
173.blockquote-tip {
174 border-left: 4px solid #10b981;
175 background-color: #f0fdf4;
176}
177.blockquote-warning {
178 border-left: 4px solid #f59e0b;
179 background-color: #fffbeb;
180}
181.blockquote-important {
182 border-left: 4px solid #8b5cf6;
183 background-color: #faf5ff;
184}
185.blockquote-caution {
186 border-left: 4px solid #ef4444;
187 background-color: #fef2f2;
188}
189.blockquote-default {
190 border-left: 4px solid #9ca3af;
191 background-color: #f9fafb;
192 padding: 16px;
193 margin: 16px 0;
194 font-style: italic;
195 border-radius: 8px;
196}
197
198.blockquote-icon {
199 font-size: 1.2em;
200 line-height: 1;
201 flex-shrink: 0;
202 display: flex;
203 align-items: center;
204 justify-content: center;
205}
206
207.blockquote-content {
208 flex: 1;
209 margin: 0;
210}
211
212.blockquote-content p {
213 margin: 0;
214}
215
216/* List styles */
217.custom-list {
218 margin: 16px 0;
219 padding-left: 16px;
220}
221.custom-list li {
222 margin: 8px 0;
223 color: #374151;
224 transition: color 0.2s;
225}
226.custom-list li:hover {
227 color: #1f2937;
228}
229
230/* Strikethrough */
231.strikethrough {
232 text-decoration: line-through;
233 color: #6b7280;
234 opacity: 0.75;
235}
236
237/* Task list */
238.task-checkbox {
239 margin-right: 8px;
240}
241.task-checkbox[checked] {
242 accent-color: #ba1f33;
243}
244
245/* Table styles */
246.custom-table {
247 width: 100%;
248 border-collapse: separate;
249 border-spacing: 0;
250 border: 1px solid #d1d5db;
251 border-radius: 8px;
252 overflow: hidden;
253 margin: 24px 0;
254}
255
256.table-header {
257 background-color: #f9fafb;
258}
259
260.table-header th {
261 padding: 12px 24px;
262 text-align: left;
263 font-size: 0.75rem;
264 font-weight: 500;
265 color: #6b7280;
266 text-transform: uppercase;
267 letter-spacing: 0.05em;
268}
269
270.table-row {
271 transition: background-color 0.2s;
272}
273.table-row:hover {
274 background-color: #f9fafb;
275}
276
277.table-cell {
278 padding: 12px 24px;
279 white-space: nowrap;
280 font-size: 0.875rem;
281 color: #1f2937;
282}
283
284.table-cell.center {
285 text-align: center;
286}
287.table-cell.right {
288 text-align: right;
289}
290
291/* Horizontal rule */
292.custom-hr {
293 margin: 32px 0;
294 border: none;
295 height: 2px;
296 background: linear-gradient(to right, #ba1f33, #fa3252);
297}
298
299/* Hard break */
300.hard-break {
301 display: block;
302 content: "";
303 margin: 8px 0;
304}