You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
4.6 KiB
CSS
346 lines
4.6 KiB
CSS
10 years ago
|
* {
|
||
|
-webkit-box-sizing: border-box;
|
||
|
-moz-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
html body{
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
|
||
|
}
|
||
|
|
||
|
h1, p {
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
h1{
|
||
|
font-size: 32px;
|
||
|
}
|
||
|
|
||
|
.hiddenOverflow{
|
||
|
position: fixed;
|
||
|
overflow-y:scroll;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
|
||
|
body {
|
||
|
font-family: 'texgyreheroscnbold';
|
||
|
font-size: 18px;
|
||
|
line-height: 18px;
|
||
|
}
|
||
|
|
||
|
#zwartIntro{
|
||
|
|
||
|
height: auto;
|
||
|
overflow: hidden;
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
.zwartArea{
|
||
|
min-height: 100vh;
|
||
|
background-color: black;
|
||
|
width: 70%;
|
||
|
float: right;
|
||
|
transition-delay: 0.2s !important;
|
||
|
-webkit-transition: ease-out 1s;
|
||
|
-moz-transition: ease-out 1s;
|
||
|
-o-transition: ease-out 1s;
|
||
|
transition: ease-out 1s;
|
||
|
}
|
||
|
|
||
|
.zwartArea p, h1{
|
||
|
|
||
|
/*font-size: 26px;*/
|
||
|
padding: 10px;
|
||
|
|
||
|
font-weight: normal;
|
||
|
line-height: 1.1;
|
||
|
/*font-family: 'texgyreheroscnbold';*/
|
||
|
}
|
||
|
|
||
|
.zwartAreaText{
|
||
|
color: white;
|
||
|
padding-top: 10px;
|
||
|
}
|
||
|
|
||
|
.zwartAreaWhite{
|
||
|
background-color: white;
|
||
|
}
|
||
|
|
||
|
.zwartAreaFull{
|
||
|
width: 80%;
|
||
|
float: left;
|
||
|
|
||
|
margin-left: 10%;
|
||
|
padding-top: 40px;
|
||
|
padding-bottom: 60px;
|
||
|
}
|
||
|
|
||
|
.zwartAreaFull p{
|
||
|
font-size: 32px;
|
||
|
line-height: 1.3;
|
||
|
}
|
||
|
.zwartAreaFull h1{
|
||
|
font-size: 32px;
|
||
|
text-indent: 20px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.zwartAreaColLeft{
|
||
|
width: 80%;
|
||
|
float: left;
|
||
|
|
||
|
margin-left: 10%;
|
||
|
padding-top: 40px;
|
||
|
padding-bottom: 60px;
|
||
|
}
|
||
|
|
||
|
.zwartAreaColLeft p{
|
||
|
font-size: 32px;
|
||
|
line-height: 1.3;
|
||
|
}
|
||
|
.zwartAreaColLeft h1{
|
||
|
font-size: 32px;
|
||
|
text-indent: 20px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.zwartAreaColRight{
|
||
|
width: 50%;
|
||
|
float: right;
|
||
|
padding-left: 20px;
|
||
|
}
|
||
|
|
||
|
.highlight{
|
||
|
color: white;
|
||
|
font-family: Vollkorn !important;
|
||
|
padding-top: 40px;
|
||
|
}
|
||
|
|
||
|
.colophon{
|
||
|
color: white;
|
||
|
font-family: arial !important;
|
||
|
padding-top: 40px;
|
||
|
font-size: 22px !important;
|
||
|
-webkit-columns: 100px 2; /* Chrome, Safari, Opera */
|
||
|
-moz-columns: 100px 2; /* Firefox */
|
||
|
columns: 100px 2;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
#logo{
|
||
|
width: 25%;
|
||
|
position: fixed;
|
||
|
bottom: 10px;
|
||
|
left: 10px;
|
||
|
}
|
||
|
|
||
|
.underlineFilter{
|
||
|
transform: scaleX(2) translateX(25%);
|
||
|
-webkit-transform: scaleX(2) translateX(25%);
|
||
|
-moz-transform: scaleX(2) translateX(25%);
|
||
|
-o-transform: scaleX(2) translateX(25%);
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
#sortArea{
|
||
|
line-height: 56px;
|
||
|
}
|
||
|
|
||
|
#sortArea label{
|
||
|
margin-right: 6px;
|
||
|
}
|
||
|
|
||
|
#sortArea input{
|
||
|
display: none;
|
||
|
}
|
||
|
#sidebar{
|
||
|
width: 25%;
|
||
|
/*position: absolute;*/
|
||
|
position: fixed;
|
||
|
top: 0px;
|
||
|
padding-left: 10px;
|
||
|
/*border-bottom: 1px solid black;*/
|
||
|
|
||
|
}
|
||
|
|
||
|
#sideBarDesc{
|
||
|
display: none
|
||
|
}
|
||
|
|
||
|
#sideBarDesc .filterDesc{
|
||
|
display: none;
|
||
|
margin-top: 6px;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
#sideBarDescInfo{
|
||
|
width:100%;
|
||
|
height: 60px;
|
||
|
line-height: 30px;
|
||
|
background-color: white;
|
||
|
color: black;
|
||
|
z-index: 9999999;
|
||
|
border-bottom: 4px solid black;
|
||
|
font-size: 26px;
|
||
|
|
||
|
}
|
||
|
|
||
|
#sideBarDescInfo p{
|
||
|
height: 56px;
|
||
|
line-height: 56px;
|
||
|
}
|
||
|
|
||
|
|
||
|
.filterDesc u{
|
||
|
text-decoration: none;
|
||
|
text-transform: capitalize;
|
||
|
margin-right: 20px;
|
||
|
margin-left: 20px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
#filter{
|
||
|
width:70%;
|
||
|
float: right;
|
||
|
/*left: 250px;*/
|
||
|
padding-left: 10px;
|
||
|
height: 60px;
|
||
|
line-height: 30px;
|
||
|
/*top: 0px;*/
|
||
|
/*position: fixed;*/
|
||
|
background-color: white;
|
||
|
color: black;
|
||
|
z-index: 9999999;
|
||
|
/*padding: 10px;*/
|
||
|
border-bottom: 4px solid black;
|
||
|
/*border-top: 4px solid black;*/
|
||
|
|
||
|
font-size: 26px;
|
||
|
font-family: 'texgyreheroscnbold';
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
label{
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.fixedBar{
|
||
|
position: fixed;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/* ---- isotope ---- */
|
||
|
|
||
|
.isotope {
|
||
|
margin-top: 50px;
|
||
|
/*background: #ddd;*/
|
||
|
z-index: 1;
|
||
|
width: 100%;
|
||
|
overflow: hidden;
|
||
|
color: black;
|
||
|
/*min-height: 100vh;*/
|
||
|
transition-delay: 0.2s !important;
|
||
|
-webkit-transition: ease-out 1s;
|
||
|
-moz-transition: ease-out 1s;
|
||
|
-o-transition: ease-out 1s;
|
||
|
transition: ease-out 1s;
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
/*.isotope>div{
|
||
|
width: 33.333%;
|
||
|
}*/
|
||
|
|
||
|
/* ---- isotope items ---- */
|
||
|
|
||
|
|
||
|
|
||
|
.item,
|
||
|
.grid-sizer {
|
||
|
width: 33.333%;
|
||
|
}
|
||
|
|
||
|
.item {
|
||
|
float: left;
|
||
|
height: 500px;
|
||
|
margin: 0 auto;
|
||
|
text-align: center;
|
||
|
padding: 30px;
|
||
|
|
||
|
/*border: 2px solid black;*/
|
||
|
/*border-color: hsla(0, 0%, 0%, 0.7);*/
|
||
|
/*display: table; */
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
.item>*{
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.item.widthA { width: 66.666%; }
|
||
|
/*.item.height2 { height: 200px; }*/
|
||
|
|
||
|
|
||
|
/* clear fix */
|
||
|
.isotope:after {
|
||
|
content: '';
|
||
|
display: block;
|
||
|
clear: both;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
max-width: 100%;
|
||
|
max-height: 100%;
|
||
|
|
||
|
-webkit-filter: grayscale(100%);
|
||
|
-moz-filter: grayscale(100%);
|
||
|
-ms-filter: grayscale(100%);
|
||
|
-o-filter: grayscale(100%);
|
||
|
filter: grayscale(100%);
|
||
|
filter: gray; /* IE 6-9 */
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
.item {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.item.widthA { width: 100%; }
|
||
|
.grid-sizer {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.zwartAreaText{
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
color: white;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
@media (max-width: 500px) {
|
||
|
|
||
|
}
|
||
|
|