Skip to content
Permalink
Browse files

responsive cover image support. fixed a glitch with the menu

  • Loading branch information...
zutrinken committed Jul 10, 2019
1 parent 77099a9 commit 1cb30ce0d66a592b2fdf9733d4520021dd31607f
Showing with 98 additions and 9 deletions.
  1. +2 −2 assets/css/style.css
  2. +18 −2 author.hbs
  3. +9 −1 index.hbs
  4. +15 −1 package.json
  5. +11 −1 post.hbs
  6. +25 −0 src/sass/style.scss
  7. +18 −2 tag.hbs

Large diffs are not rendered by default.

@@ -20,10 +20,26 @@
{{/if}}
</nav>
{{#if cover_image}}
<div class="blog-cover cover" style="background-image: url('{{img_url cover_image}}');"></div>
<div class="blog-cover cover">
<img
srcset="{{img_url cover_image size="s"}} 320w,
{{img_url cover_image size="m"}} 640w,
{{img_url cover_image size="l"}} 960w,
{{img_url cover_image size="xl"}} 1920w"
src="{{img_url cover_image size="xl"}}"
alt="{{@site.title}}" />
</div>
{{else}}
{{#if @site.cover_image}}
<div class="blog-cover cover" style="background-image: url('{{img_url @site.cover}}');"></div>
<div class="blog-cover cover">
<img
srcset="{{img_url @site.cover_image size="s"}} 320w,
{{img_url @site.cover_image size="m"}} 640w,
{{img_url @site.cover_image size="l"}} 960w,
{{img_url @site.cover_image size="xl"}} 1920w"
src="{{img_url @site.cover_image size="xl"}}"
alt="{{@site.title}}" />
</div>
{{/if}}
{{/if}}
</div>
@@ -18,7 +18,15 @@
<span class="blog-description">{{@site.description}}</span>
{{/if}}
{{#if @site.cover_image}}
<div class="blog-cover cover" style="background-image: url('{{img_url @site.cover_image}}');"></div>
<div class="blog-cover cover">
<img
srcset="{{img_url @site.cover_image size="s"}} 320w,
{{img_url @site.cover_image size="m"}} 640w,
{{img_url @site.cover_image size="l"}} 960w,
{{img_url @site.cover_image size="xl"}} 1920w"
src="{{img_url @site.cover_image size="xl"}}"
alt="{{@site.title}}" />
</div>
{{/if}}
</div>
</header>
@@ -46,6 +46,20 @@
"load-grunt-tasks": "^3.5.2"
},
"config": {
"posts_per_page": 10
"posts_per_page": 10,
"image_sizes": {
"s": {
"width": 320
},
"m": {
"width": 640
},
"l": {
"width": 960
},
"xl": {
"width": 1920
}
}
}
}
@@ -26,7 +26,17 @@
</nav>
<h1 class="post-title">{{{title}}}</h1>
<span class="post-meta">{{authors separator=", "}} | <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time></span>
{{#if feature_image}}<div class="post-cover cover" style="background-image: url('{{feature_image}}');"></div>{{/if}}
{{#if feature_image}}
<div class="post-cover cover">
<img
srcset="{{img_url feature_image size="s"}} 320w,
{{img_url feature_image size="m"}} 640w,
{{img_url feature_image size="l"}} 960w,
{{img_url feature_image size="xl"}} 1920w"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}" />
</div>
{{/if}}
</div>
</header>

@@ -536,6 +536,18 @@ img {
z-index: 5;
background: no-repeat scroll center center / cover $color-black;
animation: 0.5s ease-in forwards fadein;
display: flex;
align-items: center;

img {
position: relative;
display: block;
width: 100%;
height: 100%;
margin: 0;
z-index: 6;
object-fit: cover;
}
}
.blog-cover:after {
position: absolute;
@@ -702,6 +714,7 @@ img {
box-shadow: inset -2px 0 7px rgba(0,0,0,0.1);
transform: translate3d(16em,0,0);
transition: all ease-out 0.25s;
box-sizing: border-box;
}
.menu-active #menu {
transform: translate3d(0,0,0);
@@ -1000,6 +1013,18 @@ img {
z-index: 5;
background: no-repeat scroll center center / cover $color-black;
animation: 0.5s ease-in forwards fadein;
display: flex;
align-items: center;

img {
position: relative;
display: block;
width: 100%;
height: 100%;
margin: 0;
z-index: 6;
object-fit: cover;
}
}
.post-cover:after {
position: absolute;
20 tag.hbs
@@ -27,10 +27,26 @@
{{/if}}
</span>
{{#if tag.feature_image}}
<div class="blog-cover cover" style="background-image: url('{{img_url tag.feature_image}}');"></div>
<div class="blog-cover cover">
<img
srcset="{{img_url tag.feature_image size="s"}} 320w,
{{img_url tag.feature_image size="m"}} 640w,
{{img_url tag.feature_image size="l"}} 960w,
{{img_url tag.feature_image size="xl"}} 1920w"
src="{{img_url tag.feature_image size="xl"}}"
alt="{{@site.title}}" />
</div>
{{else}}
{{#if @site.cover_image}}
<div class="blog-cover cover" style="background-image: url('{{img_url @site.cover_image}}');"></div>
<div class="blog-cover cover">
<img
srcset="{{img_url @site.cover_image size="s"}} 320w,
{{img_url @site.cover_image size="m"}} 640w,
{{img_url @site.cover_image size="l"}} 960w,
{{img_url @site.cover_image size="xl"}} 1920w"
src="{{img_url @site.cover_image size="xl"}}"
alt="{{@site.title}}" />
</div>
{{/if}}
{{/if}}
</div>

0 comments on commit 1cb30ce

Please sign in to comment.
You can’t perform that action at this time.