# Styleguide for Atticus

This styleguide provides an overview of the different elements available in the article server Atticus and shows how they are styled. The styling is heavily inspired by Tufte CSS.

## Typeface

The article title, headings, and copy uses EB Garamond whereas most of the navigational elements and metadata elements uses Open Sans.

## Section with emphasis

Only one level of sections is supported. Section headings are italicised. To distinguish emphasised text in a section heading, such text is not italicised. Sections are indicated using the level 2 headings in Markdown which is denoted by by prefixing it with two hashes, as in:

## Section with *emphasis*

Links are identified by underlines. This is a well-established convention and is less distracting than the alternative convention of colouring links blue.

## Lists

Both bullet and number lists are possible:

• First item
• Second item
• Third item is a much longer item that will wrap because all the text in it will not fit on a single line.
1. First item
2. Second item
3. Third item
1. First item
2. Second item
3. Third item

## Blockquotes and epigraphs

Blockquotes are used for longer excerpts or quotes. These are distinguished from the main text by indentation. A <footer> may be added to reference the source or similar. For example:

The civilized man is distinguished from the savage by prudence, or, to use a slightly wider term, forethought. He is willing to endure present pains for the sake of future pleasures, even if the future pleasures are rather distant.

Bertrand Russell, A History of Western Philosophy

The markup for the above block quote is:

> The civilized man is distinguished from the savage by
> prudence, or, to use a slightly wider term, forethought.
> He is willing to endure present pains for the sake of
> future pleasures, even if the future pleasures are
> rather distant.
>
> <footer>
>   Bertrand Russell, *A History of Western Philosophy*
> </footer>

To create an epigraph, surround a blockquote with a <div class="epigraph"> tag.

The civilized man is distinguished from the savage by prudence, or, to use a slightly wider term, forethought. He is willing to endure present pains for the sake of future pleasures, even if the future pleasures are rather distant.

Bertrand Russell, A History of Western Philosophy
<div class="epigraph">
> The civilized man is distinguished from the savage by
> *prudence*, or, to use a slightly wider term, forethought.
> He is willing to endure present pains for the sake of
> future pleasures, even if the future pleasures are
> rather distant.
>
> <footer>
>   Bertrand Russell, *A History of Western Philosophy*
> </footer>
</div>

## Notes

Notes11This is an example of a note. It will appear either on the side or inline (hidden by default) depending on the width of the viewport.

are displayed on the side in wide viewports. In narrow viewports the note is displayed inline, but is hidden by default. The note is indicated in the text and in the margin by a number. The note’s visibility can be toggled by clicking the margin indicator. Notes only support a limited number of elements.

## Mathematics

Mathematical typesetting in both blocks and inline is supported using $$\TeX$$ expressions and MathJax.

$f(x) = \int{h(x)\, dx}$

\begin{align*} f(x) &= a x^2+b x +c \\ f'(x) &= 2 a x +b \end{align*}

We can also typeset inline mathematics, like the quadratic formula, $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$.

A mathematical block is written within double dollar signs, $$: $$f(x) = \int{h(x)\, dx}
\begin{align*}
f(x)  &= a x^2+b x +c \\
f'(x) &= 2 a x +b
\end{align*}


An inline mathematical expression is written within single dollar signs, $: ... we can state the quadratic formula,$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$, inline. ## Figures Images need to be added inside explicit <figure> tags. An optional <figcaption> may be included. Images can be made full width by adding the fullwidth class to the <figure> tag. For example: <figure class="fullwidth"> ![Napoleon's March](//upload.wikimedia.org/wikipedia/commons/2/29/Minard.png) <figcaption>Napoleon's *March*</figcaption> </figure> ## Citations Citations are supported using the @IdOfRef, Ericsson, Krampe, and Tesch-Römer (1993), and [see @IdOfRef, pp. 10-12], (see Watson, Crick, and others 1953, 10–12), syntaxes. The reference information must be given in the site-wide BibTeX bibliography file. Its location is not configurable on a per-post basis. When citations are used, references will be added to the end, so adding a References heading at the end of the post is recommended. ## Source code and plain text Preformatted text can be either syntax-highlighted source code or plain text and either inline, like this <footer>, or as a block: {-# LANGUAGE OverloadedStrings #-} {-# LANGUAGE QuasiQuotes #-} module Atticus.View.NotFound ( notFoundView ) where import Prelude hiding (head) import qualified Data.Text as T hiding (head) import Text.Blaze.Html5 (Html, (!)) import qualified Text.Blaze.Html5 as H import qualified Text.Blaze.Html5.Attributes as A import Atticus.View.Head (head) import Atticus.View.Page (page) notFoundView :: T.Text -> Html notFoundView blogTitle = page (head blogTitle "404")$ do
H.div ! A.class_ "frame-A-notfound notfound-C" $do H.h1 ! A.class_ "notfound-A-title notfound-C-title"$ do
H.a "" ! A.class_ "link-C icon-level-up" ! A.href "/"
H.i "" ! A.class_ "notfound-C-icon icon-flash "

Inline text is entered between  and the language is specified like this: <footer>{.html}.

Block text is entered like this:

~~~{.haskell}
~~~`