Use :hover or <input> toggle for dropdowns based on client query.

Resolves #55
Fixes #56

src/partials/_nav_dropdown.scss

@@ -20,33 +20,43 @@
         padding: 0 var(--spacing-small);
         list-style: none;
     }
+}
 
-    > input:checked + label {
-        color: var(--highlight-hover);
+@media (max-width: 500px) {
+    .dropdown {
+        > label.item > ion-icon {
+            margin-right: var(--padding-mobile);
+        }
+    }
+}
 
-        + ul {
+// Use a toggle for menu entries on mobile and intermediary devices.
+@media (max-width: 1023px) {
+    .dropdown {
+        > input:checked + label {
+            color: var(--highlight-hover);
+
+            + ul {
+                display: grid;
+            }
+        }
+    }
+}
+
+// Use a hover state for menu entries on large screens.
+@media (min-width: 1024px) {
+    .dropdown:hover {
+        > label.item {
+            transform: var(--transform-scale-x);
+
+            > ion-icon {
+                rotate: 90deg;
+                transition-duration: 0.25s;
+            }
+        }
+
+        > ul {
             display: grid;
         }
     }
 }
-
-.dropdown:hover {
-    > label.item {
-        transform: var(--transform-scale-x);
-
-        > ion-icon {
-            rotate: 90deg;
-            transition-duration: 0.25s;
-        }
-    }
-
-    > ul {
-        display: grid;
-    }
-}
-
-@media (max-width: 500px) {
-    .dropdown > label.item > ion-icon {
-        margin-right: var(--padding-mobile);
-    }
-}

src/partials/_nav_title.scss

@@ -13,15 +13,15 @@
     display: block;
 }
 
-.menu .title:hover {
-    color: var(--highlight-hover);
-    transition: var(--transition-cut);
-}
-
-/*
 @media only screen and (max-width: 500px) {
     .nav_title {
         padding: var(--padding-mobile);
     }
 }
-*/
+
+@media (min-width: 1024px) {
+    .menu .title:hover {
+        color: var(--highlight-hover);
+        transition: var(--transition-cut);
+    }
+}