2024-02-01 11:22:34 +00:00
|
|
|
@import url('./colors.css'); /* Include colorscheme */
|
|
|
|
/* TODO clean and move all ugly code from old.css into this file */
|
|
|
|
/* @import url('./old.css'); */
|
2024-01-29 04:53:34 +00:00
|
|
|
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
/* Global */
|
2024-01-29 04:53:34 +00:00
|
|
|
html, body {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
body{
|
2024-01-29 04:53:34 +00:00
|
|
|
font-size: 100%;
|
|
|
|
line-height: 1.5;
|
2024-02-01 11:22:34 +00:00
|
|
|
background-color: var(--bg);
|
|
|
|
color: var(--fg);
|
2024-01-29 04:53:34 +00:00
|
|
|
}
|
2024-02-01 11:22:34 +00:00
|
|
|
|
|
|
|
a{
|
2024-01-29 04:53:34 +00:00
|
|
|
text-decoration: none;
|
2024-02-01 11:22:34 +00:00
|
|
|
color: var(--acc-1);
|
2024-01-29 04:53:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
/* Main Body */
|
|
|
|
|
2024-01-29 04:53:34 +00:00
|
|
|
.content {
|
|
|
|
margin: auto 5% auto 5%;
|
|
|
|
}
|
2024-02-01 11:22:34 +00:00
|
|
|
|
|
|
|
|
|
|
|
.menu-entries {
|
|
|
|
/* display: block; */
|
|
|
|
/* clear: both; */
|
|
|
|
/* transition: max-height .2s ease-out; */
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Footer */
|
|
|
|
footer {
|
|
|
|
/* position: fixed; */
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
max-height: 15%;
|
|
|
|
padding-top; 10px;
|
|
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
footer .buttons {
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Header */
|
|
|
|
|
|
|
|
.header {
|
|
|
|
width: 100%;
|
|
|
|
/* position: fixed; */
|
|
|
|
/* top: 0; */
|
|
|
|
background-color: var(--alt-bg);
|
|
|
|
/* z-index: 3; */
|
|
|
|
|
2024-01-29 04:53:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.header .menu {
|
|
|
|
margin: 0;
|
2024-02-01 11:22:34 +00:00
|
|
|
/* position: relative; */
|
|
|
|
/* overflow: auto; */
|
2024-01-29 04:53:34 +00:00
|
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
.header .menu a {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 20px;
|
2024-01-29 04:53:34 +00:00
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
/* Menu */
|
2024-01-29 04:53:34 +00:00
|
|
|
.header .menu-btn {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
@media screen and (max-width: 755px) {
|
2024-01-29 04:53:34 +00:00
|
|
|
.logo {
|
|
|
|
/* clear: none; */
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-icon {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
/* .content { */
|
|
|
|
/* margin: auto 5% auto 5%; */
|
|
|
|
/* } */
|
|
|
|
.header .menu-btn:checked ~ .menu li .menu-entries, .menu li .menu-entries a{
|
|
|
|
display: block;
|
2024-01-29 04:53:34 +00:00
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
.header .menu-btn:checked ~ .menu .logo, .menu li .menu-entries a:hover {
|
|
|
|
background-color: var(--acc-1);
|
|
|
|
color: var(--alt-bg);
|
|
|
|
transition: 400ms;
|
2024-01-29 04:53:34 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
.menu-entries {
|
|
|
|
text-align: center;
|
|
|
|
float: none;
|
|
|
|
display: none;
|
|
|
|
}
|
2024-01-29 04:53:34 +00:00
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
.menu-icon a.logo {
|
|
|
|
display: block;
|
|
|
|
}
|
2024-01-29 04:53:34 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
@media screen and (min-width: 755px) {
|
|
|
|
|
|
|
|
.menu-entries {
|
|
|
|
float: right;
|
|
|
|
}
|
2024-01-29 04:53:34 +00:00
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
|
|
|
|
.header .menu li a {
|
|
|
|
/* width: fit-content; */
|
|
|
|
/* padding:15px; */
|
|
|
|
/* display: inline-block; */
|
|
|
|
}
|
|
|
|
/* */
|
|
|
|
/* .menu-entries a { */
|
|
|
|
/* float: left; */
|
|
|
|
/* } */
|
2024-01-29 04:53:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 1040px) {
|
|
|
|
.header {
|
|
|
|
top: 0;
|
|
|
|
width: 15%;
|
|
|
|
height: 100%;
|
|
|
|
position: fixed;
|
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
.menu {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header .menu a {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
.header .menu li a{
|
|
|
|
/* width: 100%; */
|
|
|
|
display: block;
|
|
|
|
/* padding: 15px; */
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu .menu-entries a:hover{
|
|
|
|
background-color: var(--acc-1);
|
|
|
|
color: var(--alt-bg);
|
|
|
|
transition: 400ms;
|
|
|
|
}
|
2024-01-29 04:53:34 +00:00
|
|
|
|
|
|
|
.menu-entries{
|
|
|
|
float: none;
|
|
|
|
}
|
|
|
|
|
2024-02-01 11:22:34 +00:00
|
|
|
.content {
|
|
|
|
margin: auto 5% auto 20%;
|
|
|
|
}
|
2024-01-29 04:53:34 +00:00
|
|
|
|
|
|
|
.content, footer {
|
|
|
|
padding: 1px 16px;
|
|
|
|
}
|
|
|
|
}
|