Colours Permalink ¶

• Raven

  oklch(61.29% 0.064 237.73)

  color-mix(in oklab, goldenrod 15.33%, steelblue)

  #5f8aa6

• Thunder

  oklch(15% 0 0)

  color-mix(in oklab, black 69.77%, darkgray)

  #1b1b1b

• Snowy

  oklch(98.2% 0 0)

  color-mix(in oklab, black 1.79%, white)

  #f9f9f9

• Mineshaft

  color-mix(
  	in oklab,
  	var(--color-snowy)
  	var(--color-thunder) 83.6%
  )

• Kaiser

  color-mix(
  	in oklab,
  	var(--color-snowy)
  	var(--color-thunder) 66.6%
  )

• Nickel

  color-mix(
  	in oklab,
  	var(--color-snowy)
  	var(--color-thunder) 51.8%
  )

• Yeti

  color-mix(
  	in oklab,
  	var(--color-snowy)
  	var(--color-thunder) 10.2%
  )

• Lynx

  color-mix(
  	in oklab,
  	var(--color-raven)
  	var(--color-thunder) 75%
  )

• Wolf

  color-mix(
  	in oklab,
  	var(--color-raven)
  	var(--color-thunder) 54%
  )

• Bowhead

  color-mix(
  	in oklab,
  	var(--color-raven)
  	var(--color-thunder) 33%
  )

• Highland

  color-mix(
  	in oklab,
  	var(--color-raven)
  	var(--color-snowy) 33%
  )

• Coyote

  color-mix(
  	in oklab,
  	var(--color-raven)
  	var(--color-snowy) 54%
  )

• Bear

  color-mix(
  	in oklab,
  	var(--color-raven)
  	var(--color-snowy) 75%
  )

• Aspen

  oklch(88.7% 0.1818 92.07)

• Conifer

  oklch(54.1% 0.1282 142.13)

• Maple

  oklch(57.6% 0.2268 27.77)

Sizes Permalink ¶

Gigantic

Large

Medium

Small

Tiny

Multi-Steps

Large–Gigantic

Medium–Gigantic

Small–Gigantic

Tiny–Gigantic

Medium–Large

Small–Large

Tiny–Large

Small–Medium

Tiny–Medium

Tiny–Small

Fluid Size Scale values

Values generated using clamp() Calculator with the following values:

Root Font Size

16px

Viewport Widths

700px – 1600px

Sizes (px)

64 – 72
36 – 42
20 – 24
10 – 12
 5 –  6

Font Families Permalink ¶

Headings Permalink ¶

Fluid Type Scale values

Values generated using clamp() Calculator with the following values:

Root Font Size

16px

Viewport Widths

700px – 1600px

Type Scales

Min: Minor Third 1.2
Max: Perfect Fourth 1.333
*: Augmented Fourth 1.414

Font Sizes (px)

33.178 – 72.000 (*)
27.648 – 42.666
23.040 – 32.000
19.200 – 24.000
16.000 – 18.000
14.000 – 16.000 (Custom)

Paragraph Permalink ¶

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Inline Elements Permalink ¶

This is a text link

This is a button styled to look like a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

The del element denotes removed content while the ins element indicates content that has been added

The s element denotes content that has been revised but kept for historical sake

Superscript for things like: 4^th of August; a² + b² = c²; 5,490.35 km²

Subscript for things like: H₂O; H₂SO₄; C₂₄H₂₆O₇

The small element is for fine print

Abbreviation: HTML

Acronym: Nasa

This text has a short inline quotation

This text has a short inline quotation with another short inline quotation spoken by a different voice

This text has une citation en incise demonstrating quotes from non-English languages.

The dfn element indicates a definition

The mark element indicates a highlight

This is what inline code looks like

This is sample output from a computer program

The variable element, such as x = y

Keyboard input: Ctrl Alt Del

Blockquotes Permalink ¶

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Unordered Lists Permalink ¶

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
• This is the last list item

Ordered Lists Permalink ¶

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
4. This is the last list item

Reversed

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. This is the last list item

Description Lists Permalink ¶

Description List

