Update styles some more

public/css/index.css

@@ -170,30 +170,37 @@ a:focus {
 
 .h-card-grid {
     display: grid;
-    grid-template-rows: min-content 1fr;
+    grid-template-rows: min-content;
     grid-template-columns: 1fr 1fr;
+    justify-content: space-around;
 }
 
 .h-card-grid__first-row {
-    grid-rows: span all;
+    display: flex;
+    flex-flow: row;
+    flex: 1 0 auto;
 }
 
 .h-card-grid__second-row {
     column-count: 3;
+    list-style: none;
+    align-self: center;
+    /* column-rule: 1px solid currentColor; */
+    padding: 0;
+    margin: 0;
 }
 
-.h-card,
-.h-card--extended header {
-    display: flex;
-    flex-wrap: wrap;
+.h-card-grid__third-row {
+    grid-column: span 2;
 }
 
-.h-card--extended {
-    display: flex;
-    flex-flow: column nowrap;
+.h-card-grid__list-item {
+    line-height: 2;
+    justify-content: center;
+    justify-self: center;
 }
 
-.h-card__avatar a,
+.h-card__avatar-link,
 .h-card__avatar img {
     width: var(--avatar-width);
     height: var(--avatar-height);
@@ -331,7 +338,7 @@ a:focus {
     text-decoration: underline;
 }
 
-.h-cite.context {
+.context {
     padding: 0.5rem 1rem;
     color: var(--tertiary-color);
     border-bottom: 1px solid var(--tertiary-color-faded);

public/css/screen-lg.css

@@ -14,7 +14,7 @@
 }
 
 @media screen and (min-width: 900px) {
-    .h-entry, .h-card .bio, .bth-form {
+    .h-entry, .block {
         min-width: 750px;
         max-width: 1120px;
         margin: 10px auto 0px;

public/css/screen-sm.css

@@ -22,15 +22,24 @@
         margin: 0 .5rem;
     }
 
+    .h-card-grid {
+        grid-template-rows: min-content 1fr;
+        grid-template-columns: 1fr;
+    }
+
+    .h-card-grid__first-row {
+        grid-column: span 2;
+    }
+
+    .h-card__name {
+        padding: 0 0.5rem;
+    }
+
     .h-card__avatar {
         --avatar-width: 75px;
         --avatar-height: 75px;
     }
 
-    .h-card-grid__second-row {
-        list-style: none;
-    }
-
     .sm-hidden {
         display: none;
     }

public/css/solarized.css

@@ -124,7 +124,7 @@
     text-shadow: 0 1px 1px var(--base1);
 }
 
-.solarized-dark .h-cite.context {
+.solarized-dark .context {
     padding: 0.5rem 1rem;
     color: var(--base00);
     border-bottom: 1px solid var(--base01);

public/css/typewolf.css

@@ -148,7 +148,7 @@
     fill: var(--secondary-color);
 }
 
-.typewolf .h-cite.context {
+.typewolf .context {
     padding: 0.5rem 1rem;
     color: var(--primary-color);
     border-bottom: 1px solid var(--primary-color);

templates/about.html.tera

@@ -23,31 +23,23 @@
 {% endblock opengraph %}
 
 {% block content %}
-    <section class="h-card h-card--extended">
-        <header>
-            <div class="h-card__avatar">
-                <a class="u-url" href="{{host}}/about" rel="me"></a>
-                <a class="u-url" href="{{host}}" rel="me">
-                    <img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
-                </a>
-            </div>
+    <section class="h-card h-card-grid">
+        <header class="h-card-grid__first-row h-card__avatar">
+            <a class="u-url h-card__avatar-link" href="{{host}}" rel="me">
+                <img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
+            </a>
+            <a class="u-url" href="{{host}}/about" rel="me"></a>
             <div class="h-card__name">
                 <h1 class="p-name">{{name}}</h1>
                 <h4>
                     <span class="p-nickname">{{username}}</span>@{{domain}}
                 </h4>
             </div>
-            <div class="extra-links">
-                <ul>
-                    <li><a href="{{host}}/likes">Likes</a></li>
-                    <li><a href="{{host}}/boosts">Boosts</a></li>
-                    <li><a href="{{host}}/settings">Site Settings</a></li>
-                </ul>
-            </div>
         </header>
-        <hr class="extended-divider" />
+        {% include "partials/links" %}
+        <hr class="extended-divider h-card-grid__third-row" />
 
-        <section class="bio">
+        <section class="bio h-card-grid__third-row">
             <h2>About Me</h2>
             <div class="bio__inner block block--padding">
                 <p class="p-adr h-adr">

templates/partials/hcard.html.tera

 <address class="h-card p-author h-card-grid">
     <div class="h-card-grid__first-row h-card__avatar">
-        <a class="u-url" href="{{host}}/about" rel="me"></a>
-        <a class="u-url" href="{{host}}">
+        <a class="u-url h-card__avatar-link" href="{{host}}">
             <img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
         </a>
+        <a class="u-url" href="{{host}}/about" rel="me"></a>
         <div class="h-card__name">
             <h1 class="p-name">{{name}}</h1>
             <h4>
@@ -11,10 +11,6 @@
             </h4>
         </div>
     </div>
-    <ul class="h-card-grid__second-row">
-        <li><a href="{{host}}/likes">Likes</a></li>
-        <li><a href="{{host}}/boosts">Boosts</a></li>
-        <li><a href="{{host}}/settings">Site Settings</a></li>
-    </ul>
+    {% include "partials/links" %}
 </address>
 

templates/partials/links.html.tera

+<ul class="h-card-grid__second-row">
+    <li class="h-card-grid__list-item"><a href="{{host}}/likes">Likes</a></li>
+    <li class="h-card-grid__list-item"><a href="{{host}}/boosts">Boosts</a></li>
+    <li class="h-card-grid__list-item"><a href="https://github.com/zcdunn" rel="me">Github</a></li>
+    <li class="h-card-grid__list-item"><a href="https://gitlab.com/zdunn" rel="me">GitLab</a></li>
+    <li class="h-card-grid__list-item"><a href="https://edolas.world/0x1C3B00DA" rel="me">Fediverse</a></li>
+    <li class="h-card-grid__list-item"><a href="{{host}}/settings">Site Settings</a></li>
+</ul>
+

templates/partials/reply-context.html.tera

-<section class="h-cite context">
+<section class="context">
     In reply to <a href="{{post.in_reply_to}}" class="u-in-reply-to">{{post.in_reply_to}}</a>
 </section>