configure html output
This commit is contained in:
parent
061bf38936
commit
b7b2483522
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
.build
|
||||
*.pdf
|
||||
*.html
|
||||
|
||||
14
README.md
14
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
|
||||
|
||||
|
||||
|
||||
4
doc.md
4
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.
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
### table
|
||||
|
||||
|
||||
1
html-build.sh
Executable file
1
html-build.sh
Executable file
@ -0,0 +1 @@
|
||||
pandoc --shift-heading-level-by -1 --standalone -c style.css doc.md -o public/index.html
|
||||
4
main.tex
4
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}
|
||||
|
||||
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
491
public/style.css
Normal file
491
public/style.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user