theme(fix): no padding around banner images

closes #927
davidsneighbour · May 11, 2024 · 2f966f6 · 2f966f6
1 parent cfb7617
commit 2f966f6
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 75 deletions.
diff --git a/assets/scss/04-components/_articles.scss b/assets/scss/04-components/_articles.scss
@@ -1,6 +1,5 @@
 /// @todo move this into prose
 article {
-
   h1.post-title,
   h2.post-title {
     border-bottom: $border-width solid $primary;
@@ -30,14 +29,15 @@ article {
   @extend .position-relative;
 }
 
-
 .section--content {
   article {
     border: 1px solid rgba(0, 0, 0, 0.2);
-    padding: 1.2rem;
     background-color: rgba(0, 0, 0, 0.05);
 
     @extend .rounded;
-  }
 
+    .article-content {
+      padding: 1.2rem;
+    }
+  }
 }
diff --git a/layouts/partials/content/post-preview.html b/layouts/partials/content/post-preview.html
@@ -26,46 +26,50 @@
     {{- partials.Include "content/components/banner-video.html" $post -}}
   {{- end -}}
 
-  {{- /* MARK: Headline
-  */ -}}
-  {{- if ne $config.headline false -}}
-    {{- $options := dict "post" $post "level" "3" -}}
-    {{- partials.Include "content/components/headline.html" $options -}}
-  {{- end -}}
+  <div class="article-content">
 
-  {{- /* MARK: Headline-Banner
-  */ -}}
-  {{- if ne $config.bannerheadline false -}}
-    {{- partials.Include "content/components/headline-banner.html" $post -}}
-  {{- end -}}
+    {{- /* MARK: Headline
+    */ -}}
+    {{- if ne $config.headline false -}}
+      {{- $options := dict "post" $post "level" "3" -}}
+      {{- partials.Include "content/components/headline.html" $options -}}
+    {{- end -}}
 
-  {{- /* MARK: Content
-  */ -}}
-  <div class="prose">
-    {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-preview-before" "context" $post ) -}}
-    {{- $options := dict "type" $posttype "post" $post -}}
-    {{- partials.Include "content/components/content.html" $options $options -}}
-    {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-preview-after" "context" $post ) -}}
-  </div>
+    {{- /* MARK: Headline-Banner
+    */ -}}
+    {{- if ne $config.bannerheadline false -}}
+      {{- partials.Include "content/components/headline-banner.html" $post -}}
+    {{- end -}}
+
+    {{- /* MARK: Content
+    */ -}}
+    <div class="prose">
+      {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-preview-before" "context" $post ) -}}
+      {{- $options := dict "type" $posttype "post" $post -}}
+      {{- partials.Include "content/components/content.html" $options $options -}}
+      {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-preview-after" "context" $post ) -}}
+    </div>
+
+    {{- /* MARK: Read more button
+    */ -}}
+    <div class="text-end">
+      {{- /* @todo move into button component */ -}}
+      {{- $label := printf "%s: %s" (lang.Translate "theme.read_article") $post.Title -}}
+      <a href="{{- $post.Permalink -}}"
+          class="d-inline-flex flex-row justify-content-end align-items-center"
+          aria-label="{{- $label }}"
+          {{ with $index }}
+            data-hotkey="k+{{- $index -}}"
+          {{ end }}
+          >
+        <span class="d-inline-block pe-2">
+          {{- lang.Translate "theme.read_article" -}}
+        </span>
+        {{- $options := dict "icon" "chevron-double-right" "class" "d-inline-block mb-1" "width" "24" "height" "24" -}}
+        {{- partials.Include "icon.html" $options -}}
+      </a>
+    </div>
 
-  {{- /* MARK: Read more button
-  */ -}}
-	<div class="text-end">
-    {{- /* @todo move into button component */ -}}
-    {{- $label := printf "%s: %s" (lang.Translate "theme.read_article") $post.Title -}}
-		<a href="{{- $post.Permalink -}}"
-        class="d-inline-flex flex-row justify-content-end align-items-center"
-        aria-label="{{- $label }}"
-        {{ with $index }}
-          data-hotkey="k+{{- $index -}}"
-        {{ end }}
-        >
-      <span class="d-inline-block pe-2">
-        {{- lang.Translate "theme.read_article" -}}
-      </span>
-      {{- $options := dict "icon" "chevron-double-right" "class" "d-inline-block mb-1" "width" "24" "height" "24" -}}
-			{{- partials.Include "icon.html" $options -}}
-		</a>
   </div>
 
 </article>
diff --git a/layouts/partials/content/post.html b/layouts/partials/content/post.html
@@ -23,46 +23,49 @@
     {{- partials.Include "content/components/banner-video.html" $post -}}
   {{- end -}}
 
-  {{- /* MARK: Headline
-  */ -}}
-  {{- if ne $config.headline false -}}
-    {{- $options := dict "post" $post -}}
-    {{- partials.Include "content/components/headline.html" $options -}}
-  {{- end -}}
-
-  {{- /* MARK: Headline-banner
-  */ -}}
-  {{- if ne $config.bannerheadline false -}}
-    {{- partials.Include "content/components/headline-banner.html" $post -}}
-  {{- end -}}
-
-  <div class="prose">
-    {{- /* MARK: Content
-    */ -}}
-    {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-before" "context" $post ) -}}
-    {{- $options := dict "type" $posttype "post" $post "is_preview" false -}}
-    {{- partials.Include "content/components/content.html" $options $options -}}
-    {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-after" "context" $post ) -}}
+  <div class="article-content">
 
-    {{- /* MARK: Comments
+    {{- /* MARK: Headline
     */ -}}
-    <div class="section--comments">
-      {{- partials.IncludeCached "content/components/comment-form.html" $post $post -}}
-    </div>
-
-    {{- /* MARK: Meta
-    */ -}}
-    {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-meta-before" "context" $post ) -}}
-    {{- if ne $config.meta false -}}
-      {{ partial "content/components/meta.html" $post -}}
+    {{- if ne $config.headline false -}}
+      {{- $options := dict "post" $post -}}
+      {{- partials.Include "content/components/headline.html" $options -}}
     {{- end -}}
-    {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-meta-after" "context" $post ) -}}
 
-    {{- /* MARK: Related Posts
+    {{- /* MARK: Headline-banner
     */ -}}
-    {{- if ne $config.related false -}}
-      {{- partials.IncludeCached "content/sections/related.html" $post $post.Params.tags -}}
+    {{- if ne $config.bannerheadline false -}}
+      {{- partials.Include "content/components/headline-banner.html" $post -}}
     {{- end -}}
 
+    <div class="prose">
+      {{- /* MARK: Content
+      */ -}}
+      {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-before" "context" $post ) -}}
+      {{- $options := dict "type" $posttype "post" $post "is_preview" false -}}
+      {{- partials.Include "content/components/content.html" $options $options -}}
+      {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-after" "context" $post ) -}}
+
+      {{- /* MARK: Comments
+      */ -}}
+      <div class="section--comments">
+        {{- partials.IncludeCached "content/components/comment-form.html" $post $post -}}
+      </div>
+
+      {{- /* MARK: Meta
+      */ -}}
+      {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-meta-before" "context" $post ) -}}
+      {{- if ne $config.meta false -}}
+        {{ partial "content/components/meta.html" $post -}}
+      {{- end -}}
+      {{- partials.Include "func/hook.html" ( collections.Dictionary "hook" "post-meta-after" "context" $post ) -}}
+
+      {{- /* MARK: Related Posts
+      */ -}}
+      {{- if ne $config.related false -}}
+        {{- partials.IncludeCached "content/sections/related.html" $post $post.Params.tags -}}
+      {{- end -}}
+
+    </div>
   </div>
 </article>