DAY2 Zine
This commit is contained in:
parent
09bc666616
commit
5f33de4791
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- TODO: Update the language if you're not writing in English! Hey, maybe remix this project and translate the instructions for other people? -->
|
||||
<html lang="en">
|
||||
<!-- TODO: Add a title for your zine -->
|
||||
<title>[TW5 and TiddlyWiki]</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- TODO: Update the icon image if you want to get fancy! -->
|
||||
<link rel="icon" type="image/png" href="/ipfs/QmTSfxH1kG12JooZ3TG8eGkoYqjcbxy29ejqiVworuBFro" />
|
||||
<link rel="stylesheet"
|
||||
href="/ipfs/QmeegmN4shouhnzvnDYpbSEJtdRsyy39SpL9XqYVHgtN44/style.css" />
|
||||
|
||||
<!-- TODO: Add a description for your zine -->
|
||||
<meta name="Description" content="[UPlanet ZERO no secret key UPlanet Visa]" />
|
||||
<!-- TODO: Update the theme color to match if you change the styles -->
|
||||
<meta name="theme-color" content="#741b47" />
|
||||
|
||||
<main class="zine">
|
||||
<header class="zine-page page-1">
|
||||
<h1>TiddlyWiki</h1>
|
||||
<p>Welcome, Traveler, to the innovative world of TW5—a TiddlyWiki postit-based personal data store designed to empower you on your journey through UPlanet.</p>
|
||||
<!-- TODO: Your front cover content goes here, so you probably want a good title and maybe some kind of image -->
|
||||
<img class="full-img" src="/ipfs/QmaDPopWqTZMPQYwv3Tt7kJAttWjg9JS2btE3EGmP91Hnj">
|
||||
<h2>🌐 online and 🌴 offline<br>
|
||||
<button class="print-button">📃 ️Print</button> ✂️ cut 🙏 fold 📘 share 💜</h2>
|
||||
</header>
|
||||
<section class="zine-page page-2">
|
||||
<!-- TODO: Page 2 content goes here. This is also the inside of the front cover, so you can be minimal or fit in as much content as possible! -->
|
||||
<p>Your personalized TW5 dashboard awaits, ready to serve as your digital hub for storing and managing your data freely and securely.</p>
|
||||
<hr>
|
||||
<p>Organize Your Data with Tiddlers: Within TW5, information is stored in bite-sized units called Tiddlers. Each Tiddler represents a specific piece of data—whether it's a note, a document, an ipfs cid.</p>
|
||||
<hr>
|
||||
<h2>Use Tiddlers to share your thoughts, ideas, and information in a way that makes sense to you.</h2>
|
||||
</section>
|
||||
<section class="zine-page page-3">
|
||||
<!-- TODO: Page 3 content here -->
|
||||
<p>Customize Your Workspace: Tailor your TW5 experience to suit your unique needs. Customize your workspace with themes, plugins, and extensions to enhance functionality and streamline your workflow. Whether you're a minimalist or a power user, TW5 adapts to your preferences.</p>
|
||||
<hr>
|
||||
<p>Embrace Continuous Improvement: TW5 is constantly evolving to meet the needs of its users. Participate in the development process by providing feedback, suggesting improvements, and contributing to the open-source community. Together, we can shape the future of TW5 and make it even more powerful and intuitive.</p>
|
||||
</section>
|
||||
<section class="zine-page page-4">
|
||||
<!-- TODO: Page 4 - that's the halfway point, you're nearly there! -->
|
||||
<p>Collaborate and Share: TW5 isn't just a personal data store—it's a collaborative platform where ideas are born and shared. Collaborate with fellow travelers by sharing Tiddlers, collaborating on projects, and contributing to communal knowledge bases. With TW5, the possibilities for collaboration are endless.</p>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="zine-page page-5">
|
||||
<!-- TODO: You guessed it, page 5 content now -->
|
||||
<p>With TW5 as your personal data store, the possibilities are limitless. Organize your thoughts, collaborate with others, and unlock the full potential of your data on UPlanet. Welcome to a new era of digital empowerment—welcome to TW5.</p>
|
||||
<hr>
|
||||
<p>Happy exploring!</p>
|
||||
|
||||
</section>
|
||||
<section class="zine-page page-6">
|
||||
<!-- TODO: Page 6, this is the last "page" but you can still keep going -->
|
||||
<table class="zine-instructions">
|
||||
<tr>
|
||||
<td><b>Step 1:</b> Print, cut, fold MULTIPASS. Crease all the lines then fold in half. Cut across the fold halfway through the page. Unfold and there should be a little hole. Fold lengthways. Gently fold the centre until you form a + shape. Now - magic! Fold all the pages around. Page 1 is the front cover, page 8 is the back.</td>
|
||||
<td><img class="mini-img" src="/ipfs/QmRQeE5XsYXAd32inVsWRFWqDCiMqkbU3txxdQwDqBRRLn">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Step 2:</b> Open TW5. Delete AstroID.</td>
|
||||
<td><img class="mini-img" src="/ipfs/QmcqciKy23cETr7G8mkLPjnLWuRQbBtsj6RcKd9WiU849x">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Step 3:</b> Add tiddlers. Take control. </td>
|
||||
<td><img class="mini-img" src="/ipfs/QmRTMzb3WYNgaNtqFoeQZMX7MFqpa6teDaNnqWA96gTEAi">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</section>
|
||||
<section class="zine-page page-7">
|
||||
<!-- TODO: Page 7, this is the inside of the back cover -->
|
||||
<table class="zine-instructions">
|
||||
<tr>
|
||||
<td><b>Step 4:</b> Customize your email Tiddler: Each traveler have a Tiddler within their TW5 titled with their email address. This serves as a unique signature—a digital calling card that identifies them across the cosmos.</td>
|
||||
<td><img class="mini-img" src="https://cdn.glitch.com/c10b2617-5888-415b-b574-42e2ab8f3484%2Fzine-fold-05.png">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Step 5:</b> Copy and Connect: To connect with others, copy their email title Tiddler into your own TW5, signaling your interest in sharing information and establishing connections.</td>
|
||||
<td><img class="mini-img" src="https://cdn.glitch.com/c10b2617-5888-415b-b574-42e2ab8f3484%2Fzine-fold-07.png">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<footer class="zine-page page-8">
|
||||
<!-- 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 -->
|
||||
<table class="zine-instructions">
|
||||
<tr>
|
||||
<td><b>Step 6:</b> Explore Shared Tiddlers: Access Tiddlers shared by connected travelers, exploring a wealth of knowledge, notes, and collaborations.</td>
|
||||
<td><img class="mini-img" src="https://cdn.glitch.com/c10b2617-5888-415b-b574-42e2ab8f3484%2Fzine-fold-06.png">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Step 7:</b> Collaborate and Grow: Utilize shared Tiddlers to collaborate on projects, exchange ideas, and foster connections with fellow travelers, enriching the collective knowledge of the UPlanet community.</td>
|
||||
<td><img class="mini-img" src="https://cdn.glitch.com/c10b2617-5888-415b-b574-42e2ab8f3484%2Fzine-fold-07.png">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script src="/ipfs/QmeegmN4shouhnzvnDYpbSEJtdRsyy39SpL9XqYVHgtN44/script.js" async defer></script>
|
||||
<!-- I know it says you need a closing </html> tag, but you actually don't! Feel free to add one though if it seems cleaner -->
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
// This script just adds a little print button to the page. It's not needed for the zine, unless you want to add one too!
|
||||
document.querySelector(".print-button").addEventListener("click", () => {
|
||||
window.print();
|
||||
});
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
/* These are just the article styles, so change these to whatever fits your theme! */
|
||||
|
||||
/* Probably keep this one bit as is though, it's going to make arranging things in print easier for you! */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1c4587;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 180%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: #ead1dc;
|
||||
color: #741b47;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
font-size: 140%;
|
||||
font-weight: normal;
|
||||
margin: 0.2rem 0 0 0;
|
||||
padding: 0.2rem 0 0.2rem;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
background: #c9daf8;
|
||||
color: #073763;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.2rem;
|
||||
padding-top: 0.5rem;
|
||||
font-size: 105%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.zine-li:before {
|
||||
content: '\21D2';
|
||||
margin-left: -20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.zine-link {
|
||||
font-family: monospace;
|
||||
background: #c9daf8;
|
||||
color: #073763;
|
||||
}
|
||||
|
||||
.captioned-img {
|
||||
object-fit: contain;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0 2rem 0 2rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-family: monospace;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
background: #c9daf8;
|
||||
color: #073763;
|
||||
margin: 0 1rem 0 1rem;
|
||||
}
|
||||
|
||||
.full-img {
|
||||
object-fit: contain;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mini-img {
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.glitchButton {
|
||||
float: left;
|
||||
padding: 1rem 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.cc-licence {
|
||||
float: right;
|
||||
margin: 1rem 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
/* Any styles that you **only** want to appear on a device should go in here! */
|
||||
|
||||
@media screen {
|
||||
body {
|
||||
max-width: 30rem;
|
||||
background: #ead1dc;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.zine {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-left: 4px solid #741b47;
|
||||
border-bottom: 4px solid #741b47;
|
||||
|
||||
}
|
||||
|
||||
.zine-page {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Any styles that you want to apply **just** when the zine is printed go in here! */
|
||||
|
||||
@media print {
|
||||
|
||||
|
||||
body {
|
||||
font-size: 66%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mini-img {
|
||||
max-width: 4.4rem;
|
||||
}
|
||||
|
||||
/* The styles below here are specifically for creating the page layout.
|
||||
* -> DON'T CHANGE THESE <- unless you know what you're doing!
|
||||
*/
|
||||
|
||||
@page {
|
||||
size: landscape;
|
||||
margin: 0;
|
||||
bleed: 0;
|
||||
}
|
||||
|
||||
.zine {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
gap: 1.5px;
|
||||
background: lightgrey;
|
||||
grid-template-areas:
|
||||
"page-5 page-4 page-3 page-2"
|
||||
"page-6 page-7 page-8 page-1";
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.zine-page {
|
||||
background: white;
|
||||
padding: .2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-5, .page-4, .page-3, .page-2 {
|
||||
transform: rotate(180deg) translateX(-0.1px);
|
||||
}
|
||||
|
||||
.page-1 {
|
||||
grid-area: page-1;
|
||||
|
||||
}
|
||||
|
||||
.page-2 {
|
||||
grid-area: page-2;
|
||||
|
||||
}
|
||||
|
||||
.page-3 {
|
||||
grid-area: page-3;
|
||||
}
|
||||
|
||||
.page-4 {
|
||||
grid-area: page-4;
|
||||
}
|
||||
|
||||
.page-5 {
|
||||
grid-area: page-5;
|
||||
}
|
||||
|
||||
.page-6 {
|
||||
grid-area: page-6;
|
||||
}
|
||||
|
||||
.page-7 {
|
||||
grid-area: page-7;
|
||||
}
|
||||
|
||||
.page-8 {
|
||||
grid-area: page-8;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue