f6736190e6
media query auf 680 pixel gesetz, termine erstmal statisch gesetzt, linien des nahverkehr hinzugefügt, optische anpassungen, rollenattribute hinzugefügt
307 lines
4.4 KiB
CSS
307 lines
4.4 KiB
CSS
/* style.css für kraut.space */
|
|
|
|
|
|
/********** allgemein ***************************/
|
|
/************************************************/
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 100%;
|
|
color: #333333;
|
|
background-color: #ffffff;
|
|
line-height: 150%;
|
|
border-collapse: collapse;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
ul.no-indent {
|
|
padding-left: 0;
|
|
}
|
|
|
|
a {
|
|
color: #333333;
|
|
text-decoration: underline 1px dotted #333333;
|
|
}
|
|
|
|
div.center-content {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
div.max-width {
|
|
max-width: 75em;
|
|
}
|
|
|
|
.hidden, hr {
|
|
display: none;
|
|
}
|
|
|
|
.flex-box-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-box-column {
|
|
display: table; /* fallback IE<9 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.space-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
|
|
/**** fixed elements ****************************/
|
|
/************************************************/
|
|
|
|
/**** space status ****/
|
|
|
|
div#space-status-div {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 3em;
|
|
height: 3em;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: 1.5em;
|
|
border-bottom-right-radius: 1.5em;
|
|
overflow: hidden;
|
|
background-color: #ffffff;
|
|
z-index: 10;
|
|
display: none;
|
|
}
|
|
|
|
div#space-status-div:hover {
|
|
height: 12em;
|
|
}
|
|
|
|
|
|
/**** fixed header ****/
|
|
|
|
div#head-fix {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8);
|
|
z-index: 100;
|
|
}
|
|
|
|
#headline {
|
|
margin: 0;
|
|
padding: 1em;
|
|
align-items: center;
|
|
}
|
|
|
|
header {
|
|
align-self: flex-start;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/**** fixed navigation ****/
|
|
|
|
nav {
|
|
height: 100%;
|
|
align-items: flex-end;
|
|
flex-grow: 2;
|
|
}
|
|
|
|
label#responsiv-navi-label {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input#responsiv-navi-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
div#hamburger {
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.hamburger-scheibe {
|
|
width: 100%;
|
|
height: 20%;
|
|
background-color: #333333;
|
|
}
|
|
|
|
/*
|
|
#hamburger-menu:after {
|
|
content: 'Menu';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
*/
|
|
|
|
ul#navigation-menu {
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
list-style: none;
|
|
display: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
ul#navigation-menu > li {
|
|
padding: 0.5em 0 0 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
ul#navigation-menu li a {
|
|
color: inherit;
|
|
}
|
|
|
|
#responsiv-navi-checkbox:checked ~ ul#navigation-menu {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
/**** go-to-top ****/
|
|
|
|
div#go-to-top {
|
|
position: fixed;
|
|
right: 2%;
|
|
bottom: 2%;
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
border-radius: 0.5em;
|
|
background-color: #ffffff;
|
|
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
|
|
z-index: 10;
|
|
}
|
|
|
|
img#to-top {
|
|
width: 80%;
|
|
height: 80%;
|
|
padding: 10% 10% 10% 10%;
|
|
}
|
|
|
|
|
|
/**** flexible elements *************************/
|
|
/************************************************/
|
|
|
|
/**** startimage ****/
|
|
|
|
#start-image-container {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 50vh;
|
|
max-height: 60vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: url('./images/doppelzimmer-2000.jpg') no-repeat center;
|
|
background-size: cover;
|
|
}
|
|
|
|
|
|
/**** main ****/
|
|
|
|
main {
|
|
min-height: 100px;
|
|
flex: 1;
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
padding: 0 2%;
|
|
}
|
|
|
|
.content-overlay {
|
|
position: relative;
|
|
top: -40px;
|
|
}
|
|
|
|
.panel-wrapper {
|
|
margin: 1% 1% 5% 1%;
|
|
padding: 3.5em 2em 7em 1.5em;;
|
|
background-color: #ffffff;
|
|
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.sub-panel {
|
|
flex-grow: 1;
|
|
padding: 1em 1em 1em 1.5em;
|
|
background-color: inherit;
|
|
}
|
|
|
|
div#map img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/**** footer ****/
|
|
|
|
footer {
|
|
padding: 0 5% 10% 5%;
|
|
color: #ffffff;
|
|
background-color: #333333;
|
|
}
|
|
|
|
div#footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
ul.list-footer {
|
|
color: inherit;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
a.link-footer {
|
|
color: #ffffff;
|
|
text-decoration: underline 1px dotted #ffffff;
|
|
}
|
|
|
|
|
|
/**** media querys ******************************/
|
|
/************************************************/
|
|
|
|
@media only screen and (min-width: 680px) {
|
|
|
|
label#responsiv-navi-label {
|
|
display: none;
|
|
}
|
|
|
|
ul#navigation-menu {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
ul#navigation-menu li {
|
|
padding: 0 0 0 1em;
|
|
}
|
|
|
|
div#map-box {
|
|
flex-direction: row;
|
|
}
|
|
|
|
}
|