p5.zine 0.0.1 → 0.0.2

package/src/ui.css

@@ -1,245 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Averia+Libre&family=Bebas+Neue&family=Bungee+Shade&family=Faster+One&family=Inconsolata&family=Playfair+Display:ital@1&family=Rubik+Puddles&family=Ultra&display=swap');
-
-html[data-theme=light] {
-  --color-text: #333;
-  --accent-color: #ed225d;
-  --line-color: #ddd;
-  --color-background: #fff;
-}
-
-html[data-theme=dark] {
-  --color-text: #fff;
-  --accent-color: #ed225d;
-  --line-color: #ddd;
-  --color-background: #000;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  padding-top: 30px;
-  background: url(https://munusshih.github.io/p5.genzine/bg.png) repeat fixed var(--color-background);
-  scroll-behavior: smooth;
-  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 420ms !important;
-  transition-delay: 0 !important;
-}
-
-canvas {
-  display: block;
-}
-
-p {
-  text-align: center;
-  font-family: "Inconsolata", monospace;
-  color: var(--accent-color);
-  font-size: 12px;
-  letter-spacing: -0.1px;
-  overflow-wrap: break-word;
-}
-
-nav {
-  position: fixed;
-  background: none;
-  width: 100%;
-  text-align: left;
-  top: 0px;
-  padding-bottom: 0.5em;
-  padding-left: 1em;
-}
-
-.desktop {
-  position: fixed;
-  bottom: 0em;
-  padding-right: 0.5em;
-  width: 100%;
-  height: 2.5em;
-  text-align: right;
-  padding-top: 0.5em;
-  padding-bottom: 3.25em;
-  border-top: 1px solid var(--accent-color);
-  background: var(--color-background);
-  color: var(--color-text);
-  margin-top: 0.5em;
-  margin-right: 0.5em;
-}
-
-nav .title {
-  display: inline-block;
-  text-align: left;
-  margin: 0px;
-}
-
-nav .title h1 {
-  display: inline-block;
-  color: var(--accent-color);
-  font-size: 1.8em;
-  line-height: 1;
-  padding-top: 20px;
-  margin: 0;
-  margin-right: 10px;
-  vertical-align: text-bottom;
-}
-
-nav .title h2 {
-  display: inline-block;
-  margin-right: 20px;
-  color: var(--color-text);
-  font-weight: 100;
-  font-family: monospace;
-  font-size: 1em;
-}
-
-nav .title h2 a {
-  color: var(--color-text);
-}
-
-nav .title h2 a:hover {
-  color: var(--line-color);
-}
-
-.label {
-  position: fixed;
-  background: var(--accent-color);
-  padding: 0.5em;
-  font-family: monospace;
-}
-
-.label a {
-  text-decoration: none;
-  color: white;
-}
-
-#nav-label {
-  position: fixed;
-  right: 0em;
-  top: 0em;
-}
-
-#myCanvas {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-  padding: 24px 0 40px;
-}
-
-#myCanvas.zine-pages {
-  width: 100%;
-}
-
-.zine-page {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.zine-page-label {
-  font-family: monospace;
-  color: var(--accent-color);
-  font-size: 12px;
-  margin: 0 0 6px 0;
-}
-
-.zine-page-canvas {
-  display: block;
-  border: 1px solid var(--accent-color);
-}
-
-.zine-preview-hidden .zine-page-label {
-  display: none;
-}
-
-.zine-preview-hidden .zine-page-canvas {
-  border-color: transparent;
-}
-
-#footer-label {
-  position: relative;
-  text-align: left;
-  width: 15em;
-  padding-left: 0.5em;
-  color: white;
-  left: 0em;
-  top: -3.7em;
-}
-
-footer {
-  width: 100%;
-  text-align: center;
-  padding: 20px;
-  border-top: 1px solid var(--accent-color);
-  margin-bottom: 6em;
-}
-
-footer p {
-  margin: auto;
-  text-align: center;
-  max-width: 700px;
-}
-
-.button {
-  border: 0px solid var(--accent-color);
-  color: var(--accent-color);
-  text-align: center;
-  text-decoration: none;
-  vertical-align: super;
-  display: inline-block;
-  font-size: 13px;
-  margin: 4px 10px;
-  height: 40px;
-  min-width: 40px;
-  line-height: 40px;
-  font-family: "Inconsolata", monospace;
-  border: 1px solid var(--accent-color);
-}
-
-.button:hover {
-  color: var(--accent-color);
-  cursor: pointer;
-  border-bottom: 1px dashed var(--accent-color);
-}
-
-.alt {
-  background: var(--color-background);
-  color: var(--accent-color);
-  margin: 0em;
-  margin-top: 0.3em;
-  margin-left: 0.3em;
-  border-radius: 20px;
-}
-
-.alt:hover {
-  background: var(--accent-color);
-  color: white;
-  cursor: pointer;
-}
-
-hr {
-  margin-top: 50px;
-  margin-bottom: 50px;
-  border: 0.1px solid var(--accent-color);
-}
-
-#doc,
-#doc p {
-  text-align: left;
-}
-
-h3 {
-  font-family: "Inconsolata", monospace;
-}
-
-span {
-  color: grey;
-}
-
-@media screen and (max-width: 500px) {
-  canvas {
-    margin-top: 4em;
-  }
-}

package/src/ui.html

@@ -1,33 +0,0 @@
-<base target="_blank">
-<nav>
-  <div class="title">
-    <h1 id="genTitle">GenZ(ine)</h1>
-    <h2 id="author">by Munus Shih</h2>
-  </div>
-</nav>
-
-<div class="desktop">
-  <input type="button" value="*download .png*" id="download-jpg"
-    class="button alt" />
-  <input type="button" value="*download .pdf*" id="download-pdf"
-    class="button alt" />
-</div>
-
-<div class="label" id="nav-label">
-  <a href="https://github.com/munusshih/p5.zine" target="_blank"
-    rel="noopener noreferrer">
-    >made with p5.zine
-  </a>
-</div>
-
-<div id="myCanvas"></div>
-
-<footer>
-  <div class="label" id="footer-label">
-    This zine is about...
-  </div>
-
-  <p id="des">
-    This zine is about...
-  </p>
-</footer>