Add layout styles

2 files changed, 41 insertions, 1 deletions

diff --git a/styles/base/_base.scss b/styles/base/_base.scss
index 3dd8512..8807989 100644
--- a/styles/base/_base.scss
+++ b/styles/base/_base.scss
@@ -59,7 +59,7 @@ button:hover {
 }
 
 .footer {
-  display: none;
+  // display: none;
 
   @media screen and (max-width: $tablet) {
     display: block;
diff --git a/styles/base/_layout.scss b/styles/base/_layout.scss
new file mode 100644
index 0000000..6a43466
--- /dev/null
+++ b/styles/base/_layout.scss
@@ -0,0 +1,40 @@
+.wrapper {
+  display: grid;
+  grid-gap: $space-normal;
+
+  // @media screen and (max-width: $phone) {
+  //   grid-template-rows: $header-height 1fr auto $footer-height;
+  //   grid-template-areas:
+  //     "header"
+  //     "main"
+  //     "sidebar"
+  //     "footer";
+  // }
+
+  @media screen and (min-width: $phone) {
+    grid-template-columns: 320px 1fr;
+    grid-template-areas:
+      "header main"
+      "header footer";
+  }
+}
+
+.header {
+  grid-area: main;
+}
+
+.main {
+  grid-area: main;
+}
+
+.footer {
+  grid-area: footer;
+}
+
+.content {
+  grid-area: content;
+}
+
+.sidebar {
+  grid-area: sidebar;
+}