Styleguide

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.

[toc]

“She was never on time.” 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.

Weights

Lists

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

• Alexander Island
  • orange
  • blue
• Baillie-Hamilton Island
• Bathurst Island
  • truck
  • sedan
• Borden Island

Some text

• a common thing for us
• is to have a bullet list
• of alternatives

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.

Pictures

Use the figure macro for pictures.
The first argument is the image source.
The second argument is the caption.
You can use Markdown in the caption.

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

The first argument to figure can
be anything that would be valid
for and <img> tag’s src attribute.

{{
  figure("https://picsum.photos/512/128?gravity=center&random",
    "Photo by [Samuel Sianipar](https://unsplash.com/@samthewam24) • [Unsplash](https://unsplash.com)")
}}

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

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

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

Containers

Two kinds of containers:

• one for expanding text
• one for general divs

Right now all expanding text
starts out folded.

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

::: parameters
The text therein
:::

:::

The parameters can be:

• one or more class identifiers
• an element id #thisway
• a property/value pair style=background-color:aliceblue

The container above looks like this:

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

which gets rendered 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 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.

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.

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.
Robert Penn Warren

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
Cite in the middle
emotionally away yikes this instead therefore.

some { code
  in a
  blockquote
}

The Way of the Squirrel

Footnotes

Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially¹ 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 connection² instrument astonished unaffected his
motionless³
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.⁴ Agreement for listening remainder get attention law acuteness day. Now whatever surprise resolved elegance indulged own way outlived.

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.

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.