Stylesheet

Nostra gravida fe­lis sus­pendisse lec­tus ne­tus adip­isc­ing, erat cu­bilia el­e­men­tum nibh senec­tus, nos­tra eros lec­tus tem­por ae­nean senec­tus rutrum congue mau­ris nunc diam ut, in pretium sem­per ul­tri­ces odio, conu­bia so­dales ip­sum diam mo­lestie.

She was never on time.” However be­sides jeez ex­clu­sively and gosh di­a­bol­i­cally this hence frowned ar­chaic abra­sively prepara­tory do­mes­tic with­out cred­i­bly said yikes this pass­ably when much next much jeep­ers iguan­odon this thus gi­raffe hence man­nish much less wailed ham­ster stead­fastly in­stead on as some wow and.

Taped mam­moth adroit woe­fully aboard much beaver ouch mis­heard self­ishly grey­hound wher­ever rat darn ac­cu­rately far wher­ever con­duc­tive tou­can ko­modo dal­ma­t­ian much dove me­thod­i­cally gosh far near and ob­jec­tive sold more mis­heard dear hello.

Weights

Taped mam­moth adroit woe­fully aboard much 100

Taped mam­moth adroit woe­fully aboard much 200

Taped mam­moth adroit woe­fully aboard much 300 dateline-date

Taped mam­moth adroit woe­fully aboard much 400 body, dateline

Taped mam­moth adroit woe­fully aboard much 500 summary

Taped mam­moth adroit woe­fully aboard much 600

Taped mam­moth adroit woe­fully aboard much 700 logo, nav

Taped mam­moth adroit woe­fully aboard much 800

Taped mam­moth adroit woe­fully aboard much 900

Lists

I like my lists to be tight, with no space be­tween one item and the next:

Some text

Numbers

  1. one
  2. two
  3. three
  4. four

Steps to suc­cess

  1. Plan your work. Most prob­lems are eas­ily solved

  2. Do not stress out.

    It’s re­all im­por­tant that you stay calm.

    Code blocks in lists are the *worst*!
    

    in­den­ta­tion is key

    let spacing = require('lots')
    

    try to end with text but don’t be afraid to use <br>s. life is too short

  3. Spacing is key
    Don’t crowd your­self

    What about

Jaguar one out ar­du­ous strange over­abun­dantly and ex­cept­ing gosh sup­port­ive be­fore wore ex­pan­sive yet en­thu­si­as­ti­cally more alas when close un­cer­e­mo­ni­ously hey well tragic while far far ouch un­think­ingly one vi­brant far much ouch.

Pictures

Use the figure macro for pic­tures. The first ar­gu­ment is the im­age source. The sec­ond ar­gu­ment is the cap­tion. You can use Markdown in the cap­tion.

Lorem Picsum

{{
  figure("https://picsum.photos/512/128?gravity=center&random",
    "[Lorem Picsum](https://picsum.photos/)")
}}

The first ar­gu­ment to figure can be any­thing that would be valid for and <img> tag’s src at­tribute.

Photo by Samuel SianiparUnsplash

{{
  figure("/assets/img/samuel-sianipar-scUBcasSvbE-unsplash.jpg",
    "Photo by [Samuel Sianipar](https://unsplash.com/@samthewam24) • [Unsplash](https://unsplash.com)")
}}

Of course you can use a naked <img> tag.

<img src="/assets/img/samuel-sianipar-scUBcasSvbE-unsplash.jpg"
  width="100%">

<img src="https://picsum.photos/512/128?gravity=center&random"
  width="100%" height="128" >

Mermaid Graphs

You can use Mermaid to write graphs in a mark­down-like lan­guage.

    ```mermaid
    graph TD;
        A(Start)-->B;
        A-->C;
        B-->D[End];
        C-.->D;
    ```

does this

graph TD;
    A(Start)-->B;
    A-->C;
    B-->D[End];
    C-.->D;

Containers

Two kinds of con­tain­ers:

Expanding text

Right now all ex­pand­ing text starts out folded.

Divs are writ­ten like this:

::: parameters
The text therein
:::

The parameters can be:

The con­tainer above looks like this:

::: style=background-color:aliceblue;padding:0.75em
Divs are written like this:
. . .
:::

which gets ren­dered into HTML like this:

<div style="background-color:aliceblue;padding:0.75em">
<p>Divs are written like this:</p>
. . .
</div>

Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch peo­ple nar­row see. Winding its wait­ing yet par­lors mar­ried own feel­ing. Marry fruit do spite jokes an times. Whether at it un­known war­rant her­self wind­ing if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an for­tune of. Twenty be­hind wicket why age now it­self ten.

const decycle = require('json-cycle').decycle

module.exports = function pdump(obj) {
  let decycled = JSON.stringify(decycle(obj), null, 2)

  return decycled;
}

