add notes about classless CSS and syntax highlighting

.gitignore

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

README.md

@@ -1,3 +1,19 @@
 # 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
+
+### some notes on HTML
+
+Usually I like to convert Pandoc documents as fragments and add my own document structure, to cut down on the messy markup Pandoc adds. For HTML in particular I like to see how little I can get away with by using [classless CSS](https://github.com/dbohdan/classless-css) for the style. However in this case I combined the two because Pandoc applies classes to each code token (i.e., it applies syntax highlighting) and there's no way to do this without Pandoc's preamble.
+
+- [ ] TODO figure out how to extract the syntax highlighting from Pandoc's HTML template

doc.md

@@ -1,4 +1,4 @@
-# How to make Zines with LaTeX
+# How to Make Zines with LaTeX
 The zine was created by converting basic markdown to a PDF using Pandoc/LaTeX. The goal is to document some basics that will hopefully be informative for others who might be interested in also creating nicely-formatted zines from plaintext markdown.
 
 Creating documents in plaintext has a lot of advantages. For one, the files are tiny, making them easy to share, even with very little interent. The content is largely separated from the format, making it easy to search, manipulate, format, and display how you like using whatever tools you want. Markdown can easily be converted to other formats including html, wiki, odt, and pdf. The same markdown file can be converted into a zine, a website, a wiki page, a Powerpoint, or whatever else. Finally, changes to markdown files can be tracked in a git repository (unlike pdfs or Word documents).
@@ -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).
 
@@ -96,7 +96,7 @@ pdfjam cover.pdf '1,{},{},2' --outfile cover.pdf
 # calculate pages for guts signature length
 pages=$(pdfinfo guts.pdf | awk '/^Pages:/ {print $2}')
 let rem=pages%4
-let extra=(4-rem)%4
+let extra=$((4-rem))%4
 let sig=pages+rem
 
 # booklet print
@@ -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}
-\logo{chaos.png}
+\coverimage{public/cover.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;
+}