diff --git a/src/partials/_a_common.scss b/src/partials/_a_common.scss
index 470ce14..06ae2a7 100644
--- a/src/partials/_a_common.scss
+++ b/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);
     }
diff --git a/src/partials/_a_layouts.scss b/src/partials/_a_layouts.scss
index 83e0857..63b0e2a 100644
--- a/src/partials/_a_layouts.scss
+++ b/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;
     }
diff --git a/src/partials/_a_pane.scss b/src/partials/_a_pane.scss
index 4809f74..7110e5e 100644
--- a/src/partials/_a_pane.scss
+++ b/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);
     }
diff --git a/src/partials/_a_section_list.scss b/src/partials/_a_section_list.scss
index 576bb7b..5859985 100644
--- a/src/partials/_a_section_list.scss
+++ b/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);
diff --git a/src/partials/_nav_dropdown.scss b/src/partials/_nav_dropdown.scss
index 9221280..eb3f9e9 100644
--- a/src/partials/_nav_dropdown.scss
+++ b/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);
     }
diff --git a/src/partials/_nav_header.scss b/src/partials/_nav_header.scss
index a2a09f1..735fc02 100644
--- a/src/partials/_nav_header.scss
+++ b/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";
diff --git a/src/partials/_nav_menu.scss b/src/partials/_nav_menu.scss
index 0c85aa5..bcc3ef1 100644
--- a/src/partials/_nav_menu.scss
+++ b/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);
diff --git a/src/partials/_nav_quick_links.scss b/src/partials/_nav_quick_links.scss
index 3b617b2..f2e5ef0 100644
--- a/src/partials/_nav_quick_links.scss
+++ b/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);
 
diff --git a/src/partials/_page_resume.scss b/src/partials/_page_resume.scss
index 3370a8d..0868096 100644
--- a/src/partials/_page_resume.scss
+++ b/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,
diff --git a/src/partials/_pane_blog.scss b/src/partials/_pane_blog.scss
index efb8720..2070ced 100644
--- a/src/partials/_pane_blog.scss
+++ b/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);
     }
diff --git a/src/partials/_pane_error.scss b/src/partials/_pane_error.scss
index aaba62f..3eb94a3 100644
--- a/src/partials/_pane_error.scss
+++ b/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);
diff --git a/src/partials/_pane_nav.scss b/src/partials/_pane_nav.scss
index 7ce76f5..d00d0d6 100644
--- a/src/partials/_pane_nav.scss
+++ b/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);
diff --git a/colour_theme.svg b/templates/colour_theme.svg
similarity index 100%
rename from colour_theme.svg
rename to templates/colour_theme.svg
diff --git a/templates/device_queries.css b/templates/device_queries.css
new file mode 100644
index 0000000..5b02d44
--- /dev/null
+++ b/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) {
+}