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

Resolves #55
Fixes #56

src/partials/_nav_dropdown.scss

@@ -20,7 +20,19 @@
         padding: 0 var(--spacing-small);
         list-style: none;
     }
+}
 
+@media (max-width: 500px) {
+    .dropdown {
+        > label.item > ion-icon {
+            margin-right: var(--padding-mobile);
+        }
+    }
+}
+
+// Use a toggle for menu entries on mobile and intermediary devices.
+@media (max-width: 1023px) {
+    .dropdown {
         > input:checked + label {
             color: var(--highlight-hover);
 
@@ -29,7 +41,10 @@
             }
         }
     }
+}
 
+// Use a hover state for menu entries on large screens.
+@media (min-width: 1024px) {
     .dropdown:hover {
         > label.item {
             transform: var(--transform-scale-x);
@@ -44,9 +59,4 @@
             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);
+    }
+}