Templates dir, Put in and shift to a media query template for RWD issues.

src/partials/_a_common.scss

@@ -107,7 +107,7 @@ a {
     font-family: var(--font-family-generic);
 }
 
-@media only screen and (max-width: 500px) {
+@media (max-width: 500px) {
     :root {
         --spacing-large: var(--spacing-small);
     }

src/partials/_a_layouts.scss

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

src/partials/_a_pane.scss

@@ -6,7 +6,7 @@
     margin: var(--spacing-large);
 }
 
-@media only screen and (max-width: 500px) {
+@media (max-width: 500px) {
     .pane {
         width: calc((50% - var(--spacing-small)) * 2);
     }

src/partials/_a_section_list.scss

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

src/partials/_nav_dropdown.scss

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

src/partials/_nav_header.scss

@@ -16,7 +16,7 @@ nav.pane > .nav_header {
     }
 }
 
-@media only screen and (max-width: 500px) {
+@media (max-width: 500px) {
     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 only screen and (max-width: 500px) {
+@media (max-width: 500px) {
     .menu {
         .item {
             padding: var(--padding-mobile);

src/partials/_nav_quick_links.scss

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

src/partials/_page_resume.scss

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

src/partials/_pane_blog.scss

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

src/partials/_pane_error.scss

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

src/partials/_pane_nav.scss

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

templates/device_queries.css

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