145 lines
2.9 KiB
CSS
Executable File
145 lines
2.9 KiB
CSS
Executable File
<style type="text/css">
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #f1f1f1;
|
|
/* padding: 20px; */
|
|
font-family: Arial;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Center website */
|
|
.main1 {
|
|
/* max-width: 1000px; */
|
|
margin: auto;
|
|
}
|
|
|
|
/* fixiert den Text oben rechts */
|
|
.fixed {
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: 0px;
|
|
right: 0px;
|
|
/* width: 340px; */
|
|
background-color: transparent;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.row {
|
|
margin: 0px; /*5px -11px; /* 10px; -16px; */
|
|
}
|
|
|
|
/* Add padding BETWEEN each column */
|
|
.row,
|
|
.row > .column {
|
|
padding: 2px 2px 2px 2px;
|
|
}
|
|
|
|
/* Create three equal columns that floats next to each other */
|
|
.column {
|
|
float: left;
|
|
text-align: center;
|
|
width: 33.33%;
|
|
display: none; /* Hide all elements by default */
|
|
}
|
|
|
|
/* Clear floats after rows */
|
|
.row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* Content */
|
|
.content {
|
|
background-color: white;
|
|
padding: 2px; /* weisser Bild-Rand 10px; */
|
|
}
|
|
|
|
/* The "show" class is added to the filtered elements */
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the buttons */
|
|
.btn {
|
|
border: none;
|
|
outline: none;
|
|
padding: 12px 16px;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
.btn.btn-primary {
|
|
color: #fff;
|
|
background-color: #ddd; /*#337ab7;*/
|
|
border-color: #2e6da4;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #ddd;
|
|
|
|
}
|
|
|
|
.btn.active {
|
|
background-color: #666;
|
|
|
|
color: white;
|
|
}
|
|
|
|
/* Style the gallery */
|
|
.gallery {
|
|
margin:0 auto;
|
|
display:table;
|
|
width:100% /* volle Bildbreite statt 90% */
|
|
}
|
|
.gallery p {
|
|
display:table-cell;
|
|
/* width:0%; /*20%;*/
|
|
padding:0%; /*10px;*/
|
|
background-color:#eee;
|
|
/* box-shadow:3px 3px 3px 1px #eee inset,-3px -3px 3px 1px grey inset;border-radius:20px */
|
|
}
|
|
.gallery a {
|
|
outline:none;
|
|
text-decoration:none;
|
|
display:block;
|
|
width:100%;
|
|
padding-bottom:100%; /* */
|
|
background-color:#ccc; /*#aaa;#ccc;*/
|
|
border:1px solid #777;
|
|
}
|
|
.gallery a,.gallery span {
|
|
background-size:contain; /*Resize the background image to make sure the image is fully visible*/
|
|
contain:content;
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
}
|
|
.gallery a {
|
|
cursor:pointer;
|
|
}
|
|
|
|
.gallery span {
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
right:0;
|
|
bottom:0;
|
|
display:none;
|
|
background-color:rgba(20,20,20,1);
|
|
}
|
|
.gallery a:focus + span {
|
|
display:block;z-index:200
|
|
}
|
|
</style>
|