Reposition UI

src/kyleerhabor/hello/ui.clj

@@ -33,12 +33,14 @@
    [:html {:background-color (vari "--background-color")
            :color-scheme "light dark"
            :line-height "1.5"}]
-   [:body {:margin "0.5rem auto"
-           :max-width "min(100% - 1.6rem, 600px)"
+   [:body {
+           ;; :margin "0.5rem auto"
+           ;; :max-width "min(100% - 1.6rem, 600px)"
            :box-sizing "border-box"
+           ;; TODO: Find a better font.
            :font-family ["\"Helvetica Neue\"" "\"Helvetica\"" "\"Arial\"" "sans-serif"]}]
    [:a {:color (vari "--link-color")}]
-   (at-media {:hover "hover"}
+   #_(at-media {:hover "hover"}
      [:a {:text-decoration-line "inherit"}
       [:&:hover {:text-decoration-line "underline"}]])])
 
@@ -55,43 +57,41 @@
        (css default-css-flags
          (conj default-css-rules
            [:body {:display "grid"
-                   ;; The gap is for separating the content and links nicely.
-                   :gap "0.5em"}]
-           ;; Close to, but not exactly bold (else, it looks weird with the h1).
-           [:b {:font-weight "500"}]
-           [:h1 {:font-size "1.6em"
-                 :font-weight "bold"}]
+                   :font-size "1.1em"
+                   :gap "0.75em"
+                   :margin-block-start "45vh"
+                   :margin-inline "4vw"}]
            [:header {:grid-row "1"
-                     :grid-column "2"
-                     :justify-self "end"
-                     :z-index "1"}]
-           [:main {:grid-row "1 / 3"
-                   :grid-column "1 / 3"}]
-           ;; I'm giving the footer its own row so that a page super zoomed in doesn't cause the icons to be overlayed
-           ;; on the text. I'm not doing this for the header to preserve space (and since it would require a page even
-           ;; more zoomed in to occur).
-           [:footer {:grid-row "3"
-                     :grid-column "2"
-                     :justify-self "end"
-                     :align-self "end"}
-            [:a {:color "inherit"}]]
+                     :grid-column "2"}]
+           [:main {:grid-row "1"
+                   :grid-column "1"}]
+           [:footer {:grid-row "2"
+                     :grid-column "1"}]
+           [:h1 {:margin-block-end "0.25em"
+                 :font-size "1.2em"
+                 :font-weight "bold"}]
+           [:p {:margin-block-end "0.25em"}]
            [:#navigation (merge flex no-list-style-type
                            {:font-size "1.075em"
                             :font-variant-caps "all-small-caps"
                             :font-weight "550"
                             :gap "0.35em"})]
            [:#links (merge flex no-list-style-type
-                      {:gap "0.3125em"})]
+                      {:gap "0.3125em"})
+            [:a {:color "inherit"}]]
            [:#discord (merge flex
                         {:gap "0.25em"})]
-           [(s/+ :#discord-checkbox :div) {:display "none"
-                                           }]
+           ;; [:#discord-icon (s/hover) {:display "block"}]
+           [[:#discord-icon (s/hover)]  {:display "block"}]
+           [(s/+ :#discord-checkbox :div) {:display "none"}]
            ["#discord-checkbox:checked + *" {:display "block"}])))]]
    [:body
     [:header
      [:nav
-      ;; TODO: Add a link to the writings page (when it's implemented).
-      [:ul {:id "navigation"}]]]
+      [:ul {:id "navigation"}
+       #_[:li
+          [:a {:href "/writings"}
+           "Writings"]]]]]
     [:main
      [:h1
       "Hello!"]
@@ -104,7 +104,7 @@
     [:footer
      [:address
       ;; On Safari, this has to be rem (as opposed to em) for the icons to scale with the zoom level.
-      (let [height "1.5rem"]
+      (let [height "1.7rem"]
         [:ul {:id "links"}
          [:li
           [:a {:href (str "mailto:" (::email config))
@@ -122,7 +122,8 @@
            (update icon/anilist 1 assoc :height height)]]
          [:li {:id "discord"}
           [:label {:for "discord-checkbox"}
-           (update icon/discord 1 assoc :height height)]
+           [:span {:id "discord-icon"}
+            (update icon/discord 1 assoc :height height)]]
           [:input {:id "discord-checkbox"
                    :style {:display "none"}
                    :type "checkbox"}]