600px mobile, Clean up current media queries, introduce intermediary device layout.

src/partials/_a_common.scss

@@ -70,15 +70,11 @@
 }
 
 body {
+    display: grid;
     background-color: var(--background-0);
 
     // Adds a margin otherwise for some reason.
     margin: 0;
-
-    display: grid;
-    grid-auto-flow: column dense;
-    grid-template-columns: min-content 1fr min-content;
-    grid-template-areas: "nav main spacer";
 }
 
 * {
@@ -107,13 +103,13 @@ a {
     font-family: var(--font-family-generic);
 }
 
-@media (max-width: 500px) {
+// Mobile
+@media (max-width: 600px) {
     :root {
         --spacing-large: var(--spacing-small);
     }
 
     body {
-        grid-auto-flow: row;
         grid-template-columns: none;
         grid-template-areas: "nav" "main" "spacer";
 
@@ -130,3 +126,19 @@ a {
         right: auto;
     }
 }
+
+// Tablets and Intermediary
+@media (min-width: 601px) and (max-width: 1023px) {
+    body {
+        grid-template-columns: min-content 1fr;
+        grid-template-areas: "nav main" "spacer main";
+    }
+}
+
+// Desktops and Laptops
+@media (min-width: 1024px) {
+    body {
+        grid-template-columns: min-content 1fr min-content;
+        grid-template-areas: "nav main spacer";
+    }
+}

src/partials/_a_layouts.scss

@@ -19,7 +19,7 @@
     margin-top: var(--spacing-small);
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .layout_row {
         grid-auto-flow: row;
     }

src/partials/_a_pane.scss

@@ -6,16 +6,18 @@
     margin: var(--spacing-large);
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .pane {
         width: calc((50% - var(--spacing-small)) * 2);
     }
 }
 
-nav.pane,
+@media (min-width: 601px) {
-.pane.spacer {
+    nav.pane,
-    gap: var(--spacing-medium);
+    .pane.spacer {
+        gap: var(--spacing-medium);
 
-    position: sticky;
+        position: sticky;
-    top: var(--spacing-large);
+        top: var(--spacing-large);
+    }
 }

src/partials/_a_section_list.scss

@@ -75,7 +75,7 @@
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .section_list section {
         > header {
             column-gap: var(--spacing-small);

src/partials/_nav_dropdown.scss

@@ -22,7 +22,7 @@
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .dropdown {
         > label.item > ion-icon {
             margin-right: var(--padding-mobile);

src/partials/_nav_header.scss

@@ -16,7 +16,7 @@ nav.pane > .nav_header {
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     nav.pane > .nav_header {
         grid-template-columns: min-content 1fr min-content;
         grid-template-areas: "logo blank hamburger";

src/partials/_nav_menu.scss

@@ -45,7 +45,7 @@ nav .menu {
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .menu {
         .item {
             padding: var(--padding-mobile);

src/partials/_nav_quick_links.scss

@@ -35,7 +35,7 @@ nav.pane .quick_links {
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     nav.pane .quick_links {
         margin-bottom: var(--spacing-small);
 

src/partials/_nav_title.scss

@@ -13,7 +13,7 @@
     display: block;
 }
 
-@media only screen and (max-width: 500px) {
+@media (max-width: 600px) {
     .nav_title {
         padding: var(--padding-mobile);
     }

src/partials/_page_resume.scss

@@ -34,7 +34,7 @@
     grid-template-columns: 60% auto;
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .awards,
     .certifications,
     .education,

src/partials/_pane_blog.scss

@@ -27,7 +27,7 @@
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .pane.blog .body > .body {
         padding: var(--spacing-small);
     }

src/partials/_pane_error.scss

@@ -5,7 +5,7 @@
     text-align: center;
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .pane.error {
         margin-top: var(--spacing-large);
         margin-bottom: var(--spacing-large);

src/partials/_pane_nav.scss

@@ -24,7 +24,7 @@ nav.pane {
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     nav.pane {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);

templates/device_queries.css

@@ -1,9 +1,9 @@
 /* Mobile Phone */
-@media (max-width: 500px) {
+@media (max-width: 600px) {
 }
 
 /* Tablets and other weird intermediary stuff. */
-@media (min-width: 501px) and (max-width: 1023) {
+@media (min-width: 601px) and (max-width: 1023) {
 }
 
 /* Desktops and Laptops */