commit 298a794a26cd00b0099c38a916ff1893476c0786
parent dba1b230cf42e247c7c51b012f6cfd56f66b36a6
Author: Hunter
Date: Mon, 4 Aug 2025 10:33:55 -0400
flesh out zine.html
Diffstat:
3 files changed, 125 insertions(+), 10 deletions(-)
diff --git a/resources/zine.html/8ball.gif b/resources/zine.html/8ball.gif
Binary files differ.
diff --git a/resources/zine.html/ipb.jpg b/resources/zine.html/ipb.jpg
Binary files differ.
diff --git a/zine.html b/zine.html
@@ -25,7 +25,7 @@
body {
font-family: Arial, sans-serif;
background-color: green;
- /* background-image:url("water.jpg"); */
+ /* background-image:url("resources/water.jpg"); */
display: flex;
justify-content: center;
align-items: center;
@@ -43,7 +43,6 @@
gap: 0;
outline: 2px solid black;
position: relative;
- margin-bottom: 20px;
}
#sheet::after {
@@ -88,9 +87,31 @@
height: 100%;
overflow: hidden;
font-size: 18px;
+ /* uncomment and print to determine appropriate .zine-page padding for your printer */
/* border:1px dashed black; */
}
+ p {
+ font-size: 17px;
+ }
+
+ img {
+ max-width: 100%;
+ float: right;
+ margin-left: 5px;
+ margin-bottom: 5px;
+ }
+
+ code {
+ margin:20px;
+ }
+
+ pre {
+ margin-top:8px;
+ font-size: 15px;
+ border:1px dotted grey;
+ }
+
/* Print styles */
@media print {
#sheet {
@@ -111,6 +132,44 @@
size: 8.5in 11in portrait;
margin: 0;
}
+ a {
+ color: black;
+ }
+ }
+
+ ul {
+ list-style-type: disc;
+ padding-left: 20px;
+ }
+
+ ul.leaders {
+ max-width: 40em;
+ padding: 0;
+ overflow-x: hidden;
+ list-style: none;
+ }
+ ul.leaders li {
+ padding-bottom: 10px;
+ }
+ ul.leaders li:before {
+ float: left;
+ width: 0;
+ white-space: nowrap;
+ content: "........................................";
+ }
+ ul.leaders span:first-child {
+ padding-right: 0.33em;
+ background: white;
+ }
+ ul.leaders span + span {
+ float: right;
+ padding-left: 0.33em;
+ background: white;
+ }
+
+ .highlighted {
+ color: white;
+ background-color: black;
}
</style>
</head>
@@ -118,27 +177,59 @@
<div id="sheet">
<div class="zine-page" id="page6">
<div class="zine-page-content">
- <h1>6</h1>
+ <p>
+ The code for this zine is available for free on GitHub, distributed as a single HTML file.
+ 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>.
+ </p>
+ <br>
+ <ul style="font-size:15px;">
+ <li>Source code:<br><a href="https://github.com/hunterirving/zine.html">https://github.com/hunterirving/zine.html</a>
+ </li>
+ <br>
+ <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>
+ </li>
+ </ul>
</div>
</div>
<div class="zine-page" id="page5">
<div class="zine-page-content">
- <h1>5</h1>
+ <p>With just a few lines of code, you can transform a webpage into a perfectly formatted zine, book, or poster.
+ 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>
+ <br>
+ <div style="border: 1px solid black; padding: 5px;"><i>Note: this trick won't work if you're reading the print edition.</i></div>
+ <br>
+ <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>
</div>
</div>
<div class="zine-page" id="page4">
<div class="zine-page-content">
- <h1>4</h1>
+ <p>
+ 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>
+ HTML is built using nested <b>tags</b>, which define elements like headings, paragraphs, and images.
+ You can think of these tags as <i>the moveable type of the Internet</i>:
+ <br><br>
+ <pre><html>
+ <body>
+ <h1>My Webpage</h1>
+ <p>Yadda yadda..</p>
+ <img src="me.jpg">
+ </body>
+</html></pre>
+ </p>
</div>
</div>
<div class="zine-page" id="page3">
<div class="zine-page-content">
- <h1>3</h1>
+ <img src="resources/zine.html/ipb.jpg" style="width:49%;">
+ <p>I recently picked up <span class="highlighted">Kristoffer Tjalve</span> and <span class="highlighted">Elliot Cost</span>'s
+ <i>Internet Phone Book</i>, a collection of personal websites, built by hand, by people from around the world.<br>
+ I was surprised to learn that the book itself had been written in HTML (<i>HyperText Markup Language</i>),
+ the language that every website on the Internet uses to structure its content.
</div>
</div>
<div class="zine-page" id="back-cover">
- <div class="zine-page-content">
- <h1>back cover</h1>
+ <div class="zine-page-content" style="display: flex; align-items: flex-end; justify-content: center;">
+ <small style="text-align: center;"><a href="https://hunterirving.com">hunterirving.com</a><br>html day 2025</small>
</div>
</div>
<div class="zine-page" id="front-cover">
@@ -149,12 +240,36 @@
</div>
<div class="zine-page" id="page1">
<div class="zine-page-content">
- <h1>1</h1>
+ <h2>if you have a printer, you're a publisher</h2>
+ <ul class="leaders" style="margin-top:25px;">
+ <li>
+ <span>movable type</span><span>①</span>
+ </li>
+ <li>
+ <span>seeds of an idea</span><span>②</span>
+ </li>
+ <li>
+ <span>intro to HTML</span><span>③</span>
+ </li>
+ <li>
+ <span>print preview</span><span>④</span>
+ </li>
+ <li>
+ <span>tag, you're it</span><span>⑤</span>
+ </li>
+ </ul>
+ <img src="resources/zine.html/8ball.gif" style="display: block; margin: 0 auto; float: none; margin-top:30px;">
</div>
</div>
<div class="zine-page" id="page2">
<div class="zine-page-content">
- <h1>2</h1>
+ <p>
+ In 1040 AD, Chinese inventor <span class="highlighted">Bi Sheng</span> carved individual characters into clay pieces,
+ creating the world's first movable type printing system.
+ Four centuries later, <span class="highlighted">Johannes Gutenberg</span> developed his own movable type system using metal
+ letters and a mechanical press, revolutionizing European society and spreading
+ 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>
+ </p>
</div>
</div>
</div>
