Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

76 lines
1.1 KiB

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
background: #EEE;
width: 180px;
margin-bottom: 20px;
position: relative;
}
.container:after {
content: '';
display: block;
clear: both;
}
.item {
width: 60px;
height: 30px;
float: left;
border: 1px solid;
background: #3BF;
}
.item.w2 { width: 120px; }
.item.w3 { width: 180px; }
.item.h2 { height: 50px; }
.item.h3 { height: 70px; }
.item.h4 { height: 90px; }
.item.h5 { height: 110px; }
.stamp {
background: red;
opacity: 0.75;
position: absolute;
border: 1px solid;
}
/* ---- stamp ---- */
.has-stamp .item { width: 45px; }
/* stout, in the middle */
.has-stamp .stamp1 {
width: 40px;
height: 30px;
}
/* really wide */
.has-stamp .stamp2 {
width: 200px;
height: 20px;
}
/* ---- get segment size ---- */
#get-segment-size .grid-sizer {
/* 57 outer width */
width: 52px;
margin-right: 5px;
/* 47 outer height */
height: 40px;
margin-bottom: 7px;
}
#masonry-measure-columns .grid-sizer {
width: 70px;
}