site appearance

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>

layouts/partials/breadcrumbs.html

@@ -0,0 +1,2 @@
+<div>
+</div>

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>

static/css/main.css

@@ -20,7 +20,7 @@
     --cyan: #56b6c2;
     --purple: #c678dd;
     --accent: #61afef;
-    --bg0: #f3f3f3;
+    --bg0: #ffffff;
     --bg1: #ededed;
     --bg2: #dadada;
     --bg3: #afafaf;

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;
+}