mirror of
https://github.com/frainfreeze/the-monospace-web-pandoc
synced 2025-12-29 18:49:50 -08:00
init
This commit is contained in:
Oskar Wickström
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
index.html
|
||||
10
Makefile
Normal file
10
Makefile
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
all: index.html
|
||||
|
||||
clean:
|
||||
rm -f index.html
|
||||
|
||||
index.html: index.md template.html Makefile
|
||||
pandoc -s --css reset.css --css index.css -i $< -o $@ --template=template.html
|
||||
|
||||
.PHONY: all clean
|
||||
43
flake.lock
generated
Normal file
43
flake.lock
generated
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"nodes": {
|
||||
"nixpkgs": {
|
||||
"locked": {
|
||||
"lastModified": 1723891200,
|
||||
"narHash": "sha256-uljX21+D/DZgb9uEFFG2dkkQbPZN+ig4Z6+UCLWFVAk=",
|
||||
"owner": "NixOS",
|
||||
"repo": "nixpkgs",
|
||||
"rev": "a0d6390cb3e82062a35d0288979c45756e481f60",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"owner": "NixOS",
|
||||
"ref": "nixpkgs-unstable",
|
||||
"repo": "nixpkgs",
|
||||
"type": "github"
|
||||
}
|
||||
},
|
||||
"root": {
|
||||
"inputs": {
|
||||
"nixpkgs": "nixpkgs",
|
||||
"systems": "systems"
|
||||
}
|
||||
},
|
||||
"systems": {
|
||||
"locked": {
|
||||
"lastModified": 1681028828,
|
||||
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
|
||||
"owner": "nix-systems",
|
||||
"repo": "default",
|
||||
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"owner": "nix-systems",
|
||||
"repo": "default",
|
||||
"type": "github"
|
||||
}
|
||||
}
|
||||
},
|
||||
"root": "root",
|
||||
"version": 7
|
||||
}
|
||||
34
flake.nix
Normal file
34
flake.nix
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
description = "A very basic flake";
|
||||
|
||||
inputs = {
|
||||
nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
|
||||
systems.url = "github:nix-systems/default";
|
||||
};
|
||||
|
||||
outputs =
|
||||
{
|
||||
self,
|
||||
systems,
|
||||
nixpkgs,
|
||||
}:
|
||||
let
|
||||
eachSystem = nixpkgs.lib.genAttrs (import systems);
|
||||
in
|
||||
{
|
||||
devShells = eachSystem (
|
||||
system:
|
||||
let
|
||||
pkgs = (import nixpkgs { inherit system; });
|
||||
in
|
||||
{
|
||||
default = pkgs.mkShell {
|
||||
packages = [
|
||||
pkgs.live-server
|
||||
pkgs.pandoc
|
||||
];
|
||||
};
|
||||
}
|
||||
);
|
||||
};
|
||||
}
|
||||
251
index.css
Normal file
251
index.css
Normal file
@@ -0,0 +1,251 @@
|
||||
:root {
|
||||
--line-height: 1.25rem;
|
||||
--border-thickness: 1.5px;
|
||||
--bold-weight: 700;
|
||||
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 450;
|
||||
font-style: normal;
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
*:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* + * {
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
html {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: var(--line-height) 2ch;
|
||||
max-width: 80ch;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
body {
|
||||
padding: var(--line-height) 1ch;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--bold-weight);
|
||||
margin: calc(var(--line-height) * 2) 0 0;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
line-height: calc(2 * var(--line-height));
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
top: calc(var(--border-thickness) * -1);
|
||||
display: block;
|
||||
border: none;
|
||||
border-bottom: 4.5px double #000;
|
||||
color: transparent;
|
||||
height: var(--border-thickness);
|
||||
margin: calc(var(--line-height) * 2 - var(--border-thickness)) 0;
|
||||
/*temp*/
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-thickness: var(--border-thickness);
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #000;
|
||||
}
|
||||
a:visited {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--bold-weight);
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
sub {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
vertical-align: sub;
|
||||
line-height: 0;
|
||||
width: calc(1ch / 0.75);
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
top: calc(var(--line-height) / 2);
|
||||
width: calc(round(down, 100%, 1ch));
|
||||
border-collapse: collapse;
|
||||
margin: var(--line-height) 0 calc(var(--line-height) * 3);
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: var(--border-thickness) solid #000;
|
||||
padding:
|
||||
calc((var(--line-height) / 2))
|
||||
calc(1ch - var(--border-thickness) / 2)
|
||||
calc((var(--line-height) / 2) - (var(--border-thickness)))
|
||||
;
|
||||
line-height: var(--line-height);
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
table tbody tr:first-child > * {
|
||||
padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
|
||||
}
|
||||
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
.width-min {
|
||||
width: 0%;
|
||||
}
|
||||
.width-auto {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: calc(var(--line-height) * 2) 3ch;
|
||||
}
|
||||
figcaption {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: var(--line-height) 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
padding: 0 0 0 2ch;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::marker {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.tree, .tree ul {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
.tree ul {
|
||||
margin: 0;
|
||||
}
|
||||
.tree ul li {
|
||||
position: relative;
|
||||
padding-left: 1ch;
|
||||
margin-left: 1ch;
|
||||
border-left: var(--border-thickness) solid #000;
|
||||
}
|
||||
.tree ul li:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: calc(var(--line-height) / 2);
|
||||
left: 0;
|
||||
content: "";
|
||||
width: calc(var(--line-height) / 2);
|
||||
border-bottom: var(--border-thickness) solid #000;
|
||||
}
|
||||
.tree ul li:last-child {
|
||||
border-left: none;
|
||||
}
|
||||
.tree ul li:last-child:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
height: calc(var(--line-height) / 2);
|
||||
border-left: var(--border-thickness) solid #000;
|
||||
}
|
||||
|
||||
/* DEBUG UTILITIES */
|
||||
|
||||
.grid {
|
||||
--color: #eeeeff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
background-image:
|
||||
repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
|
||||
repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
|
||||
background-size: 1ch var(--line-height);
|
||||
margin: 0;
|
||||
|
||||
/*display: none;*/
|
||||
}
|
||||
|
||||
body :not(.grid) {
|
||||
/*background: rgba(255, 0, 0, 0.1);*/
|
||||
}
|
||||
140
index.md
Normal file
140
index.md
Normal file
@@ -0,0 +1,140 @@
|
||||
---
|
||||
title: The Monotyper Manifesto
|
||||
author: John Doe
|
||||
date: August 2024
|
||||
---
|
||||
|
||||
## Abstract
|
||||
|
||||
In this design, the use of monospace fonts and a monochrome color palette is deliberate to enhance clarity and legibility, especially in environments where precision and readability are paramount.
|
||||
Monospace fonts, where each character occupies the same horizontal space, ensure uniformity and predictability in text alignment, making them ideal for coding interfaces, technical documentation, and tabular data displays.
|
||||
|
||||
The consistent spacing prevents text from becoming jumbled or misaligned, which can be critical when differentiating between similar-looking characters, such as '1' and 'l' or '0' and 'O'.
|
||||
This uniformity contributes to an overall sense of order and structure within the design, aiding users in quickly scanning and understanding the information presented.
|
||||
|
||||
## The Basics
|
||||
|
||||
I mean, look at this lovely horizontal break:
|
||||
|
||||
<hr>
|
||||
|
||||
Or a plain old bulleted list:
|
||||
|
||||
* Banana
|
||||
* Paper boat
|
||||
* Cucumber
|
||||
* Rocket
|
||||
|
||||
## Trees
|
||||
|
||||
It's nice to visualize trees.
|
||||
This is a regular unordered list with a _tree_ class:
|
||||
|
||||
<ul class="tree">
|
||||
<li>
|
||||
|
||||
**/dev/nvme0n1p2**
|
||||
|
||||
* usr
|
||||
* local
|
||||
* share
|
||||
* libexec
|
||||
* include
|
||||
* sbin
|
||||
* src
|
||||
* lib64
|
||||
* lib
|
||||
* bin
|
||||
* games
|
||||
* gamemode-simulate-game
|
||||
* gamemoderun
|
||||
* gamemodelist
|
||||
* media
|
||||
* media
|
||||
* run
|
||||
* tmp
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Tables
|
||||
|
||||
We can use regular tables that automatically adjust to the monospace grid.
|
||||
They're responsive.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="width-min">Name</th>
|
||||
<th class="width-auto">Dimensions</th>
|
||||
<th class="width-min">Position</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Boboli Obelisk</td>
|
||||
<td>1.41m × 1.41m × 4.87m</td>
|
||||
<td>43°45'50.78"N 11°15'3.34"E</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pyramid of Khafre</td>
|
||||
<td>215.25m × 215.25m × 136.4m</td>
|
||||
<td>29°58'34"N 31°07'51"E</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Note that only one column is allowed to grow.
|
||||
|
||||
## ASCII Drawings
|
||||
|
||||
We can draw in `<pre>` tags using [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_characters):
|
||||
|
||||
```
|
||||
╭─────────────────╮
|
||||
│ MONOSPACE ROCKS │
|
||||
╰─────────────────╯
|
||||
```
|
||||
|
||||
To have it stand out a bit more, we can wrap it in a `<figure>` tag, and why not also add a `<figcaption>`.
|
||||
|
||||
<figure>
|
||||
<pre>
|
||||
┌───────┐ ┌───────┐ ┌───────┐
|
||||
│Actor 1│ │Actor 2│ │Actor 3│
|
||||
└───┬───┘ └───┬───┘ └───┬───┘
|
||||
│ │ │
|
||||
│ │ msg 1 │
|
||||
│ │────────►│
|
||||
│ │ │
|
||||
│ msg 2 │ │
|
||||
│────────►│ │
|
||||
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
|
||||
│Actor 1│ │Actor 2│ │Actor 3│
|
||||
└───────┘ └───────┘ └───────┘</pre>
|
||||
<figcaption>Example: Message passing.</figcaption>
|
||||
</figure>
|
||||
|
||||
Let's go wild and draw a chart!
|
||||
|
||||
<figure><pre>
|
||||
Things I have.
|
||||
████ Usable
|
||||
│
|
||||
15 │ ░░░░ Broken
|
||||
│
|
||||
│
|
||||
12 │ ░
|
||||
│ ░
|
||||
│ ░ ░
|
||||
9 │ ░ ░
|
||||
│ ░ ░
|
||||
│ ░ ░ ░
|
||||
6 │ █ ░ ░ ░
|
||||
│ █ ░ ░ ░
|
||||
│ █ ░ █ ░
|
||||
3 │ █ █ █ ░
|
||||
│ █ █ █ ░
|
||||
│ █ █ █ ░
|
||||
0 └───▀─────────▀─────────▀──────────▀─────────────
|
||||
Socks Jeans Shirts USB Drives
|
||||
</pre></figure>
|
||||
48
reset.css
Normal file
48
reset.css
Normal file
@@ -0,0 +1,48 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
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,
|
||||
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 {
|
||||
/*margin: 0;*/
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
71
template.html
Normal file
71
template.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!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$
|
||||
$if(description-meta)$
|
||||
<meta name="description" content="$description-meta$" />
|
||||
$endif$
|
||||
<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
|
||||
$for(css)$
|
||||
<link rel="stylesheet" href="$css$" />
|
||||
$endfor$
|
||||
$for(header-includes)$
|
||||
$header-includes$
|
||||
$endfor$
|
||||
$if(math)$
|
||||
$math$
|
||||
$endif$
|
||||
</head>
|
||||
<body>
|
||||
$for(include-before)$
|
||||
$include-before$
|
||||
$endfor$
|
||||
$if(title)$
|
||||
<header>
|
||||
<h1 class="title">$title$</h1>
|
||||
$if(subtitle)$
|
||||
<p class="subtitle">$subtitle$</p>
|
||||
$endif$
|
||||
$for(author)$
|
||||
<p class="author"><cite>$author$</cite></p>
|
||||
$endfor$
|
||||
$if(date)$
|
||||
<p class="date">$date$</p>
|
||||
$endif$
|
||||
$if(abstract)$
|
||||
<div class="abstract">
|
||||
<div class="abstract-title">$abstract-title$</div>
|
||||
$abstract$
|
||||
</div>
|
||||
$endif$
|
||||
</header>
|
||||
$endif$
|
||||
$if(toc)$
|
||||
<nav id="$idprefix$TOC" role="doc-toc">
|
||||
$if(toc-title)$
|
||||
<h2 id="$idprefix$toc-title">$toc-title$</h2>
|
||||
$endif$
|
||||
$table-of-contents$
|
||||
</nav>
|
||||
$endif$
|
||||
$body$
|
||||
$for(include-after)$
|
||||
$include-after$
|
||||
$endfor$
|
||||
<div class="grid"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user