diff --git a/res/static/res/style/layout.css b/res/static/res/style/layout.css index 9cc33ff..c8c63a1 100644 --- a/res/static/res/style/layout.css +++ b/res/static/res/style/layout.css @@ -70,6 +70,46 @@ html{ word-break: break-word; } +.navigation a { + float: none; + display: inline-block; + color: var(--text_color); + text-align: center; + padding: 4px 6px; + margin: 0 4px; + text-decoration: none; + font-family: "Lato", sans-serif; + font-weight: bold; + font-size: 26px; +} +.navigation a:hover { + background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)); + box-shadow: 2px 2px 8px #000000; + color: #000000; + text-decoration: none; +} +.navigation .icon { + display: none; +} +@media screen and (max-width: 500px) { + .navigation a:not(:first-child) {display: none;} + .navigation a.icon { + float: right; + display: block; + } + .navigation.responsive {position: relative;} + .navigation.responsive .icon { + position: absolute; + right: 0; + top: 0; + } + .navigation.responsive a { + float: none; + display: block; + text-align: left; + } +} + .highlight_dark, .highlight_middle, .highlight_light, @@ -93,12 +133,6 @@ html{ .border-top {border-top: #686868 1px solid;} .border-bottom {border-bottom: #686868 1px solid;} -.menu{ - font-family: "Lato", sans-serif; - font-weight: bold; - font-size: 26px; -} - /* Common elements */ hr{ diff --git a/res/template/fragments/menu.html b/res/template/fragments/menu.html index beccbf1..6c2e191 100644 --- a/res/template/fragments/menu.html +++ b/res/template/fragments/menu.html @@ -1,7 +1,18 @@ {{define "menu"}} -