step1B: add mobile styles

cgood92 · May 30, 2018 · ea1b2c2 · ea1b2c2
1 parent 9498699
commit ea1b2c2
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/src/App.js b/src/App.js
@@ -4,21 +4,41 @@ import Header from "./components/Header";
 import Main from "./components/Main";
 import LeftSidebar from "./components/LeftSidebar";
 import RightSidebar from "./components/RightSidebar";
+import mq from "./util/mq";
 
 const appStyles = css({
   display: "grid",
-  gridTemplateColumns: "200px 1fr 200px",
+  gridTemplateColumns: "100%",
   gridTemplateRows: "auto 1fr",
   gridTemplateAreas: `
+    "header"
+    "main"
+    "sidebarLeft"
+    "sidebarRight"
+  `,
+  ...mq.medium({
+    gridTemplateColumns: "200px 1fr 200px",
+    gridTemplateRows: "auto 1fr",
+    gridTemplateAreas: `
     "header header header"
     "sidebarLeft main sidebarRight"
   `,
+  }),
   minHeight: "100vh",
   "& > header": {
     gridArea: "header",
     position: "sticky",
     top: 0,
   },
+  "& > aside:first-of-type": {
+    gridArea: "sidebarLeft",
+  },
+  "& > aside:last-of-type": {
+    gridArea: "sidebarRight",
+  },
+  "& > main": {
+    gridArea: "main",
+  },
   "& > *": {
     border: "1px solid gray",
   },