mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-07 12:06:26 +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">
|
<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
4026
assets/css/main.css
File diff suppressed because it is too large
Load diff
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue