-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathmeow.html
More file actions
486 lines (422 loc) · 24.3 KB
/
meow.html
File metadata and controls
486 lines (422 loc) · 24.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Daily Scroll | Dense CSS Newspaper</title>
<style>
/* --- RESET & BASE --- */
:root {
--bg-paper: #f4f1ea;
--ink-black: #1a1a1a;
--ink-grey: #4a4a4a;
--border-color: #2c2c2c;
--accent-red: #8a2be2;
--font-serif: 'Georgia', 'Times New Roman', Times, serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
--gap: 2rem;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: var(--bg-paper);
color: var(--ink-black);
font-family: var(--font-serif);
font-size: 17px; /* Slightly larger for readability */
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
/* --- THE REEL (Horizontal Wrapper) --- */
.newspaper-reel {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
flex-wrap: nowrap; /* Crucial: prevents wrapping of pages */
}
/* --- PAGE CONTAINERS --- */
.page {
/* Changed from fixed 100vw to auto to allow width overrides */
flex: 0 0 auto;
width: 100vw; /* Default width */
height: 100vh;
padding: 1.5rem;
scroll-snap-align: start;
position: relative;
border-right: 1px dashed var(--ink-grey);
overflow: hidden;
}
/* A page that is wider than the screen to fit long text */
.page.wide-read {
width: 250vw; /* 2.5 screens wide */
}
/* --- COLUMNS & LAYOUT LOGIC --- */
.content-wrapper {
height: 100%;
width: 100%;
column-count: auto;
/* Adjusted for character density (~60-75 chars) */
column-width: 26rem;
column-gap: var(--gap);
column-fill: auto;
column-rule: 1px solid #dcdcdc;
text-align: justify;
hyphens: auto;
}
.page.dense-mode .content-wrapper {
column-width: 20rem;
}
/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
text-transform: uppercase;
line-height: 0.95;
margin-top: 0;
margin-bottom: 0.6rem;
break-after: avoid;
}
h1 { font-size: 4.5rem; letter-spacing: -1px; border-bottom: 4px solid var(--ink-black); padding-bottom: 15px; margin-bottom: 25px; }
h2 { font-size: 2.8rem; border-top: 2px solid var(--ink-black); padding-top: 15px; }
h3 { font-size: 1.8rem; font-family: var(--font-sans); font-weight: 800; color: var(--ink-grey); border-bottom: 1px solid #ddd; padding-bottom: 5px; }
p {
margin-bottom: 1.2rem;
text-indent: 1.2em;
}
p.lead {
font-weight: bold;
font-size: 1.2rem;
font-style: italic;
text-indent: 0;
margin-bottom: 2rem;
}
/* Drop Cap */
.drop-cap::first-letter {
float: left;
font-size: 4rem;
line-height: 0.8;
font-family: var(--font-display);
margin-right: 0.6rem;
margin-top: 0.2rem;
color: var(--accent-red);
}
/* --- COMPONENTS --- */
article {
break-inside: avoid;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #ccc;
}
/* For very long articles, allow breaking */
article.long-read {
break-inside: auto;
border-bottom: none;
}
article.no-border { border-bottom: none; }
figure {
margin: 0 0 1.5rem 0;
width: 100%;
break-inside: avoid;
}
figure img {
width: 100%;
height: auto;
display: block;
/* Newspaper effect */
filter: grayscale(100%) contrast(1.2);
mix-blend-mode: multiply;
}
figcaption {
font-family: var(--font-sans);
font-size: 0.8rem;
color: var(--ink-grey);
margin-top: 0.5rem;
border-left: 3px solid var(--accent-red);
padding-left: 0.6rem;
}
.box-dark {
background: var(--ink-black);
color: var(--bg-paper);
padding: 1.5rem;
margin-bottom: 2rem;
break-inside: avoid;
}
.box-dark h3 { color: var(--bg-paper); border-color: var(--ink-grey); }
.box-outlined {
border: 4px double var(--ink-black);
padding: 1.2rem;
margin: 1.5rem 0;
background: white;
break-inside: avoid;
}
/* Quote Block */
.quote-box {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.4rem;
text-indent: 0;
border-left: 5px solid var(--accent-red);
padding-left: 1.5rem;
margin: 1.5rem 0;
break-inside: avoid;
line-height: 1.3;
}
.quote-box footer {
display: block;
margin-top: 0.5rem;
font-size: 0.8em;
font-style: normal;
font-weight: bold;
color: var(--ink-grey);
}
.meta {
font-family: var(--font-sans);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ink-grey);
margin-bottom: 0.8rem;
display: block;
font-weight: 700;
}
.weather-widget {
font-family: var(--font-sans);
border: 2px solid var(--ink-black);
padding: 0.8rem;
font-size: 0.9rem;
margin-bottom: 2.5rem;
text-indent: 0;
background: #fff;
}
.span-all {
/* Now contained within the first column */
text-align: left;
margin-bottom: 2rem;
border-bottom: 1px solid var(--ink-black);
padding-bottom: 1rem;
}
.span-all p { text-align: left; max-width: 100%; margin: 0 0 1rem 0; text-indent: 0; }
ul, ol {
padding-left: 1.5rem;
margin-bottom: 1.2rem;
}
li {
margin-bottom: 0.5rem;
}
/* --- MOBILE --- */
@media (max-width: 768px) {
.page, .page.wide-read {
width: 100vw;
height: 100vh;
padding: 1.5rem;
overflow-y: auto;
flex: 0 0 100vw;
}
.content-wrapper {
column-count: 1;
column-width: 100%;
height: auto;
display: block;
}
h1 { font-size: 3rem; }
}
/* Masthead */
.masthead {
text-align: left;
border-bottom: 5px double var(--ink-black);
margin-bottom: 2.5rem;
padding-bottom: 1rem;
}
.masthead-title {
font-family: 'Old English Text MT', 'Engravers MT', serif;
font-size: 3.5rem;
margin: 0;
line-height: 0.9;
}
.masthead-info {
font-family: var(--font-sans);
font-weight: bold;
text-transform: uppercase;
font-size: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
border-top: 2px solid var(--ink-black);
border-bottom: 1px solid var(--ink-black);
padding: 8px 0;
margin-top: 15px;
}
</style>
</head>
<body>
<main class="newspaper-reel">
<!-- PAGE 1: Front Page (Standard Width) -->
<section class="page">
<div class="content-wrapper">
<header class="masthead">
<div class="masthead-title">The Daily Protocol</div>
<div class="masthead-info">
<span>Vol. CDXX • Est. 2024</span>
<span>Price: Free (Open Source)</span>
<span>London • New York • Localhost</span>
</div>
</header>
<div class="weather-widget">
<strong>ALERT:</strong> Horizontal scrollbar detected in sector 7G. Authorities advise remaining calm and using the trackpad.
</div>
<article>
<span class="meta">Main Feature • By V. I. Lenin</span>
<h1>THE RETURN OF THE HORIZONTAL SCROLL</h1>
<figure>
<img src="https://placecats.com/600/350/a0c4ff/ffffff?text=FEATURED" alt="Cat Editor">
<figcaption>Fig 1. Even the cats are confused by the layout direction.</figcaption>
</figure>
<p class="lead drop-cap">In a world dominated by vertical feeds, one website dares to ask: "What if we went sideways?"</p>
<p>It has been years since the "Great Fold" debate of 2012. Designers argued whether users knew how to scroll. Today, we challenge that notion again. The horizontal axis, long neglected, is finally getting its due diligence. It creates a sense of finality, of flipping a page, that the infinite vertical scroll lacks.</p>
<p>Furthermore, studies from the Institute of Fake CSS Data show that users read 40% faster when columns are narrower. "It's about the eye travel," says Dr. Lorem Ipsum. "Why move your eyes all the way across a 4k screen? It's exhausting. We are saving calories here."</p>
</article>
<article class="box-dark">
<h3>MARKET WATCH</h3>
<p><strong>BULLISH:</strong> Serif fonts, high contrast borders, grayscale images, static HTML.</p>
<p><strong>BEARISH:</strong> Loading spinners, cookie banners, 'Sign up to continue' modals.</p>
</article>
<article>
<h2>The Cat Overflow</h2>
<p>Reports are coming in that cats are liquid. This has profound implications for our box-model layout engine. If a cat fits, it sits. But what if the `div` has `overflow: hidden`?</p>
<p>We interviewed a local tabby. "Meow," it stated, effectively ending the debate on semantic layouts.</p>
</article>
<article class="no-border">
<span class="meta">OPINION</span>
<h3>Why HTML is the Ultimate Framework</h3>
<p>We've reached peak complexity. The future is simple, declarative, and includes a lot of nested divs.</p>
</article>
</div>
</section>
<!-- PAGE 2: The Wide Read (Long Article) -->
<!-- This page has a wider width to accommodate more text columns -->
<section class="page wide-read">
<div class="content-wrapper">
<div class="span-all">
<h2 style="font-size: 3.2rem; border:none; margin:0;">THE INFINITE COLUMN</h2>
<p class="lead" style="margin-top: 1rem;">An investigative report into the depths of text rendering.</p>
</div>
<article class="long-read">
<span class="meta">Deep Dive • 25 Minute Read</span>
<p class="drop-cap">H</p>
<p>ere begins the long article. The purpose of this section is to demonstrate the capability of the layout engine to handle an excessive amount of text by simply adding more columns to the right, expanding the page width beyond the initial viewport. Consider the history of the printed word. Before the scroll, there was the tablet. Before the tablet, the wall. But the scroll—the papyrus scroll—was horizontal. We unrolled it from left to right (or right to left). We are merely returning to tradition.</p>
<h3>Chapter I: The Generator</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<figure style="float: right; width: 50%; margin-left: 1rem; margin-bottom: 1rem;">
<img src="https://placecats.com/400/400/000000/ffffff?text=BREAKING" alt="Side Cat">
<figcaption>A cat observing the margin.</figcaption>
</figure>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h3>Chapter II: The Density</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
<div class="box-outlined">
<h4>Technical Note: The Taming of Flow</h4>
<p>This layout uses `column-fill: auto`. This ensures that we fill the vertical space of the viewport before creating a new column to the right. It effectively creates a horizontal timeline of text. This is why the page expands so gracefully.</p>
</div>
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. But why stop here? Let us add more text to ensure we push the boundaries of the layout. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. We need to consider the implications of reading fatigue. When the columns are narrow, the eye snaps back quickly. This rhythm creates a trance-like state known as 'The Reader's High'. It is similar to the 'Runner's High' but involves less sweating and more coffee.</p>
<figure>
<img src="https://placecats.com/700/300/ffb347/000000?text=INFOGRAPHICS" alt="Wide Cat">
<figcaption>A panoramic view of the situation: Data overflow leads to a 250vw reading experience.</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac odio ten. Donec elementum, nulla vel viverra sodales, mi urna egestas sem, quis condimentum lacus urna sit amet metus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Endless scrolling is a dark pattern. Endless paging is a feature. The distinction is subtle but legally distinct. As we reach the end of this incredibly long horizontal segment, you will notice that the next page is waiting for you, cleanly separated by a dashed line. Order is restored. The chaos of the infinite feed is tamed by the rigidity of the column.</p>
<div class="quote-box">
"The most beautiful code is the code that is never written. The second most beautiful code is pure, unadulterated CSS."
<footer>— C. S. S. Guru</footer>
</div>
<p>Final thoughts: If you are reading this on a phone, you are scrolling down. If you are on a desktop, you are scrolling sideways. We live in a multi-dimensional universe.</p>
</article>
</div>
</section>
<!-- PAGE 3: NEW - Finance & Technology -->
<section class="page dense-mode">
<div class="content-wrapper">
<h1 style="text-align: left; color: var(--ink-black); font-size: 4rem; line-height: 0.8; margin-bottom: 15px;">FINANCE & TECH</h1>
<article class="box-outlined">
<span class="meta">Quick Ticker</span>
<p style="text-indent: 0; margin-bottom: 0.5rem; line-height: 1.1;"><strong>$ASTRO:</strong> +4.2% (CF Worker integration announced)</p>
<p style="text-indent: 0; margin-bottom: 0.5rem; line-height: 1.1;"><strong>$HTML:</strong> +1.5% (Return to roots rally)</p>
<p style="text-indent: 0; line-height: 1.1;"><strong>$JS_LIB:</strong> -8.1% (Market consolidation)</p>
</article>
<article>
<span class="meta">Business Report: The Cloud</span>
<h2>ZERO-RUNTIME ARCHITECTURE</h2>
<p>The pursuit of zero-runtime continues to dominate the discourse among serverless architects. By pushing more logic to the edge—or better yet, to build time—companies are slashing cold-start times and operating costs. The rise of static site generators and hyper-optimized bundling tools suggests a future where JavaScript is compiled away almost entirely.</p>
<p>This fundamental shift means the front-end developer must now think like a compiler engineer. Dependencies are liabilities, and every byte is measured in latency and dollars. The era of shipping the entire framework has ended.</p>
</article>
<article>
<figure>
<img src="https://placecats.com/300/200/c084fc/ffffff?text=TECH+TREND" alt="Tech Trend Cat">
<figcaption>The feline representation of the new data flow pipeline.</figcaption>
</figure>
<h3>The Web Assembly Threat</h3>
<p>Web Assembly, once a niche technology for C++ ports, is now threatening to displace traditional JavaScript for heavy computation tasks directly in the browser. Financial modeling, video processing, and even large language models are now executing locally. What does this mean for the JavaScript ecosystem?</p>
<p>Experts suggest a division of labor: JavaScript for the DOM, WASM for the heavy lifting. But the lines blur when frameworks start compiling their own UI rendering down to WASM.</p>
</article>
<div class="quote-box">
"Speed is no longer a feature; it is a prerequisite. Users will not wait for your 5MB bundle to download."
<footer>— A Latency Consultant</footer>
</div>
<article class="no-border">
<h2>Opinion: The Utility of Utility CSS</h2>
<p>While this newspaper shuns external frameworks, we must acknowledge the pervasive influence of utility-first CSS. It is the declarative assembly language of styling. It accelerates prototyping and, paradoxically, enforces a design system through constraint. The debate is over; utility classes have won the speed war, even if purists still weep.</p>
</article>
</div>
</section>
<!-- PAGE 4: Culture & Arts (Expanded Content) -->
<section class="page">
<div class="content-wrapper">
<h1 style="text-align: left; color: var(--accent-red); font-size: 4rem; line-height: 0.8; margin-bottom: 15px;">CULTURE & ARTS</h1>
<article>
<figure>
<img src="https://placecats.com/500/600/fec89a/000000?text=HIGH+ART" alt="Tall Cat">
<figcaption>Modern Art: "The Void Stares Back" (Acrylic on Canvas element)</figcaption>
</figure>
<h2>Is 'Div' Art? The Structuralist Debate</h2>
<p>Critics are divided. Some say the generic container is the ultimate expression of emptiness. Others say it needs more padding. We visited the Museum of Deprecated Tags to see the `blink` and `marquee` exhibit. It was moving, literally, and triggered widespread nostalgia among attendees born before the year 2000. Curators noted that the sheer terror of accessibility experts attempting to audit the exhibit was part of the 'meta-artistic experience'.</p>
</article>
<article class="box-dark">
<h3>Book Review: "The Uncanny Valley of Design"</h3>
<p>★★★★★</p>
<p>This is the essential text for anyone who has ever felt their clean, modern design was somehow just... wrong. Author Jane Doe explores why perfect alignment sometimes feels cold, arguing that digital warmth requires intentional, subtle imperfections.</p>
</article>
<article>
<h3>Horoscopes for Developers</h3>
<ol>
<li><strong>Python:</strong> You will find clarity in indentation today. A minor bug will reveal a major architectural flaw, leading to growth.</li>
<li><strong>Java:</strong> Expect a FactoryFactory problem in your relationships. Use dependency injection to stabilize your social life.</li>
<li><strong>JavaScript:</strong> `NaN` is not equal to `NaN`. Interpret that as you will. A complex asynchronous issue will resolve itself after a good night's sleep.</li>
<li><strong>C++:</strong> You will shoot yourself in the foot, but it will be highly optimized. Remember to delete your pointer to free up mental space.</li>
<li><strong>Rust:</strong> Your code will compile perfectly, but your confidence will be shattered by the compiler's passive-aggressive warnings.</li>
</ol>
</article>
<article class="no-border">
<h2>The Classifieds: Opportunities & Services</h2>
<p style="text-indent: 0; font-size: 0.9em; line-height: 1.2;">
<strong>WANTED:</strong> Senior CSS Architect. Must specialize in z-index conflict resolution and BEM methodology. Salary: Competitive. <br>
<strong>FOR SALE:</strong> Barely used copy of jQuery 1.0. Collector's item. Offers welcome. <br>
<strong>SERVICE:</strong> Semantic Div Consultation. We turn your chaotic tags into beautiful, standards-compliant markup. Guaranteed WCAG 2.1 AA.
</p>
</article>
<div style="border: 2px solid black; padding: 10px; text-align: center; margin-top: 2rem;">
<p style="font-family: var(--font-display); font-size: 1.5rem; margin:0;">SUBSCRIBE TODAY</p>
<p style="margin:0;">Get 12 issues for the price of 0.</p>
</div>
</div>
</section>
</main>
</body>
</html>