This page lays out the site-wide styles and how to use them. It’s a form of visual documentation and a reference for how to display visual elements. It also allows easier testing of styles and cross-browser compatibility checks. This page was partially inspired by pages like gRegor Morrill’s style guide and some CSS framework documentation sites.

See the source of main.css for the complete styles. Custom shortcodes and other build customizations are defined in .eleventy.js and the imported files. Includes are defined in the /_includes directory.

CSS Units

Use REM units where reasonable with a base-2 sizing structure based on 4, 8, 16 or

  • Use css custom properties for colors (for theming) and base styles. The most significant styles would be widths and margins that my need to be referenced elsewhere.

Headers

TODO: Describe the primary header and define a secondary heading option for the

Typeography

Currently the site uses the Roboto font but the ultimate goal is to move to primarily system fonts. Headings each have their own size. To allow for flexibility while retaining semantic accuracy, there should be a class to override heading styles.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Body text example: Adventures of Huckleberry Finn

You don’t know about me without you have read a book by the name of The Adventures of Tom Sawyer; but that ain’t no matter. That book was made by Mr. Mark Twain, and he told the truth, mainly. There was things which he stretched, but mainly he told the truth. That is nothing. I never seen anybody but lied one time or another, without it was Aunt Polly, or the widow, or maybe Mary. Aunt Polly–Tom’s Aunt Polly, she is–and Mary, and the Widow Douglas is all told about in that book, which is mostly a true book, with some stretchers, as I said before.

Now the way that the book winds up is this: Tom and me found the money that the robbers hid in the cave, and it made us rich. We got six thousand dollars apiece–all gold. It was an awful sight of money when it was piled up. Well, Judge Thatcher he took it and put it out at interest, and it fetched us a dollar a day apiece all the year round–more than a body could tell what to do with. The Widow Douglas she took me for her son, and allowed she would sivilize me; but it was rough living in the house all the time, considering how dismal regular and decent the widow was in all her ways; and so when I couldn’t stand it no longer I lit out. I got into my old rags and my sugar-hogshead again, and was free and satisfied. But Tom Sawyer he hunted me up and said he was going to start a band of robbers, and I might join if I would go back to the widow and be respectable. So I went back.

Special Text

Text can be strengthened, emphasized, or even made smaller. In markdown quotes in “quoted text” are stylized to highlight the begining vs the end.

Links in paragraph are styled to increase readability and make it clear they are links. This includes different colored text and underlining, though bold text has been considered. Links should ideally contain multiple word for increased readability.

In navigation sections, links aren’t blue, but their linkyness should probably be emphasized with underlining, at least on hover.

Images

image displayed as wide as the text
image displayed to the left of text

There are several ways to display images. Above is shown the wide orientation which goes as wide as the text is allowed.

Floated content is also possible and it will wrap around the floated image. However this can lead to situations where later headings also begin to wrap.

To prevent further text from wraping around the image use a clearfix.

<div style="clear:both;"></div>
image displayed to the right of text
This image is float: right

Captions support markdown syntax but be careful with quotes in alt text. You can use the “stylized” quotes to fixt that. Below is a default width image with a caption. It uses the .post-img--wide class name.

![image displayed to the right of text](
    /assets/img/2020-birding-ca-peregrine.jpg
    "This image is `float: right`"
){.post-img--float .post-img--float-right}
image displayed not full-width on desktop
The Grand Prismatic pool in Yellowstone

Lists

Unordered

  • Item one
  • Item two
    • Subitem A
    • Subitem B
  • Item three

Ordered

  1. Fist item
  2. Second item
    1. Two point one
    2. Two point two
    3. Two point three
      1. Two point three one
  3. Third item

Quotes

Text in a <blockquote>

“Say, who is you? Whar is you? Dog my cats ef I didn’ hear sumf’n. Well, I know what I’s gwyne to do: I’s gwyne to set down here and listen tell I hears it agin.”

—Mark Twain, “Adventures of Huckleberry Finn”

Code Blocks

Currently using highlight.css to style code. Markdown’s inline code references <div>example</div> are not syntax highlighted.

const trimTime = (dateInput) => {
const date = new Date(dateInput); // Parse date in case it is a string
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
};

Sometimes HTML shows up unexpectedly as code blocks due to indenting, sometimes hidden by liquid pre-processing. This can be escaped using a custom removeindents shortcode.


{% removeindents %}
<div>
<p>Accidentally indented</p>
</div>
{% endremoveindents %}

Horizontal Ruler

The following is an <hr> tag which can also be defined in markdown with three dashes (---) on their own line.


These are inspired by Medium’s approach to linking to external content. It shows a preview of the title, text, and featured image which acts as a link.

Blue-throated Motmot

Scarce inhabitant of highland forests in Chiapas and south to Honduras. Found in humid pine and evergreen forest, perching at all levels. Like other motmots, rather inactive a… ebird.org

green bird with bright blue throat and a long skinny tail

{% include "embed-link.html"
title: "Blue-throated Motmot"
url: "https://ebird.org/species/bltmot1/"
description: "Scarce inhabitant of highland forests in Chiapas and south to Honduras. Found in humid pine and evergreen forest, perching at all levels. Like other motmots, rather inactive a…"
img: "/assets/img/embed-thumbnail-blue-throated-motmot.jpg"
alt: "green bird with bright blue throat and a long skinny tail"
%}

Aside

These need to be formalized but they are usefull for calling out the context of an article. So far I’ve added inline styles since I want them to appear in RSS readers.

<aside style="padding: 16px 0;font-size: 1.1em;border-top: medium double #333;border-bottom: medium double #333;margin: 32px;font-style: italic;">
This post is part of a series describing our trip to Italy. To read an overview of our trip and why we went, check out this <a href="/blog/2019/11/27/we-traveled-to-italy/">introductory post</a>.
</aside>

Forms

Forms are designed for one column. Buttons can be used outside of forms, but should ideally only be used for actions (not links).

Here is a form with <fieldset>:

Personal

Account

Must be unique

Preferences

Recipes

TODO: Example shortcodes

Post previews

Posts can be summarized and shown in feed pages or as suggestions below other posts.

Recent articles

Previous

I love sharing life with this beautiful woman. You bring me joy and my life is much more fun with you. And traveling with you reminds of that even more. Thanks for making me feel special and accepting me in all my quirkiness. I’m grateful for every day I get...

    travel Puebla Mexico personal

Next

We are changing foster agencies

It has now been more than six months since our last foster placement. At the beginning of the year, we made the difficult decision to switch foster agencies. After how long it took to get licensed the first time, the prospect of another delay was discouraging. But I feel confident...

    personal foster care

{% include "post-card.html" post: nextPost %}

Different post types appear differently

I’ve added a new type of post to my site. This should open a whole world of possibilities integrating with indieweb.org standards!

    indieweb site changes

Greek Meatballs and Lemon Butter Orzo

We have really liked this recipe from Half Baked Harvest but wanted some more meat so we’ve adjusted the proportions. Ingredients Note: If using fresh oregano, double the amount. Also, the ingredients list is auto-generated and doesn’t merge ingredients that are used multiple times so read the whole list. Summary...

    dinner stove pasta chicken lemon

Pagination

For paginated pages, you can show pagination links at the bottom.


{% include "pagination.html" %}

Footer

TODO: Describe the footer below.