First commit

Lab 6/layout.css

@@ -0,0 +1,107 @@
+/* Map the semantic elements to grid area names: */
+
+header {
+  grid-area: header;
+}
+main {
+  grid-area: content;
+}
+nav {
+  grid-area: nav;
+}
+#side {
+  grid-area: sidebar;
+}
+#ad {
+  grid-area: ad;
+}
+footer {
+  grid-area: footer;
+}
+
+/* Set default values for the body and list  */
+body {
+  display: grid;
+  gap: 20px;
+}
+
+nav ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  list-style: none;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+/* (Default) Tiny screen */
+@media (max-width: 499px) {
+  body {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "nav"
+      "content"
+      "footer";
+  }
+  #ad,
+  #side {
+    display: none;
+  }
+}
+/* (Default) Tiny screen */
+
+/* Small screen */
+@media (min-width: 500px) {
+  body {
+    padding-right: 2vw;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+}
+/* Small screen */
+
+/* Medium & Large screens */
+@media (min-width: 700px) {
+  body {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer";
+  }
+  nav ul {
+    flex-direction: column;
+    align-items: center;
+  }
+  nav ul > li {
+    margin-bottom: 3vh;
+  }
+}
+
+@media print {
+  body {
+    grid-template-columns: 1fr 9fr;
+    grid-template-areas:
+      "header header"
+      ". content"
+      "footer footer";
+  }
+  nav,
+  #side,
+  #ad {
+    display: none;
+  }
+}
+
+/* TODO: Print formatting:
+ * Make two columns with the right taking up 90% width.
+ * The header and footer span both columns at the top and
+ * bottom, respectively. The main content is only in the
+ * right. Do not show the #side, #ad, or nav bar.
+ */