Noir
a dark mode friendly Jekyll theme

Styles

This page serves to document the style of various elements used in the site's design.

THIS IS A HEADER

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

term
definition

If you want to reference a footnote it appears like this1 in a sentence.

Testing
Here is an image with a caption below it.

Quotes look nice:

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

~ Barack Obama

So do tables:

This Is A Table
Column 1 happens to be left-aligned
Column 2 is the one that’s centered
Column 3 is actually right-aligned

Here are the buttons whose class names and colors can be easily customized:

added This span class is named “added” but you can change it.

removed This span class is named “removed” but you can change it.

improved This span class is named “improved” but you can change it.

fixed This span class is named “fixed” but you can change it.

coming soon This span class is named “soon” but you can change it.

Remember to buy:

  1. Milk
  2. Bread
  3. Eggs

Don’t forget:

  • To review all code
  • Write up the changelog
  • Make coffee when you’re done

To Do:

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

Here are the message boxes with the optional close button enabled:

×Message: This is a sentence inside of a message box.

×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.

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

×Information: This is a sentence inside of a message box.

Try to only eat an entire bag of candy once a week month.

If you include any inline code it looks awesome.

A code block highlights the syntax and displays the language:

def test(a=1,b=2,c=a+b)
  puts "#{a},#{b},#{c}"
end
test        =>  1,2,3
test 5      =>  5,2,7
test 4, 6   =>  4,6,10
test 3, 4, 6   =>  3,4,6

  1. When a footnote is clicked or tapped on it will be highlighted and outlined Wikipedia-style.