commit 3eddf034fd66a7070d7fe7db562ee775e6c8c295 parent fab4f294f31c134e0b9d227aac635aadc96d1bfb Author: JayVii <jayvii[AT]posteo[DOT]de> Date: Fri, 2 Aug 2024 16:30:39 +0200 feat: collapse secondary menu on mobile devices Diffstat:
| M | css/mobile.css | | | 38 | ++++++++++++++++++++++++++++++++++++++ |
| M | css/mobile.min.css | | | 4 | ++-- |
2 files changed, 40 insertions(+), 2 deletions(-)
diff --git a/css/mobile.css b/css/mobile.css @@ -118,4 +118,42 @@ font-size: 90%; flex: 20%; } + } + +/* Secondary Menu ----------------------------------------------------------- */ + +@media screen and (max-width: 576px) { + + /* Menu Container should be a block item */ + .ui.text.container .ui.stackable.secondary.menu + { + display: block; + margin-top: 1em; + font-size: 110% + } + + /* Create Menu Label */ + .ui.text.container .ui.stackable.secondary.menu:before + { + content: "\2630 \0020 TImelines"; + margin-left: 0.82em; /* ca. 90/110 */ + } + + /* HideMenu entries by default */ + .ui.text.container .ui.stackable.secondary.menu .item + { + display: none; + font-size: initial; + width: 100%; + margin: 0px !important; + } + + /* Upon hovering the menu, show its entries */ + .ui.text.container .ui.stackable.secondary.menu:hover > .item + { + display: block !important; + } + +} + diff --git a/css/mobile.min.css b/css/mobile.min.css @@ -1 +1 @@ -.ui.text.container .ui.secondary.pagination.menu{ display: flex; flex-direction: row; font-size: 115%;}.ui.text.container .ui.secondary.pagination.menu .item{ flex: 50%; }.ui.text.container .ui.secondary.pagination.menu .item .icon{ width: 100%;}:root{ --homeicn: url("icons/home.svg"); --srchicn: url("icons/search.svg"); --evryicn: url("icons/globe.svg"); --advnicn: url("icons/settings.svg"); }@media screen and (max-width: 576px) { nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item, nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu > div.ui.simple.dropdown.item { font-size: 0px; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container { display: inline-flex; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/actors"] { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/actors"]::after { content: var(--homeicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/search"] { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/search"]::after { content: var(--srchicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/everything"] { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/everything"]::after { content: var(--evryicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu, nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item { width: 100% } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item::after { content: var(--advnicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu > div.ui.simple.dropdown.item > div.menu { font-size: initial; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.right.menu > form.form > div.ui.action.input > input.link.item { font-size: 90%; flex: 20%; }} -\ No newline at end of file +.ui.text.container .ui.secondary.pagination.menu{ display: flex; flex-direction: row; font-size: 115%;}.ui.text.container .ui.secondary.pagination.menu .item{ flex: 50%; }.ui.text.container .ui.secondary.pagination.menu .item .icon{ width: 100%;}:root{ --homeicn: url("icons/home.svg"); --srchicn: url("icons/search.svg"); --evryicn: url("icons/globe.svg"); --advnicn: url("icons/settings.svg"); }@media screen and (max-width: 576px) { nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item, nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu > div.ui.simple.dropdown.item { font-size: 0px; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container { display: inline-flex; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/actors"] { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/actors"]::after { content: var(--homeicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/search"] { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/search"]::after { content: var(--srchicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/everything"] { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/everything"]::after { content: var(--evryicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu, nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item { flex: 20%; text-align: center; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item { width: 100% } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item::after { content: var(--advnicn); filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%); width: 100%; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu > div.ui.simple.dropdown.item > div.menu { font-size: initial; } nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.right.menu > form.form > div.ui.action.input > input.link.item { font-size: 90%; flex: 20%; }}@media screen and (max-width: 576px) { .ui.text.container .ui.stackable.secondary.menu { display: block; margin-top: 1em; font-size: 110% } .ui.text.container .ui.stackable.secondary.menu:before { content: "\2630 \0020 TImelines"; margin-left: 0.82em; } .ui.text.container .ui.stackable.secondary.menu .item { display: none; font-size: initial; width: 100%; margin: 0px !important; } .ui.text.container .ui.stackable.secondary.menu:hover > .item { display: block !important; }} +\ No newline at end of file