configure html output

.gitignore

@@ -1,2 +1,3 @@
 .build
 *.pdf
+*.html

README.md

@@ -1,3 +1,15 @@
 # How to Make Zines with LaTeX
 
-To run: ./build.sh
+This is a demo of how to make a zine using Pandoc to convert marktown to LaTeX. It applies typesetting from a custom document class (zine.cls).
+
+To generate the zine, run: `./build.sh`
+
+## website
+
+It also generates a standalone website. To view the website:
+
+    ./html-build.sh
+    cd public
+    python3 -m http.server
+
+

doc.md

@@ -76,7 +76,7 @@ This generates a PDF of the zine.
 
 When printed, the page-order of a zine can be somewhat unintuitive. When printing and folding the cover, for example, the first page of the zine is next to the last page, and on the back the second-to-last is next to the second.
 
-![booklet layout](./page-order.jpg)
+![booklet layout](./public/page-order.jpg)
 
 Some print dialogues will handle this for you (known as _booklet format_). This can also be accomplished using pdfbook2, but first we need to make sure the total page number of the zine is a multiple of 4 (since one paper leaf contains four zine pages).
 
@@ -173,7 +173,7 @@ Click [here](https://example.com) to visit a website on the internet.
 
 ### image
 
-![somebody's gotta keep it punk, like chaos, man!](./chaos.png)
+![somebody's gotta keep it punk, like chaos, man!](./public/chaos.png)
 
 ### table
 

html-build.sh

@@ -0,0 +1 @@
+pandoc --shift-heading-level-by -1 --standalone -c style.css doc.md -o public/index.html

main.tex

@@ -1,8 +1,8 @@
 \documentclass{zine}
 \title{How to Make Zines with LaTeX}
 \author{chaos distro}
-\coverimage{cover.png}
+\coverimage{public/cover.png}
-\logo{chaos.png}
+\logo{public/chaos.png}
 
 
 \begin{document}

public/style.css

@@ -0,0 +1,491 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+textarea,
+input,
+select,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  color: #00c853;
+  font-family: monospace;
+  font-size: 1rem;
+}
+body,
+html {
+  padding: 1em;
+  margin: 0;
+  overflow-x: hidden;
+  background-color: #000;
+}
+
+a:visited {
+  color: #717171;
+}
+nav {
+  background-color: #212121;
+  color: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+nav header {
+  padding: 8px;
+  display: inline;
+}
+nav header a {
+  text-decoration: none;
+  color: #fff;
+}
+nav header a:hover {
+  color: #ccff90;
+}
+nav header + input:checked + div {
+  display: block;
+}
+nav div {
+  display: none;
+  margin-left: auto;
+}
+nav div ul {
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 10px;
+}
+nav div ul li a {
+  display: inline-block;
+  padding: 8px;
+  color: #fff;
+  text-decoration: none;
+}
+nav div ul li:hover {
+  background-color: #ccff90;
+}
+nav div ul li ul {
+  right: 0;
+  position: relative;
+  background: pink;
+}
+@media (max-width: 630px) {
+  nav {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+  nav header {
+    text-align: center;
+  }
+  nav div {
+    margin: auto;
+  }
+  nav div ul {
+    padding: 0;
+  }
+  nav div ul li {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  nav div ul li[active],
+  nav div ul li.active {
+    border: 1px solid #ccff90;
+    border-bottom: none;
+  }
+  blockquote {
+    border-left: 4px solid #ccff90;
+    padding: 8px 5px;
+    margin: 0;
+  }
+  blockquote p {
+    font-size: 0.4rem;
+  }
+}
+@media (min-width: 630px) {
+  nav div ul li.active,
+  nav div ul li[active] {
+    border: 1px solid #ccff90;
+    border-bottom: none;
+    border-top: none;
+  }
+  nav header label {
+    display: none;
+  }
+}
+section[container] {
+  max-width: 38em;
+  margin: auto;
+  padding: 5px;
+}
+h1 {
+  font-size: 2.35em;
+}
+h2 {
+  font-size: 2em;
+}
+h3 {
+  font-size: 1.75em;
+}
+h4 {
+  font-size: 1.5em;
+}
+h5 {
+  font-size: 1.25em;
+}
+h6 {
+  font-size: 1em;
+}
+a {
+  color: #ccff90;
+}
+a:hover {
+  color: #212121;
+}
+mark {
+  background-color: #ccff90;
+}
+code {
+  font-family: monospace;
+  background-color: #33691e;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+blockquote {
+  border-left: 4px solid #ccff90;
+  padding: 8px 10px;
+  width: 100%;
+}
+blockquote p {
+  font-style: italic;
+  font-size: 1.1rem;
+}
+blockquote footer::before {
+  content: "\2014 \00A0";
+}
+blockquote footer cite {
+  font-style: italic;
+  color: #33691e;
+}
+pre {
+  background: #101010;
+  overflow-x: auto;
+  text-align: left;
+  padding: 5px;
+}
+pre code {
+  display: block;
+  padding: 0 10px;
+  background: transparent;
+}
+table {
+  display: table;
+  padding: 5px;
+  border-collapse: collapse;
+}
+table thead,
+table tbody {
+  text-align: left;
+}
+table tr th,
+table tr td {
+  padding: 5px 10px;
+  border-bottom: 1px solid #ccff90;
+}
+div[overflow] {
+  overflow-x: auto;
+  max-width: 100vw;
+}
+div[overflow] ::-webkit-scrollbar {
+  height: 0;
+}
+img {
+  max-width: 100%;
+  border-radius: 5px;
+}
+form div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin: 10px 5px;
+}
+form div p {
+  margin: 0px;
+}
+form input,
+form select {
+  font-size: 1rem;
+  padding: 5px;
+  border: 1px solid #33691e;
+  color: #212121;
+}
+form input:active,
+form input:focus,
+form select:active,
+form select:focus {
+  outline-color: #ccff90;
+}
+form input[type="submit"] {
+  padding: 10px;
+  background-color: #ccff90;
+  color: #00c853;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+form input[type="submit"]:active,
+form input[type="submit"]:focus {
+  outline: none;
+}
+form input[type="submit"]:active {
+  background-color: #212121;
+  color: #ccff90;
+}
+form input[type="submit"]:disabled {
+  background: #33691e;
+  cursor: not-allowed;
+}
+form input[type="submit"][secondary] {
+  background-color: #212121;
+  color: #ccff90;
+}
+form input[type="submit"][secondary]:active {
+  background-color: #ccff90;
+  color: initial;
+}
+textarea {
+  color: #101010;
+  width: -webkit-fill-available;
+  font-size: 1rem;
+  padding: 5px;
+}
+textarea:active,
+textarea:focus {
+  outline-color: #ccff90;
+}
+button {
+  padding: 10px;
+  background-color: #ccff90;
+  color: #00c853;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+button:active,
+button:focus {
+  outline: none;
+}
+button:active {
+  background-color: #212121;
+  color: #ccff90;
+}
+button:disabled {
+  background: #33691e;
+  cursor: not-allowed;
+}
+button[secondary] {
+  background-color: #212121;
+  color: #ccff90;
+}
+button[secondary]:active {
+  background-color: #ccff90;
+  color: initial;
+}
+body > footer {
+  background-color: #212121;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  padding: 5px;
+}
+/*# sourceMappingURL=darkforest-green.css.map */
+
+code span.al {
+  color: #ff0000;
+  font-weight: bold;
+} /* Alert */
+code span.an {
+  color: #60a0b0;
+  font-weight: bold;
+  font-style: italic;
+} /* Annotation */
+code span.at {
+  color: #7d9029;
+} /* Attribute */
+code span.bn {
+  color: #40a070;
+} /* BaseN */
+code span.bu {
+} /* BuiltIn */
+code span.cf {
+  color: #007020;
+  font-weight: bold;
+} /* ControlFlow */
+code span.ch {
+  color: #4070a0;
+} /* Char */
+code span.cn {
+  color: #880000;
+} /* Constant */
+code span.co {
+  color: #60a0b0;
+  font-style: italic;
+} /* Comment */
+code span.cv {
+  color: #60a0b0;
+  font-weight: bold;
+  font-style: italic;
+} /* CommentVar */
+code span.do {
+  color: #ba2121;
+  font-style: italic;
+} /* Documentation */
+code span.dt {
+  color: #902000;
+} /* DataType */
+code span.dv {
+  color: #40a070;
+} /* DecVal */
+code span.er {
+  color: #ff0000;
+  font-weight: bold;
+} /* Error */
+code span.ex {
+} /* Extension */
+code span.fl {
+  color: #40a070;
+} /* Float */
+/*code span.fu {
+  color: #06287e;
+} */ /* Function */
+code span.fu {
+  color: #0026ff;
+} /* Function */
+code span.im {
+} /* Import */
+code span.in {
+  color: #60a0b0;
+  font-weight: bold;
+  font-style: italic;
+} /* Information */
+code span.kw {
+  color: #007020;
+  font-weight: bold;
+} /* Keyword */
+code span.op {
+  color: #666666;
+} /* Operator */
+code span.ot {
+  color: #007020;
+} /* Other */
+code span.pp {
+  color: #bc7a00;
+} /* Preprocessor */
+code span.sc {
+  color: #4070a0;
+} /* SpecialChar */
+code span.ss {
+  color: #bb6688;
+} /* SpecialString */
+code span.st {
+  color: #4070a0;
+} /* String */
+code span.va {
+  color: #19177c;
+} /* Variable */
+code span.vs {
+  color: #4070a0;
+} /* VerbatimString */
+code span.wa {
+  color: #60a0b0;
+  font-weight: bold;
+  font-style: italic;
+} /* Warning */
+
+.display.math {
+  display: block;
+  text-align: center;
+  margin: 0.5rem auto;
+}