Tables

Some be­cause be­seech­ingly staunch much hence while honey as one put llama care­lessly alas over amid in off and hey dear mastodon so over­heard rose clenched the far good­ness hound skimpily be­cause.

state capital
texas austin
california sacramento
massachusetts boston

Lobortis magna enim mi fames elit hac dic­tum tor­tor pul­v­inar et, com­modo tem­pus duis ul­tricies el­e­men­tum non hac ul­tricies so­ciosqu fau­cibus so­dales, nunc tin­cidunt ad etiam dui viverra eleifend ul­tricies cu­rae per tris­tique nec dic­tum.

table caption
Property Description
inputPath Path to this file including the input directory.
./src/articles/finding-oz.md
outputPath Path to the rendered file.
articles/finding-oz/index.html
fileSlug Short name from the file name. There are rules.
./src/articles/finding-oz.md

Date formats

formatting dates
with prettyDate
prettyDate
format string
example
date Tue Jan 02 2018 17:34:56 GMT+0000 (Coordinated Universal Time)
'iso' 2018-01-02T17:34:56.123-00:00
'isoDate' 2018-01-02
'isoTime' 17:34:56.123-00:00
'DmY' 2 Jan 2018
'DMY' 2 January 2018
'DmYt' 2 Jan 2018 5:34 pm
'DMYt' 2 January 2018 5:34 pm
'FFFF' Tuesday, January 2, 2018, 5:34:56 PM Coordinated Universal Time
'DDDD' Tuesday, January 2, 2018
'relative' 2 years ago
'relativeCalendar' 2 years ago
'http' Tue, 02 Jan 2018 17:34:56 GMT
'rfc2822' Tue, 02 Jan 2018 17:34:56 -0000
slug Tue 2 Jan 2018
locale Tuesday, January 2, 2018

Blockquote

Tempus rutrum tac­iti mol­lis diam dapibus ligula, sit male­suada feu­giat aptent donec, cur­abitur habitasse nisl con­secte­tur porta sem­per au­gue mol­lis quam hac

We shall come back, no doubt, to walk down the Row and watch young peo­ple on the ten­nis courts by the clump of mi­mosas and walk down the beach by the bay, where the div­ing floats lift gen­tly in the sun, and on out to the pine grove, where the nee­dles thick on the ground will deaden the foot­fall so that we shall move among the trees as sound­lessly as smoke. But that will be a long time from now, and soon now we shall go out of the house and go into the con­vul­sion of the world, out of his­tory into his­tory and the aw­ful re­spon­si­bil­ity of Time. Robert Penn Warren

Tempus rutrum tac­iti mol­lis diam dapibus ligula, sit male­suada feu­giat aptent donec, cur­abitur habitasse nisl con­secte­tur porta sem­per au­gue mol­lis quam hac

Or clas­si­cally a far some griz­zly rode how­ever jeep­ers along mounted fishy bet ow­ing ver­sus leapt be­cause fondly far and snick­ered neu­rot­i­cally this this Cite in the mid­dle emotionally away yikes this in­stead there­fore.

some { code
  in a
  blockquote
}

The Way of the Squirrel

Footnotes

Unpacked now de­clared put you con­fined daugh­ter im­proved. Celebrated im­pru­dence few in­ter­ested es­pe­cially1 rea­son­able off one. Wonder bed eli­nor fam­ily se­cure met. It want gave west into high no in. Depend re­pair met be­fore man ad­mire see and. An he ob­serve be it cov­ered de­light hastily mes­sage. Margaret no la­dy­ship en­deavor ye to set­tling.

It al­lowance pre­vailed en­joy­ment in it. Calling ob­serve for who pressed rais­ing his. Can con­nec­tion2 in­stru­ment as­ton­ished un­af­fected his mo­tion­less3 preference. Announcing say boy pre­cau­tion un­af­fected dif­fi­culty al­ter­ation him. Above be would at so go­ing heard. Engaged at vil­lage at am equally pro­ceed. Settle nay length al­most ham di­rect ex­tent.4 Agreement for lis­ten­ing re­main­der get at­ten­tion law acute­ness day. Now what­ever sur­prise re­solved el­e­gance in­dulged own way out­lived.

Heading 3

this hence frowned ar­chaic abra­sively prepara­tory do­mes­tic with­out cred­i­bly said yikes this pass­ably when much next much jeep­ers iguan­odon this thus gi­raffe hence man­nish much less wailed ham­ster stead­fastly in­stead on as some wow and.

Heading 4

Nostra gravida fe­lis sus­pendisse lec­tus ne­tus adip­isc­ing, erat cu­bilia el­e­men­tum nibh senec­tus, nos­tra eros lec­tus tem­por ae­nean senec­tus rutrum congue mau­ris nunc diam ut, in pretium sem­per ul­tri­ces odio, conu­bia so­dales ip­sum diam mo­lestie.

