diff --git a/src/partials/_nav_dropdown.scss b/src/partials/_nav_dropdown.scss index eb3f9e9..67b31cd 100644 --- a/src/partials/_nav_dropdown.scss +++ b/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); - } -} diff --git a/src/partials/_nav_title.scss b/src/partials/_nav_title.scss index 8e632dd..fb7c4b3 100644 --- a/src/partials/_nav_title.scss +++ b/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); + } +}