Styleguide

← Back to home
A minimal styleguide for runjak.codes to enable a quick overview of existing components and their presentation.

Text

We use Comic Mono as the default font for the entire site.

When showing code we use IBM Plex Mono instead.

Headlines

h1

Hello World!

h2

Hello World!

h3

Hello World!

h4

Hello World!

Links

Links generally look like this.

Dates

The date string '2023-06-27T12:30:08.310Z' formatted in different styles:

year:
month:
day:

Lists

Ol

  1. Foo
  2. Bar
  3. Baz

Ul

Dl

 – 
Senior Software Engineer , sprd.net AG, TeamShirts
 – 
Software Engineer, sprd.net AG, TeamShirts
 – 
Independent scholar, Max Planck Institute for the Science of Human History
 – 
Student assistant, Max Planck Institute for Evolutionary Anthropology

Images

An image shot when leaving the place

Video

Malen nach Zahlen

📹 Embed Video from:

👁️ Watch on: media.ccc.de archive.org youtube.com chaotikum.org

📋 Copy link to:

📜 Read the Google Privacy Policy

Code

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};

Email

We've got client-only email addresses: [ enable JavaScript to read ]

Blockquote

What a quote looks like:
Oh, what a cool quote this could be!

Details

Our details component:
Summary An extended explanation of something summarized before.

Lightboxes

Encrypted

Try password 'test':

Technologies

We list technologies like this:

Favicon

Fini