Stylesheet

Nostra gravida felis suspendisse lectus netus adipiscing, erat cubilia elementum nibh senectus, nostra eros lectus tempor aenean senectus rutrum congue mauris nunc diam ut, in pretium semper ultrices odio, conubia sodales ipsum diam molestie.

However besides jeez exclusively and gosh diabolically this hence frowned archaic abrasively preparatory domestic without credibly said yikes this passably when much next much jeepers iguanodon this thus giraffe hence mannish much less wailed hamster steadfastly instead on as some wow and.

Taped mammoth adroit woefully aboard much beaver ouch misheard selfishly greyhound wherever rat darn accurately far wherever conductive toucan komodo dalmatian much dove methodically gosh far near and objective sold more misheard dear hello.

Footnotes

Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially1 reasonable off one. Wonder bed elinor family secure met. It want gave west into high no in. Depend repair met before man admire see and. An he observe be it covered delight hastily message. Margaret no ladyship endeavor ye to settling.

It allowance prevailed enjoyment in it. Calling observe for who pressed raising his. Can connection2 instrument astonished unaffected his motionless3 preference. Announcing say boy precaution unaffected difficulty alteration him. Above be would at so going heard. Engaged at village at am equally proceed. Settle nay length almost ham direct extent.4 Agreement for listening remainder get attention law acuteness day. Now whatever surprise resolved elegance indulged own way outlived.

Lists, graphs, and tables

Ac vel nulla fermentum quis condimentum etiam sapien egestas fames fermentum turpis aenean, commodo velit eros orci purus sagittis iaculis auctor habitasse primis inceptos.

Lists

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

Some text

Numbers

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

Steps to success

  1. Plan your work. Most problems are easily solved

  2. Do not stress out.

    It’s reall important that you stay calm.

    Code blocks in lists are the *worst*!
    

    indentation 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 yourself

    What about

Jaguar one out arduous strange overabundantly and excepting gosh supportive before wore expansive yet enthusiastically more alas when close unceremoniously hey well tragic while far far ouch unthinkingly one vibrant far much ouch.

Graphs

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

Containers

Two kinds of containers:

Expanding text

Right now all expanding text starts out folded.

Divs are written like this:

::: parameters
The text therein
:::

The parameters can be:

The container above looks like this:

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

which gets rendered 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 people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten.

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

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

  return decycled;
}

Tables

Some because beseechingly staunch much hence while honey as one put llama carelessly alas over amid in off and hey dear mastodon so overheard rose clenched the far goodness hound skimpily because.

state capital
texas austin
california sacramento
massachusetts boston

Lobortis magna enim mi fames elit hac dictum tortor pulvinar et, commodo tempus duis ultricies elementum non hac ultricies sociosqu faucibus sodales, nunc tincidunt ad etiam dui viverra eleifend ultricies curae per tristique nec dictum.

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
table caption

Date formats

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
formatting dates
with prettyDate

Weights

Taped mammoth adroit woefully aboard much 100

Taped mammoth adroit woefully aboard much 200

Taped mammoth adroit woefully aboard much 300 dateline-date

Taped mammoth adroit woefully aboard much 400 body, dateline

Taped mammoth adroit woefully aboard much 500 summary

Taped mammoth adroit woefully aboard much 600

Taped mammoth adroit woefully aboard much 700 logo, nav

Taped mammoth adroit woefully aboard much 800

Taped mammoth adroit woefully aboard much 900

Blockquote

Tempus rutrum taciti mollis diam dapibus ligula, sit malesuada feugiat aptent donec, curabitur habitasse nisl consectetur porta semper augue mollis quam hac

We shall come back, no doubt, to walk down the Row and watch young people on the tennis courts by the clump of mimosas and walk down the beach by the bay, where the diving floats lift gently in the sun, and on out to the pine grove, where the needles thick on the ground will deaden the footfall so that we shall move among the trees as soundlessly 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 convulsion of the world, out of history into history and the awful responsibility of Time.

Tempus rutrum taciti mollis diam dapibus ligula, sit malesuada feugiat aptent donec, curabitur habitasse nisl consectetur porta semper augue mollis quam hac

Or classically a far some grizzly rode however jeepers along mounted fishy bet owing versus leapt because fondly far and snickered neurotically this this emotionally away yikes this instead therefore.

some { code
  in a
  blockquote
}

Heading 3

this hence frowned archaic abrasively preparatory domestic without credibly said yikes this passably when much next much jeepers iguanodon this thus giraffe hence mannish much less wailed hamster steadfastly instead on as some wow and.

Heading 4

Nostra gravida felis suspendisse lectus netus adipiscing, erat cubilia elementum nibh senectus, nostra eros lectus tempor aenean senectus rutrum congue mauris nunc diam ut, in pretium semper ultrices odio, conubia sodales ipsum diam molestie.

Some code
Heading 5

Don’t use Heading 5

Heading 6

Don’t use Heading 6

Colors

Semantic colors have semantic names. Semantic names use color mnemonics, not raw color values.

The idea is that var(--color-red) can change to different shades of red without having 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-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-darkred 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 complicated footnote

    Apartments simplicity or understood do it we. Song such eyes had and off. Removed winding ask explain delight out few behaved lasting. Letters old hastily ham sending not sex chamber because present. Oh is indeed twenty entire figure. Occasional diminution announcing new now literature terminated. Really regard excuse off ten pulled. Lady am room head so lady four or eyes an. He do of consulted sometimes concluded mr. An household behaviour if pretended. ↩︎

  2. A simple footnote. ↩︎

  3. Inline notes. It looks like newlines are forbidden here. ↩︎

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

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