feat(grfn/bbbg): Make nav width responsive r/3374

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

1 files changed, 19 insertions, 2 deletions

diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj
index 2ba8d2e20c8a..8b7ffe6bc016 100644
--- a/users/grfn/bbbg/src/bbbg/styles.clj
+++ b/users/grfn/bbbg/src/bbbg/styles.clj
@@ -4,7 +4,9 @@
    [garden.color :as color]
    [garden.compiler :refer [compile-css]]
    [garden.def :refer [defstyles]]
-   [garden.selectors :refer [& active attr= descendant hover visited]]))
+   [garden.selectors :refer [& active attr= descendant hover]]
+   [garden.stylesheet :refer [at-media]]
+   [garden.units :refer [px]]))
 
 (def black "#342e37")
 
@@ -34,6 +36,17 @@
 
 ;;;
 
+(def content-width (px 1600))
+
+(defn not-mobile [& rules]
+  (at-media
+   {:screen true
+    :min-width content-width}
+   [:&
+    rules]))
+
+;;;
+
 (defstyles global-nav
   [:.global-nav
    {:background-color silver}
@@ -41,7 +54,11 @@
    [:>ul
     {:display :flex
      :flex-direction :row
-     :list-style :none}]
+     :list-style :none}
+
+    (not-mobile
+     {:width content-width
+      :margin "0 auto"})]
 
    [:a (descendant :.link-form (attr= "type" "submit"))
     {:padding "1rem 1.5rem"