Bucs Bounty Style Guide

Headings

H1

H2

H3

H4

H5
H6

Paragraphs & Text

This is a standard paragraph of text. It uses the --font-secondary variable, which is "Archivo", sans-serif. The default text color is --color-pirates-black. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, tempora!

This is another paragraph, showing how paragraphs flow and stack. Notice the consistent bottom margin applied. Dolor sit amet consectetur adipisicing elit. Dignissimos, vero.

This is a paragraph with an inline link example. Standard links use --color-pirates-red-2000s and underline on hover.

Another link: Visit Astro's website

Lists

Unordered List

  • First item in an unordered list
  • Second item in an unordered list
    • Nested item one
    • Nested item two
  • Third item in an unordered list

Ordered List

  1. First item in an ordered list
  2. Second item in an ordered list
    1. Nested ordered item one
    2. Nested ordered item two
  3. Third item in an ordered list

Blockquote

This is a blockquote. It should have a distinct left border and italicized text. This is used for quoting significant passages from other sources.

Even multiple paragraphs within a blockquote should be styled consistently.

Code

Inline Code

Here's some inline code for a variable name or a short snippet.

Code Block


const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

// doubled will now be [2, 4, 6]


Tags & Authors (Pills)

This demonstrates the styling for tag and author links, consistent with their use on blog posts and topic pages.

By Roberto Clemente

Colors

A quick reference for the primary colors in use:

Pirates Black #231F20
Pirates Gold #FFC72C
2000s Red #D7003F
Grays Blue #002266
Grays Red #CC0000