styleguide

based off the poor man's styleguide, inspired by 10kph's styleguide page

color variables

var(--black): #292b30

var(--dark): #613854

var(--med): #ab6c84

var(--light): #ffccdd

var(--white): #ffe8e1

fonts

body: latin modern mono, monospace
italic, bold

h1: faith collapsing
italic, bold

h2: mademoiselle
italic, bold

h1 heading

h2 heading

h3 heading

h4 heading

h1 (not first-of-kind)

Heading with text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading with text

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Text Elements

The a element, external a element, and a element with title examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2.2
3. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4

backgrounds

bg-typewriter

bg-pinkwall

bg-fabric

bg-white

bg-dark

bg-plain

bg-lined

bg-flowerdeco

bg-field

bg-handmade

bg-recycled

bg-pumpkin

bg-fleckedpink

bg-floraldark

paper bg-field taped

paper bg-plain

paper bg-lined

paper bg-flowerdeco

paper bg-field

paper bg-handmade

paper bg-recycled

paper bg-pumpkin

paper bg-fleckedpink

paper bg-floraldark

laceright

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

laceleft

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

stickers

img.sticker.top

img.sticker.rightside

extra variables: rightside.big rightside.bigger

img.sticker.leftside

.tape

.tape.bottom

.tape.small