Patch image width and blur for transparency

archetypes/default.md

@@ -6,6 +6,7 @@ date = ""
 tags = [""]
 categories = [""]
 comments = true
+removeBlur = false
 [[images]]
   src = ""
   alt = ""

assets/scss/main.scss

@@ -239,6 +239,7 @@ img,
 svg,
 video {
   vertical-align: middle;
+  max-width: 100%;
 }
 
 /*

exampleSite/config.toml

@@ -11,7 +11,7 @@ pluralizeListTitles     = false
 disableLanguages        = []
 
 [markup.goldmark.renderer]
-  unsafe= true
+  unsafe                = true
 
 [outputs]
   home                  = ["html", "json"]
@@ -26,6 +26,7 @@ disableLanguages        = []
   viewMorePostsLink     = "/blog/"
   readingTime           = true
   imageStretch          = ""
+  removeBlur            = false
   socialShare           = ["twitter", "facebook", "reddit", "linkedin", "pinterest", "email"]
   hideEmptyStats        = false
 

exampleSite/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -75,7 +75,8 @@ iframe,
 img,
 svg,
 video {
-  vertical-align: middle; }
+  vertical-align: middle;
+  max-width: 100%; }
 
 /*
 * Remove default fieldset styles.
@@ -1154,38 +1155,38 @@ figcaption {
   @media (min-width: 375px) {
     .comment header {
       border-radius: 0; } }
+  .comment header div {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center; }
+    @media (min-width: 375px) {
+      .comment header div {
+        flex-direction: row; } }
 .comment.comment-reply {
   margin-left: 1.875em; }
   @media (min-width: 375px) {
     .comment.comment-reply {
       margin-left: 3.75em; } }
-.comment div {
+.comment-author-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
-  align-items: center; }
+  align-items: center;
+  text-align: center; }
   @media (min-width: 375px) {
-    .comment div {
-      flex-direction: row; } }
-  .comment div .comment-author-container {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center; }
-    @media (min-width: 375px) {
-      .comment div .comment-author-container {
-        align-items: flex-start;
-        flex-grow: 1; } }
-    @media (min-width: 768px) {
-      .comment div .comment-author-container {
-        flex-direction: row;
-        align-items: center; } }
+    .comment-author-container {
+      align-items: flex-start;
+      flex-grow: 1; } }
+  @media (min-width: 768px) {
+    .comment-author-container {
+      flex-direction: row;
+      align-items: center; } }
 .comment-avatar {
   margin: 0 0 0 1em;
   width: 3.75em;

layouts/_default/featured.html

@@ -17,7 +17,7 @@
       {{- end -}}
     {{- end -}}
   {{- end -}}
-  <a href="{{ $.Page.RelPermalink }}" class="image" style="--bg-image: url('{{ $src }}');">
+  <a href="{{ $.Page.RelPermalink }}" class="image"{{ if not (.Params.removeBlur | default .Site.Params.removeBlur) }} style="--bg-image: url('{{ $src }}');"{{ end }}>
     <img {{ with $stretch }}class="{{ if or (eq (lower .) "vertical") (eq (lower .) "v") }}stretchV{{ else if or (eq (lower .) "horizontal") (eq (lower .) "h") }}stretchH{{ else if or (eq (lower .) "cover") (eq (lower .) "c") }}cover{{ end }}" {{ end }}src="{{ $src }}" alt="{{ $alt }}">
   </a>
 {{- end -}}