My notesMostly from my git commits |
Version | v0.1.1 | |
---|---|---|---|
Updated | |||
Author | Xameer | License | MIT |
Later
Not much
This is a plain old bulleted list:
Ordered lists look pretty much as you’d expect:
let’s mod tree
first:
/dev/nvme0n1p2
do I need one?
Name | Dimensions | Position |
---|---|---|
just | 1.41m × 1.41m × 4.87m | 43°45’50.78”N 11°15’3.34”E |
keep | 215.25m × 215.25m × 136.4m | 29°58’34”N 31°07’51”E |
Note: only one column is allowed to grow.
hmm
And inputs:
Add the grid
class to a container to divide up the
horizontal space evenly for the cells. Note that it maintains the
monospace, so the total width might not be 100%. Here are six grids with
increasing cell count:
If we want one cell to fill the remainder, we set
flex-grow: 1;
for that particular cell.
We can draw in <pre>
tags using box-drawing
characters: Yes I wanted to do this
╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯
Too much <figure>
tag, idk
<figcaption>
.
┌───────┐ ┌───────┐ ┌───────┐ │Actor 1│ │Actor 2│ │Actor 3│ └───┬───┘ └───┬───┘ └───┬───┘ │ │ │ │ │ msg 1 │ │ │────────►│ │ │ │ │ msg 2 │ │ │────────►│ │ ┌───┴───┐ ┌───┴───┐ ┌───┴───┐ │Actor 1│ │Actor 2│ │Actor 3│ └───────┘ └───────┘ └───────┘
Let’s go wild and draw a chart!
Things I Have │ ████ Usable 15 │ │ ░░░░ Broken │ 12 │ ░ │ ░ │ ░ ░ 9 │ ░ ░ │ ░ ░ │ ░ ░ ░ 6 │ █ ░ ░ ░ │ █ ░ ░ ░ │ █ ░ █ ░ 3 │ █ █ █ ░ │ █ █ █ ░ │ █ █ █ ░ 0 └───▀─────────▀─────────▀──────────▀───────────── Socks Jeans Shirts USB Drives
Media objects are supported, like images and video:
They extend to the width of the page, and add appropriate padding in the bottom to maintain the monospace grid.
That’s it for now.
If you like it or even decide to use it, please let me know.
The full source code is here: github.com/owickstrom/the-monospace-web
Finally, a massive shout-out to U.S. Graphics Company for all the inspiration.