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);
 
@@ -28,9 +40,12 @@
                 display: grid;
             }
         }
+    }
 }
 
-.dropdown:hover {
+// Use a hover state for menu entries on large screens.
+@media (min-width: 1024px) {
+    .dropdown:hover {
         > label.item {
             transform: var(--transform-scale-x);
 
@@ -43,10 +58,5 @@
         > 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);
+    }
+}