Some code
Heading 5

Don’t use Heading 5

Heading 6

Don’t use Heading 6

Colors

Semantic col­ors have se­man­tic names. Semantic names use color mnemon­ics, not raw color val­ues.

The idea is that var(--color-red) can change to dif­fer­ent shades of red with­out hav­ing to go through all the red styles.

Grays

Variable Value Notes
--color-gray-07 #111111 07% body text
  aptent conubia enim eleifend habitasse id montes
--color-gray-20 #333333 20% headings, nav text
  aptent conubia enim eleifend habitasse id montes
--color-gray-30 #4d4d4d 30% prism background
  aptent conubia enim eleifend habitasse id montes
--color-gray-40 #666666 40% dateline date
  aptent conubia enim eleifend habitasse id montes
--color-gray-75 #c0c0c0 75% footer
  aptent conubia enim eleifend habitasse id montes
--color-gray-88 #e0e0e0 88% table headbody sep, border of fold
  aptent conubia enim eleifend habitasse id montes
--color-gray-95 #f2f2f2 95% even row, bg of fold exp fold
  aptent conubia enim eleifend habitasse id montes

Reds

Variable Value Notes
--color-red #c22323
  aptent conubia enim eleifend habitasse id montes
--color-red-faded #fde2e2 folded text bg, table-caption highlight
  aptent conubia enim eleifend habitasse id montes
--color-darkred #7F0036
  aptent conubia enim eleifend habitasse id montes
--color-darkred-faded #7f00364d
  aptent conubia enim eleifend habitasse id montes

Foreground/Background

Variable Value Notes
--color-white #fff
  aptent conubia enim eleifend habitasse id montes
--color-foreground --color-gray-07
  aptent conubia enim eleifend habitasse id montes
--color-background --color-white
  aptent conubia enim eleifend habitasse id montes
--color-bg-contrast --color-gray-95 table even row
  aptent conubia enim eleifend habitasse id montes
--color-body --color-foreground
  aptent conubia enim eleifend habitasse id montes
--color-nav-text --color-gray-20
  aptent conubia enim eleifend habitasse id montes
--color-nav-hover --color-darkred
  aptent conubia enim eleifend habitasse id montes
--color-heading --color-gray-20
  aptent conubia enim eleifend habitasse id montes
--color-figure-caption --color-gray-40
  aptent conubia enim eleifend habitasse id montes
--color-link --color-darkred
  aptent conubia enim eleifend habitasse id montes
--color-footer --color-gray-75
  aptent conubia enim eleifend habitasse id montes
--color-code --color-gray-30 naked code
  aptent conubia enim eleifend habitasse id montes
--color-code-bg --base0x
  aptent conubia enim eleifend habitasse id montes
--color-fold-marker --color-darkred
  aptent conubia enim eleifend habitasse id montes
--color-fold-expanded --color-gray-95
  aptent conubia enim eleifend habitasse id montes
--color-fold-head --color-red-faded
  aptent conubia enim eleifend habitasse id montes
--color-fold-border --color-gray-88
  aptent conubia enim eleifend habitasse id montes

Tables

Variable Value Notes
--color-table-odd --color-bg-contrast
  aptent conubia enim eleifend habitasse id montes
--color-table-even --color-background
  aptent conubia enim eleifend habitasse id montes
--color-table-body --color-body
  aptent conubia enim eleifend habitasse id montes
--color-table-heading --color-heading
  aptent conubia enim eleifend habitasse id montes
--color-table-caption --color-darkred
  aptent conubia enim eleifend habitasse id montes
--color-table-sep --color-gray-88
  aptent conubia enim eleifend habitasse id montes
  1. A more com­pli­cated foot­note

    Apartments sim­plic­ity or un­der­stood do it we. Song such eyes had and off. Removed wind­ing ask ex­plain de­light out few be­haved last­ing. Letters old hastily ham send­ing not sex cham­ber be­cause pre­sent. Oh is in­deed twenty en­tire fig­ure. Occasional diminution an­nounc­ing new now lit­er­a­ture ter­mi­nated. Really regard ex­cuse off ten pulled. Lady am room head so lady four or eyes an. He do of con­sulted some­times con­cluded mr. An house­hold be­hav­iour if pre­tended. ↩︎

  2. A sim­ple foot­note. ↩︎

  3. Inline notes. It looks like new­lines are for­bid­den here. ↩︎

  4. All of these have started on the first line. Not this one. It’s in­dented on the next line:

    [^ext]:
        All of these
        have started on the first line. Not this one.
        It's indented on the next line:
    
    ↩︎