adulau/brouilleursdeblanc
1
0
Fork 0
mirror of https://github.com/adulau/brouilleursdeblanc.git synced 2024-11-22 01:57:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'hotfix/figure-image'

Browse source
This commit is contained in:
Michael Rose 2013-08-05 11:34:17 -04:00
commit 39d6c99c2f
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"> <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>
<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> <figcaption>Two images.</figcaption>
</figure> </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: And you'll get something that looks like this:
<figure class="third"> <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> <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

42
assets/less/elements.less
View file

@ -10,23 +10,35 @@ hr {
// Figures and images // Figures and images
// -------------------------------------------------- // --------------------------------------------------
figure { figure {
margin: 0; margin: 0;
padding-top: 10px; padding-top: 10px;
padding-bottom: 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 { &.half {
@media @large { @media @large {
a { img {
width: 310px; width: 310px;
float: left; float: left;
&:nth-child(odd) {
margin-right: 10px; margin-right: 10px;
} }
&:nth-child(even) {
margin-left: 10px;
}
}
figcaption { figcaption {
clear: left; clear: left;
} }
@ -34,17 +46,10 @@ figure {
} }
&.third { &.third {
@media @large { @media @large {
a { img {
width: 200px; width: 200px;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
margin-left: 10px;
&:first-child {
margin-left: 0;
}
&:nth-child(3) {
margin-right: 0;
}
} }
figcaption { figcaption {
clear: left; 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) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }