commit f38db76eee9445cc78048739c3fffac96ed4cc05
parent 5885537766b2b12ab0b8a1160fe049bd80302258
Author: Hunter
Date: Mon, 4 Aug 2025 20:53:04 -0400
add template.html
Diffstat:
3 files changed, 240 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
# What if you could hold a website?
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.
-<img src="resources/readme_images/zine-layout.png">
+<a href="https://hunterirving.github.io/zine.html/zine.html"><img src="resources/readme_images/zine-layout.png"></a>
>[!NOTE]
>For best results, in your system print dialog...
@@ -13,17 +13,31 @@ Open ```zine.html``` in your web browser (or <a href="https://hunterirving.githu
## Assembly Instructions
-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:
+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:
<a href="https://vabook.org/wp-content/uploads/sites/16/2020/03/Where-Im-From-zine-folding-instructions.pdf">
<img src="resources/readme_images/folding-guide.png">
</a>
>[!TIP]
->Once folded, consider gluing opposite pages together with a gluestick for increased structural stability.
+>Once assembled, consider gluing opposite pages together with a gluestick for increased structural stability.
# It's Your Zine Now
1. open ```template.html``` in your text editor of choice
2. modify the HTML within the existing ```.zine-page-content``` divs
3. open the modified file in your favorite web browser
4. hit print!
+
+# In Stock
+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;">
+> the literary classic that started a revolution in self-publishing.
+2. <a href="https://hunterirving.github.io/zine.html/template.html">template.html</a>
+> it's like zine.html, but with a blank canvas. wanna flesh it out?
+
+### Zine Ideas:
+- comic book
+- recipe book
+- photo album
+- album review
+- dream journal
+- manifesto
+\ No newline at end of file
diff --git a/resources/readme_images/hot.gif b/resources/readme_images/hot.gif
Binary files differ.
diff --git a/template.html b/template.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>zine.html</title>
+ <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>">
+ <style>
+ :root {
+ --rotation: 0deg;
+ /* uncomment to flip */
+ /* --rotation: 180deg; */
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ html {
+ transform: rotate(var(--rotation));
+ }
+
+ body {
+ font-family: Arial, sans-serif;
+ background-color: green;
+ background-image:url("resources/water.jpg");
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ overflow: auto;
+ }
+
+ #sheet {
+ width: 11in;
+ height: 8.5in;
+ background-color: white;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 0;
+ outline: 2px solid black;
+ position: relative;
+ }
+
+ #sheet::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: black;
+ z-index: -1;
+ transform: rotate(calc(-1 * var(--rotation))) translateX(7px) translateY(7px) rotate(var(--rotation));
+ }
+
+ #page3, #page4, #page5, #page6 {
+ transform: rotate(180deg);
+ }
+
+ /* dashed line border */
+ #back-cover, #front-cover, #page1 {
+ border-right: 1px dashed lightgrey;
+ border-top: 1px dashed lightgrey;
+ }
+ #page2 {
+ border-top: 1px dashed lightgrey;
+ }
+ #page4, #page5, #page6 {
+ border-left: 1px dashed lightgrey;
+ }
+
+ .zine-page {
+ height: 4.25in;
+ width: 2.75in;
+ padding-top: .08in;
+ padding-bottom: .3in;
+ padding-left: .2in;
+ padding-right: .2in;
+ }
+
+ .zine-page-content {
+ width: 100%;
+ 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 {
+ page-break-after: auto;
+ page-break-inside: avoid;
+ box-sizing: border-box;
+ transform: rotate(90deg);
+ outline: none;
+ margin-bottom: 0;
+ }
+ #sheet::after {
+ display: none;
+ }
+ #back-cover, #front-cover, #page1, #page2, #page3, #page4, #page5, #page6 {
+ border: none;
+ }
+ @page {
+ 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>
+<body>
+ <div id="sheet">
+ <div class="zine-page" id="page6">
+ <div class="zine-page-content">
+
+ </div>
+ </div>
+ <div class="zine-page" id="page5">
+ <div class="zine-page-content">
+
+ </div>
+ </div>
+ <div class="zine-page" id="page4">
+ <div class="zine-page-content">
+
+ </p>
+ </div>
+ </div>
+ <div class="zine-page" id="page3">
+ <div class="zine-page-content">
+
+ </div>
+ </div>
+ <div class="zine-page" id="back-cover">
+ <div class="zine-page-content" style="display: flex; align-items: flex-end; justify-content: center;">
+
+ </div>
+ </div>
+ <div class="zine-page" id="front-cover">
+ <div class="zine-page-content">
+
+ </div>
+ </div>
+ <div class="zine-page" id="page1">
+ <div class="zine-page-content">
+
+ </div>
+ </div>
+ <div class="zine-page" id="page2">
+ <div class="zine-page-content">
+
+ </div>
+ </div>
+ </div>
+</body>
+</html>
+\ No newline at end of file
