Extra stylesheet for error pages

By Yoo Chung.

Published on 2023-04-01.

Updated on 2023-12-21.

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

Preamble

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

Errors

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