From b7b24835220ab2f61db022be539129907b168e98 Mon Sep 17 00:00:00 2001 From: notnull Date: Sat, 6 Apr 2024 20:01:04 -0400 Subject: [PATCH] configure html output --- .gitignore | 1 + README.md | 14 +- doc.md | 4 +- html-build.sh | 1 + main.tex | 4 +- chaos.png => public/chaos.png | Bin cover.png => public/cover.png | Bin page-order.jpg => public/page-order.jpg | Bin public/style.css | 491 ++++++++++++++++++++++++ 9 files changed, 510 insertions(+), 5 deletions(-) create mode 100755 html-build.sh rename chaos.png => public/chaos.png (100%) rename cover.png => public/cover.png (100%) rename page-order.jpg => public/page-order.jpg (100%) create mode 100644 public/style.css diff --git a/.gitignore b/.gitignore index 342f541..3b9006c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .build *.pdf +*.html diff --git a/README.md b/README.md index 1957232..5f24cc2 100644 --- a/README.md +++ b/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 + + diff --git a/doc.md b/doc.md index 834355a..0558a44 100644 --- a/doc.md +++ b/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 diff --git a/html-build.sh b/html-build.sh new file mode 100755 index 0000000..de8f7ac --- /dev/null +++ b/html-build.sh @@ -0,0 +1 @@ +pandoc --shift-heading-level-by -1 --standalone -c style.css doc.md -o public/index.html diff --git a/main.tex b/main.tex index 65b5b78..22caad5 100644 --- a/main.tex +++ b/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} diff --git a/chaos.png b/public/chaos.png similarity index 100% rename from chaos.png rename to public/chaos.png diff --git a/cover.png b/public/cover.png similarity index 100% rename from cover.png rename to public/cover.png diff --git a/page-order.jpg b/public/page-order.jpg similarity index 100% rename from page-order.jpg rename to public/page-order.jpg diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..2ed0752 --- /dev/null +++ b/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; +}