Extra stylesheet for about page

By Yoo Chung.

Published on 2023-12-21.

This page describes how the extra styles for the about page 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 Clay.Media qualified as Media
import Web.Site.Styles (narrowWidth)
import Prelude hiding (div)

main :: IO ()
main = putCss $ do
  profilePhotoStyle

Profile photograph

This styles the profile photograph on the about page. First, we define which HTML element corresponds to the profile photograph.

profileElement :: Selector
profileElement = img # ".profile-photo"

For all cases, there is a bit of padding around the photograph.

profilePhotoStyle :: Css
profilePhotoStyle = do
  profileElement ? do
    sym padding $ em 1

  wideProfilePhotoStyle
  narrowProfilePhotoStyle

When the width is large enough, the profile photograph will float to the right and have a fixed size.

wideProfilePhotoStyle :: Css
wideProfilePhotoStyle = do
  query Media.all [Media.minWidth narrowWidth] $ do
    profileElement ? do
      display inlineBlock
      float floatRight
      width $ em 8
      height $ em 8

When the width is narrow, the profile photograph will be in its own block and centered.

narrowProfilePhotoStyle :: Css
narrowProfilePhotoStyle = do
  query Media.all [Media.maxWidth narrowWidth] $ do
    profileElement ? do
      display block
      float none
      marginLeft auto
      marginRight auto
      maxWidth $ pct 50
      width $ em 8
      height auto
      "aspect-ratio" -: "auto"

See also