Site Style Guide

Colors

Vermillion
Dark
Light

Demos

This is a basic demo

This is a demo with a new label.

Typography

Headers and Text

Top Level Header

This is a paragraph to give sense of the flow of a document that has headers. There shouldn't be a huge gap around the headers, but enough to make text readable and let the headers stand out!

Second Level Header

This is a paragraph to give sense of the flow of a document that has headers. There shouldn't be a huge gap around the headers, but enough to make text readable and let the headers stand out!

Third Level Header

This is a paragraph to give sense of the flow of a document that has headers. There shouldn't be a huge gap around the headers, but enough to make text readable and let the headers stand out!

Fourth Level Header

This is a paragraph to give sense of the flow of a document that has headers. There shouldn't be a huge gap around the headers, but enough to make text readable and let the headers stand out!

Fifth Level Header

This is a paragraph to give sense of the flow of a document that has headers. There shouldn't be a huge gap around the headers, but enough to make text readable and let the headers stand out!

Sixth Level Header

This is a paragraph to give sense of the flow of a document that has headers. There shouldn't be a huge gap around the headers, but enough to make text readable and let the headers stand out!

Primary Title

Primary Title Demo

Links

This is a standard link

Blockquotes

Normal paragraph text.

There are not many who would do things the way I do them.

Normal paragraph text.

Web Fonts

Code Blocks

Icons

Lists

Ordered

  1. Ordered list item.
  2. Ordered list item.
  3. Ordered list item.
  4. Ordered list item.

Unordered

Posts list

  1. 2021
  2. Blog Post Entry
    Aug 04
  3. Blog Post Entry
    Aug 04
  4. Blog Post Entry
    Aug 04
  5. 2020
  6. Blog Post Entry
    Aug 04
  7. Blog Post Entry
    Aug 04
  8. Blog Post Entry
    Aug 04

Details

Summary

Hidden info

Tables

Sample Table
Heading 1 Heading 2 Heading 3
Data Data Data
Data Data Data
Data Data Data Extra data over here!

Fluid Media

Other components

- [x] Colors
- [x] Demos
  - [x] Basic demo box
  - [x] Demo with custom label
- [x] Typography
  - [x] Fonts
    - [x] `Arial` for headers
    - [x] `Georgia` for body
  - [x] Headers and Text
    - [x] h1, h2, h3, h4, h5, h6
    - [x] Primary Title
    - [x] Links
    - [x] blockquotes
- [ ] Web Fonts
- [ ] Code
  - [ ] Inline
  - [ ] Block
  - [ ] _Use_Prism.js?_
- [ ] Icons
- [ ] Lists
  - [x] Ordered
  - [x] Unordered
  - [ ] Description
  - [ ] Inline
  - [x] Posts List
- [ ] ~~Comments?~~
  - [ ] ~~Nested replies~~
- [x] Tables
- [ ] Fluid Media
  - [ ] Image
  - [ ] Full width image
  - [ ] Video
  - [ ] Third party video
  - [ ] Figure with caption
  - [ ] Standalone caption
- [ ] Other components
  - [ ] Custom scrollbar
  - [ ] Fixed table of contents
  - [ ] Printed page
  - [ ] Callouts
    - [ ] Update
    - [ ] Warning