webseite-krautspace/public/style.css

444 lines
8.1 KiB
CSS

/* file: style.css
* date: 2022-02-06
* user: bernd@nr18.space
*/
/*** schriften ***/
/* eb-garamond-regular - latin */
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400;
src: url('./fonts/eb-garamond-v24-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/eb-garamond-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/eb-garamond-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/eb-garamond-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
url('./fonts/eb-garamond-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/eb-garamond-v24-latin-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-italic - latin */
@font-face {
font-family: 'EB Garamond';
font-style: italic;
font-weight: 400;
src: url('./fonts/eb-garamond-v24-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/eb-garamond-v24-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/eb-garamond-v24-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/eb-garamond-v24-latin-italic.woff') format('woff'), /* Modern Browsers */
url('./fonts/eb-garamond-v24-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/eb-garamond-v24-latin-italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* signika-300 - latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 300;
src: url('./fonts/signika-v18-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/signika-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/signika-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/signika-v18-latin-300.woff') format('woff'), /* Modern Browsers */
url('./fonts/signika-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/signika-v18-latin-300.svg#Signika') format('svg'); /* Legacy iOS */
}
/* signika-regular - latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 400;
src: url('./fonts/signika-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/signika-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/signika-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/signika-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('./fonts/signika-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/signika-v18-latin-regular.svg#Signika') format('svg'); /* Legacy iOS */
}
/* signika-500 - latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 500;
src: url('./fonts/signika-v18-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/signika-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/signika-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/signika-v18-latin-500.woff') format('woff'), /* Modern Browsers */
url('./fonts/signika-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/signika-v18-latin-500.svg#Signika') format('svg'); /* Legacy iOS */
}
/*** general ***/
* {
padding: 0;
box-sizing: border-box;
border-collapse: collapse;
scroll-behavior: smooth;
}
html, body {
margin: 0;
color: #333333;
background-color: #ffffff;
font-family: 'EB Garamond', serif;
font-size: 1.1em;
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: underline 1px dotted;
}
a:hover, a:focus {
text-decoration: underline;
}
.hidden, hr {
display: none;
}
h1 {
font-size: 130%;
padding-left: 1em;
}
h3 {
padding-top: 2em;
}
h1, h2, h3, h4 {
font-family: 'Signika', sans-serif;
font-weight: 500;
}
.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;
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
left: 1.5em;
bottom: -1.5em;
color: #ffffff;
background-color: #000000;
text-align: center;
padding: 0.25em 1em;
border-radius: 0.25em;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/*** 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;
}
header a {
text-decoration: none;
}
div#headline {
padding: 0 1em 0 1em;
font-family: 'Signika', sans-serif;
font-weight: 300;
}
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 {
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: 70vh;
max-height: 80vh;
margin: 3em 0 0 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: 3em 1em 6em 1em;;
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;
}
.with-aside {
column-gap: 2em;
}
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: 600px) {
.panel-wrapper {
padding: 3em 2em 6em 2em;;
}
}
@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;
}
.panel-wrapper {
padding: 3em 3em 6em 3em;;
}
}