2 files changed, 16 insertions(+), 5 deletions(-)

M layouts/partials/bio-hcard.html
M static/css/style.css

@@ 1,6 1,8 @@
-<div class="h-card p-author" style="text-align:center;">
-    <img class="u-photo avatar" src="{{ .Site.Params.Author.avatar }}" alt="{{ .Site.Params.Author.name }}'s avatar">
-    <p class="p-note">{{ .Site.Params.Author.Bio | safeHTML }}</p>
-    <p><a href="{{ .Site.BaseURL }}" rel="me" class="p-nickname p-name u-url">{{ .Site.Params.Author.name }}</a></p>
+<div class="h-card p-author bio-card" style="text-align:center;">
+    <div class="bio">
+      <img class="u-photo avatar" src="{{ .Site.Params.Author.avatar }}" alt="{{ .Site.Params.Author.name }}'s avatar">
+      <p class="p-note">{{ .Site.Params.Author.Bio | safeHTML }}</p>
+    </div>
+    <p class="bio-name"><a href="{{ .Site.BaseURL }}" rel="me" class="p-nickname p-name u-url">{{ .Site.Params.Author.name }}</a></p>
 </div>
 <hr/>

@@ 13,7 13,7 @@ article{padding:24px 0}
 figcaption {color: #888; font: 12px/1.5 monospace; text-align: center;}
 figure {margin: auto}
 img {display: block; max-width: 100%; height: auto; margin: auto}
-.avatar {width: 128px; height: 128px;border-radius: 50%;}
+.avatar {width:100px;height:100px;border-radius:50%;}
 .alert{color: var(--fontcolor); background: var(--alertbgcolor); padding:24px; overflow-x: auto}
 .article-nextprev{display:flex; flex-flow: row wrap-reverse; justify-content: space-between;}
 hr{margin:35px 33% 15px; border-color: var(--hrcolor); border-width:3px;}


@@ 22,3 22,12 @@ blockquote{background: var(--blockquotecolor); margin: auto; padding: 5px 25px;}
 ul{padding-left: 1rem;}li{list-style-type: disclosure-closed;}
 .toc{border: 1px solid var(--hrcolor); margin:0.5rem; padding:0rem 2rem;}
 h1.site-title{color: var(--sitetitlecolor); text-align:center;}
+.bio-card .bio{display:flex;}
+.bio-card .bio > img{margin-right:2rem;align-self:flex-start;}
+.bio-card .bio > p{align-self:center;text-align:left;}
+.bio-card .bio-name {margin-top:0;}
+@media all and (max-width: 800px) {
+  .bio-card .bio {justify-content: space-around;flex-direction: column;}
+  .bio-card .bio > img {align-self:center;margin:auto;}
+  .bio-card .bio > p {align-self:center;text-align:center;}
+}