Added style and HTML markup around the markdown output

This commit is contained in:
Georges Dupéron 2019-03-09 03:22:57 +01:00
parent eb6b899396
commit 6e17e34770
4 changed files with 125 additions and 5 deletions

View File

@ -20,10 +20,14 @@ artifacts/deps.pdf: deps.ps Makefile
mkdir -p $$(dirname $@)
ps2pdf $< $@
artifacts/index.html: Makefile
artifacts/index.html: doc-src/index.html Makefile
mkdir -p $$(dirname $@)
cp doc-src/index.html $@
artifacts/references/index.html:
artifacts/references/index.html: references.md artifacts/references/style.css Makefile
mkdir -p $$(dirname $@)
markdown references.md > $@
doc-src/markdown2html.sh $< "References" > $@
artifacts/references/style.css: doc-src/style.css Makefile
mkdir -p $$(dirname $@)
cp $< $@

22
doc-src/markdown2html.sh Executable file
View File

@ -0,0 +1,22 @@
#!/bin/sh
if test $# -ne 2; then
printf %s\\n 'Usage: path/to/markdown2html.sh file.md "Page title"'
exit 1
fi
cat <<EOF
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$2</title>
<link type="text/css" rel="stylesheet" href="style.css" >
</head>
<body>
EOF
markdown "$1" | sed -e 's/^/ /'
cat <<'EOF'
</body>
</html>
EOF

94
doc-src/style.css Normal file
View File

@ -0,0 +1,94 @@
html {
background: #eee;
padding: 0 .5em;
}
body {
background: white;
border: thick solid #ddd;
border-radius: 2em;
padding: 0.5em 2em 1.5em;
max-width: 40em;
margin: 2em auto;
font-family: Helvetica,Arial,sans-serif;
font-size: 120%;
line-height: 1.3em;
color: #333;
}
h1 {
color: #222;
}
code {
color: #04c;
background: #eee;
padding: 0.1em 0.3em;
}
input, select {
padding: 0.3em !important;
}
pre em {
color: red;
font-style: normal;
}
kbd {
color: #444;
background-color: aliceblue;
border: thin solid gray;
border-radius: .5ex;
padding-left: .5ex;
padding-right: .5ex;
}
pre kbd {
color: #04c;
border: none;
border-radius: 0;
padding-left: initial;
padding-right: initial;
}
pre {
overflow: auto;
background: #eee;
border: thin solid #ccc;
padding: .5em;
border-radius: .5em;
}
hr {
margin: 1em 25%;
height: .35ex;
color: #aaa;
background-color: #aaa;
border: none;
border-radius: .175ex;
}
/* TODO: use a technique like tinytypo's to change the quotes based on the language?
* https://github.com/tetue/tinytypo/blob/5f7411746c8c4d634ac8cd14c730b86f4ffd1813/css/typo.css#L397
*/
blockquote {
border-left: 0.85ex solid #ccc;
padding: 0.8ex 1ex;
background: #f0f0f0;
margin: 1em 2em;
}
/* An <ul> appearing at the end of a blockquote has too much vertical space following it. */
ul:last-child {
margin-bottom: .25ex
}
img {
max-width: 100%;
max-height: 100vh;
}
li > img, li > a > img {
vertical-align: top;
}

View File

@ -8,10 +8,10 @@
## Keyboard
* N-shot injection keycaps:
* N-shot injection keycaps
* [![double-shot injection keycaps cut in half to expose the two plastic parts](https://i.imgur.com/kVQNa.jpg)](https://imgur.com/a/OhRd4)
* [The best mechanical keycaps](https://blog.wooting.nl/what-are-the-best-mechanical-keyboard-keycaps), a presentation of various properties of keycaps
* [![Quadruple-shot injection keycap with two colors for the label and transparent plastic for caps lock or scroll lock indicator](https://deskauthority.net/download/file.php?id=5573)](https://deskauthority.net/viewtopic.php?p=80654#p80654)
* [![Quadruple-shot injection keycap with two colors for the label and transparent plastic for caps lock or scroll lock indicator](https://deskthority.net/download/file.php?id=5573)](https://deskthority.net/viewtopic.php?p=80654#p80654)
* Planck [![Example layout of a planck keyboard](https://i.imgur.com/cNipMSc.png)](https://i.imgur.com/cNipMSc.png)
* [WASD Keyboards](https://www.wasdkeyboards.com/) does full-color print on keycaps. Examples:
[![illustrations (planets and space decor) on keys](https://i.imgur.com/F3lgqHJ.jpg)](https://i.imgur.com/F3lgqHJ.jpg)