add template.html
Hunter
Monday, August 4th, 2025 at 8:53 PM
1 # What if you could hold a website?
2 Open ```zine.html``` in your web browser (or <a href="https://hunterirving.github.io/zine.html/zine.html">click here</a>) then use ```⌘``` + ```P``` to print an 8-page mini zine to one sheet of 8.5 x 11" legal paper.
3
-<img src="resources/readme_images/zine-layout.png">
4 +<a href="https://hunterirving.github.io/zine.html/zine.html"><img src="resources/readme_images/zine-layout.png"></a>
5
6 >[!NOTE]
7 >For best results, in your system print dialog...
13
14 ## Assembly Instructions
15
-Once you've printed the blank, follow this assembly guide from <a href="https://vabook.org/wp-content/uploads/sites/16/2020/03/Where-Im-From-zine-folding-instructions.pdf">Virginia Center for the Book</a> to cut and fold the zine to shape:
16 +Once you've printed the page, follow this assembly guide from <a href="https://vabook.org/wp-content/uploads/sites/16/2020/03/Where-Im-From-zine-folding-instructions.pdf">Virginia Center for the Book</a> to cut and fold the zine to shape:
17
18 <a href="https://vabook.org/wp-content/uploads/sites/16/2020/03/Where-Im-From-zine-folding-instructions.pdf">
19 <img src="resources/readme_images/folding-guide.png">
20 </a>
21
22 >[!TIP]
->Once folded, consider gluing opposite pages together with a gluestick for increased structural stability.
23 +>Once assembled, consider gluing opposite pages together with a gluestick for increased structural stability.
24
25 # It's Your Zine Now
26 1. open ```template.html``` in your text editor of choice
27 2. modify the HTML within the existing ```.zine-page-content``` divs
28 3. open the modified file in your favorite web browser
29 4. hit print!
30 +
31 +# In Stock
32 +1. <a href="https://hunterirving.github.io/zine.html/zine.html">zine.html</a><img src="resources/readme_images/hot.gif" style="padding-left:10px; height: 26px;">
33 +> the literary classic that started a revolution in self-publishing.
34 +2. <a href="https://hunterirving.github.io/zine.html/template.html">template.html</a>
35 +> it's like zine.html, but with a blank canvas. wanna flesh it out?
36 +
37 +### Zine Ideas:
38 +- comic book
39 +- recipe book
40 +- photo album
41 +- album review
42 +- dream journal
43 +- manifesto
Binary files differ.
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>zine.html</title>
7 + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎱</text></svg>">
8 + <style>
9 + :root {
10 + --rotation: 0deg;
11 + /* uncomment to flip */
12 + /* --rotation: 180deg; */
13 + }
14 +
15 + * {
16 + margin: 0;
17 + padding: 0;
18 + box-sizing: border-box;
19 + }
20 +
21 + html {
22 + transform: rotate(var(--rotation));
23 + }
24 +
25 + body {
26 + font-family: Arial, sans-serif;
27 + background-color: green;
28 + background-image:url("resources/water.jpg");
29 + display: flex;
30 + justify-content: center;
31 + align-items: center;
32 + height: 100vh;
33 + overflow: auto;
34 + }
35 +
36 + #sheet {
37 + width: 11in;
38 + height: 8.5in;
39 + background-color: white;
40 + display: grid;
41 + grid-template-columns: repeat(4, 1fr);
42 + grid-template-rows: repeat(2, 1fr);
43 + gap: 0;
44 + outline: 2px solid black;
45 + position: relative;
46 + }
47 +
48 + #sheet::after {
49 + content: '';
50 + position: absolute;
51 + top: 0;
52 + left: 0;
53 + width: 100%;
54 + height: 100%;
55 + background-color: black;
56 + z-index: -1;
57 + transform: rotate(calc(-1 * var(--rotation))) translateX(7px) translateY(7px) rotate(var(--rotation));
58 + }
59 +
60 + #page3, #page4, #page5, #page6 {
61 + transform: rotate(180deg);
62 + }
63 +
64 + /* dashed line border */
65 + #back-cover, #front-cover, #page1 {
66 + border-right: 1px dashed lightgrey;
67 + border-top: 1px dashed lightgrey;
68 + }
69 + #page2 {
70 + border-top: 1px dashed lightgrey;
71 + }
72 + #page4, #page5, #page6 {
73 + border-left: 1px dashed lightgrey;
74 + }
75 +
76 + .zine-page {
77 + height: 4.25in;
78 + width: 2.75in;
79 + padding-top: .08in;
80 + padding-bottom: .3in;
81 + padding-left: .2in;
82 + padding-right: .2in;
83 + }
84 +
85 + .zine-page-content {
86 + width: 100%;
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 {
118 + page-break-after: auto;
119 + page-break-inside: avoid;
120 + box-sizing: border-box;
121 + transform: rotate(90deg);
122 + outline: none;
123 + margin-bottom: 0;
124 + }
125 + #sheet::after {
126 + display: none;
127 + }
128 + #back-cover, #front-cover, #page1, #page2, #page3, #page4, #page5, #page6 {
129 + border: none;
130 + }
131 + @page {
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>
176 +<body>
177 + <div id="sheet">
178 + <div class="zine-page" id="page6">
179 + <div class="zine-page-content">
180 +
181 + </div>
182 + </div>
183 + <div class="zine-page" id="page5">
184 + <div class="zine-page-content">
185 +
186 + </div>
187 + </div>
188 + <div class="zine-page" id="page4">
189 + <div class="zine-page-content">
190 +
191 + </p>
192 + </div>
193 + </div>
194 + <div class="zine-page" id="page3">
195 + <div class="zine-page-content">
196 +
197 + </div>
198 + </div>
199 + <div class="zine-page" id="back-cover">
200 + <div class="zine-page-content" style="display: flex; align-items: flex-end; justify-content: center;">
201 +
202 + </div>
203 + </div>
204 + <div class="zine-page" id="front-cover">
205 + <div class="zine-page-content">
206 +
207 + </div>
208 + </div>
209 + <div class="zine-page" id="page1">
210 + <div class="zine-page-content">
211 +
212 + </div>
213 + </div>
214 + <div class="zine-page" id="page2">
215 + <div class="zine-page-content">
216 +
217 + </div>
218 + </div>
219 + </div>
220 +</body>
221 +</html>
