mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-21 17:47:10 +00:00
Merge branch 'hotfix/figure-image' into develop
This commit is contained in:
commit
e3928b7f5b
3 changed files with 658 additions and 3417 deletions
|
@ -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
4026
assets/css/main.css
File diff suppressed because it is too large
Load diff
|
@ -10,23 +10,35 @@ 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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue