# 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

## Blockquotes and epigraphs

Blockquotes are used for longer excerpts or quotes. These are distinguished from the main text by indentation. 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
{{< blockquote "Bertrand Russell, *A History of Western Philosophy*" >}}
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.
{{< /blockquote >}}

Epigraphs are quotations at the beginning of a post and look like this:

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
{{< epigraph "Bertrand Russell, *A History of Western Philosophy*" >}}
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
{{< /epigraph >}}

## Source code and plain text

Preformatted text can be either a syntax-highlighted source code block or plain text in a block or inline:

{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE QuasiQuotes       #-}

module Atticus.View.NotFound
( notFoundView
) where

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.Page           (page)

notFoundView :: T.Text -> Html
notFoundView blogTitle = page (head blogTitle "404") $do H.div ! A.class_ "frame-A-notfound notfound-C"$ do

## Figures

Images are added using the figure shortcode:

{{< figure src="./minard.png" caption="Napoleon's *March*" >}}

Images can be made full width by adding the fullwidth class:

## Notes

Two kinds of notes are supported: footnotes and sidenotes.

Footnotes1 are displayed at the bottom of the page and written using the built-in markdown support.

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

appear on the side in wide viewports or inline in narrow viewports. When displayed inline, they are 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. Sidenotes only support a limited number of elements. They are added using the sidenote shortcode which takes the name of the user-defined parameters holding the content for the sidenote. For example:

---
...
sidenote-example: "This is an example of a *sidenote*. It will appear either on the side or inline (hidden by default) depending on the width of the viewport."
---

...
This text has a sidenote.{{< sidenote sidenote-example >}}

Footnotes and sidenotes are independently numbered, which can be confusing since both the first footnote and the first sidenote will be numbered “1”. Therefore, you should only use one style of notes per article.

## Icons

Inline icons can be included using the fontawesome shortcode:

{{< fontawesome font-awesome >}} {{< fontawesome github >}}

## References

Reference entries can be added using the ref shortcode, which looks up the reference details in data/bibliography.yaml. There is no shortcode or standard way to write inline references.

K. Anders Ericsson and Robert Pool, Peak: How all of us can achieve extraordinary things (London: Vintage, )

Ericsson, Krampe, Tesch-Römer, "The role of deliberate practice in the acquisition of expert performance" Psychological review (American Psychological Association, )

Paul Graham, Maker's Schedule, Manager's Schedule, http://paulgraham.com/makersschedule.html ()

{{< ref "peak" >}}
{{< ref "deliberate-practice" >}}
{{< ref "makers-managers" >}}

Using the following data/bibliography.yaml:

deliberate-practice:
type: article-journal
author: Ericsson, Krampe, Tesch-Römer
title: The role of deliberate practice in the acquisition of expert performance
publication: Psychological review
year: 1993
publisher: American Psychological Association
url: https://graphics8.nytimes.com/images/blogs/freakonomics/pdf/DeliberatePractice(PsychologicalReview).pdf

peak:
type: book
author: K. Anders Ericsson and Robert Pool
title: Peak
subtitle: How all of us can achieve extraordinary things
year: 2017
publisher: Vintage
location: London
url: http://paulgraham.com/makersschedule.html