Skip to content

Commit bc947b1

Browse files
gchartiergchartier
committed
add make a website zine machine placeholder
1 parent 38a03d6 commit bc947b1

File tree

1 file changed

+264
-0
lines changed

1 file changed

+264
-0
lines changed

‎src/routes/(oldschool)/zines/make-a-website/+page.svelte‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
<script lang="ts">
2+
</script>
3+
4+
<!-- 💠 Source: https://rowan.fyi/made/zine-machine/ -->
5+
6+
<svelte:head>
7+
<title>Make a Website!</title>
8+
<meta charset="utf-8" />
9+
<meta http-equiv="x-ua-compatible" content="IE=edge" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<link
12+
rel="icon"
13+
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>"
14+
/>
15+
<meta name="Description" content="A zine about making your own website in HTML." />
16+
<meta name="theme-color" content="#E8D9A6" />
17+
</svelte:head>
18+
19+
<main class="zine">
20+
<header class="zine-page page-1">
21+
<div class="mx-auto mt-0 mb-6 flex flex-col items-center">
22+
<h1>🚧 Under Construction 🚧</h1>
23+
<p>Refresh this page in a couple days!</p>
24+
<p>
25+
End result will be like this <a href="https://rowan.fyi/made/zine-machine/" target="_blank"
26+
>Zine Machine</a
27+
>.
28+
</p>
29+
</div>
30+
</header>
31+
<section class="zine-page page-2"></section>
32+
<section class="zine-page page-3">
33+
<!-- TODO: Page 3 content here -->
34+
</section>
35+
<section class="zine-page page-4">
36+
<!-- TODO: Page 4 - that's the halfway point, you're nearly there! -->
37+
</section>
38+
<section class="zine-page page-5">
39+
<!-- TODO: You guessed it, page 5 content now -->
40+
</section>
41+
<section class="zine-page page-6">
42+
<!-- TODO: Page 6, this is the last "page" but you can still keep going -->
43+
</section>
44+
<section class="zine-page page-7">
45+
<!-- TODO: Page 7, this is the inside of the back cover -->
46+
</section>
47+
<footer class="zine-page page-8">
48+
<!-- TODO: You made it! Page 8, the back cover. Feel free to use this for attributions. Hey, let me know if you want a review. I'll give you ★★★★★ and an amazing quote -->
49+
</footer>
50+
</main>
51+
52+
<style>
53+
/* These are just the article styles, so change these to whatever fits your theme! */
54+
55+
/* Probably keep this one bit as is though, it's going to make arranging things in print easier for you! */
56+
* {
57+
box-sizing: border-box;
58+
margin: 0;
59+
padding: 0;
60+
}
61+
62+
body {
63+
font-family: sans-serif;
64+
}
65+
66+
h1 {
67+
color: black;
68+
text-align: center;
69+
font-size: 180%;
70+
}
71+
72+
h2 {
73+
color: black;
74+
font-family: monospace;
75+
text-align: center;
76+
font-size: 140%;
77+
font-weight: bold;
78+
margin: 0.2rem 0 0 0;
79+
padding: 0.2rem 0 0.2rem;
80+
}
81+
82+
h3 {
83+
background: black;
84+
color: #e8d9a6;
85+
font-family: monospace;
86+
text-align: center;
87+
font-size: 140%;
88+
font-weight: normal;
89+
margin: 0.2rem 0 0 0;
90+
padding: 0.2rem 0 0.2rem;
91+
}
92+
93+
th {
94+
text-align: left;
95+
background: #c9daf8;
96+
color: #073763;
97+
}
98+
99+
p {
100+
padding: 0.2rem;
101+
padding-top: 0.5rem;
102+
font-size: 105%;
103+
}
104+
105+
ul {
106+
padding-left: 2rem;
107+
list-style: none;
108+
}
109+
110+
.zine-li:before {
111+
content: '\21D2';
112+
margin-left: -20px;
113+
margin-right: 10px;
114+
}
115+
116+
.zine-link {
117+
font-family: monospace;
118+
background: #c9daf8;
119+
color: #073763;
120+
}
121+
122+
.captioned-img {
123+
object-fit: contain;
124+
max-height: 100%;
125+
max-width: 100%;
126+
padding: 0 2rem 0 2rem;
127+
}
128+
129+
figcaption {
130+
font-family: monospace;
131+
font-size: 80%;
132+
font-style: italic;
133+
background: #c9daf8;
134+
color: #073763;
135+
margin: 0 1rem 0 1rem;
136+
}
137+
138+
.full-img {
139+
object-fit: contain;
140+
max-height: 100%;
141+
max-width: 100%;
142+
padding: 1rem;
143+
}
144+
145+
.mini-img {
146+
max-width: 10rem;
147+
}
148+
149+
.glitchButton {
150+
float: left;
151+
padding: 1rem 0.5rem 0 0.5rem;
152+
}
153+
154+
.cc-licence {
155+
float: right;
156+
margin: 1rem 0.5rem 0 0.5rem;
157+
}
158+
159+
/* Any styles that you **only** want to appear on a device should go in here! */
160+
161+
@media screen {
162+
body {
163+
max-width: 30rem;
164+
background: #e8d9a6;
165+
margin: auto;
166+
}
167+
168+
.zine {
169+
background: #e8d9a6;
170+
padding: 10px;
171+
border-left: 4px solid #e2b015;
172+
border-bottom: 4px solid #e2b015;
173+
}
174+
175+
.zine-page {
176+
margin-top: 10px;
177+
}
178+
}
179+
180+
/* Any styles that you want to apply **just** when the zine is printed go in here! */
181+
182+
@media print {
183+
body {
184+
font-size: 69%;
185+
}
186+
187+
a {
188+
color: inherit;
189+
text-decoration: none;
190+
}
191+
192+
.mini-img {
193+
max-width: 4.4rem;
194+
}
195+
196+
/* The styles below here are specifically for creating the page layout.
197+
* -> DON'T CHANGE THESE <- unless you know what you're doing!
198+
*/
199+
200+
@page {
201+
size: landscape;
202+
margin: 0;
203+
bleed: 0;
204+
}
205+
206+
.zine {
207+
width: 100vw;
208+
height: 100vh;
209+
display: grid;
210+
gap: 1.5px;
211+
background: lightgrey;
212+
grid-template-areas:
213+
'page-5 page-4 page-3 page-2'
214+
'page-6 page-7 page-8 page-1';
215+
grid-template-columns: repeat(4, 25%);
216+
grid-template-rows: repeat(2, 50%);
217+
}
218+
219+
.zine-page {
220+
background: white;
221+
padding: 0.2rem;
222+
overflow: hidden;
223+
}
224+
225+
.page-5,
226+
.page-4,
227+
.page-3,
228+
.page-2 {
229+
transform: rotate(180deg) translateX(-0.1px);
230+
}
231+
232+
.page-1 {
233+
grid-area: page-1;
234+
}
235+
236+
.page-2 {
237+
grid-area: page-2;
238+
}
239+
240+
.page-3 {
241+
grid-area: page-3;
242+
}
243+
244+
.page-4 {
245+
grid-area: page-4;
246+
}
247+
248+
.page-5 {
249+
grid-area: page-5;
250+
}
251+
252+
.page-6 {
253+
grid-area: page-6;
254+
}
255+
256+
.page-7 {
257+
grid-area: page-7;
258+
}
259+
260+
.page-8 {
261+
grid-area: page-8;
262+
}
263+
}
264+
</style>

0 commit comments

Comments
 (0)