mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -0,0 +1,672 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>THE MILES BUGLE — Miles Wolf Allen</title>
|
||||
<meta name="description" content="The Miles Bugle — all the code that's fit to print. A newspaper edition of Miles Wolf Allen, developer & 3D artist.">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f4efde'/%3E%3Ctext x='50' y='72' font-size='60' font-family='Arial Black' font-weight='900' text-anchor='middle' fill='%23b3202c'%3EB%3C/text%3E%3C/svg%3E">
|
||||
<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=Pirata+One&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ════════════════════════════════════════════════
|
||||
THE MILES BUGLE — a Daily Bugle–style newspaper
|
||||
newsprint cream · ink black · bugle red
|
||||
════════════════════════════════════════════════ */
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root{
|
||||
--paper: #f4efde;
|
||||
--paper-deep: #ece3ca;
|
||||
--paper-bright:#fffdf4;
|
||||
--ink: #1b1813;
|
||||
--ink-soft: #55503f;
|
||||
--muted: #6f6856;
|
||||
--red: #b3202c;
|
||||
--red-deep: #8c1720;
|
||||
--rule: #1b1813;
|
||||
--blackletter:'Pirata One', 'UnifrakturMaguntia', serif;
|
||||
--display: 'Playfair Display', Georgia, serif;
|
||||
--body: 'Source Serif 4', Georgia, serif;
|
||||
}
|
||||
html{ scroll-behavior:smooth; }
|
||||
body{
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--body);
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
::selection{ background: var(--red); color: var(--paper-bright); }
|
||||
a{ color: inherit; }
|
||||
img{ display:block; max-width:100%; }
|
||||
|
||||
/* ── aged newsprint grain + vignette ── */
|
||||
body::before{
|
||||
content:''; position: fixed; inset:0; z-index: 0; pointer-events:none; opacity:.055;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
body::after{
|
||||
content:''; position: fixed; inset:0; z-index:0; pointer-events:none;
|
||||
background: radial-gradient(ellipse at center, transparent 55%, rgba(27,24,19,.10) 100%);
|
||||
}
|
||||
.page{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:26px clamp(18px,4vw,48px) 0; }
|
||||
|
||||
/* ── dateline bar ── */
|
||||
.dateline{
|
||||
display:flex; justify-content:space-between; align-items:center; gap:14px;
|
||||
font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
|
||||
border-top:1px solid var(--rule);
|
||||
border-bottom:3px double var(--rule);
|
||||
padding:7px 0; margin-bottom:14px;
|
||||
}
|
||||
.dateline .right{ text-align:right; }
|
||||
@media (max-width:720px){ .dateline .center{ display:none; } }
|
||||
|
||||
/* ── masthead ── */
|
||||
.masthead{
|
||||
text-align:center;
|
||||
font-family: var(--blackletter);
|
||||
font-size: clamp(54px, 11.5vw, 148px);
|
||||
line-height: .95; letter-spacing: .015em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink);
|
||||
margin: 6px 0 0;
|
||||
user-select:none;
|
||||
}
|
||||
.masthead .spider{
|
||||
display:inline-block; font-size:.42em; vertical-align:middle;
|
||||
margin:0 .14em; transform:translateY(-.06em);
|
||||
}
|
||||
.mast-rule{ border-top: 5px double var(--red); margin: 10px 0 8px; }
|
||||
.tagline{
|
||||
display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
|
||||
font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
|
||||
color: var(--muted); padding-bottom: 10px;
|
||||
}
|
||||
.tagline em{ font-style:normal; color: var(--red); font-weight:700; }
|
||||
@media (max-width:720px){ .tagline{ justify-content:center; text-align:center; } }
|
||||
|
||||
/* ── section nav ── */
|
||||
.sections{
|
||||
display:flex; justify-content:center; flex-wrap:wrap;
|
||||
gap: 4px 16px; padding: 11px 0 13px;
|
||||
border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.sections a{
|
||||
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
|
||||
text-decoration:none; color: var(--ink);
|
||||
transition: color .15s;
|
||||
}
|
||||
.sections a:hover{ color: var(--red); }
|
||||
.sections .dot{ color: var(--red); font-weight:900; }
|
||||
|
||||
/* ── section headers ── */
|
||||
.sec-head{
|
||||
display:flex; align-items:center; gap:16px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.sec-head::before, .sec-head::after{ content:''; flex:1; border-top:1px solid var(--rule); }
|
||||
.sec-tag{
|
||||
font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
|
||||
color: var(--red); white-space:nowrap;
|
||||
}
|
||||
.sec-title{
|
||||
font-family: var(--blackletter);
|
||||
font-size: clamp(40px, 6.5vw, 78px);
|
||||
line-height: .95; text-transform: uppercase;
|
||||
margin: 4px 0 30px;
|
||||
}
|
||||
.sec-title .ed{ color: var(--red); }
|
||||
.sec-sub{ font-size:13px; color:var(--muted); margin-top:-20px; margin-bottom:26px; font-style:italic; }
|
||||
|
||||
/* ── front page grid ── */
|
||||
.front{
|
||||
display:grid; grid-template-columns: 2fr 1fr;
|
||||
gap: clamp(24px, 3vw, 44px);
|
||||
border-bottom: 3px double var(--rule);
|
||||
padding-bottom: 34px; margin-bottom: 8px;
|
||||
}
|
||||
@media (max-width:860px){ .front{ grid-template-columns:1fr; } }
|
||||
|
||||
.kicker{
|
||||
font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
|
||||
color: var(--red); margin-bottom: 12px;
|
||||
}
|
||||
.headline{
|
||||
font-family: var(--display); font-weight:900;
|
||||
font-size: clamp(34px, 5vw, 62px);
|
||||
line-height: .99; letter-spacing:-.01em; text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.subhead{
|
||||
font-family: var(--display); font-style:italic; font-weight:700;
|
||||
font-size: clamp(16px, 1.9vw, 21px); color: var(--ink-soft);
|
||||
margin-bottom: 16px; max-width: 46ch;
|
||||
}
|
||||
.byline{
|
||||
font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
|
||||
padding-bottom: 10px; margin-bottom: 18px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
|
||||
}
|
||||
.byline .place{ color: var(--red); }
|
||||
|
||||
.article{
|
||||
column-count: 2; column-gap: 30px; column-rule: 1px solid var(--rule);
|
||||
font-size: 14.5px; line-height: 1.78; text-align: justify;
|
||||
}
|
||||
.article p{ margin-bottom: 14px; }
|
||||
.article .drop::first-letter{
|
||||
font-family: var(--display); font-weight:900; color: var(--ink);
|
||||
float:left; font-size: 3.35em; line-height: .78;
|
||||
padding: .06em .1em 0 0; margin-top: .05em;
|
||||
}
|
||||
.article b{ font-weight:700; }
|
||||
.article .jump{
|
||||
display:block; text-align:right; font-style:italic; font-size:12px;
|
||||
color: var(--muted); margin-top: 4px;
|
||||
}
|
||||
@media (max-width:720px){ .article{ column-count:1; } }
|
||||
|
||||
/* ── front page photo ── */
|
||||
.photo-block{ position:relative; margin: 26px 0 10px; }
|
||||
.photo{
|
||||
border: 1px solid var(--rule); padding: 9px; background: var(--paper-bright);
|
||||
box-shadow: 5px 7px 0 rgba(27,24,19,.14);
|
||||
}
|
||||
.photo img{
|
||||
width:100%; display:block; filter: grayscale(1) contrast(1.18);
|
||||
}
|
||||
/* newsprint halftone wash over the photo */
|
||||
.photo::after{
|
||||
content:''; position:absolute; inset:9px; pointer-events:none; mix-blend-mode: multiply; opacity:.35;
|
||||
background-image:
|
||||
radial-gradient(rgba(27,24,19,.5) 1px, transparent 1.35px),
|
||||
radial-gradient(rgba(27,24,19,.35) 1px, transparent 1.35px);
|
||||
background-size: 11px 11px, 11px 11px;
|
||||
background-position: 0 0, 5.5px 5.5px;
|
||||
}
|
||||
.photo-cap{
|
||||
display:flex; justify-content:space-between; gap:12px;
|
||||
font-size:11px; font-style:italic; color: var(--muted);
|
||||
margin-top: 9px;
|
||||
}
|
||||
.photo-cap .cap-num{ font-style:normal; font-weight:700; letter-spacing:.1em; }
|
||||
.stamp{
|
||||
position:absolute; top: 2px; right: 6px; z-index:2;
|
||||
transform: rotate(4deg);
|
||||
border: 3px solid var(--red); color: var(--red);
|
||||
font-weight:900; letter-spacing:.16em; text-transform:uppercase;
|
||||
font-size: 13px; padding: 6px 12px; background: rgba(244,239,222,.92);
|
||||
box-shadow: 2px 3px 0 rgba(27,24,19,.18);
|
||||
}
|
||||
|
||||
/* ── sidebar ── */
|
||||
.sidebar{ display:flex; flex-direction:column; gap: 20px; min-width:0; }
|
||||
.box{
|
||||
border: 2px solid var(--rule); background: var(--paper-bright);
|
||||
padding: 16px 18px 18px;
|
||||
}
|
||||
.box h3{
|
||||
font-size: 11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
|
||||
border-bottom: 2px solid var(--rule); padding-bottom: 8px; margin-bottom: 12px;
|
||||
display:flex; align-items:center; gap:8px;
|
||||
}
|
||||
.box h3 .mark{ color: var(--red); }
|
||||
.brief-list{ list-style:none; }
|
||||
.brief-list li{
|
||||
font-size: 13px; line-height:1.6; padding: 7px 0;
|
||||
border-bottom: 1px dashed rgba(27,24,19,.25);
|
||||
display:flex; gap: 10px;
|
||||
}
|
||||
.brief-list li:last-child{ border-bottom:none; }
|
||||
.brief-list .k{ font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); flex:0 0 74px; padding-top:2px; }
|
||||
.brief-list .v{ color: var(--ink-soft); }
|
||||
|
||||
/* the numbers */
|
||||
.numbers{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
|
||||
.num-cell .n{
|
||||
font-family: var(--display); font-weight:900; font-size: clamp(26px, 2.6vw, 38px);
|
||||
line-height: 1; letter-spacing:-.02em;
|
||||
}
|
||||
.num-cell .n sup{ font-size:.5em; color:var(--red); }
|
||||
.num-cell .l{ font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
|
||||
|
||||
/* spider teaser */
|
||||
.spider-box{ background: var(--red); border-color: var(--ink); color: var(--paper-bright); }
|
||||
.spider-box h3{ border-color: rgba(255,255,255,.5); }
|
||||
.spider-box .mark, .spider-box h3{ color: var(--paper-bright); }
|
||||
.spider-box p{ font-size:13px; line-height:1.7; font-style:italic; }
|
||||
.spider-box .big-spider{ font-size: 34px; line-height:1; margin-top: 6px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); }
|
||||
|
||||
/* ── generic section spacing ── */
|
||||
.section{ padding: 40px 0 8px; }
|
||||
.section + .section{ border-top: 3px double var(--rule); margin-top: 6px; }
|
||||
|
||||
/* ── about: reporter profile ── */
|
||||
.about-grid{
|
||||
display:grid; grid-template-columns: 300px 1fr;
|
||||
gap: clamp(24px, 3vw, 44px); align-items: start;
|
||||
}
|
||||
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
|
||||
.about-photo-wrap{ position:relative; }
|
||||
.about-photo{
|
||||
border:1px solid var(--rule); padding:7px; background: var(--paper-bright);
|
||||
box-shadow: 5px 7px 0 rgba(27,24,19,.14);
|
||||
}
|
||||
.about-photo img{ filter: grayscale(1) contrast(1.15); }
|
||||
.about-photo::after{
|
||||
content:''; position:absolute; inset:7px; pointer-events:none; mix-blend-mode:multiply; opacity:.3;
|
||||
background-image: radial-gradient(rgba(27,24,19,.5) 1px, transparent 1.35px);
|
||||
background-size: 11px 11px;
|
||||
}
|
||||
.about-photo .cap{
|
||||
font-size:11px; font-style:italic; color:var(--muted); margin-top:8px;
|
||||
}
|
||||
.about-copy .drop::first-letter{
|
||||
font-family: var(--display); font-weight:900; color: var(--ink);
|
||||
float:left; font-size: 3.2em; line-height:.8;
|
||||
padding:.05em .09em 0 0; margin-top:.04em;
|
||||
}
|
||||
.about-copy p{ margin-bottom:14px; text-align:justify; }
|
||||
.about-copy b{ font-weight:700; }
|
||||
.beat-list{
|
||||
display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px;
|
||||
}
|
||||
.beat{
|
||||
font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
|
||||
border:1.5px solid var(--ink); padding:6px 11px; background: var(--paper-bright);
|
||||
}
|
||||
.beat:nth-child(3n+1){ background: var(--red); color: var(--paper-bright); border-color: var(--ink); }
|
||||
|
||||
/* ── the work ── */
|
||||
.work-grid{
|
||||
display:grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 0 clamp(26px, 3.5vw, 52px);
|
||||
}
|
||||
@media (max-width:720px){ .work-grid{ grid-template-columns:1fr; } }
|
||||
.story{
|
||||
display:block; text-decoration:none; color: inherit;
|
||||
border-top: 3px solid var(--rule);
|
||||
padding: 18px 0 22px;
|
||||
position: relative;
|
||||
}
|
||||
.work-grid .story:nth-child(n+3){ border-top-color: rgba(27,24,19,.28); }
|
||||
.story-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px; }
|
||||
.story-kicker{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--red); }
|
||||
.story-kicker.live{ color: var(--ink); background: var(--paper-deep); padding:2px 7px; border:1px solid var(--ink); letter-spacing:.12em; }
|
||||
.story-page{ font-size:10px; font-weight:700; letter-spacing:.12em; color: var(--muted); }
|
||||
.story-title{
|
||||
font-family: var(--display); font-weight:900;
|
||||
font-size: clamp(18px, 1.7vw, 25px); line-height: 1.06;
|
||||
text-transform: uppercase; letter-spacing:-.005em;
|
||||
margin-bottom: 9px; transition: color .15s;
|
||||
}
|
||||
.story:hover .story-title{ color: var(--red); }
|
||||
.story-lede{ font-size:13.5px; line-height:1.7; color: var(--ink-soft); margin-bottom: 10px; }
|
||||
.story-more{
|
||||
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
|
||||
color: var(--ink);
|
||||
}
|
||||
.story-more .arr{ color: var(--red); font-weight:900; transition: margin .15s; display:inline-block; }
|
||||
.story:hover .story-more .arr{ margin-left: 5px; }
|
||||
|
||||
/* ── the toolkit ── */
|
||||
.toolkit-wrap{
|
||||
border: 2px solid var(--rule); background: var(--paper-bright);
|
||||
padding: 22px 24px;
|
||||
}
|
||||
.tool-row{
|
||||
display:grid; grid-template-columns: 170px 1fr;
|
||||
gap: 18px; padding: 13px 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
align-items: baseline;
|
||||
}
|
||||
.tool-row:last-child{ border-bottom:none; }
|
||||
.tool-row .k{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--red); }
|
||||
.tool-row .v{ font-size:14px; color: var(--ink); line-height:1.7; }
|
||||
.tool-row .v .sep{ color: var(--red); font-weight:900; margin: 0 6px; }
|
||||
.tool-row .learn{ color: var(--muted); font-style:italic; }
|
||||
@media (max-width:720px){ .tool-row{ grid-template-columns:1fr; gap:4px; } }
|
||||
|
||||
/* ── classifieds ── */
|
||||
.ads-grid{
|
||||
display:grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (max-width:720px){ .ads-grid{ grid-template-columns:1fr; } }
|
||||
.ad{
|
||||
border: 2px solid var(--rule); padding: 18px 20px;
|
||||
background: var(--paper-bright);
|
||||
display:flex; flex-direction:column; gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.ad .ad-tag{
|
||||
position:absolute; top:-11px; left:14px;
|
||||
background: var(--paper); border:1.5px solid var(--ink);
|
||||
font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
|
||||
padding: 2px 9px; color: var(--red);
|
||||
}
|
||||
.ad-title{ font-family: var(--display); font-weight:900; text-transform:uppercase; font-size:17px; line-height:1.1; }
|
||||
.ad p{ font-size:13px; color: var(--ink-soft); line-height:1.65; }
|
||||
.ad a.ad-link{
|
||||
font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
|
||||
color: var(--ink); text-decoration:none; word-break: break-all;
|
||||
}
|
||||
.ad a.ad-link:hover{ color: var(--red); }
|
||||
.ad .stars{ color: var(--red); letter-spacing:.4em; font-size:11px; margin-top:2px; }
|
||||
.ad .ad-foot{ font-size:10.5px; color: var(--muted); font-style:italic; margin-top:auto; }
|
||||
|
||||
/* ── footer ── */
|
||||
.end-rule{ border-top: 5px double var(--rule); margin: 34px 0 12px; }
|
||||
.foot{
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
gap: 14px; flex-wrap: wrap;
|
||||
padding: 12px 0 34px;
|
||||
font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.foot a{ color: var(--red); text-decoration:none; }
|
||||
.foot a:hover{ text-decoration: underline; }
|
||||
.foot .sp{ font-size:16px; }
|
||||
|
||||
/* ── reveal ── */
|
||||
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
|
||||
.reveal.in{ opacity:1; transform:none; }
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
html{ scroll-behavior:auto; }
|
||||
.reveal{ opacity:1; transform:none; transition:none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<!-- dateline -->
|
||||
<div class="dateline">
|
||||
<span>Vol. XLIV — No. 13</span>
|
||||
<span class="center">New York, <span id="today">Wednesday, August 22, 2026</span></span>
|
||||
<span class="right">Web Edition — 24 Pages</span>
|
||||
</div>
|
||||
|
||||
<!-- masthead -->
|
||||
<h1 class="masthead" aria-label="The Miles Bugle">
|
||||
<span class="spider" aria-hidden="true">🕷</span>The Miles Bugle<span class="spider" aria-hidden="true">🕷</span>
|
||||
</h1>
|
||||
<div class="mast-rule"></div>
|
||||
<div class="tagline">
|
||||
<span>Est. 2004 — A Newspaper of Record for Developers</span>
|
||||
<span><em>All the Code That’s Fit to Print.</em></span>
|
||||
<span>Price: One Nice Email</span>
|
||||
</div>
|
||||
|
||||
<!-- section nav -->
|
||||
<nav class="sections" aria-label="Sections">
|
||||
<a href="#front">Front Page</a><span class="dot">·</span>
|
||||
<a href="#about">The Reporter</a><span class="dot">·</span>
|
||||
<a href="#work">The Work</a><span class="dot">·</span>
|
||||
<a href="#toolkit">The Toolkit</a><span class="dot">·</span>
|
||||
<a href="#classifieds">Classifieds</a>
|
||||
</nav>
|
||||
|
||||
<!-- ══════════ FRONT PAGE ══════════ -->
|
||||
<section class="front" id="front">
|
||||
<div>
|
||||
<div class="kicker reveal">Development — Special Report</div>
|
||||
<h2 class="headline reveal">Local Developer Ships the Future From His Bedroom</h2>
|
||||
<p class="subhead reveal">Emulators, frameworks, and a demon list: one teenager’s relentless build, documented in ink.</p>
|
||||
<div class="byline reveal">
|
||||
<span>By Miles Wolf Allen — City Room</span>
|
||||
<span class="place">New York</span>
|
||||
</div>
|
||||
|
||||
<div class="article reveal">
|
||||
<p class="drop"><b>NEW YORK —</b> The most interesting machine on the internet this season may be running in a bedroom on the Upper West Side. Miles Wolf Allen, a developer and 3D artist still in school, has been quietly shipping software that refuses to stay in one lane: emulators that swallow a dozen consoles, a drop-in replacement for the web’s heaviest desktop framework, and the demon list that a whole community of Geometry Dash players now treats as law.</p>
|
||||
<p>The throughline, he says, is simple: <i>software should feel good to use</i>. “I don’t start with the business model,” Allen told the Bugle. “I start with the hundred-megabyte apology — and then I try to make it unnecessary.” That instinct produced FEDL, now tracking thousands of verified runs, and Gelectron, his attempt to keep the nice parts of web apps while losing the bundled browser that makes every Electron install feel like a commitment.</p>
|
||||
<p>Colleagues at <b>Diskette Labs</b>, the collective he co-founded, describe a builder who treats documentation like love letters and bugs like personal insults. Asked what’s next, Allen was characteristically unspecific and entirely serious: “Whatever keeps the blank page scary.”</p>
|
||||
<span class="jump">Continued on Page 3 — “A Day in the Life of a Pull Request”</span>
|
||||
</div>
|
||||
|
||||
<div class="photo-block reveal">
|
||||
<figure class="photo">
|
||||
<img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Miles Wolf Allen at his desk">
|
||||
<figcaption class="photo-cap">
|
||||
<span class="cap-num">FIG. 1</span>
|
||||
<span>The reporter at his desk. Any resemblance to a certain wall-crawler is entirely coincidental. — Photo by M. Allen, City Room</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<span class="stamp" aria-hidden="true">Extra! Extra!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="box reveal">
|
||||
<h3><span class="mark">◆</span> In Brief</h3>
|
||||
<ul class="brief-list">
|
||||
<li><span class="k">Role</span><span class="v">Developer & 3D artist, still in school</span></li>
|
||||
<li><span class="k">Company</span><span class="v">Co-founder, Diskette Labs</span></li>
|
||||
<li><span class="k">Building</span><span class="v">Gelectron — native web views, no bundled Chromium</span></li>
|
||||
<li><span class="k">Habit</span><span class="v">Geometry Dash addict · Pull shark ×2</span></li>
|
||||
<li><span class="k">Mode</span><span class="v">Full send, still debugging</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box reveal">
|
||||
<h3><span class="mark">◆</span> The Numbers</h3>
|
||||
<div class="numbers">
|
||||
<div class="num-cell"><div class="n">60<sup>+</sup></div><div class="l">Public Repos</div></div>
|
||||
<div class="num-cell"><div class="n">100<sup>+</sup></div><div class="l">Stars Earned</div></div>
|
||||
<div class="num-cell"><div class="n">3,800<sup>+</sup></div><div class="l">Runs Verified</div></div>
|
||||
<div class="num-cell"><div class="n">’22</div><div class="l">Started Shipping</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box spider-box reveal">
|
||||
<h3><span class="mark">◉</span> Spider-Menace?</h3>
|
||||
<p>Residents of the web report a figure in tights swinging from pull request to pull request at all hours. Police say it’s just Miles, three days deep in a refactor.</p>
|
||||
<div class="big-spider" aria-hidden="true">🕷️</div>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<!-- ══════════ THE REPORTER ══════════ -->
|
||||
<section class="section" id="about">
|
||||
<div class="sec-head reveal"><span class="sec-tag">Section A — Profile</span></div>
|
||||
<h2 class="sec-title reveal">About the <span class="ed">Reporter</span></h2>
|
||||
|
||||
<div class="about-grid">
|
||||
<div class="about-photo-wrap reveal">
|
||||
<figure class="about-photo">
|
||||
<img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Portrait of Miles Wolf Allen">
|
||||
<figcaption class="cap">Fig. 2 — Staff mug shot. No spiders were harmed.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="about-copy reveal">
|
||||
<p class="drop"><b>Miles Wolf Allen</b> writes software, renders 3D art, and keeps a list of things he wants to build that grows faster than he can cross items off it. He is still in school, which the people at Diskette Labs — the collective he co-founded — insist is less alarming than it sounds. “He ships,” one member said, “so we stopped asking questions.”</p>
|
||||
<p>His beats run the full front page: emulator development, game tooling, web frameworks, and the particular kind of chaos that produces a demon list for Geometry Dash. The work tends to be either deeply practical (a command-line tool that finally makes cut-and-paste work in Finder) or gloriously impractical (a music player that makes listening feel like the whole point).</p>
|
||||
<p>He is currently building <b>Gelectron</b> — an attempt to keep the nice parts of web apps and lose the several-hundred-megabyte apology — and believes a website should make you want to stay a little longer.</p>
|
||||
<div class="beat-list">
|
||||
<span class="beat">Emulators</span>
|
||||
<span class="beat">Game Dev</span>
|
||||
<span class="beat">Web Tooling</span>
|
||||
<span class="beat">3D Art</span>
|
||||
<span class="beat">Rhythm Games</span>
|
||||
<span class="beat">Geometry Dash</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════ THE WORK ══════════ -->
|
||||
<section class="section" id="work">
|
||||
<div class="sec-head reveal"><span class="sec-tag">Section B — Features</span></div>
|
||||
<h2 class="sec-title reveal">The <span class="ed">Work</span></h2>
|
||||
<p class="sec-sub reveal">Stories filed from the newsroom floor — statuses current as of press time.</p>
|
||||
|
||||
<div class="work-grid">
|
||||
<a class="story reveal" href="https://milesallen.site/projects/omniemu.html">
|
||||
<div class="story-head"><span class="story-kicker">Active — TypeScript</span><span class="story-page">B1</span></div>
|
||||
<h3 class="story-title">OmniEmu 2.0 Consolidates the Entire Arcade</h3>
|
||||
<p class="story-lede">All your emulators in one place. Install twenty-plus cores, scan your ROMs, and launch games from a single clean shell. The collection, finally organized.</p>
|
||||
<span class="story-more">Continued <span class="arr">→</span></span>
|
||||
</a>
|
||||
|
||||
<a class="story reveal" href="https://milesallen.site/projects/gelectron.html">
|
||||
<div class="story-head"><span class="story-kicker">Early Days — Rust</span><span class="story-page">B1</span></div>
|
||||
<h3 class="story-title">Gelectron Asks: What if Electron Left?</h3>
|
||||
<p class="story-lede">A drop-in Electron replacement built on native web views. No bundled Chromium, no hundred-megabyte apology — just the good parts of web apps.</p>
|
||||
<span class="story-more">Continued <span class="arr">→</span></span>
|
||||
</a>
|
||||
|
||||
<a class="story reveal" href="https://me.fedl.site/" target="_blank" rel="noopener">
|
||||
<div class="story-head"><span class="story-kicker">Live — 3,800+ Runs</span><span class="story-page">B2</span></div>
|
||||
<h3 class="story-title">FEDL: The List That Became a Community</h3>
|
||||
<p class="story-lede">What began as a demon list for Geometry Dash turned out to be about the people who keep showing up to make the list harder. Ranked levels, verified runs, one shared obsession.</p>
|
||||
<span class="story-more">Continued <span class="arr">→</span></span>
|
||||
</a>
|
||||
|
||||
<a class="story reveal" href="https://vanilla.milesallen.site/" target="_blank" rel="noopener">
|
||||
<div class="story-head"><span class="story-kicker">Unreleased — Quietly Building</span><span class="story-page">B2</span></div>
|
||||
<h3 class="story-title">Vanilla: A Framework With No Frameworks</h3>
|
||||
<p class="story-lede">A clean, minimal web experiment with Diskette Labs. No dependencies, no cruft, no ceremony — the argument that the platform is finally enough.</p>
|
||||
<span class="story-more">Continued <span class="arr">→</span></span>
|
||||
</a>
|
||||
|
||||
<a class="story reveal" href="https://milesallen.site/projects/command-move.html">
|
||||
<div class="story-head"><span class="story-kicker">MacOS — Swift</span><span class="story-page">B3</span></div>
|
||||
<h3 class="story-title">CommandMove Brings True Cut-and-Paste to Finder</h3>
|
||||
<p class="story-lede">Cmd+X, navigate, Cmd+V — the way it always should have worked. A small tool that fixes a decades-old itch on macOS.</p>
|
||||
<span class="story-more">Continued <span class="arr">→</span></span>
|
||||
</a>
|
||||
|
||||
<a class="story reveal" href="https://milesallen.site/projects/music-app.html">
|
||||
<div class="story-head"><span class="story-kicker">Sidebar — Web</span><span class="story-page">B3</span></div>
|
||||
<h3 class="story-title">A Music Player That Makes Listening the Point</h3>
|
||||
<p class="story-lede">A web player designed around the listening, not the library. Evidence that a tool can have a point of view.</p>
|
||||
<span class="story-more">Continued <span class="arr">→</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="sec-sub reveal" style="margin-top:24px;">
|
||||
More filed stories: <a href="https://milesallen.site/projects/noto.html" style="color:var(--red);">Noto</a> · <a href="https://milesallen.site/projects/nova.html" style="color:var(--red);">Nova</a> · <a href="https://milesallen.site/projects/rhythm-game.html" style="color:var(--red);">Rhythm Game</a> · <a href="https://milesallen.site/projects/geode-mod.html" style="color:var(--red);">Geode Mod</a> · <a href="https://milesallen.site/projects/issue-tracker.html" style="color:var(--red);">Issue Tracker</a> · <a href="https://milesallen.site/projects/moon-gaming.html" style="color:var(--red);">Moon Gaming</a> — see the <a href="https://github.com/mileswolfallen2" style="color:var(--red);" target="_blank" rel="noopener">full archive</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ══════════ THE TOOLKIT ══════════ -->
|
||||
<section class="section" id="toolkit">
|
||||
<div class="sec-head reveal"><span class="sec-tag">Section B — Back Page</span></div>
|
||||
<h2 class="sec-title reveal">The <span class="ed">Toolkit</span></h2>
|
||||
<p class="sec-sub reveal">The newsroom’s equipment, as filed with the city desk.</p>
|
||||
|
||||
<div class="toolkit-wrap reveal">
|
||||
<div class="tool-row">
|
||||
<span class="k">Languages</span>
|
||||
<span class="v">Python <span class="sep">/</span> JavaScript <span class="sep">/</span> TypeScript <span class="sep">/</span> C++ <span class="sep">/</span> Swift <span class="sep">/</span> Rust</span>
|
||||
</div>
|
||||
<div class="tool-row">
|
||||
<span class="k">Web</span>
|
||||
<span class="v">HTML <span class="sep">/</span> CSS <span class="sep">/</span> React <span class="sep">/</span> Node.js <span class="sep">/</span> Three.js</span>
|
||||
</div>
|
||||
<div class="tool-row">
|
||||
<span class="k">3D & Design</span>
|
||||
<span class="v">Blender <span class="sep">/</span> WebGL <span class="sep">/</span> Figma <span class="sep">/</span> Photoshop-grade patience</span>
|
||||
</div>
|
||||
<div class="tool-row">
|
||||
<span class="k">Tools</span>
|
||||
<span class="v">Git <span class="sep">/</span> Linux <span class="sep">/</span> VS Code <span class="sep">/</span> Replit <span class="sep">/</span> Firefox DevTools</span>
|
||||
</div>
|
||||
<div class="tool-row">
|
||||
<span class="k">Currently</span>
|
||||
<span class="v learn">Learning: whatever the next blank page demands.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════ CLASSIFIEDS ══════════ -->
|
||||
<section class="section" id="classifieds">
|
||||
<div class="sec-head reveal"><span class="sec-tag">Section C — Want Ads</span></div>
|
||||
<h2 class="sec-title reveal">Classi<span class="ed">fieds</span></h2>
|
||||
<p class="sec-sub reveal">Small print, big opportunities. Box numbers answered daily.</p>
|
||||
|
||||
<div class="ads-grid">
|
||||
<div class="ad reveal">
|
||||
<span class="ad-tag">Ad 1</span>
|
||||
<h3 class="ad-title">Wanted: Interesting Problems</h3>
|
||||
<p>Emulators, frameworks, the occasional impossible thing. Rates negotiable; curiosity mandatory. All inquiries read — the good ones get a reply.</p>
|
||||
<a class="ad-link" href="mailto:[email protected]">→ write to [email protected]</a>
|
||||
<span class="stars" aria-hidden="true">***</span>
|
||||
</div>
|
||||
|
||||
<div class="ad reveal">
|
||||
<span class="ad-tag">Ad 2</span>
|
||||
<h3 class="ad-title">Read the Archive</h3>
|
||||
<p>Every edition ever filed, freely available to the public. Sources include the code itself.</p>
|
||||
<a class="ad-link" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener">→ github.com/mileswolfallen2</a>
|
||||
<span class="stars" aria-hidden="true">***</span>
|
||||
</div>
|
||||
|
||||
<div class="ad reveal">
|
||||
<span class="ad-tag">Ad 3</span>
|
||||
<h3 class="ad-title">More Editions</h3>
|
||||
<p>The syndicate network: a personal site, a company paper, and a place to remix software.</p>
|
||||
<a class="ad-link" href="https://me.fedl.site" target="_blank" rel="noopener">→ me.fedl.site</a>
|
||||
<a class="ad-link" href="https://diskettelabs.com/" target="_blank" rel="noopener">→ diskettelabs.com</a>
|
||||
<span class="stars" aria-hidden="true">***</span>
|
||||
</div>
|
||||
|
||||
<div class="ad reveal">
|
||||
<span class="ad-tag">Ad 4</span>
|
||||
<h3 class="ad-title">Letters to the Editor</h3>
|
||||
<p>Spot a typo? A bad take on software? A brilliant idea for a build? The editor reads everything.</p>
|
||||
<a class="ad-link" href="mailto:[email protected]">→ [email protected]</a>
|
||||
<span class="ad-foot">Corrections printed prominently. Compliments modestly.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="end-rule"></div>
|
||||
<footer class="foot">
|
||||
<span>© 2026 The Miles Bugle — Vol. XLIV</span>
|
||||
<span class="sp" aria-hidden="true">🕸</span>
|
||||
<span>Printed on recycled pixels · <a href="../index.html">Back to milesallen.site</a></span>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
// today's date in the dateline
|
||||
var el = document.getElementById('today');
|
||||
if (el) {
|
||||
var d = new Date();
|
||||
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
|
||||
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
|
||||
el.textContent = days[d.getDay()] + ', ' + months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
|
||||
}
|
||||
|
||||
// reveal on scroll
|
||||
var reveals = document.querySelectorAll('.reveal');
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(e){
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('in');
|
||||
io.unobserve(e.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.08 });
|
||||
reveals.forEach(function(r){ io.observe(r); });
|
||||
} else {
|
||||
reveals.forEach(function(r){ r.classList.add('in'); });
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+53
-3
@@ -266,7 +266,7 @@ html.js .card.featured:hover { transform: translate(-3px,-3px) !important; }
|
||||
<nav class="nav">
|
||||
<a class="nav-back" href="../index.html">← Back to site</a>
|
||||
<span class="nav-title">Redesign Lab</span>
|
||||
<span class="nav-count">17 designs</span>
|
||||
<span class="nav-count">19 designs</span>
|
||||
</nav>
|
||||
|
||||
<!-- hero -->
|
||||
@@ -278,8 +278,8 @@ html.js .card.featured:hover { transform: translate(-3px,-3px) !important; }
|
||||
</h1>
|
||||
<p class="hero-sub">
|
||||
Experimental redesigns of milesallen.site — exploring different design languages,
|
||||
animation approaches, and visual directions. Seventeen experiments so far,
|
||||
newest first: retro intros, web cartoons, whimsical, loud/quiet, space stations, handhelds, and terminals.
|
||||
animation approaches, and visual directions. Nineteen experiments so far,
|
||||
newest first: a 1976 punk zine, a Daily Bugle newspaper, retro intros, web cartoons, whimsical, loud/quiet, space stations, handhelds, and terminals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -288,6 +288,56 @@ html.js .card.featured:hover { transform: translate(-3px,-3px) !important; }
|
||||
<div class="grid-label">History — all experiments, newest first</div>
|
||||
<div class="cards" id="history">
|
||||
|
||||
<!-- punk-zine -->
|
||||
<a class="card featured" href="punk-zine.html">
|
||||
<div class="card-preview">
|
||||
<iframe src="punk-zine.html" title="1976 punk zine redesign preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="card-num">18</div>
|
||||
<div class="card-name">MILESWOLF ZINE</div>
|
||||
<p class="card-desc">
|
||||
The portfolio as a moving 1976 punk zine — photocopied, wheat-pasted, xerox-degraded. Rejects grid perfection: ransom-note typography (Permanent Marker, Bangers, Courier Prime, Graduate, Creepster), torn paper edges via clip-path, tape strips and safety pins, halftone dot screens, layered paper grain, SVG doodles (arrows, stars, NO symbols), protest-sign red/navy/neon green palette, jitter animations at variable frame rates, RGB-split glitch on hover, spray-paint custom cursor, cut-up skill chips, a manifesto panel, project collages, a TEAR-OFF flyer contact, and ransom letters that periodically reshuffle fonts. Includes a print stylesheet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-tags">
|
||||
<span class="ctag ctag-p">Punk zine</span>
|
||||
<span class="ctag ctag-y">Ransom note</span>
|
||||
<span class="ctag ctag-c">Xerox textures</span>
|
||||
<span class="ctag ctag-g">Glitch animations</span>
|
||||
</div>
|
||||
<span class="card-arrow">↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- daily-bugle -->
|
||||
<a class="card featured" href="daily-bugle.html">
|
||||
<div class="card-preview">
|
||||
<iframe src="daily-bugle.html" title="Daily Bugle newspaper redesign preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="card-num">17</div>
|
||||
<div class="card-name">The Miles Bugle</div>
|
||||
<p class="card-desc">
|
||||
The portfolio as a front page from Tobey-era Spider-Man: newsprint cream paper with grain and halftone dots, a Pirata One blackletter masthead, double red rules, a dateline with today's real date, a two-column front-page story with drop cap and EXTRA! EXTRA! stamp, an IN BRIEF box, a numbers scoreboard, a tongue-in-cheek SPIDER-MENACE? teaser, projects as front-page stories with page numbers, a classified-style toolkit table, and a want-ads contact section.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-tags">
|
||||
<span class="ctag ctag-w">Newspaper</span>
|
||||
<span class="ctag ctag-p">Daily Bugle</span>
|
||||
<span class="ctag ctag-y">Blackletter masthead</span>
|
||||
<span class="ctag ctag-c">Newsprint</span>
|
||||
</div>
|
||||
<span class="card-arrow">↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- intro -->
|
||||
<a class="card featured" href="intro.html">
|
||||
<div class="card-preview">
|
||||
|
||||
@@ -0,0 +1,856 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="js">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MILESWOLF ZINE — a broadside from every decade at once</title>
|
||||
<meta name="description" content="A photocopied, spray-painted, stapled-together punk broadside about Miles Wolf Allen. News clippings meet dot-matrix printouts meet Polaroids meet GitHub screenshots. No gods, no masters, no single era.">
|
||||
<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=Permanent+Marker&family=Rock+Salt&family=Special+Elite&family=Covered+By+Your+Grace&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Graduate&family=Creepster&family=Bangers&family=Nothing+You+Could+Do&family=Nanum+Pen+Script&family=Reenie+Beanie&family=Caveat+Brush&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ════════════════════════════════════════════════════
|
||||
MILESWOLF ZINE — every decade at once.
|
||||
Newsprint. Dot-matrix. Polaroid. Spray paint.
|
||||
GitHub screenshots stapled to 1972 headlines.
|
||||
Held together with tape, safety pins, and spite.
|
||||
════════════════════════════════════════════════════ */
|
||||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||||
:root {
|
||||
--red: #E63946;
|
||||
--navy: #1D3557;
|
||||
--black: #0D0D0D;
|
||||
--paper: #F1FAEE;
|
||||
--paper-dim: #e4dcc9;
|
||||
--neon: #39FF14;
|
||||
--photocopy: #fffcf0;
|
||||
--newsprint: #f5f0e1;
|
||||
--tape: rgba(214,206,184,.82);
|
||||
--ink: #0D0D0D;
|
||||
--marker: 'Permanent Marker', 'Rock Salt', cursive;
|
||||
--typewriter:'Courier Prime', 'Courier New', monospace;
|
||||
--shout: 'Bangers', 'Impact', sans-serif;
|
||||
--stencil: 'Graduate', 'Arial Black', sans-serif;
|
||||
--spooky: 'Creepster', cursive;
|
||||
--scrawl: 'Covered By Your Grace', 'Reenie Beanie', cursive;
|
||||
--rough: 'Nothing You Could Do', 'Caveat Brush', cursive;
|
||||
}
|
||||
|
||||
html { scroll-behavior: auto; overflow-x: hidden; }
|
||||
body {
|
||||
background: var(--paper);
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-blend-mode: overlay;
|
||||
color: var(--ink); font-family: var(--typewriter); font-size: 14px; line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased; overflow-x: hidden;
|
||||
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Crect x='3' y='3' width='22' height='26' rx='3' fill='%230D0D0D' stroke='%23E63946' stroke-width='2.5'/%3E%3Ccircle cx='14' cy='17' r='2.5' fill='%23F1FAEE'/%3E%3Crect x='20' y='9' width='8' height='5' rx='1.5' fill='%2339FF14' stroke='%230D0D0D' stroke-width='1.5'/%3E%3C/svg%3E") 14 16, auto;
|
||||
}
|
||||
::selection { background:var(--red); color:var(--paper); }
|
||||
a { color:inherit; text-decoration:none; }
|
||||
img { display:block; max-width:100%; }
|
||||
|
||||
/* ── halftone dot screen on everything ── */
|
||||
body::after {
|
||||
content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.16; mix-blend-mode:multiply;
|
||||
background-image:
|
||||
radial-gradient(circle, var(--black) 1.2px, transparent 1.8px),
|
||||
radial-gradient(circle, var(--black) 1.2px, transparent 1.8px);
|
||||
background-size: 15px 15px; background-position: 0 0, 7.5px 7.5px;
|
||||
}
|
||||
|
||||
/* ── MASTHEAD: cut-out magazine letters on different paper scraps ── */
|
||||
.masthead {
|
||||
position:relative; text-align:center;
|
||||
padding: clamp(36px,7vw,80px) clamp(16px,4vw,40px) clamp(20px,3vw,34px);
|
||||
border-bottom: 5px solid var(--black);
|
||||
overflow:hidden;
|
||||
}
|
||||
/* torn paper strips behind masthead */
|
||||
.masthead::before {
|
||||
content:''; position:absolute; top:0; left:-4%; right:-4%; bottom:0; z-index:0; pointer-events:none;
|
||||
background:
|
||||
/* scrap of newsprint */
|
||||
linear-gradient(2deg, var(--newsprint) 30%, transparent 32%) no-repeat,
|
||||
/* scrap of dark paper */
|
||||
linear-gradient(-3deg, rgba(29,53,87,.12) 55%, transparent 58%) no-repeat;
|
||||
background-size: 100% 60%, 100% 45%;
|
||||
background-position: 0 10%, 0 50%;
|
||||
}
|
||||
.issue-tag {
|
||||
display:inline-block; font-family:var(--typewriter); font-size:10px; font-weight:700;
|
||||
letter-spacing:.3em; text-transform:uppercase;
|
||||
border:3px solid var(--black); padding:5px 12px;
|
||||
transform:rotate(-4deg); margin-bottom:16px; position:relative; z-index:2;
|
||||
background:var(--red); color:var(--paper);
|
||||
box-shadow: 4px 4px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
/* tape holding the issue tag */
|
||||
.issue-tag::after {
|
||||
content:''; position:absolute; top:-9px; right:-14px; width:38px; height:22px;
|
||||
background:var(--tape); transform:rotate(14deg); opacity:.82;
|
||||
box-shadow:0 0 0 1px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.zine-title {
|
||||
font-family:var(--shout);
|
||||
font-size:clamp(48px,14vw,170px);
|
||||
line-height:.86; letter-spacing:-.04em; text-transform:uppercase;
|
||||
position:relative; z-index:1;
|
||||
}
|
||||
.zine-title .line { display:block; }
|
||||
.zine-title .line:nth-child(1) { color:var(--black); transform:rotate(-2deg); }
|
||||
.zine-title .line:nth-child(2) { color:var(--red); transform:rotate(2deg); -webkit-text-stroke:2.5px var(--black); margin-top:-.06em; }
|
||||
|
||||
/* cut-out magazine letters for "ZINE" — each on its own scrap */
|
||||
.zine-title .ransom { display:inline-flex; gap:3px; transform:rotate(-3deg); }
|
||||
.zine-title .ransom .rlet {
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
width:clamp(38px,5.5vw,64px); height:clamp(44px,6.5vw,72px);
|
||||
font-size:clamp(32px,5.5vw,60px); font-weight:900;
|
||||
border:2.5px solid var(--black);
|
||||
position:relative; line-height:1;
|
||||
}
|
||||
.zine-title .ransom .rlet:nth-child(1) {
|
||||
background:var(--newsprint); font-family:var(--typewriter); color:var(--navy);
|
||||
transform:rotate(-9deg) translateY(-4px);
|
||||
}
|
||||
.zine-title .ransom .rlet:nth-child(2) {
|
||||
background:var(--red); color:var(--paper); font-family:var(--shout);
|
||||
transform:rotate(6deg) translateY(2px);
|
||||
}
|
||||
.zine-title .ransom .rlet:nth-child(3) {
|
||||
background:var(--photocopy); font-family:var(--stencil); color:var(--black);
|
||||
transform:rotate(-5deg) translateY(-7px); font-size:clamp(38px,6.5vw,68px);
|
||||
}
|
||||
.zine-title .ransom .rlet:nth-child(4) {
|
||||
background:var(--neon); color:var(--black); font-family:var(--spooky);
|
||||
transform:rotate(8deg) translateY(5px);
|
||||
}
|
||||
|
||||
/* spray-paint drip under masthead */
|
||||
.masthead-drip {
|
||||
position:absolute; bottom:-18px; left:15%; z-index:2; pointer-events:none;
|
||||
}
|
||||
.masthead-drip .drop {
|
||||
display:block; width:4px; height:20px; background:var(--red); border-radius:0 0 2px 2px;
|
||||
margin-bottom:2px; opacity:.75;
|
||||
}
|
||||
.masthead-drip .drop:nth-child(2) { width:2.5px; height:14px; margin-left:8px; }
|
||||
.masthead-drip .drop:nth-child(3) { width:3px; height:10px; margin-left:-4px; }
|
||||
|
||||
.zine-sub {
|
||||
font-family:var(--typewriter); font-size:clamp(11px,1.4vw,15px);
|
||||
text-transform:uppercase; letter-spacing:.08em;
|
||||
max-width:620px; margin:18px auto 0; position:relative; z-index:2;
|
||||
transform:rotate(1deg); line-height:1.7;
|
||||
border:2.5px solid var(--black); padding:9px 16px; display:inline-block;
|
||||
background:var(--photocopy); box-shadow:5px 5px 0 rgba(0,0,0,.18);
|
||||
}
|
||||
.zine-sub s { text-decoration:line-through; color:var(--red); }
|
||||
|
||||
/* safety pin holding sub */
|
||||
.zine-sub::before {
|
||||
content:''; position:absolute; top:-6px; left:22px;
|
||||
width:9px; height:20px; border-radius:50%; border:2px solid var(--black);
|
||||
background:var(--tape);
|
||||
}
|
||||
.zine-sub::before { box-shadow: -2px 0 0 var(--red); }
|
||||
|
||||
/* ── NAV: safety-pin buttons, different paper stocks ── */
|
||||
.nav {
|
||||
display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
|
||||
padding:18px clamp(12px,3vw,32px);
|
||||
border-bottom:4px solid var(--black); position:sticky; top:0; z-index:600;
|
||||
background:var(--paper);
|
||||
}
|
||||
.nav a {
|
||||
display:flex; align-items:center; gap:5px;
|
||||
font-family:var(--typewriter); font-size:9.5px; font-weight:700;
|
||||
letter-spacing:.14em; text-transform:uppercase;
|
||||
padding:8px 14px; border:2px solid var(--black);
|
||||
transition:transform .1s, background .1s, color .1s;
|
||||
position:relative;
|
||||
}
|
||||
.nav a:nth-child(1) { transform:rotate(-2deg); background:var(--red); color:var(--paper); }
|
||||
.nav a:nth-child(2) { transform:rotate(1.5deg); background:var(--navy); color:var(--paper); }
|
||||
.nav a:nth-child(3) { transform:rotate(-.8deg); background:var(--photocopy); color:var(--ink); }
|
||||
.nav a:nth-child(4) { transform:rotate(2deg); background:var(--neon); color:var(--black); }
|
||||
.nav a:nth-child(5) { transform:rotate(-1.5deg); background:var(--newsprint); color:var(--ink); }
|
||||
.nav a:hover { transform:rotate(0deg) translateY(-3px); background:var(--black) !important; color:var(--paper); z-index:3; }
|
||||
/* safety pin on each nav link */
|
||||
.nav a::before {
|
||||
content:''; position:absolute; top:-4px; right:6px;
|
||||
width:8px; height:18px; border-radius:50%; border:1.5px solid var(--black);
|
||||
background:var(--tape); transform:rotate(12deg);
|
||||
}
|
||||
|
||||
/* ── section panel base ── */
|
||||
.panel {
|
||||
position:relative; padding:clamp(40px,5vw,90px) clamp(16px,4vw,40px);
|
||||
border-bottom:5px solid var(--black);
|
||||
overflow:visible;
|
||||
}
|
||||
.panel-red { background:var(--paper); }
|
||||
.panel-navy { background:var(--newsprint); }
|
||||
.panel-neon { background:var(--photocopy); }
|
||||
.panel-mix { background:var(--paper); }
|
||||
|
||||
.panel > * { position:relative; z-index:1; }
|
||||
|
||||
/* ── panel numbers ── */
|
||||
.sec-num {
|
||||
font-family:var(--typewriter); font-size:clamp(16px,2.5vw,26px); font-weight:700;
|
||||
color:var(--red); display:block; margin-bottom:8px;
|
||||
transform:rotate(-2deg); border-bottom:2px solid var(--black);
|
||||
display:inline-block; padding-bottom:4px;
|
||||
}
|
||||
|
||||
/* ── COMPONENT: newspaper clipping ── */
|
||||
.news-clip {
|
||||
background:var(--newsprint); border:2px solid var(--black);
|
||||
padding:clamp(18px,3vw,30px); position:relative;
|
||||
transform:rotate(-1deg); box-shadow:5px 5px 0 rgba(0,0,0,.15);
|
||||
margin-bottom:24px;
|
||||
}
|
||||
/* torn edges */
|
||||
.news-clip::after {
|
||||
content:''; position:absolute; top:-6px; left:10%; right:5%; height:10px;
|
||||
background:var(--newsprint);
|
||||
clip-path: polygon(0% 40%, 3% 5%, 8% 70%, 14% 20%, 21% 85%, 28% 10%, 34% 60%, 39% 30%, 45% 90%, 52% 15%, 58% 55%, 63% 35%, 69% 80%, 76% 25%, 82% 50%, 88% 15%, 94% 75%, 100% 40%);
|
||||
}
|
||||
.news-headline {
|
||||
font-family:var(--shout); font-size:clamp(22px,3.5vw,42px);
|
||||
text-transform:uppercase; letter-spacing:-.01em; line-height:1.05;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.news-byline {
|
||||
font-family:var(--typewriter); font-size:10px; font-weight:700;
|
||||
letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
|
||||
margin-bottom:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
|
||||
}
|
||||
.news-body {
|
||||
font-family:var(--typewriter); font-size:13.5px; line-height:1.75; text-align:justify;
|
||||
column-count:2; column-gap:22px; column-rule:1px solid rgba(0,0,0,.3);
|
||||
}
|
||||
.news-body .drop {
|
||||
font-family:var(--shout); font-size:3.2em; float:left; line-height:.78;
|
||||
padding:.05em .08em 0 0; color:var(--red); -webkit-text-stroke:1.5px var(--black);
|
||||
}
|
||||
.news-body b { color:var(--red); }
|
||||
@media (max-width:640px) { .news-body { column-count:1; } }
|
||||
|
||||
/* ── COMPONENT: halftone photo (like a newsprint picture) ── */
|
||||
.news-photo {
|
||||
border:1.5px solid var(--black); padding:8px; background:var(--photocopy);
|
||||
display:inline-block; transform:rotate(3deg); box-shadow:5px 5px 0 rgba(0,0,0,.18);
|
||||
position:relative;
|
||||
}
|
||||
.news-photo img {
|
||||
filter: grayscale(1) contrast(1.25) brightness(.95);
|
||||
}
|
||||
.news-photo::after {
|
||||
content:''; position:absolute; inset:8px; pointer-events:none; mix-blend-mode:multiply; opacity:.4;
|
||||
background-image:
|
||||
radial-gradient(rgba(0,0,0,.6) 1px, transparent 1.35px),
|
||||
radial-gradient(rgba(0,0,0,.4) 1px, transparent 1.35px);
|
||||
background-size: 10px 10px, 10px 10px;
|
||||
background-position: 0 0, 5px 5px;
|
||||
}
|
||||
.news-photo .cap {
|
||||
font-size:10px; font-style:italic; color:var(--ink); margin-top:6px; max-width:280px;
|
||||
text-align:left; line-height:1.4;
|
||||
}
|
||||
|
||||
/* ── COMPONENT: tape strip ── */
|
||||
.tape {
|
||||
position:absolute; height:26px; background:var(--tape);
|
||||
box-shadow:0 0 0 1px rgba(0,0,0,.18); z-index:3; pointer-events:none;
|
||||
}
|
||||
.tape-a { top:-11px; left:12%; width:62px; transform:rotate(-5deg); }
|
||||
.tape-b { bottom:-12px; right:15%; width:54px; transform:rotate(3deg); }
|
||||
.tape-c { top:-9px; left:30%; width:48px; transform:rotate(7deg); }
|
||||
|
||||
/* ── COMPONENT: staple mark ── */
|
||||
.staple {
|
||||
position:absolute; z-index:3; pointer-events:none;
|
||||
width:16px; height:8px; border:2.5px solid var(--black); border-radius:0;
|
||||
transform:rotate(-8deg);
|
||||
}
|
||||
|
||||
/* ── COMPONENT: dot-matrix printout strip ── */
|
||||
.dot-matrix {
|
||||
background:linear-gradient(var(--photocopy), #f9f4e6);
|
||||
border:2px solid var(--black); padding:clamp(14px,2vw,24px);
|
||||
position:relative; transform:rotate(-1.5deg);
|
||||
box-shadow:5px 5px 0 rgba(0,0,0,.18);
|
||||
font-family:var(--typewriter); font-size:12px; line-height:1.8;
|
||||
}
|
||||
/* tractor-feed edge holes */
|
||||
.dot-matrix::before {
|
||||
content:''; position:absolute; left:-14px; top:12px; bottom:12px; width:8px;
|
||||
background: repeating-linear-gradient(180deg, var(--photocopy) 0px, var(--photocopy) 10px, var(--paper) 10px, var(--paper) 14px);
|
||||
border-right:2px solid var(--black);
|
||||
}
|
||||
|
||||
/* ── COMPONENT: spray-paint stencil overlay ── */
|
||||
.stencil {
|
||||
position:absolute; z-index:2; pointer-events:none;
|
||||
font-family:var(--stencil); font-size:clamp(14px,2vw,22px);
|
||||
color:var(--red); text-transform:uppercase; letter-spacing:.1em;
|
||||
opacity:.75; transform:rotate(-3deg);
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* ── COMPONENT: Polaroid snapshot ── */
|
||||
.polaroid {
|
||||
background:var(--photocopy); border:2px solid var(--black);
|
||||
padding:10px 10px 32px 10px; display:inline-block;
|
||||
transform:rotate(2deg); box-shadow:5px 5px 0 rgba(0,0,0,.2);
|
||||
position:relative;
|
||||
}
|
||||
.polaroid img {
|
||||
filter: contrast(1.1) saturate(.7) brightness(.95);
|
||||
border:1px solid rgba(0,0,0,.15);
|
||||
}
|
||||
.polaroid .p-cap {
|
||||
font-family:var(--rough); font-size:12px; color:var(--ink);
|
||||
margin-top:8px; text-align:center; line-height:1.3;
|
||||
transform:rotate(-1deg);
|
||||
}
|
||||
|
||||
/* ── COMPONENT: notebook paper scrap ── */
|
||||
.notepad {
|
||||
background:linear-gradient(var(--photocopy) 0, var(--photocopy) 95%, var(--paper-dim) 100%);
|
||||
background-size:100% 28px;
|
||||
border:2px solid var(--black); padding:clamp(14px,2vw,22px);
|
||||
transform:rotate(-2deg); box-shadow:5px 5px 0 rgba(0,0,0,.15);
|
||||
font-family:var(--rough); font-size:14px; line-height:1.75;
|
||||
position:relative;
|
||||
}
|
||||
/* blue horizontal ruled lines */
|
||||
.notepad::before {
|
||||
content:''; position:absolute; inset:0; pointer-events:none; opacity:.25;
|
||||
background: repeating-linear-gradient(180deg, transparent, transparent 27px, #4a90d9 27px, #4a90d9 28px);
|
||||
}
|
||||
/* red margin line */
|
||||
.notepad::after {
|
||||
content:''; position:absolute; left:32px; top:0; bottom:0; width:1.5px;
|
||||
background:rgba(230,57,70,.4); pointer-events:none;
|
||||
}
|
||||
|
||||
/* ── COMPONENT: magazine cut-out letter chips ── */
|
||||
.cutouts {
|
||||
display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
|
||||
}
|
||||
.cutout {
|
||||
font-size:12px; font-weight:700; text-transform:uppercase;
|
||||
padding:8px 13px; border:2px solid var(--black);
|
||||
transform:rotate(-2deg); position:relative;
|
||||
transition:transform .12s, background .12s, color .12s;
|
||||
}
|
||||
.cutout:nth-child(5n+1) { background:var(--red); color:var(--paper); font-family:var(--stencil); transform:rotate(-3deg); }
|
||||
.cutout:nth-child(5n+2) { background:var(--navy); color:var(--paper); font-family:var(--typewriter); transform:rotate(2deg); }
|
||||
.cutout:nth-child(5n+3) { background:var(--photocopy); color:var(--ink); font-family:var(--shout); transform:rotate(-1deg); }
|
||||
.cutout:nth-child(5n+4) { background:var(--neon); color:var(--black); font-family:var(--spooky); transform:rotate(3deg); }
|
||||
.cutout:nth-child(5n) { background:var(--newsprint); color:var(--red); font-family:var(--scrawl); transform:rotate(-4deg); }
|
||||
.cutout:hover {
|
||||
transform:rotate(0deg) scale(1.1) !important; z-index:4;
|
||||
background:var(--black) !important; color:var(--paper);
|
||||
box-shadow:0 0 0 3px var(--neon);
|
||||
}
|
||||
|
||||
/* ── COMPONENT: wheat-pasted flyer with tear-off tabs ── */
|
||||
.flyer {
|
||||
background:var(--red); color:var(--paper); border:3px solid var(--black);
|
||||
padding:clamp(20px,3vw,36px); transform:rotate(-2deg);
|
||||
box-shadow:8px 8px 0 rgba(0,0,0,.25); position:relative;
|
||||
overflow:visible; padding-bottom:38px;
|
||||
}
|
||||
.flyer .fm-tag {
|
||||
font-family:var(--stencil); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
|
||||
border:2px solid var(--paper); padding:4px 12px; display:inline-block;
|
||||
margin-bottom:16px; background:var(--black);
|
||||
}
|
||||
.flyer .fm-head {
|
||||
font-family:var(--shout); font-size:clamp(24px,3.5vw,44px);
|
||||
text-transform:uppercase; line-height:.92; letter-spacing:-.02em; margin-bottom:16px;
|
||||
}
|
||||
.flyer .fm-row {
|
||||
display:flex; justify-content:space-between; align-items:center; gap:14px;
|
||||
padding:10px 0; border-bottom:1.5px solid rgba(255,255,255,.3);
|
||||
font-family:var(--typewriter); font-size:13px;
|
||||
}
|
||||
.flyer .fm-row .k { font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--black); }
|
||||
.flyer .fm-row .k em { font-style:normal; color:var(--paper); background:var(--navy); padding:1px 5px; }
|
||||
.flyer .fm-row .v { font-size:17px; font-weight:700; }
|
||||
.flyer .fm-row:last-child { border-bottom:none; }
|
||||
/* tear-off tabs at bottom */
|
||||
.flyer-tabs {
|
||||
position:absolute; bottom:-14px; left:0; right:0; display:flex;
|
||||
gap:0; border-top:2px dashed var(--paper);
|
||||
padding-top:6px;
|
||||
}
|
||||
.flyer-tab {
|
||||
flex:1; text-align:center; font-family:var(--typewriter); font-size:8px; font-weight:700;
|
||||
letter-spacing:.06em; text-transform:uppercase; color:var(--paper);
|
||||
border-right:1.5px dashed rgba(255,255,255,.4); padding:4px 2px 0;
|
||||
transform:rotate(-2deg);
|
||||
}
|
||||
.flyer-tab:last-child { border-right:none; }
|
||||
.flyer-tab:nth-child(even) { transform:rotate(2deg); }
|
||||
|
||||
/* spray paint drip on flyer */
|
||||
.flyer-drip {
|
||||
position:absolute; top:-12px; right:12%; z-index:2; pointer-events:none;
|
||||
}
|
||||
.flyer-drip .d { display:block; width:3px; background:var(--neon); border-radius:0 0 2px 2px; margin-bottom:3px; opacity:.8; }
|
||||
.flyer-drip .d:nth-child(1) { height:16px; }
|
||||
.flyer-drip .d:nth-child(2) { height:10px; margin-left:6px; width:2px; }
|
||||
.flyer-drip .d:nth-child(3) { height:7px; margin-left:-2px; }
|
||||
|
||||
/* ── COMPONENT: marker doodle arrow ── */
|
||||
.marker-arrow {
|
||||
position:absolute; z-index:2; pointer-events:none;
|
||||
font-family:var(--marker); font-size:clamp(18px,3vw,32px);
|
||||
color:var(--red); transform:rotate(-8deg); opacity:.7;
|
||||
}
|
||||
|
||||
/* ── COMPONENT: stitching thread ── */
|
||||
.stitch {
|
||||
position:absolute; z-index:3; pointer-events:none;
|
||||
height:40px; width:2px;
|
||||
background: repeating-linear-gradient(180deg, var(--navy) 0px, var(--navy) 4px, transparent 4px, transparent 6px);
|
||||
}
|
||||
.stitch::before, .stitch::after {
|
||||
content:''; position:absolute; width:4px; height:4px; border-radius:50%;
|
||||
background:var(--navy);
|
||||
}
|
||||
.stitch::before { top:-2px; left:-1px; }
|
||||
.stitch::after { bottom:-2px; left:-1px; }
|
||||
|
||||
/* ── divider ── */
|
||||
.clip-div {
|
||||
width:100%; height:3px; background:var(--red); margin:clamp(36px,5vw,64px) 0;
|
||||
position:relative; transform:rotate(-.4deg);
|
||||
}
|
||||
.clip-div::after {
|
||||
content:'✂ ✂ ✂'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
|
||||
font-family:var(--typewriter); font-weight:700; font-size:13px; color:var(--navy);
|
||||
background:var(--paper); padding:0 12px;
|
||||
}
|
||||
|
||||
/* ── DECREE banner ── */
|
||||
.decree {
|
||||
font-family:var(--shout); font-size:clamp(18px,2.5vw,32px);
|
||||
text-transform:uppercase; letter-spacing:-.01em; line-height:1.1;
|
||||
max-width:520px; margin:0 auto 16px; text-align:center;
|
||||
padding:14px 20px; border:3px solid var(--black);
|
||||
background:var(--neon); color:var(--black);
|
||||
box-shadow:6px 6px 0 rgba(0,0,0,.18); transform:rotate(-1deg);
|
||||
}
|
||||
.decree .em { color:var(--red); -webkit-text-stroke:2px var(--black); }
|
||||
.decree s { text-decoration:line-through; }
|
||||
/* stencil edge effect */
|
||||
.decree::before {
|
||||
content:''; position:absolute; inset:-4px; border:2px dashed rgba(0,0,0,.3); pointer-events:none;
|
||||
}
|
||||
|
||||
/* ── COMPONENT: ripped-out page from a book ── */
|
||||
.book-page {
|
||||
background:var(--photocopy); border:2px solid var(--black);
|
||||
padding:clamp(16px,2.5vw,28px); position:relative; transform:rotate(1deg);
|
||||
box-shadow:5px 5px 0 rgba(0,0,0,.15); font-family:var(--typewriter); font-size:13px; line-height:1.8;
|
||||
}
|
||||
/* ragged left edge (torn from binding) */
|
||||
.book-page::before {
|
||||
content:''; position:absolute; left:-10px; top:-1px; bottom:-1px; width:12px;
|
||||
background:var(--photocopy);
|
||||
clip-path: polygon(20% 0%, 60% 4%, 10% 10%, 70% 16%, 25% 22%, 55% 28%, 15% 34%, 65% 40%, 30% 46%, 50% 52%, 20% 58%, 60% 64%, 10% 70%, 70% 76%, 25% 82%, 55% 88%, 15% 94%, 65% 100%);
|
||||
}
|
||||
|
||||
/* ── footer ── */
|
||||
.foot-bar {
|
||||
padding:clamp(22px,3vw,44px) clamp(16px,4vw,40px);
|
||||
background:var(--black); color:var(--paper);
|
||||
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
|
||||
font-family:var(--typewriter); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
|
||||
}
|
||||
.foot-bar a { color:var(--red); border-bottom:1.5px solid var(--red); }
|
||||
.foot-bar a:hover { color:var(--neon); border-color:var(--neon); }
|
||||
.foot-bar .fb-sym { font-size:30px; }
|
||||
|
||||
/* ── jitter animations ── */
|
||||
.jitter-slow { animation: jitS .9s steps(3) infinite; }
|
||||
.jitter-fast { animation: jitF .35s steps(4) infinite; }
|
||||
@keyframes jitS {
|
||||
0%,100% { transform:translate(0,0) rotate(-2deg); }
|
||||
33% { transform:translate(-1.5px,2px) rotate(-2.5deg); }
|
||||
66% { transform:translate(2px,-1.5px) rotate(-1.5deg); }
|
||||
}
|
||||
@keyframes jitF {
|
||||
0%,100% { transform:translate(0,0); }
|
||||
25% { transform:translate(1.5px,-2px); }
|
||||
50% { transform:translate(-2px,1.5px); }
|
||||
75% { transform:translate(1px,-1px); }
|
||||
}
|
||||
|
||||
/* ── glitch hover ── */
|
||||
.glitch-hover { transition:filter .1s; }
|
||||
.glitch-hover:hover {
|
||||
filter:drop-shadow(3px 0 var(--neon)) drop-shadow(-3px 0 var(--red));
|
||||
animation: glitchPop .2s steps(3);
|
||||
}
|
||||
@keyframes glitchPop {
|
||||
0% { filter:drop-shadow(2px 0 var(--neon)) drop-shadow(-2px 0 var(--red)); }
|
||||
50% { filter:drop-shadow(-2px 0 var(--neon)) drop-shadow(2px 0 var(--red)); opacity:.7; }
|
||||
100% { filter:none; opacity:1; }
|
||||
}
|
||||
|
||||
/* ── reveal on scroll ── */
|
||||
.reveal { opacity:0; transform:translateY(30px) rotate(1deg); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
|
||||
.reveal.in { opacity:1; transform:none; }
|
||||
|
||||
/* ── responsive ── */
|
||||
@media (max-width:700px) {
|
||||
.zine-title { font-size:clamp(36px,10vw,64px); }
|
||||
.flyer-tabs { flex-wrap:wrap; }
|
||||
.flyer-tab { flex:auto; }
|
||||
.news-body { column-count:1; }
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { background:white; color:black; font-size:10pt; }
|
||||
body::after, .halftone, .tape, .staple, .stencil, .marker-arrow, .stitch, .flyer-drip, .masthead-drip { display:none !important; }
|
||||
.panel { border-bottom:1pt solid black; padding:12pt 0; page-break-inside:avoid; }
|
||||
.nav { display:none; }
|
||||
a { color:black; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ══════════════════════════ MASTHEAD ══════════════════════════ -->
|
||||
<header class="masthead" id="top">
|
||||
<span class="issue-tag">ISSUE #1 · EVERY YEAR AT ONCE · PRICELESS</span>
|
||||
<h1 class="zine-title" aria-label="Miles Wolf Zine">
|
||||
<span class="line">MILESWOLF</span>
|
||||
<span class="line">
|
||||
<span class="ransom">
|
||||
<span class="rlet">Z</span><span class="rlet">I</span><span class="rlet">N</span><span class="rlet">E</span>
|
||||
</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div class="masthead-drip" aria-hidden="true">
|
||||
<span class="drop"></span><span class="drop"></span><span class="drop"></span>
|
||||
</div>
|
||||
<p class="zine-sub">A photocopied broadside assembled from every decade at once. <s>One developer.</s> Multiple paper stocks.</p>
|
||||
<!-- staple in the corner -->
|
||||
<div class="staple" style="top:-2px;left:8%;" aria-hidden="true"></div>
|
||||
<div class="staple" style="top:-2px;right:6%;transform:rotate(8deg);" aria-hidden="true"></div>
|
||||
</header>
|
||||
|
||||
<!-- ══════════════════════════ NAV ══════════════════════════ -->
|
||||
<nav class="nav">
|
||||
<a href="#front">Front Page</a>
|
||||
<a href="#score">The Score</a>
|
||||
<a href="#builds">The Builds</a>
|
||||
<a href="#arsenal">Arsenal</a>
|
||||
<a href="#flyer">Contact</a>
|
||||
</nav>
|
||||
|
||||
<!-- ══════════════════════════ PANEL 1: FRONT PAGE ══════════════════════════ -->
|
||||
<section class="panel panel-red" id="front" style="display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);align-items:flex-start;justify-content:center;">
|
||||
|
||||
<!-- marker arrow pointing at the headline -->
|
||||
<span class="marker-arrow" style="top:24px;left:5%;" aria-hidden="true">→ LOOK</span>
|
||||
|
||||
<!-- newspaper clipping -->
|
||||
<div class="news-clip reveal" style="flex:1;min-width:300px;max-width:640px;">
|
||||
<span class="tape tape-a" aria-hidden="true"></span>
|
||||
<span class="tape tape-b" aria-hidden="true"></span>
|
||||
<div class="staple" style="top:8px;left:32%;" aria-hidden="true"></div>
|
||||
|
||||
<div class="news-headline">LOCAL DEVELOPER SHIPS THE FUTURE FROM HIS BEDROOM</div>
|
||||
<div class="news-byline">
|
||||
<span>By M. W. Allen — City Desk</span>
|
||||
<span>New York · Vol. XLIV</span>
|
||||
</div>
|
||||
<div class="news-body">
|
||||
<p><span class="drop">N</span>EW YORK — The most interesting machine on the internet right now may be running in a bedroom on the Upper West Side. <b>Miles Wolf Allen</b>, a developer and 3D artist still in school, has been quietly shipping software that refuses to stay in one lane: emulators that swallow a dozen consoles, a drop-in replacement for Electron, and the demon list a whole community now treats as law.</p>
|
||||
<p>"I don't start with the business model," Allen told this broadside. "I start with the hundred-megabyte apology — and then I try to make it unnecessary." Co-founder of <b>Diskette Labs</b>. Pull shark ×2. Mode: full send, still debugging. Asked what's next: "Whatever keeps the blank page scary."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- halftone photo insert -->
|
||||
<div class="news-photo reveal" style="flex-shrink:0;">
|
||||
<img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Miles Wolf Allen" style="width:clamp(180px,22vw,260px);" loading="lazy">
|
||||
<div class="cap">Fig. 1 — The reporter at his desk. Any resemblance to a certain wall-crawler is purely coincidental. — Photo by M. Allen</div>
|
||||
<!-- staple on the photo -->
|
||||
<div class="staple" style="top:-2px;right:14px;transform:rotate(5deg);" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- spray-paint stencil floating over the photo -->
|
||||
<div class="stencil reveal" style="top:clamp(60px,10vw,120px);right:2%;transform:rotate(-6deg);" aria-hidden="true">EXTRA!</div>
|
||||
</section>
|
||||
|
||||
<div class="clip-div" aria-hidden="true"></div>
|
||||
|
||||
<!-- ══════════════════════════ PANEL 2: THE SCORE ══════════════════════════ -->
|
||||
<section class="panel panel-navy" id="score" style="display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);align-items:flex-start;justify-content:center;">
|
||||
|
||||
<div class="reveal" style="flex:1;min-width:280px;max-width:500px;">
|
||||
<span class="sec-num">// PANEL 02 — THE SCORE</span>
|
||||
|
||||
<!-- dot-matrix printout of the numbers -->
|
||||
<div class="dot-matrix" style="position:relative;">
|
||||
<span class="tape tape-c" aria-hidden="true"></span>
|
||||
<div style="font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:var(--navy);">> PRINT STATS.EXE</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;">
|
||||
<div><span style="color:var(--red);">PUBLIC_REPOS:</span> <b>60+</b></div>
|
||||
<div><span style="color:var(--red);">STARS_EARNED:</span> <b>100+</b></div>
|
||||
<div><span style="color:var(--red);">RUNS_VERIFIED:</span> <b>3,800+</b></div>
|
||||
<div><span style="color:var(--red);">SHIPPING_SINCE:</span> <b>'22</b></div>
|
||||
</div>
|
||||
<div style="font-size:10px;color:var(--ink);margin-top:14px;border-top:1px dashed rgba(0,0,0,.2);padding-top:10px;">> _</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Polaroid snapshot -->
|
||||
<div class="polaroid reveal" style="flex-shrink:0;">
|
||||
<img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Polaroid" style="width:clamp(150px,18vw,200px);" loading="lazy">
|
||||
<div class="p-cap">Miles · diskette labs ·<br>some tuesday · 2026</div>
|
||||
<!-- stitch holding the polaroid -->
|
||||
<div class="stitch" style="top:-10px;right:14px;" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- NO symbol scribbled over -->
|
||||
<svg viewBox="0 0 60 60" style="position:absolute;top:18%;right:8%;width:clamp(40px,5vw,70px);pointer-events:none;z-index:2;opacity:.6;transform:rotate(-12deg);" aria-hidden="true">
|
||||
<circle cx="30" cy="30" r="26" fill="none" stroke="var(--red)" stroke-width="3.5"/>
|
||||
<line x1="16" y1="16" x2="44" y2="44" stroke="var(--red)" stroke-width="3.5"/>
|
||||
</svg>
|
||||
|
||||
<div class="decree reveal" style="margin-top:18px;">
|
||||
<span class="em">THE KIT.</span> PYTHON · JS · TS · C++ · SWIFT · RUST · REACT · NODE · THREE · BLENDER
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="clip-div" aria-hidden="true"></div>
|
||||
|
||||
<!-- ══════════════════════════ PANEL 3: THE BUILDS ══════════════════════════ -->
|
||||
<section class="panel panel-mix" id="builds">
|
||||
<div class="reveal" style="margin-bottom:26px;">
|
||||
<span class="sec-num">// PANEL 03 — THE BUILDS</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,34px);align-items:flex-start;justify-content:center;">
|
||||
|
||||
<!-- OmniEmu: torn notebook paper -->
|
||||
<a class="notepad reveal glitch-hover" href="https://milesallen.site/projects/omniemu.html" style="flex:1;min-width:220px;max-width:340px;position:relative;display:block;color:inherit;">
|
||||
<span class="tape" style="top:-11px;left:20%;width:50px;transform:rotate(-6deg);" aria-hidden="true"></span>
|
||||
<div style="position:relative;z-index:1;">
|
||||
<span style="font-size:10px;font-weight:700;color:var(--red);letter-spacing:.1em;">OMNIEMU 2.0</span>
|
||||
<span style="font-size:10px;color:var(--navy);float:right;">ACTIVE · TS</span>
|
||||
<p style="margin-top:8px;">All your emulators in one place. Install 20+ cores, scan ROMs, launch. The arcade, consolidated. <b>read the file →</b></p>
|
||||
</div>
|
||||
<div class="staple" style="top:-2px;left:24%;" aria-hidden="true"></div>
|
||||
</a>
|
||||
|
||||
<!-- Gelectron: ripped book page -->
|
||||
<a class="book-page reveal glitch-hover" href="https://milesallen.site/projects/gelectron.html" style="flex:1;min-width:220px;max-width:340px;position:relative;display:block;color:inherit;">
|
||||
<span style="font-size:10px;font-weight:700;color:var(--red);letter-spacing:.1em;">GELECTRON</span>
|
||||
<span style="font-size:10px;color:var(--navy);float:right;">EARLY · RUST</span>
|
||||
<p style="margin-top:8px;">What if Electron left? Native web views, no bundled Chromium, no hundred-megabyte apology. <b>read the file →</b></p>
|
||||
<span class="tape" style="bottom:-12px;right:18%;width:44px;transform:rotate(4deg);" aria-hidden="true"></span>
|
||||
</a>
|
||||
|
||||
<!-- FEDL: Polaroid -->
|
||||
<a class="polaroid reveal glitch-hover" href="https://me.fedl.site/" target="_blank" rel="noopener" style="flex-shrink:0;display:block;color:inherit;">
|
||||
<div style="width:clamp(160px,18vw,220px);height:120px;background:var(--red);display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.15);">
|
||||
<span style="font-family:var(--shout);font-size:clamp(28px,4vw,48px);color:var(--paper);text-transform:uppercase;">FEDL</span>
|
||||
</div>
|
||||
<div class="p-cap">The demon list<br>3,800+ runs · LIVE</div>
|
||||
</a>
|
||||
|
||||
<!-- Vanilla: dot-matrix scrap -->
|
||||
<div class="dot-matrix reveal glitch-hover" style="flex:1;min-width:220px;max-width:340px;position:relative;">
|
||||
<span style="font-size:10px;font-weight:700;color:var(--red);">> VANILLA.EXE</span>
|
||||
<span style="font-size:10px;color:var(--navy);float:right;">QUIET BUILD</span>
|
||||
<p style="margin-top:8px;">> No frameworks. No cruft.<br>> The platform is finally enough.<br>> <b><a href="https://vanilla.milesallen.site/" target="_blank" rel="noopener">raid the site →</a></b></p>
|
||||
<span class="staple" style="top:-2px;right:20%;transform:rotate(-4deg);" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- more builds: stitched-on list -->
|
||||
<div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;">
|
||||
<a class="book-page reveal glitch-hover" href="https://milesallen.site/projects/command-move.html" style="flex:1;min-width:180px;max-width:280px;display:block;color:inherit;padding:14px 16px;font-size:12px;">
|
||||
<b>CommandMove</b> — Cmd+X, navigate, Cmd+V. The way it always should have worked. macOS. Swift. <b>→</b>
|
||||
</a>
|
||||
<a class="notepad reveal glitch-hover" href="https://milesallen.site/projects/music-app.html" style="flex:1;min-width:180px;max-width:280px;display:block;color:inherit;padding:14px 16px;font-size:12px;">
|
||||
<b>Music App</b> — A player that makes listening the point. Proof a tool can have a point of view. <b>→</b>
|
||||
</a>
|
||||
<span class="marker-arrow" style="position:static;display:block;text-align:center;margin-top:8px;" aria-hidden="true">↓ MORE IN THE ARCHIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="decree reveal" style="margin-top:22px;">
|
||||
<span class="em">DECREE #2:</span> MORE FILED IN THE <a href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;">UNDERGROUND ARCHIVE →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="clip-div" aria-hidden="true"></div>
|
||||
|
||||
<!-- ══════════════════════════ PANEL 4: ARSENAL ══════════════════════════ -->
|
||||
<section class="panel panel-neon" id="arsenal">
|
||||
<div class="reveal" style="margin-bottom:26px;">
|
||||
<span class="sec-num">// PANEL 04 — THE ARSENAL</span>
|
||||
</div>
|
||||
|
||||
<!-- skills as magazine cut-out letters on different scraps -->
|
||||
<div class="cutouts reveal">
|
||||
<span class="cutout">Python</span>
|
||||
<span class="cutout">JavaScript</span>
|
||||
<span class="cutout">TypeScript</span>
|
||||
<span class="cutout">C++</span>
|
||||
<span class="cutout">Swift</span>
|
||||
<span class="cutout">Rust</span>
|
||||
<span class="cutout">HTML/CSS</span>
|
||||
<span class="cutout">React</span>
|
||||
<span class="cutout">Node.js</span>
|
||||
<span class="cutout">Three.js</span>
|
||||
<span class="cutout">WebGL</span>
|
||||
<span class="cutout">Blender</span>
|
||||
<span class="cutout">Figma</span>
|
||||
<span class="cutout">Git</span>
|
||||
<span class="cutout">Linux</span>
|
||||
<span class="cutout">VS Code</span>
|
||||
<span class="cutout">Replit</span>
|
||||
<span class="cutout">Firefox DevTools</span>
|
||||
<span class="cutout">Docker</span>
|
||||
<span class="cutout">SQLite</span>
|
||||
</div>
|
||||
|
||||
<!-- tags as smaller cutouts -->
|
||||
<div class="cutouts reveal" style="margin-top:18px;">
|
||||
<span class="cutout">Emulators</span>
|
||||
<span class="cutout">Game Dev</span>
|
||||
<span class="cutout">Web Tooling</span>
|
||||
<span class="cutout">3D Art</span>
|
||||
<span class="cutout">Rhythm Games</span>
|
||||
<span class="cutout">Geometry Dash</span>
|
||||
<span class="cutout">Pull Shark ×2</span>
|
||||
<span class="cutout">Still In School</span>
|
||||
</div>
|
||||
|
||||
<!-- marker doodle scribble -->
|
||||
<span class="marker-arrow" style="position:absolute;bottom:40px;right:8%;transform:rotate(14deg);" aria-hidden="true">← FOR REAL</span>
|
||||
|
||||
<div class="decree reveal" style="margin-top:32px;">
|
||||
<span class="em">DECREE #3:</span> <s>NO GRID.</s> <s>NO GODS.</s> NO MINIFIED BUNDLES.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="clip-div" aria-hidden="true"></div>
|
||||
|
||||
<!-- ══════════════════════════ PANEL 5: RENDEZVOUS ══════════════════════════ -->
|
||||
<section class="panel panel-red" id="flyer" style="display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);align-items:flex-start;">
|
||||
<div class="reveal" style="margin-bottom:10px;width:100%;">
|
||||
<span class="sec-num">// PANEL 05 — RENDEZVOUS</span>
|
||||
</div>
|
||||
|
||||
<!-- wheat-pasted flyer with tear-off tabs -->
|
||||
<div class="flyer reveal" style="flex:1;min-width:280px;">
|
||||
<div class="flyer-drip" aria-hidden="true">
|
||||
<span class="d"></span><span class="d"></span><span class="d"></span>
|
||||
</div>
|
||||
<span class="fm-tag">TEAR OFF · PASS ALONG · REPOST</span>
|
||||
<h3 class="fm-head">WANTED:<br>INTERESTING PROBLEMS</h3>
|
||||
<div class="fm-row"><span class="k"><em>EMAIL</em></span><span class="v">[email protected]</span></div>
|
||||
<div class="fm-row"><span class="k"><em>GITHUB</em></span><span class="v">mileswolfallen2</span></div>
|
||||
<div class="fm-row"><span class="k"><em>CODEPEN</em></span><span class="v">mileswolfallen2</span></div>
|
||||
<div class="fm-row"><span class="k"><em>WEBSITE</em></span><span class="v">me.fedl.site</span></div>
|
||||
<div class="fm-row"><span class="k"><em>COLLECTIVE</em></span><span class="v">diskettelabs.com</span></div>
|
||||
<!-- tear-off tabs at bottom -->
|
||||
<div class="flyer-tabs">
|
||||
<span class="flyer-tab">EMAIL</span>
|
||||
<span class="flyer-tab">GITHUB</span>
|
||||
<span class="flyer-tab">CODEPEN</span>
|
||||
<span class="flyer-tab">WEBSITE</span>
|
||||
<span class="flyer-tab">COLLECTIVE</span>
|
||||
</div>
|
||||
<!-- staple -->
|
||||
<div class="staple" style="top:-2px;left:18%;transform:rotate(-6deg);" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- sticker cards pinned next to the flyer -->
|
||||
<div style="display:flex;flex-direction:column;gap:14px;flex:0 0 clamp(160px,18vw,240px);">
|
||||
<div class="notepad reveal glitch-hover" style="transform:rotate(-2deg);padding:14px 16px;">
|
||||
<span class="tape" style="top:-10px;left:18%;width:38px;transform:rotate(-5deg);" aria-hidden="true"></span>
|
||||
<b style="font-family:var(--shout);font-size:16px;text-transform:uppercase;">THE REPORTER</b>
|
||||
<p>Miles writes code, renders 3D, and co-founded Diskette Labs. Still in school. Already shipping.</p>
|
||||
<a href="https://milesallen.site/about-me.html" style="font-weight:700;color:var(--red);border-bottom:2px solid var(--red);">read dossier →</a>
|
||||
</div>
|
||||
<div class="book-page reveal glitch-hover" style="transform:rotate(1deg);padding:14px 16px;">
|
||||
<b style="font-family:var(--shout);font-size:16px;text-transform:uppercase;">FULL ARCHIVE</b>
|
||||
<p>Every edition ever filed. Sources include the code itself.</p>
|
||||
<a href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" style="font-weight:700;color:var(--navy);border-bottom:2px solid var(--navy);">break into vault →</a>
|
||||
<span class="stitch" style="bottom:-8px;right:14px;" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="dot-matrix reveal glitch-hover" style="transform:rotate(-1deg);padding:14px 16px;font-size:12px;">
|
||||
<b style="font-family:var(--shout);font-size:16px;text-transform:uppercase;">MORE ZINES</b>
|
||||
<p>> me.fedl.site<br>> diskettelabs.com<br>> <b><a href="https://me.fedl.site" target="_blank" rel="noopener">visit syndicate →</a></b></p>
|
||||
<span class="staple" style="top:-2px;right:16%;transform:rotate(4deg);" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════════════════ FOOTER ══════════════════════════ -->
|
||||
<footer class="foot-bar">
|
||||
<span>© EVERY YEAR AT ONCE · MILESWOLF ZINE · PHOTOCOPIED · WHEAT-PASTED · STAPLED · STITCHED · NEVER SOLD OUT</span>
|
||||
<span class="fb-sym" aria-hidden="true">☠</span>
|
||||
<a href="../index.html">← BACK TO THE SYSTEM</a>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
// reveal on scroll
|
||||
var reveals = document.querySelectorAll('.reveal');
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(e){
|
||||
if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.06 });
|
||||
reveals.forEach(function(r){ io.observe(r); });
|
||||
} else { reveals.forEach(function(r){ r.classList.add('in'); }); }
|
||||
|
||||
// random jitter assignments
|
||||
document.querySelectorAll('.zine-title, .decree, .flyer, .stencil').forEach(function(el){
|
||||
el.classList.add(Math.random() < 0.5 ? 'jitter-slow' : 'jitter-fast');
|
||||
});
|
||||
|
||||
// periodic glitch flash on masthead
|
||||
var masthead = document.querySelector('.masthead');
|
||||
if (masthead) {
|
||||
setInterval(function(){
|
||||
if (Math.random() < 0.15) {
|
||||
masthead.style.filter = 'drop-shadow(3px 0 var(--neon)) drop-shadow(-3px 0 var(--red))';
|
||||
setTimeout(function(){ masthead.style.filter = ''; }, 200);
|
||||
}
|
||||
}, 6000);
|
||||
}
|
||||
|
||||
// ambient glitch on cutouts
|
||||
var cutouts = document.querySelectorAll('.cutout');
|
||||
if (cutouts.length) {
|
||||
setInterval(function(){
|
||||
var el = cutouts[Math.floor(Math.random() * cutouts.length)];
|
||||
el.style.filter = 'drop-shadow(2px 0 var(--neon)) drop-shadow(-2px 0 var(--red))';
|
||||
el.style.opacity = '.65';
|
||||
setTimeout(function(){ el.style.filter = ''; el.style.opacity = ''; }, 160);
|
||||
}, 5000);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user