Use wrapPage everywhere + sticky footer

src/Main.hs

@@ -372,14 +372,7 @@ main = do
 
       -- Main page
       Spock.get root $
-        lucidWithConfig $ do
-          head_ $ do
-            title_ "Aelve Guide"
-            includeCSS "/css.css"
-            renderTracking
-          body_ $ do
-            h1_ "Aelve Guide"
-            h2_ (a_ [href_ "/haskell"] "Haskell")
+        lucidWithConfig $ renderRoot
 
       -- Admin page
       prehook adminHook $ do
@@ -399,7 +392,7 @@ main = do
         Spock.get root $ do
           s <- dbQuery GetGlobalState
           q <- param "q"
-          lucidWithConfig $ renderRoot s q
+          lucidWithConfig $ renderHaskellRoot s q
         -- Category pages
         Spock.get var $ \path -> do
           -- The links look like /parsers-gao238b1 (because it's nice when

src/View.hs

@@ -11,6 +11,7 @@ module View
 (
   -- * Pages
   renderRoot,
+  renderHaskellRoot,
   renderDonate,
   renderCategoryPage,
   renderUnwrittenRules,
@@ -95,10 +96,16 @@ instead of simple
 
 -}
 
-renderRoot
+renderRoot :: (MonadIO m, MonadReader Config m) => HtmlT m ()
+renderRoot = do
+  wrapPage "Aelve Guide" $ do
+    h1_ "Aelve Guide"
+    h2_ (a_ [href_ "/haskell"] "Haskell")
+
+renderHaskellRoot
   :: (MonadIO m, MonadReader Config m)
   => GlobalState -> Maybe Text -> HtmlT m ()
-renderRoot globalState mbSearchQuery =
+renderHaskellRoot globalState mbSearchQuery =
   wrapPage "Aelve Guide" $ do
     -- TODO: [very-easy] this header looks bad when the page is narrow, it
     -- should be fixed in css.css by adding line-height to it
@@ -137,6 +144,23 @@ renderRoot globalState mbSearchQuery =
     -- TODO: maybe add a button like “give me random category that is
     -- unfinished”
 
+renderCategoryPage
+  :: (MonadIO m, MonadReader Config m) => Category -> HtmlT m ()
+renderCategoryPage category =
+  wrapPage (category^.title <> " – Aelve Guide") $ do
+    -- TODO: [very-easy] this header looks bad when the page is narrow, it
+    -- should be fixed in css.css by adding line-height to it
+    -- TODO: another absolute link [absolute-links]
+    h1_ (a_ [href_ "/haskell"] "The Haskeller's guide")
+    noscript_ $ div_ [id_ "noscript-message"] $
+      toHtml $ renderMarkdownBlock [text|
+        You have Javascript disabled! This site works fine without
+        Javascript, but since all editing needs Javascript to work,
+        you won't be able to edit anything.
+        |]
+    renderHelp
+    renderCategory category
+
 -- TODO: when submitting a text field, gray it out (but leave it selectable)
 -- until it's been submitted
 
@@ -151,14 +175,7 @@ renderTracking = do
 -- without internet
 
 renderDonate :: (MonadIO m, MonadReader Config m) => HtmlT m ()
-renderDonate = doctypehtml_ $ do
-  head_ $ do
-    title_ "Donate to Artyom"
-    meta_ [name_ "viewport",
-           content_ "width=device-width, initial-scale=1.0, user-scalable=yes"]
-    includeCSS "/css.css"
-    renderTracking
-  body_ $
+renderDonate = wrapPage "Donate to Artyom" $ do
   toHtmlRaw =<< liftIO (readFile "static/donate.html")
 
 renderUnwrittenRules :: (MonadIO m, MonadReader Config m) => HtmlT m ()
@@ -213,6 +230,7 @@ wrapPage pageTitle page = doctypehtml_ $ do
       |]
 
   body_ $ do
+    div_ [id_ "main"] $
       page
     div_ [id_ "footer"] $ do
       "made by " >> a_ [href_ "https://artyom.me"] "Artyom"
@@ -224,23 +242,6 @@ wrapPage pageTitle page = doctypehtml_ $ do
       a_ [href_ "/donate"] "donate"
       sup_ [style_ "font-size:50%"] "I don't have a job"
 
-renderCategoryPage
-  :: (MonadIO m, MonadReader Config m) => Category -> HtmlT m ()
-renderCategoryPage category =
-  wrapPage (category^.title <> " – Aelve Guide") $ do
-    -- TODO: [very-easy] this header looks bad when the page is narrow, it
-    -- should be fixed in css.css by adding line-height to it
-    -- TODO: another absolute link [absolute-links]
-    h1_ (a_ [href_ "/haskell"] "The Haskeller's guide")
-    noscript_ $ div_ [id_ "noscript-message"] $
-      toHtml $ renderMarkdownBlock [text|
-        You have Javascript disabled! This site works fine without
-        Javascript, but since all editing needs Javascript to work,
-        you won't be able to edit anything.
-        |]
-    renderHelp
-    renderCategory category
-
 -- TODO: allow archiving items if they are in every way worse than the rest,
 -- or something (but searching should still be possible)
 

static/css.css

@@ -1,6 +1,28 @@
+/* Making textboxes and other text inputs behave normally (i.e. now an input
+   with “width:100%;padding:10px” is going to take 100% of width, not
+   100%+20px) */
+
 *, *:before, *:after {
   box-sizing: border-box; }
 
+/* Making the footer stick to the bottom of the screen */
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column; }
+
+#main {
+  flex: 1; }
+
+/* Other CSS */
+
+#footer {
+  text-align: center;
+  padding: 1.5em 0;
+  margin-top: 2em;
+  border-top: 1px solid black; }
+
 body {
   padding-top: 2em;
   margin: auto;
@@ -12,12 +34,6 @@ body {
   padding: 1px 1em;
   background-color: #FFEBEE; }
 
-#footer {
-  text-align: center;
-  padding: 1.5em 0;
-  margin-top: 2em;
-  border-top: 1px solid black; }
-
 #search {
   font-size: 200%;
   border: 1px solid #d0d0d0;

static/donate.html

@@ -1,3 +1,5 @@
+<h1>Donate</h1>
+
 <p>Okay, the rules: if you donate <i>anything</i>, I'll spend some time working on the site this day (adding content, implementing new features, etc). Of course, I'm planning to be working on the site anyway, donations or not! However, I jump from project to project way too often (and rarely manage to finish anything), so donating money is a good way to make sure that I'd feel obligated to keep working on this one. If I find out that it doesn't work as a motivation, I'll stop accepting donations.</p>
 
 <p>Just in case, 1000 rub. is 14$ (or 12.5€), and you can choose any amount below 15000 rub. I'd put a Paypal button, but Paypal doesn't allow receiving money in Belarus.</p>