[CSS] Initial responsive layout

css/responsive_layout.css

@@ -0,0 +1,122 @@
+html {
+/* The html tag wraps the entire page. */
+    /* Change this value to any color you want */
+    --hilite: #8D3FC5;
+}
+
+/*                    == DEFAULT SITE ==
+ * Below represents basically a single-column stacked website.
+ * It will load on any device that supports CSS. It uses a grid layout, of a
+ * single column stack. This is essentially the mobile version of the site,
+ * hiding the navigation menu into a "hamburger" menu. It will display until the
+ * screen is a specific width, at which point the values will be over-written by
+ * rules further down the page.
+*/ 
+
+body {
+/* Websites have a head and a body.
+ * The head is full of metadata. The body has the visible website data.
+*/
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    grid-template-areas:
+        "head"
+        "main"
+        "foot";
+}
+
+header {
+/* Header                           
+ * Top of the visible website       
+ *                                  
+ * Generally has a logo, contact information, and a navigation menu.
+*/
+    grid-area: head;
+    background-color: blue;
+    border: 2px solid blue;
+}
+
+footer {
+/* Footer
+ * Bottom of the visible website
+ *
+ * Generally has contact info, a site-map, and some maker links.
+*/
+    grid-area: foot;
+    background-color: green;
+    border: 2px solid green;
+}
+
+main {
+/* Main
+ * The main content of the visible website.
+*/
+    grid-area: main;
+    background-color: red;
+    border: 2px solid red;
+}
+
+nav {
+/* Nav
+ * The navigation menu
+ *
+ * Generally included near the header, and often heavily styled for responsivness.
+*/
+}
+
+/*                    == Tablet Landscape ==
+ * This media query will apply on viewports of at least 1024px wide. This
+ * applies generally to tablets in landscape orientation, and screens larger
+ * than it. This is essentially the desktop version of the site.
+*/
+@media only screen and (min-width: 1024px) {
+    .grid{
+        display: grid;
+        grid-template-columns: repeat(9, minmax(0,1fr));
+        grid-template-rows: auto;
+        grid-template-areas:
+            "head head head head head head head head head"
+            "main main main main main main main main main"
+            "foot foot foot foot foot foot foot foot foot"
+    }
+
+    header {}
+    footer {}
+    nav {}
+    main {}
+}
+
+/*                    == Ultrawide ==
+ * This media query is for ultrawide monitors and displays. It is optional,
+ * though can be used to add gutters or modify content sizing to make reading
+ * easier.
+*/
+@media only screen and (min-width: 2048px) {
+    .grid{
+        display: grid;
+        grid-template-columns: repeat(9, minmax(0,1fr));
+        grid-template-rows: auto;
+        grid-template-areas:
+            "head head head head head head head head head"
+            "main main main main main main main main main"
+            "foot foot foot foot foot foot foot foot foot"
+    }
+
+    header {
+      background-color: lightblue;
+      border-color: lightblue;
+    }
+    footer {
+      background-color: lightgreen;
+      border-color: lightgreen;
+    }
+    nav {}
+    main {
+      background-color: orange;
+      border-color: orange;
+    }
+}