Skip to Content

Oats

Introduction

Oats is a simple and neutral CSS theme created by emsenn.

License and Editorial Information

This document and the source code it contains are released under the MIT License and maintained at https://git.sr.ht/~emsenn/oats.

Table of Contents

Design Philosophy

The Oats theme is based on my own Brutstrap, which claims to style content as it’s constructed.

However, Brutstrap is catered toward a rather stark aesthetic, to make it more readily match the brutalism advocated by David Bryant Copeland.

Oats tries to be a little softer and more friendly. While nothing about the stylesheet contradicts the brutalist priciples Copeland provides, it does a little more styling than is strictly necessary.

CSS Rules

All of Oats CSS lives in a single style-sheet, oats.css.

Base Rules

The theme’s base rules are those that go with HTML tags directly.

HTML Tag Rules

Document-wide settings, including those relevant to font-styling, are declared in the html rule.

html {
  color: #444;
  background-color: #eee;

These colors are the lowest-contrast, three-digit hex codes that still pass WCAG2 AAA.

hyphens: auto;
font-family: sans-serif;
letter-spacing: .03em;
word-spacing: .05em;
line-height: 1.4;
font-size: 1.3rem;

Adding some spacing between letters and words helps make the document feel a little more “friendly,” and makes it a little safer to use more distinctive fonts in your body text.

  transition-timing-function: ease-in;
  animation-timing-function: ease-in;
}

These animation timings are used by the link styling rules.

Body Tag Rules

body {
  width: 70vw;
  max-width: 40rem;
  margin: 0 auto;

}

Main Tag Rules

main {
  padding: 0 2em 2em;
}

Headline Tag Rules

H1 Tag Rules
h1 {
  font-weight: normal;
  font-size: 2.4em;
  text-shadow: 0 .05em .03em rgba(68,68,68,.3);
  margin: 0;
}
H2 through H6 Tag Rules
h2,h3,h4,h5,h6 {
  text-align: center;
  text-shadow: 0 .1em .03em rgba(68,68,68,.3);
}

a {
  color: #222;
  text-decoration: underline dotted rgba(68,68,68,.6);
  text-shadow: 0 .1em .01em rgba(68,68,68,.2);
}
a:visited {
  color: #444;
}
a:hover {
  outline-style: none;
  text-decoration: underline solid;
  animation-delay: 0.3s;
  animation: animation-pulse 0.8s infinite;
}
a:focus {
  outline-style: none;
  text-decoration: underline solid;
  animation-delay: 0.3s;
  animation: animation-pulse-heavy 1.2s infinite;
}

Partials Rules

Skip-to-Content Rules

.skipToContentLink {
  opacity: 0;
  position: absolute;
}
.skipToContentLink:focus{
  opacity:1
}

State Rules

Selection Rules

::selection {
  color: #222;
  background-color: #777;
}

Animation Rules

@keyframes animation-pulse {
  from, 50%,
  to { background-color: rgba(68,68,68,.2)); }
  50% { background-color: rgba(68,68,68,.1); }
}
@keyframes animation-pulse-heavy {
  from, 50%,
  to {
    background-color: rgba(68,68,68,.3));
  }
  50% { background-color: rgba(68,68,68,.2); }
}

Demonstration HTML Document

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link href="https://gmpg.org/xfn/11" rel="profile">
    <meta charset="UTF-8">
    <meta name="description" content="Oats is a simple and neutral CSS theme.">
    <meta name="keywords" content="oats, css, theme">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./oats.css">
    <title>Oats</title>
  </head>
  <body>
    <a class="skipToContentLink" href="#content">Skip to Content</a>
    <header>
      <h1>Oats</h1>
    </header>
    <main id="content">
      <p>
	Oats is a simple and neutral CSS theme.
      </p>
      <section id="features">
	<h2>Features</h2>
	<ul>
	  <li>
	    <strong>Very little,</strong> honestly.
	  </li>
	</ul>
      </section>
    </main>
  </body>
</html>