detail page fixes

VJAI · Feb 3, 2022 · 9916527 · 9916527
1 parent 2d94234
commit 9916527
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 46 deletions.
diff --git a/detail.html b/detail.html
@@ -847,9 +847,35 @@ <h3>Lorem ipsum dolor sit amet</h3>
           lorem, tempor pellentesque neque laoreet ac.
         </p>
 
-        <hr>
+        <div class="cmp__article-actions">
+          <button type="submit" value="Download">
+            <cmp-icon name="download" size="12"></cmp-icon>
+            <span>Download</span>
+          </button>
+
+          <button type="submit" value="Fork in Git">
+            <cmp-icon name="github" size="12"></cmp-icon>
+            <span>Fork in Git</span>
+          </button>
+        </div>
       </main>
 
+      <footer class="cmp__article-footer cmp__auto-layout">
+        <section class="cmp__pagination">
+          <div class="cmp__older-posts">
+            <a href="#">
+              Previous Post
+            </a>
+          </div>
+          <div class="cmp__newer-posts">
+            <a href="#">
+              Next Post
+            </a>
+          </div>
+        </section>
+        <hr>
+      </footer>
+
       <!-- Detail Page Widgets -->
       <div class="cmp__article-detail-widgets cmp__auto-layout">
 

diff --git a/fibonacci.css b/fibonacci.css
@@ -3486,23 +3486,23 @@ blockquote.cmp__responsive {
   display: inline-flex;
   align-items: center;
 }
-.cmp__pagination .cmp__older-posts a:before {
+.cmp__pagination :first-child a:before {
   position: relative;
   content: "≪";
   margin-right: 0.146rem;
 }
-.cmp__pagination .cmp__older-posts a:hover:before {
+.cmp__pagination :first-child a:hover:before {
   animation: arrow-move-left 0.5s linear infinite;
 }
-.cmp__pagination .cmp__newer-posts {
+.cmp__pagination :last-child {
   text-align: right;
 }
-.cmp__pagination .cmp__newer-posts a:after {
+.cmp__pagination :last-child a:after {
   position: relative;
   content: "≫";
   margin-left: 0.146rem;
 }
-.cmp__pagination .cmp__newer-posts a:hover:after {
+.cmp__pagination :last-child a:hover:after {
   animation: arrow-move-right 0.5s linear infinite;
 }
 
@@ -3517,20 +3517,6 @@ blockquote.cmp__responsive {
   text-transform: uppercase;
   color: #bdb5b8;
 }
-.cmp__blog-footer::before {
-  display: none;
-  position: absolute;
-  content: "";
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 12px;
-  background: linear-gradient(-135deg, white, 6px, transparent 0%), linear-gradient(135deg, white, 6px, transparent 0%);
-  background-size: 12px;
-}
-.cmp__blog-footer::after {
-  content: "";
-}
 .cmp__blog-footer section.cmp__footer-left {
   display: flex;
   font-size: 0.421rem;
@@ -3792,6 +3778,20 @@ blockquote.cmp__responsive {
 #cmp__blog_detail .cmp__article-header .cmp__article-meta {
   position: relative;
 }
+#cmp__blog_detail .cmp__article-footer {
+  display: block;
+}
+
+.cmp__article-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: var(--md-size);
+  margin-bottom: var(--md-size);
+}
+.cmp__article-actions > *:not(:last-child) {
+  margin-right: var(--sm-size);
+}
 
 .cmp__comments .cmp__comment-by {
   margin-right: 0.51rem;

diff --git a/scss/_detail.scss b/scss/_detail.scss
@@ -12,6 +12,22 @@
       position: relative;
     }
   }
+
+  .cmp__article-footer {
+    display: block;
+  }
+}
+
+.cmp__article-actions {
+  @include fibMixins.flex_init($ver: true, $justify: flex-end);
+  margin: {
+    top: fibVars.$md-size;
+    bottom: fibVars.$md-size;
+  }
+
+  > *:not(:last-child) {
+    margin-right: fibVars.$sm-size;
+  }
 }
 
 // Comments Widget

diff --git a/scss/_site.scss b/scss/_site.scss
@@ -932,7 +932,7 @@ blockquote {
     }
   }
 
-  .cmp__older-posts {
+  :first-child {
     a {
       &:before {
         position: relative;
@@ -946,7 +946,7 @@ blockquote {
     }
   }
 
-  .cmp__newer-posts {
+  :last-child {
     text-align: right;
 
     a {
@@ -976,23 +976,6 @@ blockquote {
 
   color: fibVars.$footer-color;
 
-  // https://www.youtube.com/watch?v=CGdEUmO4ZQQ
-  &::before {
-    display: none;
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 12px;
-    background: linear-gradient(-135deg, fibVars.$white, 6px, transparent 0%), linear-gradient(135deg, fibVars.$white, 6px, transparent 0%);
-    background-size: 12px;
-  }
-
-  &::after {
-    content: '';
-  }
-
   section {
     &.cmp__footer-left {
       @include fibMixins.flex_init();
@@ -1154,17 +1137,19 @@ blockquote {
     right: 5%;
 
     div {
-      line-height: 1.2;
+      line-height: fibVars.$small-line-height;
 
       span {
         font-size: fibVars.$md-size;
-      }
 
-      span:after {
-        border: {
-          left: calc(#{fibVars.$xxl-size} / 2) solid fibVars.$rss-ribbon-bg;
-          right: calc(#{fibVars.$xxl-size} / 2) solid fibVars.$rss-ribbon-bg;
-          bottom: fibVars.$lg-size solid transparent;
+        &:after {
+          $border: calc(#{fibVars.$xxl-size} / 2) solid fibVars.$rss-ribbon-bg;
+
+          border: {
+            left: $border;
+            right: $border;
+            bottom: fibVars.$lg-size solid transparent;
+          }
         }
       }
     }