reformat post headers; change bg color

RadicalxChange · Oct 30, 2024 · 3608376 · 3608376
1 parent c125696
commit 3608376
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/assets/css/components/global.css b/assets/css/components/global.css
@@ -21,7 +21,7 @@ body {
     line-height: 1.6em;
     font-weight: 400;
     font-style: normal;
-    background: #fffbed;
+    background: #fff9e3;
     scroll-behavior: smooth;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -324,7 +324,7 @@ html,
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    background: #fffbed;
+    background: #fff9e3;
 }
 
 .gh-main {
@@ -341,6 +341,10 @@ html,
     padding: 8vmin 3vmin;
 }
 
+.post-header {
+  max-width: 900px;
+}
+
 .gh-title {
     font-family: var(--font-display);
     margin-bottom: 4vmin;
@@ -372,28 +376,24 @@ html,
 
     .gh-postfeed > *:first-child {
         margin-bottom: 8rem;
-        max-width: 1000px;
         margin-left: auto;
         margin-right: auto;
     }
 
     .gh-postfeed > :first-child > * {
         display: grid;
         grid-template-columns: 1fr 1fr;
+        column-gap: 8rem;
     }
-    
+
     .gh-postfeed > *:first-child .gh-card-title {
-        @apply text-size-xl/display;
+        @apply text-size-lg/display; 
         text-transform: uppercase;
         margin-top: 0;
-        grid-column-start: 1;
-        grid-row-start: 1;
         padding: 0;
     }
 
     .gh-postfeed > *:first-child .gh-post-authors {
-        grid-column-start: 1;
-        grid-row-start: 2;
         padding: 0;
     }
 
@@ -408,13 +408,13 @@ html,
     }
 
     .gh-postfeed > :first-child .gh-post-authors {
-        margin-top: 2rem;
+        margin-top: 4rem;
         font-size: 1.85rem;
     }
 
     .gh-postfeed > *:first-child .gh-card-image-wrapper {
-        margin-top: auto;
-        margin-bottom: 2.5rem;
+        grid-column-start: 2;
+        margin: auto 0 auto 0;
     }
 
     .gh-postfeed > *:first-child .gh-card-picture {
@@ -433,6 +433,14 @@ html,
     }
 }
 
+@media (min-width: 1300px) {
+
+  .gh-postfeed > *:first-child {
+    margin-left: -50px;
+    margin-right: -50px;
+  }
+}
+
 .gradient-line-horizontal {
   width: 100%;
   height: 6px;

diff --git a/partials/card.hbs b/partials/card.hbs
@@ -49,15 +49,18 @@ Re-usable card for linking to posts
           </picture>
       {{/if}}
     </div>
-    <h2 class="gh-card-title">{{title}}</h2>
-    {{!-- <p>{{excerpt}}</p> --}}
-    {{!-- <span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span> --}}
 
-    <div class="gh-post-authors flex flex-row space-x-2 mt-4">
-        by
-        {{#foreach authors}}
-          {{name}}{{#if @last}}{{else}},{{/if}}
-        {{/foreach}}
+    <div class="col-start-1 row-start-1">
+      <h2 class="gh-card-title">{{title}}</h2>
+      {{!-- <p>{{excerpt}}</p> --}}
+      {{!-- <span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span> --}}
+
+      <div class="gh-post-authors flex flex-row space-x-2">
+          by
+          {{#foreach authors}}
+            {{name}}{{#if @last}}{{else}},{{/if}}
+          {{/foreach}}
+      </div>
     </div>
   </a>
 

diff --git a/post.hbs b/post.hbs
@@ -6,7 +6,7 @@
 
     <header class="gh-header gh-canvas">
 
-        <div class="max-w-6xl mx-auto">
+        <div class="post-header mx-auto">
             <h1 class="gh-title text-size-lg/display uppercase mt-16">{{title}}</h1>
 
             {{#if custom_excerpt}}