148 lines
2.0 KiB
CSS
148 lines
2.0 KiB
CSS
/* Main structure */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
body > * {
|
|
padding: 0 10%;
|
|
}
|
|
|
|
.main1 {
|
|
overflow: hidden;
|
|
}
|
|
.main2 {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
margin: -1em;
|
|
}
|
|
.main3 {
|
|
padding: 1em 0;
|
|
margin: 0 1em;
|
|
min-height: 100%;
|
|
}
|
|
|
|
/* header */
|
|
#header_menu {
|
|
display: none;
|
|
}
|
|
#header_menu ~ label {
|
|
display: none;
|
|
}
|
|
header > label {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
header nav ul {
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
display: block;
|
|
}
|
|
header nav li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
header nav > ul {
|
|
padding-top: 0.25em;
|
|
margin-left: -0.5em;
|
|
}
|
|
header nav > ul > li {
|
|
float: left;
|
|
margin-left: 0.5em;
|
|
}
|
|
header nav > ul > li.page {
|
|
float: right;
|
|
}
|
|
header nav > ul > li > div {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
header nav > ul > li > div > a {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-bottom: 0.25em;
|
|
transition: top 0.25s;
|
|
top: 0;
|
|
}
|
|
header nav > ul > li:hover > div > a, header nav > ul > li.active > div > a {
|
|
top: -0.25em;
|
|
}
|
|
|
|
/* page */
|
|
main {
|
|
margin: 0.5em;
|
|
}
|
|
.translations {
|
|
float: right;
|
|
}
|
|
.details {
|
|
display: inline-grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
/*
|
|
* Mobile
|
|
*/
|
|
@media (hover: none) {
|
|
#header_menu ~ label {
|
|
display: block;
|
|
}
|
|
#header_menu ~ nav {
|
|
display: none;
|
|
}
|
|
#header_menu:checked ~ nav {
|
|
display: block;
|
|
}
|
|
header nav > ul {
|
|
padding-top: 0.25em;
|
|
margin-left: 0;
|
|
}
|
|
header nav > ul > li {
|
|
display: block;
|
|
float: none;
|
|
margin-left: 0;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
padding-left: 2em;
|
|
}
|
|
header nav > ul > li.page {
|
|
float: none;
|
|
}
|
|
|
|
header nav > ul > li > div {
|
|
margin-bottom: 0;
|
|
}
|
|
header nav > ul > li > div > a {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-bottom: 0;
|
|
top: 0;
|
|
}
|
|
header nav > ul > li:hover > div > a, header nav > ul > li.active > div > a {
|
|
top: 0;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 500px) {
|
|
/* Shrink border */
|
|
body > * {
|
|
padding: 0;
|
|
}
|
|
}
|