From a3154bd99168a42bc92fe94104ddce91bdee4caf Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 08 Jan 2021 11:42:59 +0000
Subject: [PATCH] Simplified handling of thumbnails
---
layouts/_default/single.html | 3 +
layouts/index.html | 7 +++
assets/css/style.css | 66 ++++-----------------------------
3 files changed, 18 insertions(+), 58 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index 3be4ad8..70dbb98 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -14,9 +14,7 @@
--tag-color: #424242;
--blockquote-text-color: #858585;
--blockquote-border-color: #dfe2e5;
- --thumbnail-size: 150px;
- --thumbnail-position: 1; /* -1 left, 1 right */
- --thumbnail-height: 300px;
+ --thumbnail-height: 15em;
scroll-padding-top: 100px;
}
@@ -183,7 +181,6 @@
float: right;
width: 60%;
margin-top: 60px;
- /* background-color: var(--pre-bg-color); */
}
.page-top {
@@ -336,11 +333,7 @@
}
.post {
- /* max-width: 720px; better for larger resolutions */
background-color: var(--bg-color);
- border: 1px solid var(--border-color);
- border-top-left-radius: 1em;
- border-top-right-radius: 1em;
margin: 30px;
}
@@ -407,6 +400,7 @@
.post .post-footer {
padding: 0 0 10px 0;
+ border-bottom: 1px solid var(--border-color);
}
.post .post-footer .meta {
@@ -478,48 +472,22 @@
text-decoration: none;
}
-/* Post preview */
-.preview {
- display: flex;
- justify-content: space-between;
-}
-
-.preview .thumbnail {
- order: var(--thumbnail-position);
- height: var(--thumbnail-size);
- width: var(--thumbnail-size);
- flex: 0 0 auto;
- margin: 0 20px 20px 20px;
- border-radius: 50%;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: var(--secondary-bg-color); /* for lazy loading */
-}
-
-.preview .thumbnail img {
- max-height: 100%;
-}
-
-/* Alternative Thumbnail */
-.post-text {
- padding: 1em;
-}
-
-.post-thumbnail {
+.post .post-thumbnail {
width: 100%;
padding-bottom: 1em;
box-shadow: black;
border-radius: 0.5em;
overflow: hidden;
transition: box-shadow .3s ease;
+
}
-.post-thumbnail img {
+.post .post-thumbnail img {
width: 100%;
- height: 20em;
+ height: var(--thumbnail-height);
object-fit: cover;
+ border: 1px solid var(--border-color);
+ border-bottom: 0px;
}
.pagination {
@@ -554,11 +522,6 @@
float: right;
}
-.has-image {
- width: 100%;
- border-radius: .5em;
-}
-
.like-reblog-buttons {
float: right;
}
@@ -996,19 +959,6 @@
.theme-switch-item {
float: none;
}
-
- .preview {
- flex-direction: column;
- align-items: center;
- }
-
- .preview .thumbnail {
- order: var(--thumbnail-position);
- }
-
- :root {
- --thumbnail-height: 200px;
- }
}
/* Medium zoom */
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0773a1e..b62cf56 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,9 @@
{{ define "main" }}
<div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
<div class="post-content">
+ {{ if .Params.thumbnail }}
+ <img class="post-thumbnail" src="{{ .Params.thumbnail | absURL }}">
+ {{ end }}
<div class="post-title">
<h3>{{ .Title }}</h3>
{{ if eq .Type "post"}}
diff --git a/layouts/index.html b/layouts/index.html
index 90a12c4..05ff8a4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -14,6 +14,13 @@
{{ range $paginator.Pages }}
<div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
+ {{ if .Params.thumbnail }}
+ <div class="post-thumbnail">
+ <a href="{{ .RelPermalink }}">
+ <img src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy">
+ </a>
+ </div>
+ {{ end }}
<div class="post-title">
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h3>
--
Gitblit v1.10.0