improved CSS and support toc
This commit is contained in:
Yann Esposito (Yogsototh)
parent
23b980eff0
commit
e4c3a308e5
GPG Key ID:
7B19A4C650D59646
12
Makefile
12
Makefile
|
|
@ -32,15 +32,11 @@ DST_PANDOC_FILES ?= $(subst $(EXT),.html, \
|
|||
$(SRC_PANDOC_FILES)))
|
||||
TEMPLATE ?= templates/post.html
|
||||
CSS = /css/y.css
|
||||
PANDOC := pandoc \
|
||||
-c $(CSS) \
|
||||
--template=$(TEMPLATE) \
|
||||
--from org \
|
||||
--to html5 \
|
||||
--standalone
|
||||
$(DST_DIR)/%.html: $(SRC_DIR)/%.org $(TEMPLATE)
|
||||
MK_HTML := engine/mk-html.sh
|
||||
PANDOC := $(MK_HTML) $(CSS) $(TEMPLATE)
|
||||
$(DST_DIR)/%.html: $(SRC_DIR)/%.org $(TEMPLATE) $(MK_HTML)
|
||||
@mkdir -p $(dir $@)
|
||||
$(PANDOC) $< --output $@.tmp
|
||||
$(PANDOC) $< $@.tmp
|
||||
minify --mime text/html $@.tmp > $@
|
||||
@rm $@.tmp
|
||||
ALL += $(DST_PANDOC_FILES)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
#!/usr/bin/env bash
|
||||
set -eu
|
||||
|
||||
cd "$(git rev-parse --show-toplevel)" || exit 1
|
||||
css="$1"
|
||||
template="$2"
|
||||
orgfile="$3"
|
||||
htmlfile="$4"
|
||||
|
||||
tocoption=""
|
||||
if grep -ie '^#+options:' "$orgfile" | grep 'toc:t'>/dev/null; then
|
||||
tocoption="--toc"
|
||||
fi
|
||||
|
||||
set -x
|
||||
pandoc -c "$css" $tocoption \
|
||||
--template="$template" \
|
||||
--mathml \
|
||||
--from org \
|
||||
--to html5 \
|
||||
--standalone \
|
||||
$orgfile \
|
||||
--output "$htmlfile"
|
||||
|
|
@ -129,7 +129,10 @@ body=$(< $tmpdir/index)
|
|||
date=$(LC_TIME=en_US date +'%Y-%m-%d')
|
||||
# the pandoc templates use $x$ format, we replace it by just $x
|
||||
# to be used with envsubst
|
||||
template=$(< templates/post.html | sed 's/\$header-includes\$//' | perl -pe 's#(\$[^\$]*)\$#$1#g' )
|
||||
template=$(< templates/post.html | \
|
||||
sed 's/\$(header-includes|table-of-content)\$//' | \
|
||||
sed 's/\$if.*\$//' | \
|
||||
perl -pe 's#(\$[^\$]*)\$#$1#g' )
|
||||
{
|
||||
export title
|
||||
export author
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
html {
|
||||
font-family: Avenir, "Helvetica Neue", sans-serif;
|
||||
font-size: 16px;
|
||||
font-family: serif;
|
||||
font-size: 18px;
|
||||
line-height: calc(1ex/0.37); }
|
||||
#TOC {text-align: left;}
|
||||
html,body { margin: 0; padding: 0 0 3em 0; border: 0; }
|
||||
html,body { margin: 0; padding: 0; border: 0; }
|
||||
.main { min-height: calc(100vh - 1em); }
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: calc(1ex/0.42);
|
||||
|
|
@ -15,18 +15,23 @@ pre > code { background: none; font-size: 0.875em; }
|
|||
code,pre { font-family: Menlo, Monaco, monospace; font-size: 1.85ex; }
|
||||
figure { margin: 1rem 0; padding: 0; }
|
||||
.meta { font-size: small;}
|
||||
.abstract { margin: 2rem 10%; font-size: 0.875em; font-style: italic; }
|
||||
#logo { display: inline-block;
|
||||
vertical-align: middle;}
|
||||
#logo svg { width: 3em; }
|
||||
.abstract { margin: 1rem 10% 0; font-size: 0.875em; font-style: italic; }
|
||||
#logo { display: block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
#logo svg { width: 5em; }
|
||||
#preamble, #postamble { text-align: center; }
|
||||
#content,.content,#preamble,#postamble {
|
||||
#content,.content,#postamble {
|
||||
padding: 0 1rem;
|
||||
max-width: 70ch;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#content, #preamble,#postamble { padding: 1rem; }
|
||||
figure img { width: 100%; }
|
||||
li > img, p > img { max-height: 1.5em; vertical-align: middle; }
|
||||
sup, sub {
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
|
|
@ -59,7 +64,7 @@ body>input { display: none; }
|
|||
label { font-weight: 700; }
|
||||
label:hover { cursor: pointer; }
|
||||
label ~ pre { margin-top: 0; }
|
||||
figcaption { text-align: right; font-family: italic; }
|
||||
figcaption { text-align: right; font-style: italic; font-size: 0.875em; }
|
||||
|
||||
:root {
|
||||
--b03: #2E3440;
|
||||
|
|
@ -137,11 +142,19 @@ body, body > div {
|
|||
label:hover, a,a:visited { color: var(--hl); }
|
||||
code { background: var(--rbg); }
|
||||
table th { background: var(--rbg); }
|
||||
blockquote { margin: 0 1em;
|
||||
padding-left: 1em;
|
||||
border-left: solid var(--rbg); }
|
||||
#toc, blockquote { margin: 0 1rem;
|
||||
padding-left: 1rem;
|
||||
border-left: solid var(--rbg); }
|
||||
#toc { font-size: 0.875em;
|
||||
background: var(--rbg);
|
||||
padding: 1rem;
|
||||
border: solid 1px var(--fg0);
|
||||
}
|
||||
#toc ul { padding-left: 2em; }
|
||||
/* ---- SYNTAX HIGHLIGHTING ---- */
|
||||
#table-of-contents { text-align: left; }
|
||||
#logo { background: var(--fg);
|
||||
border-bottom: solid 5px var(--rfg); }
|
||||
.ex { color:var(--v); }
|
||||
.op, .fu, .ot {color:var(--b);}
|
||||
.bu { color:var(--m); }
|
||||
|
|
@ -149,13 +162,8 @@ blockquote { margin: 0 1em;
|
|||
.kw { color:var(--y); }
|
||||
.st { color:var(--g); }
|
||||
.co { color:var(--fg0); }
|
||||
|
||||
.pubDate { font-size: .7em; color: var(--fg); }
|
||||
.tag { font-size: .7em; background-color: var(--rbg); }
|
||||
pre { border-color: var(--fg);
|
||||
background: var(--rbg);
|
||||
}
|
||||
|
||||
|
||||
pre { border-color: var(--fg); background: var(--rbg); }
|
||||
.todo,.done { background: var(--r); color: #FFF; font-weight: bold; font-size: .66em; padding: .2em;}
|
||||
.done { background: var(--g); }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
#+EMAIL: yann@esposito.host
|
||||
#+keywords: Haskell programming functional tutorial
|
||||
#+DESCRIPTION: A short and intense introduction to Haskell. This is an update of my old (2012) article. A lot of things have changed since then. Mostly I changed my approach about the easiest way to install a Haskell playground. I removed the not as important part, and added a short introduction about starting a new project.
|
||||
#+OPTIONS: auto-id:t toc:t
|
||||
#+OPTIONS: toc:t auto-id:t
|
||||
#+STARTUP: overview
|
||||
|
||||
#+begin_quote
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
#+DATE: [2021-05-01 Sat]
|
||||
#+KEYWORDS: blog static
|
||||
#+DESCRIPTION: Minimal and fast static website builder with make.
|
||||
#+OPTIONS: auto-id:t toc:t
|
||||
#+OPTIONS: auto-id:t
|
||||
|
||||
|
||||
|
||||
As someone on the Internet said not so far ago.
|
||||
Building its own static building system is a rite of passage for many developers.
|
||||
|
|
|
|||
|
|
@ -14,18 +14,18 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div id="logo">
|
||||
<a href="/">
|
||||
<svg width="5em" viewBox="0 0 64 64">
|
||||
<circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
|
||||
<circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
|
||||
<circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
|
||||
<ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div id="preamble" class="status">
|
||||
<div class="content">
|
||||
<div id="logo">
|
||||
<a href="/">
|
||||
<svg width="5em" viewBox="0 0 64 64">
|
||||
<circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
|
||||
<circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
|
||||
<circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
|
||||
<ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<h1>$title$</h1>
|
||||
<div class="meta">
|
||||
<span class="yyydate">$date$</span> on
|
||||
|
|
@ -38,6 +38,7 @@ $description$
|
|||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
$if(toc)$<div id="toc">$table-of-contents$</div>$endif$
|
||||
$body$
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
|
|
|
|||
Loading…
Reference in New Issue