image-oversize

centerme

Chris Spiegl

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

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

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.

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.

Lorem Picsum

{{
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.

Photo by Samuel SianiparUnsplash

{{
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:

Expanding text

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:

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.

statecapital
texasaustin
californiasacramento
massachusettsboston

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.

PropertyDescription
inputPathPath to this file including the input directory.
./src/articles/finding-oz.md
outputPathPath to the rendered file.
articles/finding-oz/index.html
fileSlugShort name from the file name. There are rules.
./src/articles/finding-oz.md

[table caption][slug]

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 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.

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.


  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:
    ↩︎