wip

input-output-hk · Dec 2, 2024 · 311466d · 311466d
1 parent 794fafc
commit 311466d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/source/_includes/layouts/post.jinja b/source/_includes/layouts/post.jinja
@@ -27,24 +27,24 @@
         </time>
         {% endif %}
 
-        <h1 class="post-title">{{ title }}</h1>
+        {# <h1 class="post-title">{{ title }}</h1> #}
 
         <div class="post-meta">
-          {% if author %}
+          {# {% if author %}
           <div class="author">
             <img src="/images/authors/{{ author | lower | replace(" ", " -") }}.jpg" alt="{{ author }}">
             <div class="author-info">
               <div class="name">{{ author }}</div>
               <div class="role">{{ role | default("Contributor") }}</div>
             </div>
-          </div>
-          {% endif %}
-
+          </div> #}
+          {# {% endif %} #}
+          {#
           <div class="share">
             <a href="https://twitter.com/share?url={{ url }}" target="_blank">Twitter</a>
             <a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}" target="_blank">Facebook</a>
             <a href="https://www.linkedin.com/shareArticle?url={{ url }}" target="_blank">LinkedIn</a>
-          </div>
+          </div> #}
         </div>
       </header>
 

diff --git a/source/styles/post.sass b/source/styles/post.sass
@@ -8,7 +8,7 @@
 
 .post-header {
   margin-bottom: get-spacing("xl");
-
+  
   .publish-date {
     @include typography("label");
     color: get-color("text-light");
@@ -19,13 +19,15 @@
     @include typography("hero");
     color: get-color("text-dark");
     margin-bottom: get-spacing("lg");
+    font-size: 64px;
+    line-height: 1.1;
   }
 }
 
 .post-meta {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: get-spacing("md");
   margin-bottom: get-spacing("xl");
 
   .author {
@@ -34,33 +36,36 @@
     gap: get-spacing("sm");
 
     img {
-      width: 40px;
-      height: 40px;
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
+      object-fit: cover;
     }
 
     .author-info {
       .name {
         @include typography("title");
         color: get-color("text-dark");
+        font-size: 24px;
+        margin-bottom: 4px;
       }
-      
+
       .role {
         @include typography("label");
         color: get-color("text-light");
       }
     }
   }
-  
+
   .share {
-    margin-left: auto;
     display: flex;
-    gap: get-spacing("sm");
-    
+    gap: get-spacing("md");
+
     a {
       color: get-color("text-light");
       text-decoration: none;
-
+      font-size: 16px;
+
       &:hover {
         color: get-color("primary-blue");
       }
@@ -69,34 +74,41 @@
 }
 
 .post-content {
-  max-width: 800px;
-  margin: 0 auto;
-
+  margin-top: get-spacing("xl");
+
   img, video {
     width: 100%;
-    border-radius: 20px;
+    border-radius: 12px;
     margin: get-spacing("lg") 0;
   }
-  
+
   h1, h2, h3 {
     @include typography("title");
     color: get-color("text-dark");
     margin: get-spacing("lg") 0 get-spacing("md");
   }
-  
+
   p {
     @include typography("body");
     color: get-color("text-light");
     margin-bottom: get-spacing("md");
+    font-size: 18px;
+    line-height: 1.6;
   }
 }
 
 @media (max-width: 768px) {
   .post-container {
     padding: get-spacing("lg") get-spacing("md");
   }
-  
+
   .post-header .post-title {
-    @include typography("title");
+    font-size: 40px;
+  }
+
+  .post-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: get-spacing("md");
   }
 }