Merge pull request #149 from activebridge/fix/post_styles

Fix post styles
activebridge · Apr 1, 2024 · 5d2f4b8 · 5d2f4b8
2 parents db13797 + d5b1109
commit 5d2f4b8
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 38 deletions.
diff --git a/_includes/post_prev_next_block.html b/_includes/post_prev_next_block.html
@@ -1,39 +1,41 @@
-<div class="wrapper">
-  <div class="prev-next-posts-mob-title"><p>Read Also</p></div>
-  <div class="posts prev-next-posts">
-    {% assign current_index = -1 %}
-    {% assign posts_in_category = site.posts | where: "categories", page.category | where_exp: "item", "item.hidden != true"%}
-    {% assign number_of_posts = posts_in_category | size %}
+<div class="post-content__read-also-block">
+  <div class="wrapper">
+    <div class="prev-next-posts-mob-title"><p>Read Also</p></div>
+    <div class="posts prev-next-posts">
+      {% assign current_index = -1 %}
+      {% assign posts_in_category = site.posts | where: "categories", page.category | where_exp: "item", "item.hidden != true"%}
+      {% assign number_of_posts = posts_in_category | size %}
 
-    {% for post in posts_in_category %}
-      {% if post.url == page.url %}
-        {% assign current_index = forloop.index0 %}
-      {% endif %}
-    {% endfor %}
+      {% for post in posts_in_category %}
+        {% if post.url == page.url %}
+          {% assign current_index = forloop.index0 %}
+        {% endif %}
+      {% endfor %}
 
-    {% if current_index != -1 and number_of_posts > 1 %}
-      {% assign prev_index = current_index | minus: 1 %}
-      {% assign next_index = current_index | plus: 1 %}
-      {% assign prev_post = posts_in_category[prev_index] %}
-      {% assign next_post = posts_in_category[next_index] %}
+      {% if current_index != -1 and number_of_posts > 1 %}
+        {% assign prev_index = current_index | minus: 1 %}
+        {% assign next_index = current_index | plus: 1 %}
+        {% assign prev_post = posts_in_category[prev_index] %}
+        {% assign next_post = posts_in_category[next_index] %}
 
-      {% if number_of_posts == next_index%}
-        {% assign next_post = posts_in_category[0] %}
-      {% endif %}
+        {% if number_of_posts == next_index%}
+          {% assign next_post = posts_in_category[0] %}
+        {% endif %}
 
-      {% if prev_post %}
-        {% assign name = '' %}
-        {% assign post = prev_post %}
-        {% include post_card.html%}
-      {% endif %}
+        {% if prev_post %}
+          {% assign name = '' %}
+          {% assign post = prev_post %}
+          {% include post_card.html%}
+        {% endif %}
 
-      <div class="prev-next-posts__read-also"><p>Read Also</p></div>
+        <div class="prev-next-posts__read-also"><p>Read Also</p></div>
 
-      {% if next_post %}
-        {% assign name = '' %}
-        {% assign post = next_post %}
-        {% include post_card.html%}
+        {% if next_post %}
+          {% assign name = '' %}
+          {% assign post = next_post %}
+          {% include post_card.html%}
+        {% endif %}
       {% endif %}
-    {% endif %}
+    </div>
   </div>
 </div>
diff --git a/_sass/blog.scss b/_sass/blog.scss
@@ -1,6 +1,6 @@
 .blog {
   &__main-block {
-    background: linear-gradient(180deg, $kviten 0%, $white 75.52%);
+    background: linear-gradient(180deg, $kviten 0%, $white 30%);
     box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25);
     padding-top: 117px;
 
@@ -193,7 +193,7 @@
 }
 
 .post-content {
-  background: linear-gradient(180deg, $kviten 0%, $white 83.85%);
+  background: linear-gradient(180deg, $kviten 0%, $white 15%);
   box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25);
   display: grid;
   grid-template-columns: 1.2fr 3fr 1.2fr;
@@ -206,34 +206,53 @@
       color: $post-links;
       &:visited { color: $post-links }
     }
+
+    p {
+      font-size: 20px;
+      line-height: 1.5;
+      margin: 20px 0;
+    }
+    img {margin: 20px 0;}
   }
 
   .wrapper {
     padding: 100px 30px;
     text-align: left;
   }
+  ul { margin: 20px 0; }
 
-  li { margin-left: 40px;}
+  li {
+    font-size: 20px;
+    line-height: 1.5;
+    margin: 10px 0 0 40px;
+  }
 
   h1 {
     text-align: center;
     text-transform: uppercase;
+    margin-bottom: 40px;
   }
 
   h2 {
     color: $black_sea;
-    font-family: Inria Serif;
-    font-size: 22px;
+    font-family: 'Inria Serif';
+    font-size: 24px;
     font-style: normal;
     font-weight: 600;
-    margin-top: 20px;
+    margin: 20px 0;
   }
 
   h3 {
+    font-family: 'Cera-Bold';
+    font-size: 22px;
+    font-style: normal;
+    margin: 20px 0;
+  }
+
+  h4 {
+    font-family: 'Cera Regular';
     font-size: 18px;
     font-style: normal;
-    font-weight: 700;
-    margin-top: 20px;
   }
 
   &__right-block {
@@ -313,6 +332,7 @@
     display: flex;
     justify-content: space-around;
   }
+  &__read-also-block { background: linear-gradient(180deg, $kviten 0%, $ocean_light 50%); }
 }
 
 .post-description {
@@ -399,6 +419,7 @@
   padding: 40px 0;
   display: grid;
   grid-template-columns: 3fr 3fr 3fr;
+  margin-bottom: 0;
   justify-content: center;
 
   &__read-also {
@@ -549,6 +570,13 @@
     &__read-also { display: none; }
   }
   .prev-next-posts-mob-title { display: inline-block; }
+
+  .post-content {
+    .header-3 { font-size: 24px; }
+    h2 { font-size: 22px }
+    h3 { font-size: 20px }
+    h4,p { font-size: 18px }
+  }
 }
 
 @media (max-width: 480px) {

diff --git a/_sass/variables.scss b/_sass/variables.scss
@@ -25,6 +25,7 @@ $sky-ua:                  #8cc9fc;
 $titan_white:             #F4F3FF;
 $white:                   #fff;
 $post-links:              #2a7ae2;
+$ocean_light:             #e0effd;
 
 $main-gradient:        linear-gradient(135deg, $main-violet, $purple-heart);