Improve blogs image

4 files changed, 47 insertions, 13 deletions

diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 8ac9d45..f0d3c45 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -14,7 +14,9 @@
 	<article>
 		<a class="visually-hidden" aria-hidden="true" href="{{ .Permalink }}">{{ .Title }}</a>
 		<a class="blog" href="{{ .Permalink }}">
-			<div class="img" style="background-image: url({{ .Params.image }});"></div>
+			{{ $img := (replace .Params.image "." "-mini.") }}
+			{{ partial "picture" (dict "img" $img "class" "img") }}
+			
 			<div class="info">
 				<div class="date">{{ partial "date-short.html" (dict "time" .Date "lang" $lang) }}</div>
 				<h2>{{ .Title }}</h2>
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 7aa8c8b..97a2c56 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -1,16 +1,22 @@
 {{ define "main" }}
 
 <div class="hero" >
-	<div class="img" style="color: {{ .Params.color | default "#fff" }};background-image: url({{ .Params.image }})"></div>
-
+	{{ partial "picture" (dict "img" .Params.image "class" "img" "widths" (slice 540 720 960 1140) )}}
+	{{ if .Params.imageInfo }}
+	<div class="image-info {{ .Params.infoClass | default "light" }}">
+		{{- .Params.imageInfo }}
+	</div>
+	{{ end }}
+	
 	<div class="description">
 		<h1>
 			<span>{{ .Title }}</span>
 			<small>{{ .Params.brief }}</small>
 		</h1>
-<!--
+		{{- if .Params.toc }}
 		<hr>
-		{{ .TableOfContents }} -->
+		{{ .TableOfContents }} 
+		{{ end }}
 	</div>
 </div>
 
diff --git a/src/styles/pages/_blog.scss b/src/styles/pages/_blog.scss
index ec75a71..4b5b734 100644
--- a/src/styles/pages/_blog.scss
+++ b/src/styles/pages/_blog.scss
@@ -1,17 +1,35 @@
 .page.blog {
   .hero {
     .img {
-      padding: var(--container-margin);
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center center;
-
-      text-shadow: 1px 0 0 var(--lighten-3);
+      display: block;
       min-height: 45vmin;
+      max-height: 45vmin;
+      overflow: hidden;
+
+      &> * {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 50% 50%;
+      }
+    }
+
+    .image-info {
+      margin: -1.5em 1em;
+      opacity: .5;
+
+      &.dark {
+        color: #000;
+        text-shadow: 0 1px hsla(0, 100%, 100%, .5);
+      }
+      &.light {
+        color: #fff;
+        text-shadow: 0 1px rgba(0, 0, 0, .5);
+      }
     }
 
     h1 {
-      color: var(--primary);
+      color: var(--toc-text);
       padding-left: 0;
       padding-right: 0;
       small {
@@ -44,7 +62,7 @@
     }
 
     h1,h2,h3,h4,h5,h6 {
-      color: var(--primary);
+      color: var(--toc-text);
       font-style: normal;
       font-weight: 400;
     }
diff --git a/src/styles/pages/_blogs.scss b/src/styles/pages/_blogs.scss
index ae543aa..ecc5566 100644
--- a/src/styles/pages/_blogs.scss
+++ b/src/styles/pages/_blogs.scss
@@ -43,6 +43,14 @@
         height: var(--size, 16rem);
         width: var(--size, 16rem);
         border-radius: var(--space-2);
+        overflow: hidden;
+
+        &> * {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: 50% 50%;
+        }
       }
 
       .info {