75 lines
1.5 KiB
CSS
75 lines
1.5 KiB
CSS
/* ----- Navigation ----- */
|
|
input[name="nav"],
|
|
input[type="checkbox"].control {
|
|
display: none;
|
|
}
|
|
|
|
.nav {
|
|
background-color: var(--nav-bg);
|
|
}
|
|
|
|
nav {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
align-items: end;
|
|
color: var(--nav-color);
|
|
height: var(--nav-height);
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
nav img {
|
|
width: 2em;
|
|
margin: 0.2em 0.5em;
|
|
}
|
|
|
|
nav > label {
|
|
padding: 0.5em 1em;
|
|
/* transition: 0.5s; */
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
}
|
|
|
|
nav > label:hover {
|
|
background-color: var(--nav-hover);
|
|
}
|
|
|
|
/* nav > label img {
|
|
width: 1em;
|
|
}
|
|
|
|
nav label a {
|
|
color: inherit;
|
|
}
|
|
|
|
nav label a:hover {
|
|
text-decoration: none;
|
|
} */
|
|
|
|
#nav1:checked ~ article section:nth-of-type(1),
|
|
#nav2:checked ~ article section:nth-of-type(2),
|
|
#nav3:checked ~ article section:nth-of-type(3),
|
|
#nav4:checked ~ article section:nth-of-type(4),
|
|
#nav5:checked ~ article section:nth-of-type(5),
|
|
#nav6:checked ~ article section:nth-of-type(6),
|
|
#nav7:checked ~ article section:nth-of-type(7),
|
|
#nav8:checked ~ article section:nth-of-type(8) {
|
|
display: block;
|
|
/* animation: sect 0.5s ease-in-out; */
|
|
}
|
|
|
|
#nav1:checked ~ .nav label[for="nav1"],
|
|
#nav2:checked ~ .nav label[for="nav2"],
|
|
#nav3:checked ~ .nav label[for="nav3"],
|
|
#nav4:checked ~ .nav label[for="nav4"],
|
|
#nav5:checked ~ .nav label[for="nav5"],
|
|
#nav6:checked ~ .nav label[for="nav6"],
|
|
#nav7:checked ~ .nav label[for="nav7"],
|
|
#nav8:checked ~ .nav label[for="nav8"] {
|
|
background-color: var(--body-bg);
|
|
}
|
|
|
|
/* @keyframes sect {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
} */ |