Mobile css

duncanjbrown · Aug 7, 2023 · 20e391d · 20e391d
1 parent 6b1950c
commit 20e391d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 22 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -1,5 +1,5 @@
 html {
-  font-family: sans-serif
+  font-family: sans-serif;
 }
 
 .card-container {
@@ -66,7 +66,7 @@ html {
 }
 
 .card svg {
-  width:100%;
+  width: 100%;
   height: 33%;
 }
 
@@ -80,14 +80,46 @@ html {
   display: grid;
   grid-template-columns: 0.6fr 4fr; /* Adjust the ratio as needed */
   grid-gap: 20px; /* Adjust the gap between columns as needed */
+  place-items: center;
+  grid-template-areas: "left right";
+  align-items: start;
 }
 
 .grid .left {
-  border-right: 1px solid #e1e1e1;
+  grid-area: left;
   padding-right: 10px;
   width: 180px;
 }
 
+.grid .right {
+  grid-area: right;
+}
+
+@media (max-width: 1000px) {
+  h1 { display: none }
+    .grid {
+        grid-template-columns: 1fr; /* one column, full width */
+        grid-template-areas:
+            "right"
+            "left";
+    }
+
+    .grid.right {
+      width:100%;
+      }
+}
+
+.container {
+  max-width: 908px;
+  margin: 0 auto;
+}
+
+h1 {
+  border-bottom: 1px solid #e1e1e1;
+  padding-bottom: 10px;
+}
+
+
 button {
   width: 100%;
   margin-bottom: 10px;

diff --git a/src/main/djb/set/ui.cljs b/src/main/djb/set/ui.cljs
@@ -57,24 +57,25 @@
         complete-sets (partial complete-sets sets)
         highlight-toggle (partial highlight-toggle astate)
         card-component (partial card-component astate)]
-    [:div.grid
-     [:div.left
+    [:div.container
       [:h1 "SET"]
-      [:div.debug
-       [complete-sets]
-       [:p (str (count @deck) " cards in deck")]
-       [:div.controls
-        [action-button astate game/deal "Deal"]
-        [action-button astate game/shuffle-cards "Shuffle"]
-        [action-button astate game/deal-up "3 more cards"]
-        [action-button astate #(assoc % :deck (take 3 (:deck %))) "Last 3"]
-        [action-button astate #(game/deal (game/fresh-state game/cards)) "Reset"]
-        [highlight-toggle]]
-       [:p [:a {:href "https://github.com/duncanjbrown/set"} "Source code on GitHub"]]]]
-     [:div.right
-      [:div#set
-       [:svg {:id "svg-defs"} (map graphics/svg-lines [:red :purple :green])]
-       [:div.game
-        [:div.tabletop
-         [:ul.cards (for [card @cards-in-play] ^{:key (:id card)} [card-component card])]]]]]]))
+      [:div.grid
+        [:div.left
+          [:div.debug]
+          [complete-sets]
+          [:p (str (count @deck) " cards in deck")]
+          [:div.controls
+            [action-button astate game/deal "Deal"]
+            [action-button astate game/shuffle-cards "Shuffle"]
+            [action-button astate game/deal-up "3 more cards"]
+            [action-button astate #(assoc % :deck (take 3 (:deck %))) "Last 3"]
+            [action-button astate #(game/deal (game/fresh-state game/cards)) "Reset"]
+            [highlight-toggle]]
+          [:p [:a {:href "https://github.com/duncanjbrown/set"} "Source code on GitHub"]]]
+        [:div.right
+          [:div#set]
+          [:svg {:id "svg-defs"} (map graphics/svg-lines [:red :purple :green])]
+          [:div.game
+            [:div.tabletop]
+            [:ul.cards (for [card @cards-in-play] ^{:key (:id card)} [card-component card])]]]]]))