themes/default/layouts/_default/summary: Avoid duplicate profile picture

By using a better hierarchy

3 files changed, 33 insertions, 17 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index d2b73e3..f00a2d4 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -904,10 +904,15 @@ micro-summary {
   border-color: #eee;
   border-color: var(--border-lighter);
   display: flex;
+  flex-direction: column;
   padding: 1rem;
   position: relative;
 }
 
+micro-author micro-summary {
+  flex-direction: row;
+}
+
 micro-summary:hover {
   background-color: #f5f9ff;
   background-color: var(--hover-background-alternate);
@@ -964,7 +969,7 @@ micro-thumbnail figure img {
 }
 
 micro-content {
-  min-width: 0;
+  margin-left: 4.25rem;
 }
 
 micro-content ul {
@@ -1025,7 +1030,7 @@ micro-metadata {
   color: var(--fade);
   display: flex;
   line-height: 1.4;
-  margin-bottom: 0.5rem;
+  align-items: flex-start;
 }
 
 micro-metadata h2 {
@@ -1035,12 +1040,17 @@ micro-metadata h2 {
 micro-metadata header {
   word-break: break-all;
   word-break: break-word;
+  margin-bottom: 0.5rem;
 }
 
 micro-metadata header a {
   color: inherit;
 }
 
+micro-metadata micro-thumbnail > figure {
+  height: 0;
+}
+
 micro-metadata header > *:not(:last-child) {
   margin-right: 0.5rem;
 }
@@ -1986,6 +1996,14 @@ link-card article a {
   padding-left: 2rem;
 }
 
+[xml-data] micro-summary {
+  flex-direction: row;
+}
+
+[xml-data] micro-content {
+  margin-left: 0;
+}
+
 [xml-data] micro-thumbnail {
   display: block;
 }
@@ -2108,12 +2126,14 @@ link-card article a {
 }
 
 @media screen and (max-width: 460px) {
-  micro-card micro-summary > micro-thumbnail {
-    display: none;
+  micro-content {
+    margin-left: 0;
   }
-  micro-metadata micro-thumbnail[hidden],
-  micro-author micro-card micro-summary > micro-thumbnail {
-    display: block;
+  micro-metadata {
+    align-items: center;
+  }
+  micro-metadata micro-thumbnail > figure {
+    height: inherit;
   }
 }
 
diff --git a/themes/default/layouts/_default/summary.html b/themes/default/layouts/_default/summary.html
index 0bf77a8..12aff25 100644
--- a/themes/default/layouts/_default/summary.html
+++ b/themes/default/layouts/_default/summary.html
@@ -8,13 +8,13 @@
   {{ if .ExpiryDate }}data-expires{{ end }}
 >
   <micro-summary title="{{- partial "meta-title.html" . -}}">
-    <micro-thumbnail>
-      {{ partial "profile-picture.html" . }}
-    </micro-thumbnail>
+    <micro-metadata>
+      <micro-thumbnail>
+        {{ partial "profile-picture.html" . }}
+      </micro-thumbnail>
+      {{ partial "card-meta-header.html" . }}
+    </micro-metadata>
     <micro-content>
-      <micro-metadata>
-        {{ partial "card-meta-header.html" . }}
-      </micro-metadata>
       {{- $content -}}
       <micro-tags>{{ partial "meta-tags.html" . }}</micro-tags>
     </micro-content>
diff --git a/themes/default/layouts/partials/card-meta-header.html b/themes/default/layouts/partials/card-meta-header.html
index 66dbb94..fd516f5 100644
--- a/themes/default/layouts/partials/card-meta-header.html
+++ b/themes/default/layouts/partials/card-meta-header.html
@@ -1,7 +1,3 @@
-<micro-thumbnail hidden>
-  {{ partial "profile-picture.html" . }}
-</micro-thumbnail>
-
 <header>
 
   {{- partial "meta-anchored.html" . -}}