From 7bcfa5bfcc168a9b3f7dd3728889eaa38dcd6330 Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Fri, 29 Sep 2023 16:00:23 -0600 Subject: [PATCH 1/2] update nav to not be centered --- src/com/spicy/ui.clj | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/com/spicy/ui.clj b/src/com/spicy/ui.clj index 15acfd9..53cd918 100644 --- a/src/com/spicy/ui.clj +++ b/src/com/spicy/ui.clj @@ -67,11 +67,12 @@ ctx [:.relative.h-full.p-4 [:div {:class "absolute h-full -z-10 overflow-visible inset-0 bg-[url(/img/grid.svg)] bg-center "}] - [:.p-3.mx-auto.max-w-screen-xl.w-full.flex.flex-col.sm:flex-row.gap-4.sm:justify-between.items-center.flex-wrap.space-y-2.justify-center + [:.pt-3.pb-8.mx-auto.max-w-screen-xl.w-full.flex.sm:flex-row.gap-4.justify-between.items-center.flex-wrap.space-y-2.justify-center [:a.flex.items-center.gap-2.cursor-pointer {:href "/"} - [:img {:src "/img/spicywod-logo.png" :width 70 :height 70 :alt "spicy pepper"}] - [:div {:class "font-display text-5xl w-[140px]"} "Spicy WOD"]] + [:img {:class "hidden sm:block" :src "/img/spicywod-logo.png" :width 70 :height 70 :alt "spicy pepper"}] + [:img {:class "block sm:hidden" :src "/img/spicywod-logo.png" :width 50 :height 50 :alt "spicy pepper"}] + [:div {:class "font-display text-2xl sm:text-5xl w-[120px]"} "Spicy WOD"]] [:nav [:div {:class (str "relative text-left block sm:hidden ") :x-data "{ open: false }"} [:div @@ -84,7 +85,7 @@ :x-on:click.outside "open = false"} [:span.sr-only "Open options"] "Menu"]] - [:div {:class (str "absolute -right-16 z-10 mt-2 w-56 origin-top-right bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ") + [:div {:class (str "absolute right-0 z-10 mt-2 w-56 origin-top-right bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ") :role "menu" :aria-orientation "vertical" :aria-labelledby "menu-button" From f07b9d45a71b22b4737e035ffff420b102101225 Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Fri, 29 Sep 2023 16:11:25 -0600 Subject: [PATCH 2/2] full width mobile panels --- src/com/spicy/ui.clj | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/com/spicy/ui.clj b/src/com/spicy/ui.clj index 53cd918..34bf58b 100644 --- a/src/com/spicy/ui.clj +++ b/src/com/spicy/ui.clj @@ -60,14 +60,13 @@ :tabindex "-1" :id "menu-item-0"}) children])) - (defn page [{:keys [session reitit.core/match] :as ctx} & body] (base ctx - [:.relative.h-full.p-4 + [:.relative.h-full.sm:p-4 [:div {:class "absolute h-full -z-10 overflow-visible inset-0 bg-[url(/img/grid.svg)] bg-center "}] - [:.pt-3.pb-8.mx-auto.max-w-screen-xl.w-full.flex.sm:flex-row.gap-4.justify-between.items-center.flex-wrap.space-y-2.justify-center + [:.pt-3.px-4.pb-8.mx-auto.max-w-screen-xl.w-full.flex.sm:flex-row.gap-4.justify-between.items-center.flex-wrap.space-y-2.justify-center [:a.flex.items-center.gap-2.cursor-pointer {:href "/"} [:img {:class "hidden sm:block" :src "/img/spicywod-logo.png" :width 70 :height 70 :alt "spicy pepper"}] @@ -136,7 +135,7 @@ [ctx & body] (base ctx - [:.relative.h-full.px-4.pt-8 + [:.relative.h-full.sm:px-4.pt-8 [:div {:class "absolute bg-brand-background h-full -z-10 overflow-visible inset-0 bg-[url(/img/grid.svg)] bg-center "}] [:.p-3.mx-auto.max-w-screen-xl.w-full.flex.flex-col.sm:flex-row.gap-4.items-center.flex-wrap.space-y-2.justify-center [:a.flex.items-center.gap-2.cursor-pointer @@ -153,7 +152,7 @@ (defn panel [& children] - [:div {:class (str "bg-brand-background md:p-12 p-4 border-2 border-black " + [:div {:class (str "bg-brand-background md:p-12 p-4 border-b-2 border-t-2 sm:border-2 border-black " " " "flex flex-col item-center ")} children])