css magic for author in blog

Author: AnomalRoil

blog/2024-09-14-fastnet-sunsetting-dates-set.md

@@ -9,12 +9,9 @@ tags:
     - League-of-Entropy
 slug: /fastnet-to-be-sunset
 ---
-
-### TL;DR
-
-If you’re currently using `fastnet` you must migrate to `quicknet` by October 31st.
-
+If you’re currently using `fastnet` you must migrate to `quicknet` by October 31st 2024.
 <!-- truncate -->
+That's the TL;DR!.
 
 ## The Details
 

src/css/blog-sidebar.css

@@ -3,20 +3,20 @@
  */
 
 /* Remove left margin/padding from main container */
-.container.margin-vert--lg {
+.blog-wrapper .container.margin-vert--lg {
   padding-left: 0;
   margin-left: 0;
   max-width: 100%;
 }
 
 /* Target the blog wrapper structure */
-.container.margin-vert--lg .row {
+.blog-wrapper .container.margin-vert--lg .row {
   display: flex;
   margin-left: 0;
 }
 
 /* Make blog sidebar match docs sidebar layout */
-.container.margin-vert--lg .row aside.col.col--3 {
+.blog-wrapper .container.margin-vert--lg .row aside.col.col--3 {
   border-right: 1px solid var(--ifm-toc-border-color);
   margin-right: 1rem;
   padding-right: 1rem;
@@ -31,12 +31,12 @@
 }
 
 /* Style the sidebar nav container like docs */
-nav.sidebar_re4s.thin-scrollbar {
+.blog-wrapper nav.sidebar_re4s.thin-scrollbar {
   padding: var(--ifm-spacing-horizontal);
 }
 
 /* Style blog sidebar header like docs */
-.sidebarItemTitle_pO2u {
+.blog-wrapper .sidebarItemTitle_pO2u {
   font-size: var(--ifm-h3-font-size);
   font-weight: var(--ifm-font-weight-bold);
   padding: var(--ifm-padding-vertical) 0;
@@ -45,7 +45,7 @@ nav.sidebar_re4s.thin-scrollbar {
 }
 
 /* Format blog sidebar items like docs */
-.sidebar_re4s a.sidebar-item {
+.blog-wrapper .sidebar_re4s a.sidebar-item {
   display: block;
   border-radius: var(--ifm-global-radius);
   padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
@@ -54,32 +54,33 @@ nav.sidebar_re4s.thin-scrollbar {
   margin: 0.2rem 0;
 }
 
-.sidebar_re4s a.sidebar-item:hover {
+.blog-wrapper .sidebar_re4s a.sidebar-item:hover {
   background-color: var(--ifm-menu-color-background-active);
   color: var(--ifm-menu-color-active);
 }
 
 /* Limit article width for better readability */
-.container.margin-vert--lg article {
+.blog-wrapper .container.margin-vert--lg article {
   max-width: 900px;
   margin: 0 auto;
 }
 
 /* Width consistency with docs sidebar */
 @media (min-width: 997px) {
   /* Make container full-width */
-  .container.margin-vert--lg {
+  .blog-wrapper .container.margin-vert--lg {
     max-width: 100%;
   }
 
-  .container.margin-vert--lg .row aside.col.col--3 {
+  .blog-wrapper .container.margin-vert--lg .row aside.col.col--3 {
     flex-basis: var(--doc-sidebar-width, 300px) !important;
     max-width: var(--doc-sidebar-width, 300px) !important;
   }
 
-  .container.margin-vert--lg .row .col.col--9 {
+  .blog-wrapper .container.margin-vert--lg .row .col.col--9 {
     max-width: calc(100% - var(--doc-sidebar-width, 300px)) !important;
     flex-basis: calc(100% - var(--doc-sidebar-width, 300px)) !important;
     padding-left: var(--ifm-spacing-horizontal);
   }
-} 
+} 
+

src/css/custom.css

@@ -69,3 +69,52 @@
   white-space: normal;
   width: auto;
 }
+
+/* Blog post header modifications - only for blog pages */
+/* Layout fix for blog post metadata */
+.blog-wrapper header > :nth-child(2) {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.blog-wrapper header > :nth-child(2)::after {
+  content: "•";
+  margin-left: 8px;
+}
+
+.blog-wrapper header > :nth-child(3) {
+  display: inline-block !important;
+  margin-top: 0 !important;
+}
+
+.blog-wrapper .authorCol_Hf19 {
+  padding: 0;
+  width: auto;
+}
+
+.blog-wrapper .avatar {
+  margin: 0 !important;
+}
+
+.blog-wrapper .authorName_yefp {
+  font-weight: normal;
+}
+
+/* Clear float after the elements */
+.blog-wrapper header::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.blog-wrapper .margin-bottom--xl {
+  margin-bottom: 2rem !important;
+}
+
+.blog-wrapper .docusaurus-mt-lg {
+  margin-top: 1rem !important;
+}
+
+.blog-wrapper .sidebar_re4s {
+  max-height: 100%;
+}