Hugging Face's logo

Spaces:
evalstate
/
__test_space_1
Running

App Files Community
__test_space_1 / news.html
evalstate
Update punny cat-diorama newspaper front page
361428e
raw
history blame contribute delete
20.8 kB
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Daily Purr‑ograph — Cat Diorama Headlines</title>
<meta name="description" content="A pun-packed newspaper-style homepage featuring recent, non-offensive headlines—each reimagined as a tiny cat diorama." />
<!-- Distinctive editorial type pairing (avoid generic system-only look) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
<style>
:root{
--paper:#f4efdf;
--paper2:#efe6cf;
--ink:#14110f;
--muted:#4a403a;
--rule:#2a2420;
--accent:#a13a2a; /* vintage red */
--accent2:#2a5a7a; /* inky blue */
--shadow: rgba(10,8,7,.18);
--serif: "Crimson Text", Georgia, serif;
--display: "IM Fell English SC", "Crimson Text", serif;
--mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 18px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
color:var(--ink);
font-family:var(--serif);
background:
radial-gradient(1200px 700px at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
radial-gradient(900px 650px at 90% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
linear-gradient(180deg, var(--paper), var(--paper2));
position:relative;
overflow-x:hidden;
}
/* paper grain */
body::before{
content:"";
position:fixed;
inset:-80px;
pointer-events:none;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,.03) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px),
repeating-linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 7px);
mix-blend-mode:multiply;
opacity:.18;
filter: blur(.15px);
transform: rotate(-.25deg);
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
.page{
max-width: 1160px;
margin: 0 auto;
padding: 18px 18px 56px;
}
.topbar{
display:flex;
gap:12px;
align-items:flex-end;
justify-content:space-between;
padding: 8px 2px 14px;
border-bottom: 2px solid var(--rule);
}
.meta{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
color:var(--muted);
font-size: 14px;
letter-spacing:.2px;
}
.pill{
font-family:var(--mono);
font-size:12px;
padding: 6px 10px;
border: 1px solid rgba(20,17,15,.35);
border-radius: 999px;
background: rgba(255,255,255,.35);
box-shadow: 0 8px 22px rgba(0,0,0,.06);
white-space:nowrap;
}
.masthead{
text-align:center;
padding: 18px 10px 10px;
}
.masthead h1{
font-family:var(--display);
font-weight: 400;
margin: 0;
font-size: clamp(44px, 6.6vw, 86px);
letter-spacing: .6px;
line-height: 1;
text-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.tagline{
margin: 8px 0 0;
font-style: italic;
color: var(--muted);
font-size: 16px;
}
.rule-row{
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
margin: 12px 0 18px;
padding: 10px 6px;
border-top: 1px solid rgba(20,17,15,.5);
border-bottom: 1px solid rgba(20,17,15,.5);
}
.rule-row .kicker{
font-family: var(--mono);
text-transform: uppercase;
letter-spacing:.14em;
font-size: 12px;
color: var(--muted);
}
.rule-row .kicker b{ color: var(--ink); }
.layout{
display:grid;
grid-template-columns: 1.25fr .75fr;
gap: 18px;
align-items:start;
}
@media (max-width: 980px){
.layout{ grid-template-columns: 1fr; }
}
.card{
background: rgba(255,255,255,.38);
border: 1px solid rgba(20,17,15,.22);
border-radius: var(--radius);
box-shadow: 0 18px 40px var(--shadow);
overflow:hidden;
}
.card .inner{ padding: 16px 16px 18px; }
.story{
border-bottom: 1px dashed rgba(20,17,15,.35);
}
.story:last-child{ border-bottom:0; }
.story-head{
display:flex;
gap: 12px;
align-items:flex-start;
justify-content:space-between;
padding: 16px;
border-bottom: 1px solid rgba(20,17,15,.18);
background:
radial-gradient(900px 220px at 10% 20%, rgba(161,58,42,.11), rgba(161,58,42,0) 60%),
radial-gradient(700px 220px at 90% 60%, rgba(42,90,122,.10), rgba(42,90,122,0) 55%);
}
.section-label{
font-family: var(--mono);
font-size: 12px;
letter-spacing:.16em;
text-transform: uppercase;
color: var(--accent2);
}
.headline{
font-size: clamp(26px, 2.25vw, 36px);
line-height: 1.06;
margin: 6px 0 8px;
font-weight: 600;
}
.deck{
margin:0;
color: var(--muted);
font-size: 17px;
line-height: 1.35;
max-width: 70ch;
}
.byline{
margin-top: 10px;
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
color: var(--muted);
font-size: 13px;
}
.byline .dot{ opacity:.6; }
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family: var(--mono);
font-size: 12px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(20,17,15,.35);
background: rgba(255,255,255,.35);
transition: transform .12s ease, background .12s ease;
white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.55); text-decoration:none; }
.art{
display:grid;
grid-template-columns: 1fr;
gap: 0;
}
figure{
margin:0;
position:relative;
background: #111;
}
figure img{
width:100%;
height:auto;
display:block;
filter: contrast(1.02) saturate(1.03);
}
figcaption{
position:absolute;
left: 12px;
bottom: 12px;
right: 12px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(20,17,15,.62);
color: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
font-size: 13px;
line-height: 1.25;
}
.copy{
padding: 14px 16px 18px;
}
.columns{
column-count: 2;
column-gap: 22px;
font-size: 17px;
line-height: 1.55;
color: var(--ink);
}
@media (max-width: 760px){
.columns{ column-count: 1; }
}
.columns p{ margin: 0 0 12px; }
.columns p:first-child::first-letter{
float:left;
font-family: var(--display);
font-size: 56px;
line-height: 1;
padding: 2px 10px 0 0;
color: var(--accent);
text-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.side{
position:sticky;
top: 12px;
}
@media (max-width: 980px){
.side{ position:relative; top:auto; }
}
.side h3{
font-family: var(--display);
letter-spacing: .3px;
font-size: 24px;
margin: 0 0 10px;
}
.side .box{
padding: 14px 14px 16px;
border-top: 1px dashed rgba(20,17,15,.35);
}
.side .box:first-child{ border-top:0; }
.mini{
display:grid;
gap:10px;
}
.mini .item{
display:flex;
gap:10px;
align-items:flex-start;
padding: 10px 10px;
border-radius: 14px;
border: 1px solid rgba(20,17,15,.18);
background: rgba(255,255,255,.32);
}
.mini .badge{
width: 32px;
height: 32px;
border-radius: 10px;
display:grid;
place-items:center;
border: 1px solid rgba(20,17,15,.25);
background: rgba(161,58,42,.12);
font-family: var(--mono);
font-size: 12px;
color: var(--accent);
flex: 0 0 auto;
}
.mini .item b{ display:block; }
.mini .item span{ color:var(--muted); font-size: 13px; line-height: 1.25; }
.fineprint{
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.footer{
margin-top: 18px;
padding-top: 14px;
border-top: 2px solid rgba(20,17,15,.7);
display:flex;
flex-wrap:wrap;
gap: 12px;
justify-content:space-between;
align-items:flex-start;
}
.sources{
display:flex;
flex-direction:column;
gap:6px;
max-width: 72ch;
}
.sources a{
text-decoration: underline;
text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
*{ transition:none !important; scroll-behavior:auto !important; }
}
</style>
</head>
<body>
<div class="page">
<div class="topbar">
<div class="meta">
<span class="pill">VOL. CXLII · NO. 57</span>
<span class="pill">PRICE: 3 TUNA‑TOKENS</span>
<span class="pill">EDITION: EXTRA WHISKERS</span>
</div>
<div class="meta" style="justify-content:flex-end; text-align:right;">
<span class="pill">Thursday, February 26, 2026</span>
</div>
</div>
<header class="masthead">
<h1>THE DAILY PURR‑OGRAPH</h1>
<p class="tagline">All the news that’s fit to purr‑int — now with dioramas, drama, and a suspicious amount of cardboard.</p>
</header>
<div class="rule-row">
<div class="kicker"><b>BREAKING:</b> scientists confirm gravity still works, despite several cats’ best efforts.</div>
<div class="kicker">today’s sections: <b>Space &amp; Whiskers</b> · <b>Tech Meow‑tters</b> · <b>Arts &amp; Crafts‑trophysics</b></div>
</div>
<main class="layout">
<!-- MAIN STORIES -->
<section class="card" aria-label="Top stories">
<!-- Story 1 -->
<article class="story">
<div class="story-head">
<div>
<div class="section-label">Space &amp; Whiskers</div>
<h2 class="headline">Artemis II Gets a Pit‑Stop: Moon Rocket Rolls Back for Repairs (a.k.a. a Meow‑chanics Visit)</h2>
<p class="deck">NASA says the Artemis II rocket returned for repairs—because even moon‑bound hardware sometimes needs a little… paw‑lish.</p>
<div class="byline">
<span>By the Purr‑sociated Press (Desk Cat)</span><span class="dot">•</span>
<span>Filed: Feb 25, 2026</span><span class="dot">•</span>
<a class="btn" href="https://www.nasa.gov/blogs/artemis/2026/02/25/nasa-artemis-ii-rocket-returns-for-repairs/" target="_blank" rel="noopener">Read NASA story <span aria-hidden="true">↗</span></a>
</div>
</div>
</div>
<div class="art">
<figure>
<img src="assets/story1-rocket.webp" alt="A miniature diorama of cats guiding a large orange-and-white rocket into a hangar." loading="lazy" />
<figcaption><b>Cat Diorama:</b> The Artemis II ‘roll‑back’ — tiny safety cones, big rocket energy, and enough pawprints to qualify as a new kind of telemetry.</figcaption>
</figure>
<div class="copy">
<div class="columns">
<p>In today’s installment of <i>Space, But Make It Craft</i>, NASA’s Artemis II rocket headed back for repairs. Think of it as a scheduled nap for a very large, very expensive orange‑and‑white “tube of zoom.”</p>
<p>Our newsroom’s expert meow‑chanics report that rollbacks are a normal part of the rocket’s road trip: if a component looks even slightly “hiss‑y,” it’s better to bring it in for a tune‑up now than to discover the issue mid‑moon.</p>
<p>Meanwhile, the feline ground crew has already issued a statement: “We did not chew the cables. We merely inspected them with our teeth.”</p>
</div>
</div>
</div>
</article>
<!-- Story 2 -->
<article class="story">
<div class="story-head">
<div>
<div class="section-label">Tech Meow‑tters</div>
<h2 class="headline">Purr‑severance Gets a Mars ‘GPS’: No More “Are We There Meow?”</h2>
<p class="deck">A GPS‑like boost from orbit could help the Perseverance rover know where it is on Mars—so it can stop asking for directions like a lost kitten in a big red parking lot.</p>
<div class="byline">
<span>By Rover &amp; Order (Field Unit)</span><span class="dot">•</span>
<span>Filed: Feb 23, 2026</span><span class="dot">•</span>
<a class="btn" href="https://www.space.com/space-exploration/mars-rovers/perseverance-rover-gets-mars-gps-from-space" target="_blank" rel="noopener">Read Space.com <span aria-hidden="true">↗</span></a>
</div>
</div>
</div>
<div class="art">
<figure>
<img src="assets/story2-mars-gps.webp" alt="A handmade diorama of a cat astronaut guiding a small Mars rover with a map and an overhead satellite." loading="lazy" />
<figcaption><b>Cat Diorama:</b> Mission Control’s newest navigation system: one satellite, one map, and one cat who insists the shortest route is “straight through the couch.”</figcaption>
</figure>
<div class="copy">
<div class="columns">
<p>Mars navigation can be tricky: no street signs, no coffee shops, and absolutely no helpful strangers to point dramatically at the horizon. That’s why a GPS‑like approach—using signals from orbit—can be a big deal for rover positioning.</p>
<p>Our feline analysts call it “Global Paws‑itioning,” a system designed to reduce wrong turns, wasted wheel tracks, and awkward moments when the rover has to pretend it <i>meant</i> to loop around that rock five times.</p>
<p>In unrelated news, our office cat has demanded the same upgrade for the living room, citing “insufficient satellite coverage” whenever it can’t find its favorite sunbeam.</p>
</div>
</div>
</div>
</article>
<!-- Story 3 -->
<article class="story">
<div class="story-head">
<div>
<div class="section-label">Arts &amp; Crafts‑trophysics</div>
<h2 class="headline">Hubble Finds One of the Darkest Known Galaxies: A Real Cat‑astrophe of Light (or Lack Thereof)</h2>
<p class="deck">A new Hubble result highlights an exceptionally dark galaxy—proof that even the universe occasionally forgets to turn on the lamp.</p>
<div class="byline">
<span>By The Stellar Desk (Night Shift)</span><span class="dot">•</span>
<span>Filed: Feb 18, 2026</span><span class="dot">•</span>
<a class="btn" href="https://science.nasa.gov/missions/hubble/hubble-identifies-one-of-darkest-known-galaxies/" target="_blank" rel="noopener">Read NASA Science <span aria-hidden="true">↗</span></a>
</div>
</div>
</div>
<div class="art">
<figure>
<img src="assets/story3-dark-galaxy.webp" alt="A moody diorama of two cats with tiny telescopes and notebooks looking at a nearly invisible dark galaxy display." loading="lazy" />
<figcaption><b>Cat Diorama:</b> Two astronomers, one tiny telescope, and a galaxy that’s basically a stealth mode loaf. Visibility: meow‑nimal.</figcaption>
</figure>
<div class="copy">
<div class="columns">
<p>When Hubble points at something described as “one of the darkest known galaxies,” it’s not being dramatic. It’s more like: “Hello, I brought a telescope, and the universe brought a blackout curtain.”</p>
<p>Dark galaxies—faint, elusive, and hard to spot—are a reminder that not everything cosmic is a sparkling postcard. Some parts of space are more like a cat at night: present, powerful, and determined not to be photographed.</p>
<p>Luckily, our diorama reconstruction team has reproduced the scene with museum‑grade seriousness and craft‑store glitter, because science demands accuracy… and also tiny props.</p>
</div>
</div>
</div>
</article>
</section>
<!-- SIDEBAR -->
<aside class="card side" aria-label="Sidebar">
<div class="inner">
<h3>Extra! Extra! Read All About Mews</h3>
<p class="fineprint">A pun‑forward, non‑offensive front page. Dioramas are AI‑generated recreations inspired by the linked reporting — no actual cats were launched, lost, or asked to file expense reports.</p>
</div>
<div class="box">
<div class="mini">
<div class="item">
<div class="badge">CAT</div>
<div>
<b>Cat‑Cast Weather</b>
<span>Mostly sunny with scattered laser‑pointer activity. Chance of hairballs: 12% (but feels like 100%).</span>
</div>
</div>
<div class="item">
<div class="badge">PUN</div>
<div>
<b>Market Meows</b>
<span>Tuna futures up, cardboard derivatives stable, and the Yarn Index continues to unravel.</span>
</div>
</div>
<div class="item">
<div class="badge">PSA</div>
<div>
<b>Public Service Announce‑mint</b>
<span>If you can’t find your keys, check the “quantum box”: the cat both <i>has</i> them and <i>doesn’t</i> — until observed.</span>
</div>
</div>
</div>
</div>
<div class="box">
<h3 style="margin:0 0 10px;">Micro‑Classifieds</h3>
<div class="mini">
<div class="item">
<div class="badge">1</div>
<div>
<b>Wanted:</b>
<span>One brave intern to proofread <i>purr‑nunciation</i> errors. Pay in snacks. Benefits include naps.</span>
</div>
</div>
<div class="item">
<div class="badge">2</div>
<div>
<b>For Sale:</b>
<span>Gently used “Mars Map.” Slightly chewed corner. Still points generally toward “over there.”</span>
</div>
</div>
<div class="item">
<div class="badge">3</div>
<div>
<b>Lost &amp; Found:</b>
<span>One black galaxy. If seen, please do <i>not</i> turn on the lights — it’s shy.</span>
</div>
</div>
</div>
</div>
</aside>
</main>
<footer class="footer">
<div class="sources">
<div class="kicker"><b>Sources</b> (linked above, repeated here for convenience)</div>
<div class="fineprint">
<div>• NASA Artemis blog: <a href="https://www.nasa.gov/blogs/artemis/2026/02/25/nasa-artemis-ii-rocket-returns-for-repairs/" target="_blank" rel="noopener">NASA Artemis II Rocket Returns for Repairs</a></div>
<div>• Space.com: <a href="https://www.space.com/space-exploration/mars-rovers/perseverance-rover-gets-mars-gps-from-space" target="_blank" rel="noopener">Perseverance rover gets a Mars GPS from space</a></div>
<div>• NASA Science / Hubble: <a href="https://science.nasa.gov/missions/hubble/hubble-identifies-one-of-darkest-known-galaxies/" target="_blank" rel="noopener">Hubble identifies one of darkest known galaxies</a></div>
</div>
</div>
<div class="fineprint" style="max-width:38ch;">
<div class="kicker"><b>Colophon</b></div>
<div>Typeset in IM Fell English SC, Crimson Text &amp; DM Mono.</div>
<div>Printed on 100% recycled imaginary paper.</div>
<div style="margin-top:8px;">© 2026 The Daily Purr‑ograph (definitely not a real newspaper).</div>
</div>
</footer>
</div>
</body>
</html>