Victor Wynne

The style guide serves to document the design of various elements used on this website.

Header with stylized gutter

This is the font, size, color and spacing of regular ol’ paragraph <p> text. Using Markdown makes it dead simple to format text italic, bold or bold and italic.

Regardless of where a link is presented it will always use the same color.

The earth is flat round.

ruby

an intense purplish-red color.

an old type size equal to 5 1/2 points.

an open source, interpreted, object-oriented programming language.

If a sentence contains reference to a footnote¹ an inline link appears.

Blockquote with citation:

“My fellow Americans, we are and always will be a nation of immigrants. We were strangers once, too.”

- Barack Obama

Ordered list:

1. Milk
2. Bread
3. Eggs

Unordered nested list:

• Apple
  • Fuji
  • Gala
  • Macintosh
• Tomato
• Avocado

Task List:

• Make coffee
• Update Homebrew
• Update all of your gem dependencies
• Drag your feet on updating gem dependencies

Message Boxes

Success! This is a sentence inside of a message box.

Caution! This is a sentence inside of a message box.

Warning! This is a sentence inside of a message box.

Danger! This is a sentence inside of a message box.

Info: This is a sentence inside of a message box.

Note: This is a sentence inside of a message box.

Placing inline code within a sentence does not highlight the syntax.

Code blocks highlight the syntax, display the language, and have a copy button.

/* === Inline Code === */

code:not(pre code) {
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  font-family: $code-font-family;
  font-size: 14px;
  
  background-color: oklch(.20 0 0) !important;
  color: oklch(.85 .20 250);
  border: 1px dashed oklch(.60 .15 30);
  
  @media (prefers-color-scheme: light) {
    background-color: oklch(.28 0 0) !important;
    color: oklch(0.38 .20 250);
    border: unquote("1px solid oklch(from oklch(.1 0 0) calc(l + 0.05) c h)");
  }
}