gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

Fixed thumbnail sizing

Browse source
This commit is contained in:
sharpshark28 2017-04-09 21:19:14 -05:00
parent 3cf5047f83
commit 98dc748417
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
layouts/index.html
View file

@ -12,9 +12,8 @@
{{#each collections.posts as |post|}} {{#each collections.posts as |post|}}
<li data-type="{{ post.type }}" class="grid__col grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-1"> <li data-type="{{ post.type }}" class="grid__col grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-1">
<figure onclick="window.location = '{{ post.path }}'"> <figure onclick="window.location = '{{ post.path }}'">
<div class="preview"> <div class="preview" style="background-image: url(../../assets/media/{{ post.preview }})">
<h3>{{ post.title }}</h3> <h3>{{ post.title }}</h3>
<img src="../../assets/media/{{ post.preview }}" alt="" />
</div> </div>
<figcaption> <figcaption>
{{ post.description }} {{ post.description }}

24
src/app.scss
View file

@ -211,7 +211,6 @@ video {
} }
img { img {
object-fit: cover;
border-radius: 0; border-radius: 0;
opacity: .2; opacity: .2;
display: block; display: block;
@ -220,6 +219,8 @@ video {
.preview { .preview {
position: relative; position: relative;
display: inline-block; display: inline-block;
background-size: cover;
background-position: center center;
h3 { h3 {
color: white; color: white;
@ -237,6 +238,7 @@ video {
bottom: 0; bottom: 0;
left: 0; left: 0;
background: $dark; background: $dark;
opacity: .75;
} }
} }
@ -263,19 +265,13 @@ video {
} }
[data-type=bundle] { [data-type=bundle] {
@media (min-width: $qry-s) {
width: 98.5%;
}
figure { figure {
width: 100%; width: 100%;
.preview { .preview {
float: left; float: left;
}
.preview img {
height: 2.5em; height: 2.5em;
width: 83%;
} }
} }
@ -283,9 +279,19 @@ video {
float: right; float: right;
padding-top: 0; padding-top: 0;
} }
@media (min-width: $qry-s) {
width: 98.5%;
}
@media (max-width: $qry-m) {
figure .preview {
width: 100%;
}
}
} }
[data-type=article] .preview img { [data-type=article] .preview {
width: 100%; width: 100%;
height: 9rem; height: 9rem;
} }