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>