Make 'show more' button look nicer

internal/webserver/static/styles.css

@@ -2,6 +2,7 @@
     --color-twitter-text-gray: #536171;
     --color-twitter-blue: #1b95e0;  /* hsl(203, 78%, 49%) */
     --color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
+    --color-twitter-blue-extra-light: hsl(204, 95%, 92%);
     --color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
     --color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
     --color-outline-gray: #dcdcdc;
@@ -450,12 +451,25 @@ ul.quick-links {
     /* not for nested (i.e., quoted) tweets */
     border-bottom: 1px solid var(--color-twitter-off-white-dark);
 }
-.timeline .eof-indicator {
+
+.timeline .timeline-bottom-container {
     text-align: center;
-    color: var(--color-twitter-text-gray);
     font-size: 1.2em;
     padding: 1em 0;
 }
+.timeline .timeline-bottom-container .eof-indicator {
+    color: var(--color-twitter-text-gray);
+}
+.timeline .timeline-bottom-container .show-more {
+    padding: 0em 0.8em;
+    display: inline-block;
+    border: 2px solid var(--color-twitter-blue);
+    color: var(--color-twitter-text-gray);
+    font-size: 0.9em;
+}
+.timeline .timeline-bottom-container .show-more:not(:hover):not(:active) {
+    background-color: var(--color-twitter-blue-extra-light);
+}
 
 .top-bar {
     display: flex;

internal/webserver/tpl/tweet_page_includes/timeline.tpl

@@ -2,12 +2,6 @@
   {{range .Items}}
     {{template "tweet" .}}
   {{end}}
-  {{if .CursorBottom.CursorPosition.IsEnd}}
+
-    <div class="eof-indicator">End of feed</div>
+  {{template "timeline-bottom" .CursorBottom}}
-  {{else}}
-    <button class="show-more"
-      hx-get="?{{(cursor_to_query_params .CursorBottom)}}"
-      hx-swap="outerHTML"
-    >Show more</button>
-  {{end}}
 {{end}}