my eye

Add photo to homepage h-card and make whitespace uniform

Committed 7e3544

--- a/canopy/static/screen.css
+++ b/canopy/static/screen.css

     background-color: #002b36;
     color: #839496;
     display: grid;
-    grid-column-gap: 1.666%;
+    grid-column-gap: 1em;
     /* grid-template-columns: 5em 40em 13em; */
     grid-template-columns: 8.333% 66.666% 21.666%;
     grid-template-rows: min-content min-content min-content;
     margin: 0 auto;
     max-width: 60em;
-    padding: 2em 0; }
+    padding: 1.5em 0; }
 body.widescreen {
     margin: 0 2em;
     max-width: 100%; }
     grid-column-start: 1;
     grid-column-end: 4;
     grid-row: 1;
-    grid-template-columns: auto auto; }
-body > header div:last-child {
+    grid-template-columns: auto auto;
+    margin-bottom: 1em; }
+body > header > div:last-child {
     text-align: right; }
 
 article#content {
   color: #6c71c4; }
 
 .h-card img {
-    border: .0625em solid #ccc;
+    border: 0;
     border-radius: 50%;
-    display: block;
-    margin: 0 auto 1em auto;
-    width: 60%; }
+    display: inline-block;
+    height: 3em;
+    margin: 0 .25em 0 0; }
 /* .h-card > div {
     display: inline-block; } */
-.h-card > p {
+.namedesc {
+    display: inline-block; }
+.namedesc > p {
     margin: 0; }
 a.p-name {
     font-size: 2em;
     font-weight: 500;
-    line-height: 1.25;
+    line-height: 1;
     text-decoration: none; }
 p.p-note {
     font-size:.75em;
-    margin-top: .5em; }
+    margin-top: .25em; }
 #search {
     margin: 0 0 .5em 0; }
 

--- a/canopy/templates/template.html
+++ b/canopy/templates/template.html

 $if tx.user.is_owner:
     <style>
     .h-card img {
-        border: .15em solid #007ba7; }
+        border: .2em solid #007ba7;
+        height: 2.6em; }
     </style>
 
 </head>
 
 <header>
 <div class=h-card>
-    <!--img class=u-photo src=/static/photo.png-->
-    <p><a href=/ rel=me class="p-name u-url u-uid">
-        <strong>$owner["name"][0]</strong></a></p>
+    $if "photo" in owner:
+        <img class=u-photo src=/media/$owner["photo"][0]>
+    <div class=namedesc>
+    <a href=/ rel=me class="p-name u-url u-uid">
+        <strong>$owner["name"][0]</strong></a>
     $if "note" in owner:
         <p class=p-note>$owner["note"][0]</p>
+    </div>
     $if "email" in owner:
         $ email = get_first(owner, "email")
         <p><small>