I just did an update on this website (finally), and churned out some new posts. This post will act as a primitive style guide and as a visual reference.

This is an h2 heading

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

Here’s an h3

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

H4, deep enough?

A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.

This is h5

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.

And an h6 😬

Gregor then turned to look out the window at the dull weather.

Horizontal rule

Here’s a horizontal rule:

Lists

There are 3 types of lists.

Unordered list

• This here
• is an
• unordered list.
  • How about nesting?
  • Is that working?
    • How deep can you go?
      • Huh?
• Looks good?

Code inside a list

• What about inline code inside a list: const foo = () => 'bar'?
• And codeblocks inside li elements:

  const foo = () => {
    return 'bar'
  }

  • Nested one level deeper:

    'li .gatsby-highlight': {
      backgroundColor: 'var(--gray-lightest)',
      fontSize: '90%',
      margin: 0,
      width: '100%'
    },

    'li > p': {
      marginBottom: 'calc(var(--spacing-m) / 2)'
    },

    • One more level just make sure:

      "li pre[class*='language-']": {
        padding: '10px'
      }

• That looks pretty good, margins and all.

Ordered list

1. What about
   1. nested
   2. ordered
2. lists?
   • Or unordered list
   • inside ordered list.
3. Do they
4. look ok?

Description list

Banana

A yellow-ish, long fruit growing on a tree.

Apple

A round fruit with a color gamut from rgb(0, 255, 0) to rgb(255, 0, 0)

Code in title: foo('bar')

Codeblock in description:

<Foo>
  {map.bars(bar => {
    return <span>{bar}</bar>
  })}
</Foo>

Nested description list

Description lists can be nested, like other lists. It’s good when documenting code for example. JSX markup for these gets pretty dicey.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla vitae omnis blanditiis similique, ipsa cupiditate quam assumenda deleniti inventore cumque alias ex id in culpa aperiam! Numquam quo sit officiis!

Code

Inline code

Here’s some inline code: const foo = (bar) => bar.fooz.trim() === 'baz'. And here is some syntax highlighted inline code const foo = (bar) => bar.fooz.trim() === 'baz' you can make that happen by ending the line with \{:js\}, js being the highlighted lang:

foo...{:js}

Sample output, samp

Inline samp looks like this. Block samp looks like this:

Some output

Keyboard

<kbd>:

Press Cmd+/ or Ctrl+/ to search, then Esc to close the search.

Code blocks

Here’s some jsx with a highlighted lines:

const [searchOpen, setSearchOpen] = React.useState(false)
 
const handleKeyboard = ({ repeat, metaKey, ctrlKey, key }) => {
  if (repeat) return
 
  // Handle both, `ctrl` and `meta`.
  if ((metaKey || ctrlKey) && key === '/') setSearchOpen(prev => !prev)
}
 
React.useEffect(() => {
  document.addEventListener('keydown', handleKeyboard)
 
  // Important to remove the listeners.
  return () => document.removeEventListener('keydown', handleKeyboard)
})

Here’s a bigger chunk of code, with line numbers:

const listItems = ['foo', 'bar', 'baz', 'quix']
 
const FilterableList = () => {
  const [searchResults, setSearchResults] = useState(listItems)
 
  const handleChange = event => {
    const value = event.target.value.toLowerCase()
 
    if (value) {
      const filteredItems = listItems.filter(item =>
        item?.toLowerCase().includes(value)
      )
 
      setSearchResults(
        filteredItems.length > 0 || value ? filteredItems : listItems
      )
    } else {
      setSearchResults(listItems)
    }
  }
 
  return (
    <Wrap>
      <Input onChange={handleChange} placeholder='Search' type='text' />
      <ul>
        {searchResults.length < 1 ? (
          <li>No results</li>
        ) : (
          searchResults.map(item => <li key={item}>{item}</li>)
        )}
      </ul>
    </Wrap>
  )
}

Here’s some NGINX with line numbers:

server {
  server_name staging.clubmate.fi;
  root /var/www/staging.clubmate.fi/public_html;
 
  location /foo {
    return 301 http://clubmate.fi;
  }
}

Embeds

The CodePen shortcode should work <CodePen slug="ZEOdZGz" />:

CodePen

CodeSandbox

StackBlitz

YouTube

Iframes

100% wide Iframe (default) with a caption:

Media

Bitmap image

SVG image

Image as a link

Gif-like Mux video

Mux video with controls

HTML elements

All the lesser used HTML elements.

Address

<address>

Address:

Superscript and subscript

<sup> and <sub>

Here’s the sup ^superscript between normal text _subscript

Small

<small>

Normal text, small text, more normal text.

Blockquote and cite

Here’s a <blockquote> where the name is wrapped in <cite>:

Never argue with stupid people, they will drag you down to their level and then beat you with experience. ―Mark Twain

Abbreviations

<abbr>

The WAP is a highly modern technical standard that renders pages in written in

WML.

Quote

<q>

After Gregor Samsa had woken up, he simply thought What’s happened to me? like what had just transpired wasn’t that unusual.

Marking

And <mark> for highlighting pieces of text:

Some highlighted text marked with mark.

Deleting and inserting

Deleting and correcting text with <del> and <ins>:

And it was like that. Not anymore!

Boxes

Read more:

<ReadMore href='/disable-gatsby-telemetry'>
  How to disable Gatsby telemetry
</ReadMore>

Note:

<Note type='info|default'>Text</Note>

Drawers

Detail summary thingy:

Code inside detail/summary:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Demo</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script data-type="module" type="text/babel">
    /* eslint-disable react/react-in-jsx-scope */
    const App = () => {
      return <p class='test'>Hello, this is a test</p>
    }
 
    ReactDOM.render(<App />, document.getElementById('root'))
 
  </script>
</body>

.test {
  color: #bada55;
}

Table