First commit

Lab 6/cards.css

@@ -0,0 +1,100 @@
+/* Use this file to control the layout of cards (articles) within the
+ * main region of the page. */
+
+/* TODO: Map the articles to grid areas */
+main > h2 {
+  grid-area: heading;
+}
+main > article:nth-of-type(1) {
+  grid-area: article1;
+}
+main > article:nth-of-type(2) {
+  grid-area: article2;
+}
+main > article:nth-of-type(3) {
+  grid-area: article3;
+}
+main > article:nth-of-type(4) {
+  grid-area: article4;
+}
+main > article:nth-of-type(5) {
+  grid-area: article5;
+}
+main > article:nth-of-type(6) {
+  grid-area: article6;
+}
+
+/* TODO: Make the main element into a grid to hold the cards */
+main {
+  display: grid;
+}
+
+/* TODO: Tiny and small layouts:
+ * All articles in a vertical column using grid-template-areas with
+ * the main h2 title at the top. */
+
+@media (max-width: 699px) {
+  main {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "article1"
+      "article2"
+      "article3"
+      "article4"
+      "article5"
+      "article6";
+  }
+}
+
+/* TODO: Medium layouts:
+ * Article cards are displayed 2 per row (articles 1 and 2 in the top row,
+ * 3 and 4 in the second, 5 and 6 in the third). Use 1vh for row gaps and
+ * 2vw for column gaps. Both columns should have the same width. Again,
+ * place the main h2 title at the top. */
+@media (min-width: 700px) {
+  main {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "heading heading"
+      "article1 article2"
+      "article3 article4"
+      "article5 article6";
+  }
+}
+
+/* TODO: Large layouts:
+ * Article cards are now in 3 equal-width columns with the main h2 title
+ * at the top. */
+@media (min-width: 1000px) {
+  main {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas:
+      "heading  heading  heading"
+      "article1 article2 article3"
+      "article4 article5 article6";
+  }
+}
+
+@media print {
+  main {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  article h3,
+  p {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  main > h2 {
+    display: none;
+  }
+}
+
+/* TODO: Print formatting:
+ * Make the main content into a flex-box with the articles
+ * in a column with space between the items vertically. Get rid
+ * of the vertical padding on the p and h3 elements inside
+ * the articles (keeping 1vw padding on the sides).
+ * Remove the main h2 title from the display. */