aboutsummaryrefslogtreecommitdiff
path: root/html
diff options
context:
space:
mode:
authorFlorian Fischer <florian.fl.fischer@fau.de>2021-02-24 21:45:01 +0100
committerFlorian Fischer <florian.fl.fischer@fau.de>2021-02-24 21:45:01 +0100
commitb9f28e54c1dd613d3aebfb3d4598d08b5d3a2ed4 (patch)
treeff0d6843b5a6633ed45fab79fccb3dc34257c303 /html
parent417ee7a0819ba760994bd532b184125eca13d231 (diff)
downloadmuhqs-game-b9f28e54c1dd613d3aebfb3d4598d08b5d3a2ed4.tar.gz
muhqs-game-b9f28e54c1dd613d3aebfb3d4598d08b5d3a2ed4.zip
[html] add pandoc template using a sidebar for the toc
Diffstat (limited to 'html')
-rw-r--r--html/Makefile9
-rw-r--r--html/template.html285
2 files changed, 289 insertions, 5 deletions
diff --git a/html/Makefile b/html/Makefile
index d495a5a2..b11d692d 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -1,6 +1,6 @@
VERBOSE = @
-PANDOC_FLAGS = -f markdown -s
+PANDOC_FLAGS = -f markdown -s --template=./template.html
BUILDDIR = build
@@ -11,8 +11,7 @@ EN_RULES = $(addprefix $(RULES_DIR)/en/,$(RULE_FILES))
RULES = $(DE_RULES) $(EN_RULES)
RULES_HTML = $(addprefix $(BUILDDIR)/,$(RULES:.md=.html))
-MAPS_DIR = ../../maps
-MAPS_BUILDDIR = $(BUILDDIR)/maps
+MAPS_DIR = ../maps
SITES = index.md rules.md cards.md maps.md
HTML = $(addprefix $(BUILDDIR)/,$(SITES:.md=.html))
@@ -24,8 +23,8 @@ clean:
rm -rf $(BUILDDIR)
maps:
- ln -sf $(MAPS_DIR) $(MAPS_BUILDDIR)
- make -C $(MAPS_BUILDDIR)
+ ln -sf ../$(MAPS_DIR) $(BUILDDIR)/maps
+ make -C $(MAPS_DIR)
$(BUILDDIR)/%.html: %.md
@echo "building $@"
diff --git a/html/template.html b/html/template.html
new file mode 100644
index 00000000..9d27c27c
--- /dev/null
+++ b/html/template.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
+<head>
+ <meta charset="utf-8" />
+ <meta name="generator" content="pandoc" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+$for(author-meta)$
+ <meta name="author" content="$author-meta$" />
+$endfor$
+$if(date-meta)$
+ <meta name="dcterms.date" content="$date-meta$" />
+$endif$
+$if(keywords)$
+ <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+$endif$
+ <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+ <style>
+
+$if(document-css)$
+html {
+ line-height: $if(linestretch)$$linestretch$$else$1.5$endif$;
+ font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
+ font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
+ color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+ background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
+}
+body {
+ margin: 0 auto;
+ max-width: 36em;
+ padding-left: $if(margin-left)$$margin-left$$else$50px$endif$;
+ padding-right: $if(margin-right)$$margin-right$$else$50px$endif$;
+ padding-top: $if(margin-top)$$margin-top$$else$50px$endif$;
+ padding-bottom: $if(margin-bottom)$$margin-bottom$$else$50px$endif$;
+ hyphens: auto;
+ word-wrap: break-word;
+ text-rendering: optimizeLegibility;
+ font-kerning: normal;
+}
+@media (max-width: 600px) {
+ body {
+ font-size: 0.9em;
+ padding: 1em;
+ }
+}
+@media print {
+ body {
+ background-color: transparent;
+ color: black;
+ font-size: 12pt;
+ }
+ p, h2, h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2, h3, h4 {
+ page-break-after: avoid;
+ }
+}
+p {
+ margin: 1em 0;
+}
+a {
+ color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
+}
+a:visited {
+ color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
+}
+img {
+ max-width: 100%;
+}
+h1, h2, h3, h4, h5, h6 {
+ margin-top: 1.4em;
+}
+h5, h6 {
+ font-size: 1em;
+ font-style: italic;
+}
+h6 {
+ font-weight: normal;
+}
+ol, ul {
+ padding-left: 1.7em;
+ margin-top: 1em;
+}
+li > ol, li > ul {
+ margin-top: 0;
+}
+blockquote {
+ margin: 1em 0 1em 1.7em;
+ padding-left: 1em;
+ border-left: 2px solid #e6e6e6;
+ color: #606060;
+}
+code {
+ font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
+$if(monobackgroundcolor)$
+ background-color: $monobackgroundcolor$;
+ padding: .2em .4em;
+$endif$
+ font-size: 85%;
+ margin: 0;
+}
+pre {
+ margin: 1em 0;
+$if(monobackgroundcolor)$
+ background-color: $monobackgroundcolor$;
+ padding: 1em;
+$endif$
+ overflow: auto;
+}
+pre code {
+ padding: 0;
+ overflow: visible;
+}
+.sourceCode {
+ background-color: transparent;
+ overflow: visible;
+}
+hr {
+ background-color: #1a1a1a;
+ border: none;
+ height: 1px;
+ margin: 1em 0;
+}
+table {
+ margin: 1em 0;
+ border-collapse: collapse;
+ width: 100%;
+ overflow-x: auto;
+ display: block;
+ font-variant-numeric: lining-nums tabular-nums;
+}
+table caption {
+ margin-bottom: 0.75em;
+}
+tbody {
+ margin-top: 0.5em;
+ border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+ border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+}
+th {
+ border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+ padding: 0.25em 0.5em 0.25em 0.5em;
+}
+td {
+ padding: 0.125em 0.5em 0.25em 0.5em;
+}
+header {
+ margin-bottom: 4em;
+ text-align: center;
+}
+#TOC li {
+ list-style: none;
+}
+#TOC a:not(:hover) {
+ text-decoration: none;
+}
+$endif$
+code{white-space: pre-wrap;}
+span.smallcaps{font-variant: small-caps;}
+span.underline{text-decoration: underline;}
+div.column{display: inline-block; vertical-align: top; width: 50%;}
+div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+ul.task-list{list-style: none;}
+$if(quotes)$
+q { quotes: "“" "”" "‘" "’"; }
+$endif$
+$if(highlighting-css)$
+$highlighting-css$
+$endif$
+$if(displaymath-css)$
+.display.math{display: block; text-align: center; margin: 0.5rem auto;}
+$endif$
+$if(csl-css)$
+div.csl-bib-body { }
+div.csl-entry {
+ clear: both;
+$if(csl-entry-spacing)$
+ margin-bottom: $csl-entry-spacing$;
+$endif$
+}
+.hanging div.csl-entry {
+ margin-left:2em;
+ text-indent:-2em;
+}
+div.csl-left-margin {
+ min-width:2em;
+ float:left;
+}
+div.csl-right-inline {
+ margin-left:2em;
+ padding-left:1em;
+}
+div.csl-indent {
+ margin-left: 2em;
+}
+$endif$
+
+$if(toc)$
+ /* Hide for mobile, show later */
+ .sidebar {
+ display: none;
+ }
+ @media (min-width: 768px) {
+ .sidebar {
+ position: fixed;
+ top: 51px;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ display: block;
+ padding: 20px;
+ overflow-x: hidden;
+ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+ background-color: #f5f5f5;
+ border-right: 1px solid #eee;
+ }
+ }
+
+ .sidebar ul {
+ padding-left: 10px;
+ }
+
+ /* Sidebar navigation */
+ .nav-sidebar {
+ margin-right: -21px; /* 20px padding + 1px border */
+ margin-bottom: 20px;
+ margin-left: -20px;
+ }
+ .nav-sidebar > li > a {
+ padding-right: 20px;
+ padding-left: 20px;
+ }
+ .nav-sidebar > .active > a,
+ .nav-sidebar > .active > a:hover,
+ .nav-sidebar > .active > a:focus {
+ color: #fff;
+ background-color: #428bca;
+ }
+$endif$
+ </style>
+
+$for(css)$
+ <link rel="stylesheet" href="$css$" />
+$endfor$
+
+$if(math)$
+ $math$
+$endif$
+ <!--[if lt IE 9]>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+ <![endif]-->
+$for(header-includes)$
+ $header-includes$
+$endfor$
+</head>
+<body>
+$for(include-before)$
+$include-before$
+$endfor$
+$if(title)$
+<header id="title-block-header">
+<h1 class="title">$title$</h1>
+$if(subtitle)$
+<p class="subtitle">$subtitle$</p>
+$endif$
+$for(author)$
+<p class="author">$author$</p>
+$endfor$
+$if(date)$
+<p class="date">$date$</p>
+$endif$
+</header>
+$endif$
+$if(toc)$
+<div id="sidebar" class="sidebar">
+$toc$
+</div>
+$endif$
+$body$
+$for(include-after)$
+$include-after$
+$endfor$
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-25 16:56:19 +0000