assets/css/default: Style author descriptions

Rearrange the cascade.

1 files changed, 183 insertions, 161 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 19aa09e..b9d59c8 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -160,6 +160,148 @@ skip-link a:focus {
   border-radius: 0.5rem;
 }
 
+/* ----- Typography ----- */
+
+h1,
+h2,
+h3 {
+  font-size: 100%;
+  margin: 0;
+}
+
+p,
+ul,
+dd,
+ol,
+figure,
+blockquote {
+  margin: 0;
+}
+
+p:not(:last-child),
+ol:not(:last-child),
+ul:not(:last-child),
+dl:not(:last-child),
+table:not(:last-child),
+figure:not(:last-child),
+code-block:not(:last-child),
+blockquote:not(:last-child) {
+  margin-bottom: 0.75rem;
+}
+
+dl {
+  margin: 0 0 0 1rem;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dt:not(:first-child) {
+  margin-top: 0.5rem;
+}
+
+footer,
+figcaption {
+  color: #444;
+  color: var(--fade);
+  font-size: 85%;
+  margin: 0.5rem 0;
+  text-align: center;
+}
+
+sup {
+  vertical-align: super;
+  font-size: 85%;
+}
+
+sub {
+  vertical-align: sub;
+  font-size: 85%;
+}
+
+s,
+del,
+mark,
+ins {
+  padding: 0 0.15rem;
+  line-height: 1.5;
+  border-radius: 0.5rem;
+}
+
+mark {
+  background-color: #ffe699;
+  background-color: var(--warning-background);
+  color: #332600;
+  color: var(--warning);
+}
+
+ins {
+  background-color: #d5f3c4;
+  background-color: var(--success-background);
+  color: #1d3c0c;
+  color: var(--success);
+  text-decoration: none;
+}
+
+del {
+  background-color: #fcd2cf;
+  background-color: var(--danger-background);
+  color: #8f0000;
+  color: var(--danger);
+}
+
+s {
+  text-decoration: none;
+  background-color: #333;
+  background-color: var(--spoiler);
+  color: transparent;
+}
+
+input[type="checkbox"]:checked ~ s {
+  background-color: inherit;
+  color: inherit;
+}
+
+blockquote {
+  padding-left: 2rem;
+}
+
+blockquote p {
+  font-size: 125%;
+}
+
+blockquote p span {
+  display: block;
+  text-align: right;
+  font-style: normal;
+  font-size: 80%;
+  margin-top: 0.75rem;
+}
+
+video {
+  border-radius: 0.5rem;
+}
+
+video:hover {
+  box-shadow: 0 0 14px #999;
+  box-shadow: 0 0 14px var(--shadow);
+}
+
+kbd {
+  background-color: #eee;
+  border-radius: 0.25rem;
+  border: 1px solid #b4b4b4;
+  box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset;
+  color: #333;
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
 /* ----- Elements ----- */
 
 html {
@@ -714,14 +856,30 @@ micro-author micro-summary {
 
 micro-author micro-thumbnail {
   flex: none;
+  margin-right: 0.5rem;
 }
 
 micro-author micro-header {
-  line-height: 1;
-  margin: 0 1.25rem 0 0.5rem;
   flex: 1;
-  height: 3rem;
-  padding: 0 0.5rem;
+  min-width: 3rem;
+  margin-right: 0.75rem;
+}
+
+micro-author micro-header h2,
+micro-author micro-header h3 {
+  line-height: 1.25rem;
+  height: 1.25rem;
+}
+
+micro-author micro-summary p:not(:last-child) {
+  flex: 4;
+  margin: 0 0.75rem 0 0;
+  color: #555;
+  color: var(--fade);
+}
+
+author-list p {
+  display: none;
 }
 
 micro-thumbnail a {
@@ -941,16 +1099,10 @@ micro-header-description {
   flex: 6;
 }
 
-micro-header h2 {
-  margin-bottom: 0.25rem;
-  font-size: 700;
-}
-
 micro-header h3 {
   font-weight: 400;
   color: #444;
   color: var(--fade);
-  margin: 0;
 }
 
 micro-header footer,
@@ -1102,7 +1254,8 @@ column-middle nav section small {
   margin: 0;
 }
 
-micro-author micro-header,
+micro-author micro-header h2,
+micro-author micro-header h3,
 column-middle nav section h2,
 column-middle nav section small {
   white-space: nowrap;
@@ -1545,6 +1698,7 @@ context-profile aside p {
 context-profile div {
   display: flex;
   align-items: center;
+  margin-bottom: 0.5rem;
 }
 
 context-profile aside:nth-child(2) {
@@ -1588,147 +1742,6 @@ twitter-tweet iframe {
   border: none;
 }
 
-/* ----- Typography ----- */
-
-h1,
-h2,
-h3 {
-  font-size: 100%;
-  margin: 0;
-}
-
-p,
-ul,
-dd,
-ol,
-figure,
-blockquote {
-  margin: 0;
-}
-
-p:not(:last-child),
-ol:not(:last-child),
-ul:not(:last-child),
-dl:not(:last-child),
-table:not(:last-child),
-figure:not(:last-child),
-code-block:not(:last-child),
-blockquote:not(:last-child) {
-  margin-bottom: 0.75rem;
-}
-
-dl {
-  margin: 0 0 0 1rem;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dt:not(:first-child) {
-  margin-top: 0.5rem;
-}
-
-footer,
-figcaption {
-  color: #444;
-  color: var(--fade);
-  font-size: 85%;
-  margin: 0.5rem 0;
-  text-align: center;
-}
-
-sup {
-  vertical-align: super;
-  font-size: 85%;
-}
-
-sub {
-  vertical-align: sub;
-  font-size: 85%;
-}
-
-s,
-del,
-mark,
-ins {
-  padding: 0 0.15rem;
-  line-height: 1.5;
-}
-
-mark {
-  background-color: #ffe699;
-  background-color: var(--warning-background);
-  color: #332600;
-  color: var(--warning);
-}
-
-ins {
-  background-color: #d5f3c4;
-  background-color: var(--success-background);
-  color: #1d3c0c;
-  color: var(--success);
-  text-decoration: none;
-}
-
-del {
-  background-color: #fcd2cf;
-  background-color: var(--danger-background);
-  color: #8f0000;
-  color: var(--danger);
-}
-
-s {
-  text-decoration: none;
-  background-color: #333;
-  background-color: var(--spoiler);
-  color: transparent;
-}
-
-input[type="checkbox"]:checked ~ s {
-  background-color: inherit;
-  color: inherit;
-}
-
-blockquote {
-  padding-left: 2rem;
-}
-
-blockquote p {
-  font-size: 125%;
-}
-
-blockquote p span {
-  display: block;
-  text-align: right;
-  font-style: normal;
-  font-size: 80%;
-  margin-top: 0.75rem;
-}
-
-video {
-  border-radius: 0.5rem;
-}
-
-video:hover {
-  box-shadow: 0 0 14px #999;
-  box-shadow: 0 0 14px var(--shadow);
-}
-
-kbd {
-  background-color: #eee;
-  border-radius: 0.25rem;
-  border: 1px solid #b4b4b4;
-  box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset;
-  color: #333;
-  display: inline-block;
-  font-size: 0.85em;
-  font-weight: 700;
-  line-height: 1;
-  padding: 2px 4px;
-  white-space: nowrap;
-}
-
 /* ----- Attributes ----- */
 
 [tabindex="-1"]:focus {
@@ -1813,18 +1826,31 @@ kbd {
   column-right {
     display: none;
   }
+  column-middle {
+    display: block;
+    max-width: 100%;
+  }
+  column-middle nav {
+    position: fixed;
+  }
+  micro-card {
+    max-width: 600px;
+    margin: 0 auto;
+  }
   micro-metadata {
     line-height: inherit;
   }
   micro-header section {
     display: block;
   }
-  column-middle {
-    display: block;
-    max-width: 100%;
+  micro-author micro-summary {
+    flex-direction: column;
   }
-  column-middle nav {
-    position: fixed;
+  micro-author micro-summary micro-header,
+  micro-author micro-summary micro-thumbnail,
+  micro-author micro-summary p:not(:last-child) {
+    flex: auto;
+    margin: 0 0 0.75rem 0;
   }
   navigation-separator hr[hidden] {
     border-color: transparent;
@@ -1834,10 +1860,6 @@ kbd {
     padding-top: 4rem;
     border: none;
   }
-  micro-card {
-    max-width: 600px;
-    margin: 0 auto;
-  }
   html {
     margin: 0;
   }