clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

New blog. Test post, ignore

Filed under: Meta— Tagged with: typography, design, html5

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.

And an 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. Gregor then turned to look out the window at the dull weather.

Horizontal rule

Here’s a horizontal rule:


Lists

Unordered:

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

Ordered:

  1. What about
  2. ordered lists?
  3. Do they
  4. Look ok?

Definition:

Baneinei
A yellow-ish, long-ish fruit growing on a tree.
Aaple
A round-ish fruit with a color gamut from rgb(0, 255, 0) to rgb(255, 0, 0)

Code inside an unordered list:

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

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 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" />:

See a Demo ZEOdZGz

This demo is demonstrating a keyboard shortcuts

CodeSandbox:

An embedded CodeSandbox demo

And YouTube:

This is a caption

100% wide Iframe (default):

This site loaded into an Iframe

Iframe with a fixed width:

This Iframe has the width of 350px

A normal image:

A silly looking cat wearing Supreme bucket hat, chain, and Timbs
A meme

Gif, or gif-like video to be precise:

A gif-like video showing fish autocomplete

Video with controls and audio:

Hungarian senior citizen talking

Keyboard

When using the <kbd> element it should print out something like this:

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

HTML element zoo

Misc HTML elements and their behaviors.

blockquote / cite

Here’s a <blockquote>:

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

abbr

And some <abbr>s:

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

q

And <q>:

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

mark

And <mark> for highlighting pieces of text:

Here's some highlights marked with mark. Oh hi Mark!

del / ins

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

And it was like that. Not anymore, bitch!

Boxes

Read more:

Note:

Did you know that one kilo of feathers weighs exactly one kilo. The more you know 🌈 🙌

Detail summary thingy:

More on Kafka:Franz Kafka (3 July 1883 – 3 June 1924) was a German-speaking Bohemian novelist and short-story writer, widely regarded as one of the major figures of 20th-century literature.Wikipedia

And some code inside detail/summary:

Here’s how to do a barre roll:
body {
  animation-name: roll;
}

Tables

Here’s example table:

CommandAliasesAction
tmux attacha, at, attach-sessionAttach to last session
tmux attach -t mysesdittoAttach to myses
tmux lslist-sessions, Ctrl+b sList session
tmuxnew, new-session, :newNew session
tmux new -s myses:new -s mysesNew named session
tmux kill-ses -t myseskill-sessionKill myses
tmux kill-ses -adittoKill all but current
tmux kill-ses -a -t mysesdittoKill all but myses
Ctrl+b $-Rename session
Ctrl+b d-Detach session
Ctrl+b (-Previous session
Ctrl+b )-Next session

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • console.log('Smash the patriarchy!')
  • I love u!