adulau/brouilleursdeblanc
1
0
Fork 0
mirror of https://github.com/adulau/brouilleursdeblanc.git synced 2024-12-22 16:46:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor figure image classes and add hover effects

Browse source
This commit is contained in:
Michael Rose 2013-08-05 11:33:53 -04:00
parent 5129833e43
commit 86b14ebfa4
3 changed files with 658 additions and 3417 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
_posts/2013-05-22-sample-post-images.md
View file

@ -35,6 +35,8 @@ And you'll get something that looks like this:
<figure class="half">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<img src="http://placehold.it/600x300.jpg">
<img src="http://placehold.it/600x300.jpg">
<figcaption>Two images.</figcaption>
</figure>
@ -54,6 +56,9 @@ Apply the `third` class like so to display three images side by side that share
And you'll get something that looks like this:
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>

4026
assets/css/main.css
View file

File diff suppressed because it is too large Load diff

44
assets/less/elements.less
View file

@ -10,22 +10,34 @@ hr {
// Figures and images
// --------------------------------------------------
figure {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
.clearfix();
img {
margin-bottom: 10px;
}
a {
img {
.translate(0, 0);
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
.opacity(0.7);
&:hover {
.translate(0, -5px);
.box-shadow(0 0 10px fade(@black, 20));
.opacity(1);
}
}
}
&.half {
@media @large {
a {
img {
width: 310px;
float: left;
&:nth-child(odd) {
margin-right: 10px;
}
&:nth-child(even) {
margin-left: 10px;
}
margin-right: 10px;
}
figcaption {
clear: left;
@ -34,17 +46,10 @@ figure {
}
&.third {
@media @large {
a {
img {
width: 200px;
float: left;
margin-right: 10px;
margin-left: 10px;
&:first-child {
margin-left: 0;
}
&:nth-child(3) {
margin-right: 0;
}
}
figcaption {
clear: left;
@ -52,13 +57,6 @@ figure {
}
}
}
img {
max-width: 100%;
height: auto;
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}