zine_studio · hunterirving.com

improve layout

Hunter
Sunday, August 3rd, 2025 at 8:41 PM

water.jpg new
zine.html +88 -89

water.jpg

Binary files differ.

zine.html

  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  		}
    -		html, body {
    -			overflow: hidden;
 20 +
 21 +		html {
 22 +			transform: rotate(var(--rotation));
 23  		}
 24 +
 25  		body {
 26  			font-family: Arial, sans-serif;
    -			background-color: rgb(58, 158, 183);
 27 +			background-color: green;
 28 +			/* background-image:url("water.jpg"); */
 29  			display: flex;
 30  			justify-content: center;
 31  			align-items: center;
 32 +			height: 100vh;
 33 +			overflow: auto;
 34  		}
 35 +
 36  		#sheet {
    -			width: 8.5in;
    -			height: 11in;
 37 +			width: 11in;
 38 +			height: 8.5in;
 39  			background-color: white;
 40  			display: grid;
    -			grid-template-columns: repeat(2, 1fr);
    -			grid-template-rows: repeat(4, 1fr);
 41 +			grid-template-columns: repeat(4, 1fr);
 42 +			grid-template-rows: repeat(2, 1fr);
 43  			gap: 0;
    -			box-sizing: border-box;
    -			transform: rotate(-90deg);
 44 +			outline: 2px solid black;
 45 +			position: relative;
 46 +			margin-bottom: 20px;
 47 +		}
 48 +		
 49 +		#sheet::after {
 50 +			content: '';
 51 +			position: absolute;
 52 +			top: 0;
 53 +			left: 0;
 54 +			width: 100%;
 55 +			height: 100%;
 56 +			background-color: black;
 57 +			z-index: -1;
 58 +			transform: rotate(calc(-1 * var(--rotation))) translateX(7px) translateY(7px) rotate(var(--rotation));
 59  		}
 60  		
 61  		#page3, #page4, #page5, #page6 {
 62  			transform: rotate(180deg);
 63  		}
 64  
    -		.zine-page {
    -			border: 1px dotted lightgrey;
    -			display: flex;
    -			align-items: center;
    -			justify-content: center;
    -			position: relative;
    -			width: 4.25in;
    -			height: 2.75in;
 65 +		/* dashed line border */
 66 +		#back-cover, #front-cover, #page1 {
 67 +			border-right: 1px dashed lightgrey;
 68 +			border-top: 1px dashed lightgrey;
 69 +		}
 70 +		#page4, #page5, #page6 {
 71 +			border-left: 1px dashed lightgrey;
 72 +		}
 73 +		#page2 {
 74 +			border-top: 1px dashed lightgrey;
 75  		}
 76  
    -		.zine-page-inner {
    -			width: 2.4in;
    -			height: 3.85in;
    -			transform: rotate(90deg);
    -			overflow: hidden;
 77 +		.zine-page {
 78 +			height: 4.25in;
 79 +			width: 2.75in;
 80 +			padding-top: .08in;
 81 +			padding-bottom: .2in;
 82 +			padding-left: .18in;
 83 +			padding-right: .18in;
 84  		}
 85  
    -		p {
    -			font-size: 12px;
    -			line-height: 1.3;
 86 +		.zine-page-content {
 87 +			width: 100%;
 88 +			height: 100%;
 89 +			overflow: hidden;
 90 +			font-size: 18px;
 91  		}
 92  
 93  		/* Print styles */
 94  		@media print {
    -			* {
    -				margin: 0 !important;
    -				padding: 0 !important;
    -			}
    -			
    -			body {
    -				background-color: white;
    -				padding: 0;
    -				margin: 0;
    -				height: 11in;
    -				width: 8.5in;
    -				display: flex;
    -				justify-content: center;
    -				align-items: center;
    -			}
 95  			#sheet {
    -				width: 8.5in;
    -				height: 11in;
    -				margin: 0;
    -				padding: 0;
 96  				page-break-after: auto;
 97  				page-break-inside: avoid;
 98  				box-sizing: border-box;
 99 +				transform: rotate(90deg);
100 +				outline: none;
101 +			}
102 +			#sheet::after {
103 +				display: none;
104 +			}
105 +			.zine-page {
106  				border: none;
    -				transform: rotate(0deg);
107  			}
    -			/* .zine-page {
    -				width: 4.25in;
    -				height: 2.75in;
    -			} */
    -			/* .zine-page-inner {
    -				width: 2.4in;
    -				height: 3.85in;
    -				transform: rotate(90deg);
    -			} */
108  			@page {
109  				size: 8.5in 11in portrait;
110  				margin: 0;

114  </head>
115  <body>
116  	<div id="sheet">
    -		<div id="back-cover" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>back cover</h1>
    -				<br>
    -				<p>
    -					Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. 
    -				</p>
    -				<br>
    -				<p>
    -					Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. 
    -				</p>
    -				<p>
    -					Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. 
    -				</p>
117 +		<div class="zine-page" id="page6">
118 +			<div class="zine-page-content">
119 +				<h1>6</h1>
120  			</div>
121  		</div>
    -		<div id="page6" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>6</h1>
122 +		<div class="zine-page" id="page5">
123 +			<div class="zine-page-content">
124 +				<h1>5</h1>
125  			</div>
126  		</div>
    -		<div id="front-cover" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>front cover</h1>
127 +		<div class="zine-page" id="page4">
128 +			<div class="zine-page-content">
129 +				<h1>4</h1>
130  			</div>
131  		</div>
    -		<div id="page5" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>5</h1>
132 +		<div class="zine-page" id="page3">
133 +			<div class="zine-page-content">
134 +				<h1>3</h1>
135  			</div>
136  		</div>
    -		<div id="page1" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>1</h1>
137 +		<div class="zine-page" id="back-cover">
138 +			<div class="zine-page-content">
139 +				<h1>back cover</h1>
140  			</div>
141  		</div>
    -		<div id="page4" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>4</h1>
142 +		<div class="zine-page" id="front-cover">
143 +			<div class="zine-page-content">
144 +				<h1>zine.html</h1>
145 +				<div style="font-size:100px; margin-top:80px; text-align: center;" class="center">🎱</div>
146  			</div>
147  		</div>
    -		<div id="page2" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>2</h1>
148 +		<div class="zine-page" id="page1">
149 +			<div class="zine-page-content">
150 +				<h1>1</h1>
151  			</div>
152  		</div>
    -		<div id="page3" class="zine-page">
    -			<div class="zine-page-inner">
    -				<h1>3</h1>
153 +		<div class="zine-page" id="page2">
154 +			<div class="zine-page-content">
155 +				<h1>2</h1>
156  			</div>
157  		</div>
158  	</div>

git/zine_studio