Extra stylesheet for error pages

This page describes how the extra styles for error pages on this site are generated.


As usual, we start with defining the main module, module imports, and writing the CSS stylesheet to standard output.

module Main (main) where

import Clay
import Prelude hiding (div)

main :: IO ()
main = putCss errorStyle


The extra styling for error pages is basically to make a big letter class, so that single characters can be used like a big image all by itself. It makes error pages such as a 404 status page a little less boring than just having a single sentence explaining the error.

errorStyle :: Css
errorStyle = do
  div # ".letter-image" ? do
    fontSize $ em 20
    maxWidth $ pct 90
    maxHeight $ vh 70

See also