Merge pull request #603 from shift72/posts-tweaks

small style changes for posts feed / post page

Author: l0ud0gg

site/styles/_posts.scss

@@ -88,10 +88,24 @@
   }
 }
 
+.post-page .post,
+.posts-feed-page .post-preview {
+  background-color: var(--post-background-color);
+  padding: 20px 25px;
+  border-radius: 8px;
+}
+
 .post-page {
+  .page-bg {
+    filter: blur(8px);
+    -webkit-filter: blur(8px);
+  }
+  .post {
+    margin: 1rem 0;
+  }
   comment-section {
     padding: 0;
-    margin-top: 3rem;
+    margin-top: 2rem;
   }
 }
 
@@ -102,6 +116,7 @@
 
   .post-preview-show-more {
     text-align: center;
+    text-decoration: underline;
     opacity: 0.8;
   }
 
@@ -110,6 +125,7 @@
     overflow: hidden;
 
     .post-body {
+      margin-bottom: 40px;
       max-height: var(--post-preview-height);
     }
 
@@ -132,8 +148,6 @@
     display: flex;
     justify-content: space-between;
     margin-top: 4rem;
-    padding-top: 2rem;
-    border-top: 1px solid #fff5;
 
     .posts-pagination-next {
       margin-left: auto;

site/styles/_variables.scss

@@ -142,8 +142,9 @@
 
   --page-reading-column-width: 69ch;
 
-  --posts-feed-spacing: 6rem;
-  --post-preview-height: 300px;
+  --posts-feed-spacing: 3rem;
+  --post-preview-height: 250px;
+  --post-background-color: #030303a0;
 
   --post-body-font-weight: 400;
   --post-body-line-height: 1.55;

site/templates/page/post.jet

@@ -10,8 +10,8 @@
 {{block body()}}
   <main id="main" class="page post-page">
     {{yield backgroundImage(containerClass="page-bg", gradientClass="right-gradient", imageClass="page-bg-img", imageSrc=page.Images.Background)}}
-
-    <div class="post">
+    {{yield postBacktoPostsLink()}}
+    <div class="post">  
       {{yield postTitle(post=page)}}
       {{yield postMeta(post=page)}}
       {{yield postHeaderImage(post=page)}}
@@ -21,9 +21,6 @@
     {{if isEnabled("commenting")}}
       <comment-section slug="{{page.Slug}}"></comment-section>
     {{end}}
+    {{yield postBacktoPostsLink()}}
   </main>
 {{end}}
-
-
-
-{{block appBadges()}}{{end}}

site/templates/page/post/posts-feed.jet

@@ -8,13 +8,15 @@
     {{range page := pages}}
       {{yield postPreview(post=page)}}
     {{end}}
-
-    <div class="posts-pagination">
-    {{ if len(pagination.PreviousURL) > 0 }}
-      <a class="posts-pagination-prev" href="{{pagination.PreviousURL}}">{{i18n("posts_pagination_prev")}}</a>
-    {{end}}
-    {{ if len(pagination.NextURL) > 0 }}
-      <a class="posts-pagination-next" href="{{pagination.NextURL}}">{{i18n("posts_pagination_next")}}</a>
+    {{ if len(pagination.PreviousURL) > 0 || len(pagination.NextURL) > 0 }}
+      <div class="posts-pagination">
+      {{ if len(pagination.PreviousURL) > 0 }}
+        <a class="posts-pagination-prev" href="{{pagination.PreviousURL}}">{{i18n("posts_pagination_prev")}}</a>
+      {{end}}
+      {{ if len(pagination.NextURL) > 0 }}
+        <a class="posts-pagination-next" href="{{pagination.NextURL}}">{{i18n("posts_pagination_next")}}</a>
+      {{end}}
+      </div>
     {{end}}
   </main>
 

site/templates/page/post/shared.jet

@@ -32,3 +32,9 @@
     {{text | raw}}
   </div>
 {{end}}
+
+{{block postBacktoPostsLink()}}
+  <div class="post-back-to-posts">
+    <a href="{{routeToPath("/posts/")}}">{{i18n("post_back_to_posts")}}</a>
+  </div>
+{{end}}