forked from Krautspace/webseite-krautspace
4056d2f324
statusbutton und termine werden dynamisch aus einem iCalendar gezogen, styling der ausgabe überarbeitet, überflüssige funktionen aus getContent.php entfernt, fehlerbehandlung eingebaut
324 lines
4.2 KiB
CSS
324 lines
4.2 KiB
CSS
/* file: style3.css
|
|
* date: 2022-02-06
|
|
* user: bernd@nr18.space
|
|
*/
|
|
|
|
|
|
/*** general ***/
|
|
|
|
* {
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
border-collapse: collapse;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
color: #333333;
|
|
background-color: #ffffff;
|
|
font-size: 100%;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
ul.indent {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hidden, hr {
|
|
display: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 130%;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.center-content {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.max-width {
|
|
max-width: 72em;
|
|
}
|
|
|
|
.flex-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.center {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 0.5em;
|
|
background-color: #ffffff;
|
|
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.icon-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
/*** head with navigation menu ***/
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
color: #ffffff;
|
|
background-color: #333333;
|
|
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.6);
|
|
z-index: 50;
|
|
}
|
|
|
|
div#headline {
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
|
|
div#status-div {
|
|
width: 2em;
|
|
}
|
|
|
|
div#status-div:hover {
|
|
width: 10em;
|
|
z-index: 150;
|
|
}
|
|
|
|
a#banner:hover,
|
|
a#banner:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav#menu {
|
|
/* 'height: 100%' geht nur mit 'position: fixed'. mit 'position: absolute'
|
|
* wird nur der teil innerhalb der headline angezeigt. dann muß 'height:
|
|
* 100%' entfernt werden und das menu nimmt sich den platz, den es
|
|
* braucht. */
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
padding: 0 1em 2em 2em;
|
|
}
|
|
|
|
nav#menu ul {
|
|
margin: initial;
|
|
padding: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
nav#menu li {
|
|
padding: 1em;
|
|
border-top: 1px solid #999999;
|
|
}
|
|
|
|
nav#menu a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* changed by clicking menu button */
|
|
|
|
nav#menu:target {
|
|
display: flex;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
background: black;
|
|
background: rgba(50, 50, 50, 0.85);
|
|
z-index: 100;
|
|
}
|
|
|
|
|
|
/**** 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/background.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: -50px;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
section.termin {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
p.headline {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
ul.events {
|
|
margin-top: 0.5em;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
/**** aside ****/
|
|
|
|
div.sb-item p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h4.aside {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
ul.aside {
|
|
margin-top: 0;
|
|
}
|
|
|
|
|
|
/**** footer ****/
|
|
|
|
footer {
|
|
padding: 0 5% 10% 5%;
|
|
color: #ffffff;
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
/**** go-to-top ****/
|
|
|
|
div#go-to-top {
|
|
position: fixed;
|
|
right: 2%;
|
|
bottom: 2%;
|
|
z-index: 10;
|
|
}
|
|
|
|
img#to-top {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* media query für breitere screens */
|
|
/************************************/
|
|
|
|
@media screen and (min-width: 768px) {
|
|
|
|
a#open-menu {
|
|
display: none;
|
|
}
|
|
|
|
nav#menu {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav p {
|
|
display: none;
|
|
}
|
|
|
|
nav#menu ul {
|
|
display: flex;
|
|
}
|
|
|
|
nav#menu li {
|
|
border: none;
|
|
}
|
|
|
|
div.with-aside {
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
}
|