flesh out zine.html

Hunter
Monday, August 4th, 2025 at 10:33 AM


resources/zine.html/8ball.gifnew


resources/zine.html/ipb.jpgnew


zine.html+125-10
resources/zine.html/8ball.gif
Binary files differ.
resources/zine.html/ipb.jpg
Binary files differ.
zine.html
 25  		body {
 26  			font-family: Arial, sans-serif;
 27  			background-color: green;
    -			/* background-image:url("water.jpg"); */
 28 +			/* background-image:url("resources/water.jpg"); */
 29  			display: flex;
 30  			justify-content: center;
 31  			align-items: center;

 43  			gap: 0;
 44  			outline: 2px solid black;
 45  			position: relative;
    -			margin-bottom: 20px;
 46  		}
 47  		
 48  		#sheet::after {

 87  			height: 100%;
 88  			overflow: hidden;
 89  			font-size: 18px;
 90 +			/* uncomment and print to determine appropriate .zine-page padding for your printer */
 91  			/* border:1px dashed black; */
 92  		}
 93  
 94 +		p {
 95 +			font-size: 17px;
 96 +		}
 97 +
 98 +		img {
 99 +			max-width: 100%;
100 +			float: right;
101 +			margin-left: 5px;
102 +			margin-bottom: 5px;
103 +		}
104 +
105 +		code {
106 +			margin:20px;
107 +		}
108 +
109 +		pre {
110 +			margin-top:8px;
111 +			font-size: 15px;
112 +			border:1px dotted grey;
113 +		}
114 +
115  		/* Print styles */
116  		@media print {
117  			#sheet {

132  				size: 8.5in 11in portrait;
133  				margin: 0;
134  			}
135 +			a {
136 +				color: black;
137 +			}
138 +		}
139 +
140 +		ul {
141 +			list-style-type: disc;
142 +			padding-left: 20px;
143 +		}
144 +
145 +		ul.leaders {
146 +			max-width: 40em;
147 +			padding: 0;
148 +			overflow-x: hidden;
149 +			list-style: none;
150 +		}
151 +		ul.leaders li {
152 +			padding-bottom: 10px;
153 +		}
154 +		ul.leaders li:before {
155 +			float: left;
156 +			width: 0;
157 +			white-space: nowrap;
158 +			content: "........................................";
159 +		}
160 +		ul.leaders span:first-child {
161 +			padding-right: 0.33em;
162 +			background: white;
163 +		}
164 +		ul.leaders span + span {
165 +			float: right;
166 +			padding-left: 0.33em;
167 +			background: white;
168 +		}
169 +
170 +		.highlighted {
171 +			color: white;
172 +			background-color: black;
173  		}
174  	</style>
175  </head>

177  	<div id="sheet">
178  		<div class="zine-page" id="page6">
179  			<div class="zine-page-content">
    -				<h1>6</h1>
180 +				<p>
181 +					The code for this zine is available for free on GitHub, distributed as a single HTML file. 
182 +					Think of it as a template you can use to create your own zine, comic, recipe book, manifesto, photo album, album review, dream journal or... <i><u><strong>whatever</strong></u></i>.
183 +				</p>
184 +				<br>
185 +				<ul style="font-size:15px;">
186 +					<li>Source code:<br><a href="https://github.com/hunterirving/zine.html">https://github.com/hunterirving/zine.html</a>
187 +					</li>
188 +					<br>
189 +					<li>Assembly instructions:<br><a href="https://vabook.org/wp-content/uploads/sites/16/2020/03/Where-Im-From-zine-folding-instructions.pdf">https://vabook.org/wp-content/uploads/sites/16/2020/03/Where-Im-From-zine-folding-instructions.pdf</a>
190 +					</li>
191 +				</ul>
192  			</div>
193  		</div>
194  		<div class="zine-page" id="page5">
195  			<div class="zine-page-content">
    -				<h1>5</h1>
