@whykusanagi/corrupted-theme 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +339 -0
- package/Dockerfile +32 -0
- package/LICENSE +21 -0
- package/README.md +399 -0
- package/docker-entrypoint.sh +48 -0
- package/docs/COMPONENTS_REFERENCE.md +659 -0
- package/examples/.env.example +100 -0
- package/examples/button.html +436 -0
- package/examples/card.html +678 -0
- package/examples/form.html +555 -0
- package/examples/index.html +520 -0
- package/examples/layout.html +507 -0
- package/examples/nikke-team-builder.html +580 -0
- package/examples/showcase-complete.html +1071 -0
- package/examples/showcase.html +502 -0
- package/package.json +70 -0
- package/scripts/celeste-proxy-server.js +99 -0
- package/scripts/static-server.js +113 -0
- package/src/css/animations.css +649 -0
- package/src/css/components.css +1441 -0
- package/src/css/glassmorphism.css +217 -0
- package/src/css/nikke-utilities.css +530 -0
- package/src/css/theme.css +478 -0
- package/src/css/typography.css +198 -0
- package/src/css/utilities.css +239 -0
- package/src/css/variables.css +73 -0
- package/src/lib/celeste-proxy.js +215 -0
- package/src/lib/celeste-widget.js +1089 -0
- package/src/lib/corrupted-text.js +193 -0
- package/src/lib/corruption-loading.js +405 -0
|
@@ -0,0 +1,507 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Layout Patterns - Corrupted Theme</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/css/theme.css">
|
|
9
|
+
<style>
|
|
10
|
+
.container {
|
|
11
|
+
max-width: 1200px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.section {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.section h2 {
|
|
21
|
+
color: var(--accent);
|
|
22
|
+
margin-bottom: var(--spacing-lg);
|
|
23
|
+
font-size: 1.5rem;
|
|
24
|
+
padding-bottom: var(--spacing-md);
|
|
25
|
+
border-bottom: 2px solid var(--border);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.layout-demo {
|
|
29
|
+
background: var(--glass);
|
|
30
|
+
border: 2px dashed var(--border);
|
|
31
|
+
border-radius: var(--radius-lg);
|
|
32
|
+
padding: var(--spacing-lg);
|
|
33
|
+
margin-bottom: var(--spacing-lg);
|
|
34
|
+
min-height: 200px;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
color: var(--text-secondary);
|
|
39
|
+
text-align: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.layout-box {
|
|
43
|
+
background: var(--bg-secondary);
|
|
44
|
+
border: 1px solid var(--border);
|
|
45
|
+
border-radius: var(--radius-md);
|
|
46
|
+
padding: var(--spacing-lg);
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
min-height: 100px;
|
|
51
|
+
color: var(--text);
|
|
52
|
+
font-weight: 500;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.two-column {
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-template-columns: 2fr 1fr;
|
|
58
|
+
gap: var(--spacing-lg);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.three-column {
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: repeat(3, 1fr);
|
|
64
|
+
gap: var(--spacing-lg);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.four-column {
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-columns: repeat(4, 1fr);
|
|
70
|
+
gap: var(--spacing-lg);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.sidebar-layout {
|
|
74
|
+
display: grid;
|
|
75
|
+
grid-template-columns: 1fr 300px;
|
|
76
|
+
gap: var(--spacing-lg);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.hero-section {
|
|
80
|
+
background: var(--gradient-accent);
|
|
81
|
+
color: white;
|
|
82
|
+
padding: var(--spacing-2xl) var(--spacing-lg);
|
|
83
|
+
border-radius: var(--radius-lg);
|
|
84
|
+
text-align: center;
|
|
85
|
+
margin-bottom: var(--spacing-lg);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.hero-section h3 {
|
|
89
|
+
color: white;
|
|
90
|
+
margin-bottom: var(--spacing-md);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.grid-info {
|
|
94
|
+
font-size: 0.85rem;
|
|
95
|
+
color: var(--text-secondary);
|
|
96
|
+
margin-bottom: var(--spacing-lg);
|
|
97
|
+
padding: var(--spacing-md);
|
|
98
|
+
background: var(--bg-secondary);
|
|
99
|
+
border-radius: var(--radius-md);
|
|
100
|
+
border-left: 3px solid var(--accent);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.responsive-note {
|
|
104
|
+
font-size: 0.85rem;
|
|
105
|
+
color: var(--text-secondary);
|
|
106
|
+
margin-top: var(--spacing-lg);
|
|
107
|
+
padding: var(--spacing-md);
|
|
108
|
+
background: var(--glass);
|
|
109
|
+
border-radius: var(--radius-md);
|
|
110
|
+
border-left: 3px solid var(--color-info);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.code-block {
|
|
114
|
+
background: var(--bg);
|
|
115
|
+
border: 1px solid var(--border);
|
|
116
|
+
border-radius: var(--radius-md);
|
|
117
|
+
padding: var(--spacing-md);
|
|
118
|
+
margin-top: var(--spacing-md);
|
|
119
|
+
font-family: 'Courier New', monospace;
|
|
120
|
+
font-size: 0.875rem;
|
|
121
|
+
color: var(--text-secondary);
|
|
122
|
+
overflow-x: auto;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.flex-demo {
|
|
126
|
+
display: flex;
|
|
127
|
+
gap: var(--spacing-lg);
|
|
128
|
+
flex-wrap: wrap;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.feature-grid {
|
|
132
|
+
display: grid;
|
|
133
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
134
|
+
gap: var(--spacing-lg);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@media (max-width: 1024px) {
|
|
138
|
+
.two-column {
|
|
139
|
+
grid-template-columns: 1fr;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.three-column {
|
|
143
|
+
grid-template-columns: repeat(2, 1fr);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.four-column {
|
|
147
|
+
grid-template-columns: repeat(2, 1fr);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.sidebar-layout {
|
|
151
|
+
grid-template-columns: 1fr;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@media (max-width: 768px) {
|
|
156
|
+
.three-column {
|
|
157
|
+
grid-template-columns: 1fr;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.four-column {
|
|
161
|
+
grid-template-columns: 1fr;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.flex-demo {
|
|
165
|
+
flex-direction: column;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
</style>
|
|
169
|
+
</head>
|
|
170
|
+
<body>
|
|
171
|
+
<nav class="navbar">
|
|
172
|
+
<div class="navbar-content">
|
|
173
|
+
<a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
|
|
174
|
+
<div class="navbar-links">
|
|
175
|
+
<a href="#grid">Grid</a>
|
|
176
|
+
<a href="#flex">Flexbox</a>
|
|
177
|
+
<a href="#sidebar">Sidebar</a>
|
|
178
|
+
<a href="#hero">Hero</a>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</nav>
|
|
182
|
+
|
|
183
|
+
<div class="container">
|
|
184
|
+
<h1><i class="fas fa-th-large"></i> Layout Patterns</h1>
|
|
185
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
|
|
186
|
+
Common layout patterns and grid systems for responsive page design.
|
|
187
|
+
</p>
|
|
188
|
+
|
|
189
|
+
<!-- Grid Layouts -->
|
|
190
|
+
<section id="grid" class="section">
|
|
191
|
+
<h2>Grid Layouts</h2>
|
|
192
|
+
|
|
193
|
+
<!-- Two Column -->
|
|
194
|
+
<div>
|
|
195
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Two Column (2fr 1fr)</h3>
|
|
196
|
+
<div class="grid-info">
|
|
197
|
+
Responsive: Stacks to single column on tablets and mobile
|
|
198
|
+
</div>
|
|
199
|
+
<div class="two-column">
|
|
200
|
+
<div class="layout-box">Main Content (2fr)</div>
|
|
201
|
+
<div class="layout-box">Sidebar (1fr)</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<!-- Three Column -->
|
|
206
|
+
<div style="margin-top: var(--spacing-2xl);">
|
|
207
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Three Column (1fr 1fr 1fr)</h3>
|
|
208
|
+
<div class="grid-info">
|
|
209
|
+
Responsive: 2 columns on tablets, 1 column on mobile
|
|
210
|
+
</div>
|
|
211
|
+
<div class="three-column">
|
|
212
|
+
<div class="layout-box">Column 1</div>
|
|
213
|
+
<div class="layout-box">Column 2</div>
|
|
214
|
+
<div class="layout-box">Column 3</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<!-- Four Column -->
|
|
219
|
+
<div style="margin-top: var(--spacing-2xl);">
|
|
220
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Four Column (1fr 1fr 1fr 1fr)</h3>
|
|
221
|
+
<div class="grid-info">
|
|
222
|
+
Responsive: 2 columns on tablets, 1 column on mobile
|
|
223
|
+
</div>
|
|
224
|
+
<div class="four-column">
|
|
225
|
+
<div class="layout-box">1</div>
|
|
226
|
+
<div class="layout-box">2</div>
|
|
227
|
+
<div class="layout-box">3</div>
|
|
228
|
+
<div class="layout-box">4</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<!-- Auto-fit Grid -->
|
|
233
|
+
<div style="margin-top: var(--spacing-2xl);">
|
|
234
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Auto-fit Grid (Responsive)</h3>
|
|
235
|
+
<div class="grid-info">
|
|
236
|
+
Automatically fills columns - adapts to screen size
|
|
237
|
+
</div>
|
|
238
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-lg);">
|
|
239
|
+
<div class="layout-box">Item</div>
|
|
240
|
+
<div class="layout-box">Item</div>
|
|
241
|
+
<div class="layout-box">Item</div>
|
|
242
|
+
<div class="layout-box">Item</div>
|
|
243
|
+
<div class="layout-box">Item</div>
|
|
244
|
+
<div class="layout-box">Item</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<div class="code-block">
|
|
249
|
+
/* Two column layout */
|
|
250
|
+
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-lg);">
|
|
251
|
+
<div>Main content</div>
|
|
252
|
+
<div>Sidebar</div>
|
|
253
|
+
</div>
|
|
254
|
+
|
|
255
|
+
/* Three column layout */
|
|
256
|
+
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);">
|
|
257
|
+
<div>Column 1</div>
|
|
258
|
+
<div>Column 2</div>
|
|
259
|
+
<div>Column 3</div>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
/* Auto-responsive grid */
|
|
263
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg);">
|
|
264
|
+
<!-- Items automatically flow -->
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</section>
|
|
268
|
+
|
|
269
|
+
<!-- Flexbox Layouts -->
|
|
270
|
+
<section id="flex" class="section">
|
|
271
|
+
<h2>Flexbox Layouts</h2>
|
|
272
|
+
|
|
273
|
+
<!-- Row Layout -->
|
|
274
|
+
<div>
|
|
275
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Horizontal Row</h3>
|
|
276
|
+
<div class="grid-info">
|
|
277
|
+
Items arranged left to right, wraps on small screens
|
|
278
|
+
</div>
|
|
279
|
+
<div style="display: flex; gap: var(--spacing-lg); flex-wrap: wrap;">
|
|
280
|
+
<div style="flex: 1; min-width: 150px;" class="layout-box">Item 1</div>
|
|
281
|
+
<div style="flex: 1; min-width: 150px;" class="layout-box">Item 2</div>
|
|
282
|
+
<div style="flex: 1; min-width: 150px;" class="layout-box">Item 3</div>
|
|
283
|
+
<div style="flex: 1; min-width: 150px;" class="layout-box">Item 4</div>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<!-- Column Layout -->
|
|
288
|
+
<div style="margin-top: var(--spacing-2xl);">
|
|
289
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Vertical Column</h3>
|
|
290
|
+
<div class="grid-info">
|
|
291
|
+
Items stacked vertically
|
|
292
|
+
</div>
|
|
293
|
+
<div style="display: flex; flex-direction: column; gap: var(--spacing-lg); max-width: 400px;">
|
|
294
|
+
<div class="layout-box">Item 1</div>
|
|
295
|
+
<div class="layout-box">Item 2</div>
|
|
296
|
+
<div class="layout-box">Item 3</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<!-- Space-between -->
|
|
301
|
+
<div style="margin-top: var(--spacing-2xl);">
|
|
302
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Space-Between (Header/Footer)</h3>
|
|
303
|
+
<div class="grid-info">
|
|
304
|
+
First item left, last item right, space between
|
|
305
|
+
</div>
|
|
306
|
+
<div style="display: flex; justify-content: space-between; align-items: center; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-lg); gap: var(--spacing-lg);">
|
|
307
|
+
<div class="layout-box" style="min-width: 150px;">Logo</div>
|
|
308
|
+
<div style="flex: 1;"></div>
|
|
309
|
+
<div class="layout-box" style="min-width: 150px;">User Menu</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
|
|
313
|
+
<!-- Center -->
|
|
314
|
+
<div style="margin-top: var(--spacing-2xl);">
|
|
315
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Centered Layout</h3>
|
|
316
|
+
<div class="grid-info">
|
|
317
|
+
Items centered both horizontally and vertically
|
|
318
|
+
</div>
|
|
319
|
+
<div style="display: flex; justify-content: center; align-items: center; gap: var(--spacing-lg); background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-lg); min-height: 200px;">
|
|
320
|
+
<div class="layout-box">Centered Content</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<div class="code-block">
|
|
325
|
+
/* Horizontal row with wrapping */
|
|
326
|
+
<div style="display: flex; gap: var(--spacing-lg); flex-wrap: wrap;">
|
|
327
|
+
<div style="flex: 1; min-width: 150px;">Item</div>
|
|
328
|
+
<div style="flex: 1; min-width: 150px;">Item</div>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
/* Vertical column */
|
|
332
|
+
<div style="display: flex; flex-direction: column; gap: var(--spacing-lg);">
|
|
333
|
+
<div>Item 1</div>
|
|
334
|
+
<div>Item 2</div>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
/* Space between (header) */
|
|
338
|
+
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
339
|
+
<div>Logo</div>
|
|
340
|
+
<div>Nav</div>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
/* Centered */
|
|
344
|
+
<div style="display: flex; justify-content: center; align-items: center;">
|
|
345
|
+
<div>Centered</div>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
</section>
|
|
349
|
+
|
|
350
|
+
<!-- Sidebar Layout -->
|
|
351
|
+
<section id="sidebar" class="section">
|
|
352
|
+
<h2>Sidebar Layout</h2>
|
|
353
|
+
|
|
354
|
+
<div class="grid-info">
|
|
355
|
+
Main content + sidebar. Responsive: stacks on tablets
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<div class="sidebar-layout">
|
|
359
|
+
<div class="layout-box" style="min-height: 300px;">
|
|
360
|
+
<div style="text-align: left; width: 100%;">
|
|
361
|
+
<h4 style="margin-top: 0; color: white;">Main Content Area</h4>
|
|
362
|
+
<p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">
|
|
363
|
+
Your article, post, or primary content goes here. This area takes up 2/3 of the space.
|
|
364
|
+
</p>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="layout-box" style="min-height: 300px;">
|
|
368
|
+
<div style="text-align: left; width: 100%;">
|
|
369
|
+
<h4 style="margin-top: 0; color: white;">Sidebar</h4>
|
|
370
|
+
<p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">
|
|
371
|
+
Secondary navigation, ads, or related content. Fixed width sidebar.
|
|
372
|
+
</p>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<div class="code-block">
|
|
378
|
+
<div style="display: grid; grid-template-columns: 1fr 300px; gap: var(--spacing-lg);">
|
|
379
|
+
<div>Main Content</div>
|
|
380
|
+
<div>Sidebar (300px fixed)</div>
|
|
381
|
+
</div>
|
|
382
|
+
|
|
383
|
+
@media (max-width: 1024px) {
|
|
384
|
+
/* Stacks on smaller screens */
|
|
385
|
+
grid-template-columns: 1fr;
|
|
386
|
+
}
|
|
387
|
+
</div>
|
|
388
|
+
</section>
|
|
389
|
+
|
|
390
|
+
<!-- Hero Section -->
|
|
391
|
+
<section id="hero" class="section">
|
|
392
|
+
<h2>Hero Sections</h2>
|
|
393
|
+
|
|
394
|
+
<div class="hero-section">
|
|
395
|
+
<h2>Hero Section Example</h2>
|
|
396
|
+
<p style="font-size: 1.1rem; margin-bottom: var(--spacing-lg);">
|
|
397
|
+
Large, attention-grabbing section at the top of a page
|
|
398
|
+
</p>
|
|
399
|
+
<button class="btn" style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white;">
|
|
400
|
+
Call to Action
|
|
401
|
+
</button>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<div class="hero-section" style="background: linear-gradient(135deg, #8b5cf6, #d94f90); min-height: 300px; display: flex; flex-direction: column; justify-content: center;">
|
|
405
|
+
<h2 style="font-size: 2.5rem; margin-bottom: var(--spacing-md);">Large Hero</h2>
|
|
406
|
+
<p style="font-size: 1.2rem; max-width: 600px; margin-bottom: var(--spacing-lg);">
|
|
407
|
+
With more height and breathing room for important messaging
|
|
408
|
+
</p>
|
|
409
|
+
<div style="display: flex; gap: var(--spacing-md); flex-wrap: wrap;">
|
|
410
|
+
<button class="btn" style="background: white; color: var(--accent);">Get Started</button>
|
|
411
|
+
<button class="btn btn-ghost" style="border-color: white; color: white;">Learn More</button>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
|
|
415
|
+
<div class="code-block">
|
|
416
|
+
<section style="background: var(--gradient-accent); color: white; padding: var(--spacing-2xl); text-align: center;">
|
|
417
|
+
<h2>Hero Section</h2>
|
|
418
|
+
<p>Tagline or description</p>
|
|
419
|
+
<button class="btn">Call to Action</button>
|
|
420
|
+
</section>
|
|
421
|
+
</div>
|
|
422
|
+
</section>
|
|
423
|
+
|
|
424
|
+
<!-- Feature Grid -->
|
|
425
|
+
<section class="section">
|
|
426
|
+
<h2>Feature Grid</h2>
|
|
427
|
+
|
|
428
|
+
<div class="grid-info">
|
|
429
|
+
Auto-responsive grid for feature cards or service listings
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg);">
|
|
433
|
+
<div class="card">
|
|
434
|
+
<div style="font-size: 2.5rem; color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
435
|
+
<i class="fas fa-rocket"></i>
|
|
436
|
+
</div>
|
|
437
|
+
<h4>Feature One</h4>
|
|
438
|
+
<p>Description of the feature and its benefits.</p>
|
|
439
|
+
</div>
|
|
440
|
+
<div class="card">
|
|
441
|
+
<div style="font-size: 2.5rem; color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
442
|
+
<i class="fas fa-shield-alt"></i>
|
|
443
|
+
</div>
|
|
444
|
+
<h4>Feature Two</h4>
|
|
445
|
+
<p>Description of the feature and its benefits.</p>
|
|
446
|
+
</div>
|
|
447
|
+
<div class="card">
|
|
448
|
+
<div style="font-size: 2.5rem; color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
449
|
+
<i class="fas fa-zap"></i>
|
|
450
|
+
</div>
|
|
451
|
+
<h4>Feature Three</h4>
|
|
452
|
+
<p>Description of the feature and its benefits.</p>
|
|
453
|
+
</div>
|
|
454
|
+
<div class="card">
|
|
455
|
+
<div style="font-size: 2.5rem; color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
456
|
+
<i class="fas fa-users"></i>
|
|
457
|
+
</div>
|
|
458
|
+
<h4>Feature Four</h4>
|
|
459
|
+
<p>Description of the feature and its benefits.</p>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
<div class="code-block">
|
|
464
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg);">
|
|
465
|
+
<div class="card">
|
|
466
|
+
<i>Icon</i>
|
|
467
|
+
<h4>Feature</h4>
|
|
468
|
+
<p>Description</p>
|
|
469
|
+
</div>
|
|
470
|
+
<!-- More cards -->
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
</section>
|
|
474
|
+
|
|
475
|
+
<!-- Responsive Tips -->
|
|
476
|
+
<section class="section">
|
|
477
|
+
<h2>Responsive Design Tips</h2>
|
|
478
|
+
|
|
479
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg);">
|
|
480
|
+
<div class="card">
|
|
481
|
+
<h4>Mobile First</h4>
|
|
482
|
+
<p>Design for mobile first, then add complexity for larger screens.</p>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="card">
|
|
485
|
+
<h4>Breakpoints</h4>
|
|
486
|
+
<p>Use media queries at 768px (mobile/tablet) and 1024px (tablet/desktop).</p>
|
|
487
|
+
</div>
|
|
488
|
+
<div class="card">
|
|
489
|
+
<h4>Flexible Grid</h4>
|
|
490
|
+
<p>Use grid-template-columns: repeat(auto-fit, minmax(...)) for automatic wrapping.</p>
|
|
491
|
+
</div>
|
|
492
|
+
<div class="card">
|
|
493
|
+
<h4>Flexbox Wrap</h4>
|
|
494
|
+
<p>Enable flex-wrap for items to wrap to next line on small screens.</p>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
</section>
|
|
498
|
+
|
|
499
|
+
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
500
|
+
<p>Layout Patterns Documentation • Corrupted Theme v0.1.0</p>
|
|
501
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
502
|
+
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
503
|
+
</p>
|
|
504
|
+
</footer>
|
|
505
|
+
</div>
|
|
506
|
+
</body>
|
|
507
|
+
</html>
|