webseite-krautspace/public/style.css

313 lines
4.1 KiB
CSS
Raw Normal View History

/* file: style3.css
* date: 2022-02-06
* user: bernd@nr18.space
*/
2022-02-04 20:43:06 +01:00
/*** general ***/
2022-02-04 20:43:06 +01:00
* {
padding: 0;
box-sizing: border-box;
border-collapse: collapse;
scroll-behavior: smooth;
}
2022-02-04 20:43:06 +01:00
html, body {
margin: 0;
color: #333333;
background-color: #ffffff;
font-size: 100%;
line-height: 1.5;
2022-02-04 20:43:06 +01:00
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
ul {
list-style: none;
}
ul.indent {
padding-left: 2em;
}
2022-02-04 20:43:06 +01:00
a {
color: inherit;
text-decoration: none;
2022-02-04 20:43:06 +01:00
}
a:hover, a:focus {
text-decoration: underline;
2022-02-04 20:43:06 +01:00
}
.hidden, hr {
display: none;
}
h1 {
font-size: 130%;
padding-left: 1em;
}
.center-content {
margin: 0 auto;
}
.max-width {
max-width: 72em;
}
.flex-box {
2022-02-04 20:43:06 +01:00
display: flex;
justify-content: space-between;
}
.row {
flex-direction: row;
}
.column {
2022-02-04 20:43:06 +01:00
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;
}
2022-02-04 20:43:06 +01:00
/*** head with navigation menu ***/
2022-02-04 20:43:06 +01:00
header {
2022-02-04 20:43:06 +01:00
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;
2022-02-04 20:43:06 +01:00
}
div#headline {
padding: 0 1em 0 1em;
2022-02-04 20:43:06 +01:00
}
div#status-div {
width: 2em;
}
div#status-div:hover {
width: 10em;
z-index: 150;
}
a#banner:hover,
a#banner:focus {
text-decoration: none;
2022-02-04 20:43:06 +01:00
}
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;
2022-02-04 20:43:06 +01:00
top: 0;
right: 0;
height: 100%;
2022-02-04 20:43:06 +01:00
display: none;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
padding: 0 1em 2em 2em;
2022-02-04 20:43:06 +01:00
}
nav#menu ul {
margin: initial;
padding: 0;
text-align: right;
2022-02-04 20:43:06 +01:00
}
nav#menu li {
padding: 1em;
border-top: 1px solid #999999;
2022-02-04 20:43:06 +01:00
}
nav#menu a {
color: #ffffff;
2022-02-04 20:43:06 +01:00
}
/* changed by clicking menu button */
2022-02-04 20:43:06 +01:00
nav#menu:target {
display: flex;
overflow-x: hidden;
overflow-y: scroll;
background: black;
background: rgba(50, 50, 50, 0.85);
z-index: 100;
2022-02-04 20:43:06 +01:00
}
/**** 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;
2022-02-04 20:43:06 +01:00
background-size: cover;
}
/**** main ****/
main {
min-height: 100px;
flex: 1;
}
.wrapper {
position: relative;
padding: 0 2%;
}
.content-overlay {
position: relative;
top: -50px;
2022-02-04 20:43:06 +01:00
}
.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 {
2022-02-04 20:43:06 +01:00
width: 100%;
max-width: 100%;
2022-02-04 20:43:06 +01:00
}
/**** aside ****/
div.sb-item p {
margin-top: 0;
}
h4.aside {
margin-bottom: 0.5em;
}
ul.aside {
margin-top: 0;
}
2022-02-04 20:43:06 +01:00
/**** footer ****/
footer {
padding: 0 5% 10% 5%;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.85);
2022-02-04 20:43:06 +01:00
}
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;
}
2022-02-04 20:43:06 +01:00
/**** 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;
}
2022-02-04 20:43:06 +01:00
/* media query für breitere screens */
/************************************/
@media screen and (min-width: 768px) {
a#open-menu {
2022-02-04 20:43:06 +01:00
display: none;
}
nav#menu {
position: relative;
2022-02-04 20:43:06 +01:00
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
2022-02-04 20:43:06 +01:00
}
nav p {
display: none;
2022-02-04 20:43:06 +01:00
}
nav#menu ul {
display: flex;
}
nav#menu li {
border: none;
}
div.with-aside {
flex-direction: row;
justify-content: space-around;
}
2022-02-04 20:43:06 +01:00
}