196 +				<p>With just a few lines of code, you can transform a webpage into a perfectly formatted zine, book, or poster.
197 +				Press <span style="border: 1px solid black"><keyboard>⌘</span></keyboard>+<span style="border: 1px solid black"><keyboard>P</keyboard></span> on your keyboard, and this page will adapt for printing, rotating and scaling to fit a single sheet of letter paper.</p>
198 +				<br>
199 +				<div style="border: 1px solid black; padding: 5px;"><i>Note: this trick won't work if you're reading the print edition.</i></div>
200 +				<br>
201 +				<p>From screen to page, HTML bridges the <span style="font-family:monospace">digital</span> and <span style="font-family:cursive">physical</span> worlds.</p>
202  			</div>
203  		</div>
204  		<div class="zine-page" id="page4">
205  			<div class="zine-page-content">
    -				<h1>4</h1>
206 +				<p>
207 +					As the website <a href="https://html.energy">https://html.energy</a> puts it, "HTML isn’t a vast language, yet you can do a lot with it."<br>
208 +					HTML is built using nested <b>tags</b>, which define elements like headings, paragraphs, and images.
209 +					You can think of these tags as <i>the moveable type of the Internet</i>:
210 +					<br><br>
211 +					<pre>&lt;html>
212 +  &lt;body>
213 +    &lt;h1>My Webpage&lt;/h1>
214 +    &lt;p>Yadda yadda..&lt;/p>
215 +    &lt;img src="me.jpg">
216 +  &lt;/body>
217 +&lt;/html></pre>
218 +				</p>
219  			</div>
220  		</div>
221  		<div class="zine-page" id="page3">
222  			<div class="zine-page-content">
    -				<h1>3</h1>
223 +				<img src="resources/zine.html/ipb.jpg" style="width:49%;">
224 +				<p>I recently picked up <span class="highlighted">Kristoffer Tjalve</span> and <span class="highlighted">Elliot Cost</span>'s
225 +				<i>Internet Phone Book</i>, a collection of personal websites, built by hand, by people from around the world.<br>
226 +				I was surprised to learn that the book itself had been written in HTML (<i>HyperText Markup Language</i>),
227 +				the language that every website on the Internet uses to structure its content.				
228  			</div>
229  		</div>
230  		<div class="zine-page" id="back-cover">
    -			<div class="zine-page-content">
    -				<h1>back cover</h1>
231 +			<div class="zine-page-content" style="display: flex; align-items: flex-end; justify-content: center;">
232 +				<small style="text-align: center;"><a href="https://hunterirving.com">hunterirving.com</a><br>html day 2025</small>
233  			</div>
234  		</div>
235  		<div class="zine-page" id="front-cover">

240  		</div>
241  		<div class="zine-page" id="page1">
242  			<div class="zine-page-content">
    -				<h1>1</h1>
243 +				<h2>if you have a printer, you're a publisher</h2>
244 +				<ul class="leaders" style="margin-top:25px;">
245 +					<li>
246 +						<span>movable type</span><span>①</span>
247 +					</li>
248 +					<li>
249 +						<span>seeds of an idea</span><span>②</span>
250 +					</li>
251 +					<li>
252 +						<span>intro to HTML</span><span>③</span>
253 +					</li>
254 +					<li>
255 +						<span>print preview</span><span>④</span>
256 +					</li>
257 +					<li>
258 +						<span>tag, you're it</span><span>⑤</span>
259 +					</li>
260 +				</ul>
261 +				<img src="resources/zine.html/8ball.gif" style="display: block; margin: 0 auto; float: none; margin-top:30px;">
262  			</div>
263  		</div>
264  		<div class="zine-page" id="page2">
265  			<div class="zine-page-content">
    -				<h1>2</h1>
266 +				<p>
267 +					In 1040 AD, Chinese inventor <span class="highlighted">Bi Sheng</span> carved individual characters into clay pieces,
268 +					creating the world's first movable type printing system.
269 +					Four centuries later, <span class="highlighted">Johannes Gutenberg</span> developed his own movable type system using metal
270 +					letters and a mechanical press, revolutionizing European society and spreading
271 +					literacy across the Western world. Though inkjet and laser printers now sit in homes around the world, <i>few use them to become publishers themselves.</i>
272 +				</p>
273  			</div>
274  		</div>
275  	</div>