themes/default/layouts/partials/profile: Better semantic structure

2 files changed, 17 insertions, 24 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 6fac1af..c2bf593 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1266,7 +1266,7 @@ anchored-liked svg {
   fill: #cd5c5c;
 }
 
-micro-header micro-header-banner img {
+micro-header picture[data-type="banner"] img {
   background-color: transparent;
   border-radius: 0.125rem;
   height: 12rem;
@@ -1274,7 +1274,7 @@ micro-header micro-header-banner img {
   border: none;
 }
 
-micro-header micro-header-picture img {
+micro-header picture[data-type="profile"] img {
   border-radius: 100%;
   height: 8rem;
   margin: -4rem 2rem 0 2rem;
@@ -1290,13 +1290,14 @@ micro-header section {
   align-items: baseline;
 }
 
-micro-header-title {
+micro-header section aside {
   flex: 1;
   line-height: 1.25;
   margin-right: 1rem;
+  display: inline;
 }
 
-micro-header-description {
+micro-header section p {
   flex: 6;
 }
 
@@ -2283,8 +2284,10 @@ link-card article a {
 }
 
 @media screen and (max-width: 920px) {
-  nav + main {
+  nav + main,
+  nav + micro-header {
     margin-top: 4rem;
+    display: block;
   }
   column-base[position="right"] {
     display: none;
diff --git a/themes/default/layouts/partials/profile.html b/themes/default/layouts/partials/profile.html
index fc68c0b..2043e49 100644
--- a/themes/default/layouts/partials/profile.html
+++ b/themes/default/layouts/partials/profile.html
@@ -1,29 +1,20 @@
 {{- $author := partial "function-authors-data.html" . -}}
 
 <micro-header>
+  <picture data-type="banner">
+    {{ partial "author-header.html" . }}
+  </picture>
 
-  <micro-header-banner>
-    <picture>
-      {{ partial "author-header.html" . }}
-    </picture>
-  </micro-header-banner>
-
-  <micro-header-picture>
-    <picture>
-      {{ partial "author-picture.html" . }}
-    </picture>
-  </micro-header-picture>
+  <picture data-type="profile">
+    {{ partial "author-picture.html" . }}
+  </picture>
 
   <section>
-    <micro-header-title>
+    <aside>
       <h2>{{ $author.name }}</h2>
       <h3>@{{ $author.user }}</h3>
-    </micro-header-title>
-    <micro-header-description>
-      <p>
-        {{ $author.description | markdownify }}
-      </p>
-    </micro-header-description>
+    </aside>
+    <p>{{ $author.description | markdownify }}</p>
   </section>
 
   <footer>
@@ -48,5 +39,4 @@
   </footer>
 
   {{ partial "profile-tabs.html" . }}
-
 </micro-header>