Merge pull request #411 from shaform/adjust

Adjust author info styles to use Pico
xianmin · Jan 10, 2025 · f2e72ec · f2e72ec
2 parents 5df20c0 + 27f8dec
commit f2e72ec
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 41 deletions.
diff --git a/assets/sass/_partial/_author_info.scss b/assets/sass/_partial/_author_info.scss
@@ -3,24 +3,46 @@
 // ==============================
 
 .author-info {
-  margin: 0 5em 3em 5em;
-  background-color: white;
+  margin: var(--pico-block-spacing-vertical) auto;
+  max-width: $article-max-width;
+  background: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
   padding: 2em 5em 2em 5em;
-  text-align: center;
+
+  @media (max-width: $large-breakpoint) {
+    padding: 2em 2em 2em 2em;
+  }
+
+  [data-theme="dark"] & {
+    background: $slate-900;
+    box-shadow: var(--pico-card-background-color);
+  }
 
   .author-box {
+    grid-column-gap: var(--pico-grid-column-gap);
+    grid-row-gap: var(--pico-grid-row-gap);
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+
+    @media (max-width: $mobile-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+
+    .author-image {
+      text-align: center;
+      min-width: 0px;
+    }
     .author-image img {
       margin: 1em auto 1em auto;
       border-radius: 50%;
-      border: 1px solid #999;
-      float: left;
+      border: 1px solid var(--pico-muted-border-color);
     }
     .author-content {
-      padding-left: 200px;
       text-align: left;
+      min-width: 0px;
 
       .author-title {
-        color: #aaa;
+        color: var(--pico-muted-color);
         margin-bottom: 0.1em;
         font-size: 14px;
       }
@@ -33,38 +55,5 @@
         font-size: 16px;
       }
     }
-    .author-bottom {
-      clear: both;
-    }
-  }
-}
-@media screen and (min-width: 900px) and (max-width: 1080px) {
-  .author-info {
-    margin: 0 2em 2em 2em;
-  }
-}
-
-@media screen and (min-width: 504px) and (max-width: 899px) {
-  .author-info {
-    margin: 0 1em 2em 1em;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-}
-
-@media screen and (max-width: 504px) {
-  .author-info {
-    margin: 0 0 2em 0;
-    padding: 1em;
-
-    .author-box {
-      .author-image img {
-        float: none;
-      }
-      .author-content {
-        padding-left: 0;
-        text-align: center;
-      }
-    }
   }
 }
diff --git a/assets/sass/jane.scss b/assets/sass/jane.scss
@@ -13,6 +13,7 @@ $global-font-family: -apple-system,'Open Sans', 'Segoe UI', 'Helvetica', Arial,
 $global-font-size: 18px !default;
 $global-mobile-font-size: 15px !default;
 $mobile-breakpoint: 768px !default;
+$large-breakpoint: 1024px !default;
 
 /**------------------------------------------------------------------------
  *                           import pico

diff --git a/layouts/partials/author_info.html b/layouts/partials/author_info.html
@@ -18,7 +18,6 @@
     <p class="author-desc">{{ . | markdownify }}</p>
     {{- end }}
     </div>
-    <div class="author-bottom"></div>
   </div>
 </section>
 {{- end -}}