From d6def0b961b9f39e88e839aad24d5ad64c55e749 Mon Sep 17 00:00:00 2001
From: HumanoidSandvichDispenser <humanoidsandvichdispenser@gmail.com>
Date: Tue, 4 Jul 2023 01:35:55 -0700
Subject: [PATCH] site appearance

---
 layouts/_default/single.html      |  1 +
 layouts/partials/breadcrumbs.html |  2 ++
 layouts/partials/post.html        | 15 ++++++++++++---
 static/css/main.css               |  2 +-
 static/css/post-list.css          | 21 +++++++++++++++++++++
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 layouts/partials/breadcrumbs.html

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 119a70c..5797d3b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -9,6 +9,7 @@
             {{ partial "post-info.html" . }}
         {{ end }}
         {{ .Content }}
+        <h2 id="comments">Comments</h2>
         {{ partial "remark42.html" . }}
         {{ partial "footer.html" }}
     </div>
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
new file mode 100644
index 0000000..d58db9e
--- /dev/null
+++ b/layouts/partials/breadcrumbs.html
@@ -0,0 +1,2 @@
+<div>
+</div>
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 8138f88..0aa1d74 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,14 +1,23 @@
-<div class="post-item">
+{{ $class := cond .Truncated "post-item more" "post-item" }}
+<div class="{{ $class }}">
     <h1>
         <a href="{{ .RelPermalink }}">{{ .Title }}</a>
     </h1>
     {{ if (eq .Section "posts") }}
         {{ partial "post-info-small.html" . }}
     {{ end }}
-    {{ if (and .Truncated (gt (len .Summary) 0) .Truncated) }}
+    {{ if (gt (len .Summary) 0) }}
         <p>
             {{ .Summary }}
-            <a href="{{ .RelPermalink }}">(read more)</a>
         </p>
+        {{ if .Truncated }}
+            <div class="read-more-button">
+                <a href="{{ .RelPermalink }}" class="button">
+                    <button>
+                        Read more
+                    </button>
+                </a>
+            </div>
+        {{ end }}
     {{ end }}
 </div>
diff --git a/static/css/main.css b/static/css/main.css
index ca9839c..834744d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -20,7 +20,7 @@
     --cyan: #56b6c2;
     --purple: #c678dd;
     --accent: #61afef;
-    --bg0: #f3f3f3;
+    --bg0: #ffffff;
     --bg1: #ededed;
     --bg2: #dadada;
     --bg3: #afafaf;
diff --git a/static/css/post-list.css b/static/css/post-list.css
index 550c53b..d15e180 100644
--- a/static/css/post-list.css
+++ b/static/css/post-list.css
@@ -43,6 +43,12 @@ div.post-list {
     margin-bottom: 0;
 }
 
+.post-item.more p {
+	background: -webkit-linear-gradient(var(--fg0) 50%, var(--bg0) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
 .post-item h1 a:hover {
     color: unset;
     background-color: unset;
@@ -52,3 +58,18 @@ div.post-list {
 .tag-list li {
     font-family: var(--monospace);
 }
+
+.post-item:hover .read-more-button {
+    opacity: 1;
+    transition-duration: 200ms;
+}
+
+.read-more-button {
+    opacity: 0;
+    position: absolute;
+    transition-duration: 200ms;
+}
+
+.read-more-button button {
+    vertical-align: middle;
+}