Accessible minimal website

serverlet.rkt

#lang racket/base

(require web-server/servlet
         web-server/servlet-env)
 
(define (start req)
  (response/xexpr
   `(html ([lang "en"])
          (meta ([charset "utf-8"]))
          (meta ([name "viewport"]
                 [content "width=device-width, initial-scale=1.0, shrink-to-fit=no"]))
          (head (title "Hello world!")
                (style ([type "text/css"])
                       "@keyframes focus {0% {outline: 1px solid; outline-offset: 1em;} 100% {outline: 6px solid; outline-offset: .10em;}}"
                       "a:focus {outline: 6px solid; outline-offset: .10em; animation: focus .15s}"
                       "html {font-family: Fira Code;}"
                       "body {min-width: 26ch; max-width: 60ch; width: 100%; margin: 0 auto;}"
                       "aside {width: 50%; float: right;}"
                       "aside p {margin: 10px; text-align: right;}"
                       "p {text-align: justify;}"))
          (body (header (h1 "Vegetables & Fruits"))
                (nav (ul
                       (li (a ([href "#vegetables"]) "Vegetables"))
                       (li (a ([href "#fruits"]) "Fruits"))
                       (li (a ([href "#about"]) "About"))))
                (main
                  (article
                    (h2 ([id "vegetables"]) "Vegetables")
                    (p "I love vegetables.")
                    (p "abcdefghijklmnopqrstuvwxyz")
                    (p "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh")
                    (h3 "Especially")
                    (p "Bla bla bla...")
                    (p "Bla bla."))
                  (article
                    (h2 ([id "fruits"]) "Fruits")
                    (p "I also like fruits.")
                    (h3 "Especially")
                    (p "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
                       "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")
                    (aside (p "Note to self: add some content here."))
                    (p "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
                       "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))
                (footer
                  (h2 ([id "about"]) "About us")
                  (p "We like vegetables and fruits")
                  (hr)
                  (p "Copyright Blabla, Inc. All rights reserved."))))))
 
(serve/servlet start)