Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Updated grid item sizes to show off masonry

Browse Source
pull/56/head
Glen Cheney 12 years ago
parent 276d69e114
commit c6d4202d0f
2 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File

37
css/style.css
Unescape Escape View File

@ -1,12 +1,27 @@
/*=============================================*\
$Shuffle grabs these values
$Some styles to show off masonry layout
\*=============================================*/
#grid .item {
.item {
width: 230px;
height: 200px;
overflow: hidden;
margin-top: 20px;
margin-right: 20px;
}
.item.w2 {
width: 480px;
}
.item.w2.h2 img {
width: 100%;
height: auto;
}
.item.h2 {
height: 420px;
}
/*=============================================*\
$Structure
\*=============================================*/
@ -58,6 +73,10 @@ section {
margin: 40px 0;
}
p strong {
color: #e6db74;
}
a {
color: #0AAAC8;
text-decoration: none;
@ -266,6 +285,16 @@ header p {margin-top: 0;}
padding: 14px;
}
#grid .item-details p {
white-space: normal;
}
#grid .item p.rfloat {
margin: 0;
padding: 5px;
width: 230px;
}
#grid .item-details a {
margin-top: 2px;
font-size: 12px;
@ -292,6 +321,10 @@ header p {margin-top: 0;}
-1px 0 rgba(0, 0, 0, .75);
}
#grid .item.w2:not(.h2):before {
right: 250px;
}
/* IE opacity fix */
.lt-ie9 #grid .item.concealed:before {
content: none;

23
index.html
Unescape Escape View File

@ -73,7 +73,8 @@
<a href="img/originals/baseball.jpg">Photography</a>
</div>
</div>
<div class="item" data-groups='["wallpaper", "3d"]' data-date-created="2011-08-14" data-title="Tennis">
<div class="item w2" data-groups='["wallpaper", "3d"]' data-date-created="2011-08-14" data-title="Tennis">
<p class="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Tennis</span>
@ -87,11 +88,15 @@
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief">
<div class="item h2" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief">
<img src="img/master-chief.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Master Chief</span>
<a href="#">Graphic Design</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Eightfold">
@ -101,25 +106,30 @@
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["photography"]' data-date-created="2012-03-14" data-title="Pumpkin">
<div class="item w2" data-groups='["photography"]' data-date-created="2012-03-14" data-title="Pumpkin">
<p class="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="img/pumpkin.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Pumpkin</span>
<a href="#">Photography</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Vestride">
<div class="item w2 h2" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Vestride">
<img src="img/vestride-red.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Vestride</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["graphics"]' data-date-created="2012-01-12" data-title="Newegg">
<div class="item h2" data-groups='["graphics"]' data-date-created="2012-01-12" data-title="Newegg">
<img src="img/newegg.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Newegg</span>
<a href="#">Motion Graphics</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
<div class="item" data-groups='["wallpaper"]' data-date-created="2012-01-14" data-title="Arc">
@ -136,7 +146,8 @@
<a href="img/originals/baseball.jpg">Photography</a>
</div>
</div>
<div class="item" data-groups='["wallpaper"]' data-date-created="2011-12-14" data-title="Grass">
<div class="item w2" data-groups='["wallpaper"]' data-date-created="2011-12-14" data-title="Grass">
<p class="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="img/grassy-hills.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Grass</span>

Write Preview
Loading…
Cancel
Save