A number of connected items or names written or printed consecutively, typically one below the other.

This is a term.

This is the description of that term, which both live in a dl.

And another term.

And it gets a description too, which is this line.

Tables Permalink ¶

Heading A	Heading B	Heading C
Cell A-1	Cell B-1	Cell C-1
Cell A-2	Cell B-2	Cell C-2
Cell A-3	Cell B-3	Cell C-3
Foot A	Foot B	Foot C

With Alternating Rows

Heading A	Heading B	Heading C
Cell A-1	Cell B-1	Cell C-1
Cell A-2	Cell B-2	Cell C-2
Cell A-3	Cell B-3	Cell C-3
Cell A-4	Cell B-4	Cell C-4
Cell A-5	Cell B-5	Cell C-5
Foot A	Foot B	Foot C

With Alternating Columns

Heading A	Heading B	Heading C	Heading D	Heading E
Cell A-1	Cell B-1	Cell C-1	Cell D-1	Cell E-1
Cell A-2	Cell B-2	Cell C-2	Cell D-2	Cell E-2
Cell A-3	Cell B-3	Cell C-3	Cell D-3	Cell E-3
Foot A	Foot B	Foot C	Foot D	Foot E

With Alternating Rows & Columns

Heading A	Heading B	Heading C	Heading D	Heading E
Cell A-1	Cell B-1	Cell C-1	Cell D-1	Cell E-1
Cell A-2	Cell B-2	Cell C-2	Cell D-2	Cell E-2
Cell A-3	Cell B-3	Cell C-3	Cell D-3	Cell E-3
Cell A-4	Cell B-4	Cell C-4	Cell D-4	Cell E-4
Cell A-5	Cell B-5	Cell C-5	Cell D-5	Cell E-5
Foot A	Foot B	Foot C	Foot D	Foot E

With Sub-headings

	Heading A	Heading B	Heading C
Subheading 1	Cell A-1	Cell B-1	Cell C-1
Subheading 2	Cell A-2	Cell B-2	Cell C-2
Subheading 3	Cell A-3	Cell B-3	Cell C-3
	Foot A	Foot B	Foot C

Figures Permalink ¶

Preformatted Text Permalink ¶

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Code Blocks Permalink ¶

<ol class="table-of-contents">
	<li>Chapter 1</li>
	<li>Chapter 2</li>
</ol>

.grid {
	display: grid;
	grid-template-columns: repeat(
		var(--placement, auto-fill),
		minmax(
			var(--min-inline-size, 12em),
			var(--max-inline-size, 1fr)
		)
	);
	column-gap: var(--column-gap, var(--gap, var(--size-gutter)));
	row-gap: var(--row-gap, var(--gap, var(--size-gutter)));
}

const now = Date.now()

const thisYear = new Date().getFullYear()
const startEpoch = new Date(`${thisYear}-04-09T00:00:00+1400`).getTime()
const endEpoch = new Date(`${thisYear}-04-09T23:59:59-12:00`).getTime()

const isCSSNakedDay = startEpoch <= now && now <= endEpoch

export default isCSSNakedDay

Buttons Permalink ¶

Details Permalink ¶

Summary

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Audio Permalink ¶

Video Permalink ¶

Boxes Permalink ¶

Deck Permalink ¶

Shelf Permalink ¶

Degustator - Vin Santo (2016)

Grape Ale - Italian

Brasserie des Franches-Montagnes (BFM)

5/5

Reverberator

Sour - Fruited Gose

The Gipsy Hill Brewing Co.

5/5

Frontyards

Sour - Fruited Gose

Black Hops Brewing

5/5

Sub Focus
Sub Focus (2009)
5/5

93 ’til Infinity
Souls of Mischief (1993)
5/5

Enter The Wu-Tang (36 Chambers)
Wu-Tang Clan (1993)
5/5

Sparklines Permalink ¶

Like these? Check out how they work with out my custom Web Component, <svg-sparkline>.

Or the sound the make? Pentatonic uses the Web Audio API to generate fun little melodies from data.

Can I use... Widget Permalink ¶

I keep track of a whole bunch of different browser features over on my Browser Feature Watch project.