HTML and CSS for search results

FossilOrigin-Name: fa8a9ca2c0e0daa31dfb4d412224937d6249516d828c0823731b823463385185

dist/treebird20.css

@@ -587,9 +587,9 @@ svg.in-reply-to-icon
 {
     font-style: italic;
     text-decoration: none;
-    margin: 0 4px 0 6px;
     font-size: 14px;
-    padding-top: 1px;
+    vertical-align: middle;
+    padding-left: 4px;
 }
 
 .status .poster-stats
@@ -792,6 +792,35 @@ svg.in-reply-to-icon
     height: 256px;
 }
 
+.account-stub-info
+{
+    padding-left: 4px;
+}
+
+.account-stub
+{
+    padding: 4px 4px 0;
+    width: 100%;
+}
+
+.account-stub-top,
+.account-stub-bottom
+{
+    display: block;
+}
+
+.account-stub-bottom
+{
+    color: #606060;
+    margin-top: 2px;
+    font-size: 12px;
+}
+
+.search-results .account-stub:not(:last-child)
+{
+    border-bottom: 1px solid #cacaca;
+}
+
 .account
 {
     position: relative;

src/account.c

@@ -306,6 +306,12 @@ char* construct_account(mastodont_t* api,
     char* acct_html;
 
     size_t s = easprintf(&acct_html, data_account_stub_html,
+                         config_url_prefix,
+                         acct->acct,
+                         acct->avatar,
+                         config_url_prefix,
+                         acct->acct,
+                         acct->display_name,
                          acct->acct);
 
     if (size) *size = s;

static/account_stub.html

@@ -1 +1,19 @@
-%s<br>
+<table class="account-stub">
+  <tr>
+    <td class="pfp-td">
+      <a href="%s/@%s"><img src="%s"></a>
+    </td>
+    <td class="account-stub-info-wrapper">
+      <div class="account-stub-info">
+        <a href="%s/@%s">
+          <div class="account-stub-top">
+            <span class="username">%s</span>
+          </div>
+          <div class="account-stub-bottom">
+            <span class="instance-info">@%s</span>
+          </div>
+        </a>
+      </div>
+    </td>
+  </tr>
+</table>

static/search.html

@@ -12,4 +12,6 @@
   </tr>
 </table>
 
-%s
+<div class="search-results">
+  %s
+</div>