body.theme-loaded custom-cursor-enabled
            header.site-header shrig-hand
              div.theming
              div.site-header__contents
              nav.main-nav
            main
              div.sprig-component
                div.container
                div.filter 
                div.container container--lg grid grid-align-centre

                  < !-- BEGIN .post-item -->
                  a.card col-12 col-sm-6 col-md-4 card--tooltip-on
                    img
                  < !-- END .post-item -->

                div.container container--lg
            footer.site-footer container
            div.lightboxOverlay
            div.lightbox
              div.lb-outerContainer
              div.lb-dataContainer
          

David Shrigley

The body.theme-loaded custom-cursor-enabled loads the theme (background color and fonts), and changes the user's cursor to the 'Shrigley' hand. The entire page it highlighted when I hover on this element.

header.site-header shrig-hand holds all the contents in the header. This includes Shrigley's name at the top and all the navigation buttons for social media and homepage.

Within main, there are containers telling how each post should be displayed and aligned on the page in a grid format. The img is placed inside the link ( a ) in order to lead the user to a seperate page about the work when clicked.

Inside the footer.site-footer container there are 'lightboxes' which I could not figure out the purpose for on the site itself. However, upon further research, it is a window overlay that covers some of the page's content. Often used for the header or footer so the scrolling content disappears underneath.