Provide a CSS Upgrade to prepare for JS supported nav modification on resize.
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Captain ALM 2022-08-17 13:04:03 +01:00
parent f5a850efd5
commit 5fcfb11c65
Signed by: alfred
GPG Key ID: 4E4ADD02609997B1
4 changed files with 27 additions and 9 deletions

View File

@ -59,6 +59,14 @@ main{
overflow: hidden;
max-height: 0;
}
.vnav{
max-height: none;
top: 0;
position: relative;
float: right;
width: auto;
overflow: hidden;
}
.so-pane{
display: none;
overflow: hidden;
@ -112,10 +120,16 @@ main{
.nav-menu, .sort-menu{
display: none;
}
.menu a{
.menu a, .vmenu a{
display: block;
padding: 24px 16px;
}
.vmenu li{
float: left;
}
.vmenu a:hover{
background-color: transparent;
}
.hmb{
cursor: pointer;
float: right;
@ -142,7 +156,7 @@ main{
.hmb-line::after{
top: -5px;
}
.nav-menu:checked ~ nav, .nav-open{
.nav-menu:checked ~ #nav, .nav-open{
max-height: 100%;
}
.nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
@ -274,7 +288,7 @@ main{
border-width: 1px;
margin: 2px;
}
@media (min-width: 560px){
@media (min-width: 600px){
.main-box > div{
padding: 12px;
}

View File

@ -10,13 +10,13 @@ body{
a{
color: #b0b0f0;
}
.header, .nav, footer, .so-pane{
.header, nav, footer, .so-pane{
background-color: #1d1d1e;
}
.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
.home-button > div, .sort-button > div, .menu a, .vmenu a, .so-pane > form > div > * > *{
color: #e0e0e0;
}
.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
.home-button:hover, .menu a:hover, .vmenu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
background-color: #606061;
}
.hmb-line, .hmb-line::before, .hmb-line::after{

View File

@ -95,6 +95,10 @@
</div>
<input class="nav-menu" type="checkbox" id="nav-menu"/>
<label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
<nav class="vnav" id="vnav">
<ul class="vmenu no-lst-style">
</ul>
</nav>
<nav class="nav" id="nav">
<ul class="menu no-lst-style">
{{ range .Data.GetHeaderLabels }}

View File

@ -10,13 +10,13 @@ body{
a{
color: #4f4fff;
}
.header, .nav, footer, .so-pane{
.header, nav, footer, .so-pane{
background-color: #e2e2e1;
}
.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
.home-button > div, .sort-button > div, .menu a, .vmenu a, .so-pane > form > div > * > *{
color: #1f1f1f;
}
.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
.home-button:hover, .menu a:hover, .vmenu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
background-color: #9f9f9e;
}
.hmb-line, .hmb-line::before, .hmb-line::after{