feat(grfn/bbbg): Begin styles r/3361

Start working on styles for the app, beginning with a global
stylesheet/reset and styles for the nav.

Change-Id: Ie15e549d7bb4e0116582f4099752aa2503eb9ce7
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4583
Reviewed-by: grfn <grfn@gws.fyi>
Autosubmit: grfn <grfn@gws.fyi>
Tested-by: BuildkiteCI

3 files changed, 104 insertions, 19 deletions

diff --git a/users/grfn/bbbg/src/bbbg/handlers/core.clj b/users/grfn/bbbg/src/bbbg/handlers/core.clj
index d8359bc1881c..4bb7cf629035 100644
--- a/users/grfn/bbbg/src/bbbg/handlers/core.clj
+++ b/users/grfn/bbbg/src/bbbg/handlers/core.clj
@@ -23,18 +23,21 @@
 (defn global-nav []
   [:nav.global-nav
    [:ul
+    [:li [:a {:href "/events"}
+          "Events"]]
     (when *authenticated?*
       [:li [:a {:href "/attendees"}
             "Attendees"]])
-    [:li [:a {:href "/events"}
-          "Events"]]
-    (if *authenticated?*
-      [:li [:form {:method :post
-                   :action "/auth/sign-out"}
-            [:input {:type "submit"
-                     :value "Sign Out"}]]]
-      [:li [:a {:href "/auth/discord"}
-            "Sign In"]])]])
+    [:li.spacer]
+    [:li
+     (if *authenticated?*
+       [:form.link-form
+        {:method :post
+         :action "/auth/sign-out"}
+        [:input {:type "submit"
+                 :value "Sign Out"}]]
+       [:a {:href "/auth/discord"}
+        "Sign In"])]]])
 
 (defn render-page [opts & body]
   (let [[{:keys [title]} body]
diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj
index 07ed87ba1a40..8e39f5c0e628 100644
--- a/users/grfn/bbbg/src/bbbg/styles.clj
+++ b/users/grfn/bbbg/src/bbbg/styles.clj
@@ -1,9 +1,88 @@
+;; -*- eval: (rainbow-mode) -*-
 (ns bbbg.styles
-  (:require [garden.def :refer [defstyles]]
-            [garden.compiler :refer [compile-css]]))
+  (:require
+   [garden.compiler :refer [compile-css]]
+   [garden.def :refer [defstyles]]
+   [garden.selectors :refer [attr= visited hover active & descendant]]))
+
+(def black "#342e37")
+
+(def silver "#f9fafb")
+
+(def gray "#aaa")
+
+(def gray-light "#ddd")
+
+(def purple "#837aff")
+
+(def red "#c42348")
+
+(def orange "#fa824c")
+
+(def yellow "#FACB0F")
+
+(def blue "#026fb1")
+
+(def green "#BEEF9E")
+
+(def contextual
+  {:success green
+   :info blue
+   :warning yellow
+   :error red})
+
+;;;
+
+(defstyles global-nav
+  [:.global-nav
+   {:background-color silver}
+
+   [:>ul
+    {:display :flex
+     :flex-direction :row
+     :list-style :none}]
+
+   [:a (descendant :.link-form (attr= "type" "submit"))
+    {:padding "1rem 1.5rem"
+     :display :block
+     :color black
+     :text-decoration :none}
+
+     [(& hover)
+      {:color blue}]]
+
+   [:.spacer
+    {:flex 1}]])
+
+(def link-conditional-styles
+  (list
+   [(& hover) (& active)
+    {:text-decoration :underline}]
+   [(& active)
+    {:color purple}]))
+
+(defstyles link-form
+  [:form.link-form
+   {:margin 0}
+   [(attr= "type" "submit")
+    {:background "none"
+     :border "none"
+     :padding 0
+     :color blue
+     :text-decoration :none
+     :cursor :pointer}
+    link-conditional-styles]])
 
 (defstyles styles
-  )
+  global-nav
+  link-form
+
+  [:body
+   {:color black}]
+
+  [:a {:color blue
+       :text-decoration :none}
+   link-conditional-styles])
 
 (def stylesheet
   (compile-css styles))
diff --git a/users/grfn/bbbg/src/bbbg/web.clj b/users/grfn/bbbg/src/bbbg/web.clj
index c9d0fd0d4406..bb47efbdadbe 100644
--- a/users/grfn/bbbg/src/bbbg/web.clj
+++ b/users/grfn/bbbg/src/bbbg/web.clj
@@ -20,9 +20,11 @@
    [ring.middleware.keyword-params :refer [wrap-keyword-params]]
    [ring.middleware.multipart-params :refer [wrap-multipart-params]]
    [ring.middleware.params :refer [wrap-params]]
+   [ring.middleware.resource :refer [wrap-resource]]
    [ring.middleware.session :refer [wrap-session]]
    [ring.middleware.session.cookie :refer [cookie-store]]
-   [ring.util.response :refer [content-type resource-response response]])
+   [ring.util.response :refer [content-type resource-response response]]
+   [clojure.java.io :as io])
   (:import
    java.util.Base64))
 
@@ -70,13 +72,13 @@
 (defn app-routes [env]
   (routes
    (GET "/main.css" []
-     (-> (response stylesheet)
+     (-> (response
+          (str
+           "\n/* begin base.css */\n"
+           (slurp (io/resource "base.css"))
+           "\n/* end base.css */\n"
+           stylesheet))
          (content-type "text/css")))
-   (GET "/main.js" []
-     (-> (resource-response "main.js")
-         (content-type "text/javascript")))
-   (GET "/robots.txt" []
-     (resource-response "robots.txt"))
 
    (attendees/attendees-routes env)
    (attendee-checks/attendee-checks-routes env)
@@ -86,6 +88,7 @@
 
 (defn middleware [app env]
   (-> app
+      (wrap-resource "public")
       wrap-dynamic-auth
       (wrap-discord-auth env)
       wrap-keyword-params