From a660042f142776062366e39e42e5d34bf9c76d31 Mon Sep 17 00:00:00 2001 From: Griffin Smith Date: Fri, 24 Dec 2021 14:38:16 -0500 Subject: feat(grfn/bbbg): Make nav width responsive Change-Id: Ie0cebb48d555aa9ed894d3491d27293838b4ea7e Reviewed-on: https://cl.tvl.fyi/c/depot/+/4586 Reviewed-by: grfn Autosubmit: grfn Tested-by: BuildkiteCI --- users/grfn/bbbg/src/bbbg/styles.clj | 21 +++++++++++++++++++-- 1 file 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" -- cgit 1.4.1