CSS definitions for the site

This site’s CSS is generated using Clay. This file is the literate Haskell source of the syntax highlighting code, with markdown typesetting and bird tracks for the code, pretty much as you see here. One minor issue is that # can’t be used for headings, as GHC interprets it as a pragma and refuses to parse the file.

{-# LANGUAGE OverloadedStrings #-}

OverloadedStrings is pretty much essential for working with Clay, as Clay expects a Text value rather than a String in every location you’d expect to provide character data.

module Blog.Css (
    syntax
) where

import Clay
import Prelude hiding ((**), span)

Because Clay’s Selectors are monoids, they can be `mappend`ed together. I prefer the <> alias, because what’s Haskell without a bunch of line noise scattered randomly throughout?

codeBackground, codeBorder :: Color
codeBackground = "#eeeeee"
codeBorder     = "#dddddd"

syntax :: Css
syntax = do

    ".sourceCode" ** pre ? do
        fontFamily      ["SauceCodePro Nerd Font Mono"] [monospace]
        border          solid (px 1) codeBorder
        background      codeBackground
    ".sourceCode" ** code ?
        fontFamily      ["SauceCodePro Nerd Font Mono"] [monospace]

    td # ".lineNumbers" ? do
        borderRight     solid (px 1) "#aaaaaa"
        textAlign       $ alignSide sideRight
        color           "#aaaaaa"
        paddingRight    $ px 5
        paddingLeft     $ px 5
    td # ".sourceCode" ? paddingLeft (px 5)

Pandoc’s line numbering is good, in that it produces a table of two cells. This lets a user copy and paste code without the line numbers. Anyway, I like the look of it. I’m not sure how to line number literate Haskell, though.

    code#".sourceCode" |> span ? do
        width           $ pct 100
    code#".sourceCode" ** ".opcodes" ? do
        float           $ floatRight
        opacity         $ 0.7
        "user-select"   -: "none"

To accommodate assembed data output in Z80 assembly listings the width of the line spans is set to 100%, and the assembled data is floated right.