pages(detail): Finishing the details one last time

Trust me!!!

source/css/Redemption.css

@@ -41,6 +41,9 @@ html::-webkit-scrollbar-thumb {
   line-height: 2.4rem;
 }
 .header > .description {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
   font-size: 0.9rem;
 }
 .header > .description > .socials {
@@ -218,6 +221,11 @@ main .journals > ul > li > .option {
 main .journals > ul > li > .option > i {
   padding: 0 0.5rem;
 }
+main .journals > ul > li > .info {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 0.75rem;
+}
 main .pagenav {
   display: flex;
   justify-content: space-between;
@@ -228,26 +236,6 @@ main .pagenav > a {
   margin: 0 2rem;
 }
 
-.comment {
-  width: 47rem;
-  margin: 1rem 0rem;
-  padding: 1rem 2.5rem;
-  background: #ffffff;
-  box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
-}
-
-.commentButton {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 2rem;
-  padding-top: 2rem;
-  width: 40rem;
-  border-top: 1px solid #f3f3f3;
-}
-.commentButton > a {
-  color: black;
-}
-
 footer {
   padding: 2rem 0;
 }
@@ -258,10 +246,22 @@ footer .copyright a {
   margin: 0 0.125rem;
 }
 
-.menu {
-  position: fixed;
-  right: 0.5rem;
-  bottom: 10rem;
+.comment {
+  width: 47rem;
+  margin: 1rem 0rem;
+  padding: 1rem 2.5rem;
+}
+
+.close {
+  display: none;
+}
+
+.post-bottom-menu {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  width: 40rem;
 }
 
 /*animation starts*/

source/css/Redemption.scss

@@ -53,6 +53,10 @@ html::-webkit-scrollbar-thumb {
 
     // 二级标题
     >.description {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        
         font-size: 0.9rem;
 
         >.socials {
@@ -257,10 +261,10 @@ main {
                 }
             }
         }
+
     }
 
     .journals{
-        
         > .name{
             font-size: 1.5rem;
             font-weight: bold;
@@ -284,6 +288,11 @@ main {
                         padding: 0 0.5rem;
                     }
                 }
+                > .info{
+                    display: flex;
+                    justify-content: flex-end;
+                    font-size: 0.75rem;
+                }
             }
         }
         
@@ -303,25 +312,7 @@ main {
 
 }
 
-.comment
-{
-    width: 47rem;
-    margin: 1rem 0rem;
-    padding: 1rem 2.5rem;
-    background: #ffffff;
-    box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
-}
-.commentButton{
-    display: flex;
-    justify-content: space-around;
-    margin-top: 2rem;
-    padding-top: 2rem;
-    width: 40rem;
-    border-top: 1px solid #f3f3f3;
-    >a{
-        color: rgba(0, 0, 0, 1);
-    }
-}
+// 页脚
 footer {
     padding: 2rem 0;
 
@@ -335,35 +326,31 @@ footer {
     }
 }
 
+// .menu{
+//     position: fixed;
+//     right: 0.5rem;
+//     bottom: 10rem;
+// }
 
-.menu{
-    position: fixed;
-    right: 0.5rem;
-    bottom: 10rem;
+// 评论组件
+.comment
+{
+    width: 47rem;
+    margin: 1rem 0rem;
+    padding: 1rem 2.5rem;
 }
 
+.close{
+    display: none;
+}
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.post-bottom-menu{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 2rem;
+    padding-top: 2rem;
+    width: 40rem;
+}
 
 /*animation starts*/
 

source/css/color.css

@@ -65,6 +65,9 @@ main .archives > ul > li > a, main .categories > ul > li > a, main .category > u
 main .archives > ul > li > a:hover, main .categories > ul > li > a:hover, main .category > ul > li > a:hover, main .tag > ul > li > a:hover, main .tags > ul > li > a:hover, main .links > ul > li > a:hover {
   color: rgba(0, 0, 0, 0.65);
 }
+main .archives > ul > li > a > span, main .categories > ul > li > a > span, main .category > ul > li > a > span, main .tag > ul > li > a > span, main .tags > ul > li > a > span, main .links > ul > li > a > span {
+  color: #c5c5c5;
+}
 main .archives > ul > li > span, main .categories > ul > li > span, main .category > ul > li > span, main .tag > ul > li > span, main .tags > ul > li > span, main .links > ul > li > span {
   color: #c5c5c5;
 }
@@ -92,10 +95,25 @@ main .post > .title > .info > span i {
 main .journals > ul > li > .option {
   color: rgba(0, 0, 0, 0.65);
 }
+main .journals > ul > li > .info {
+  color: #c5c5c5;
+}
 
 footer .copyright a {
   color: rgba(0, 0, 0, 0.25);
 }
 footer .copyright a:hover {
   color: rgba(0, 0, 0, 0.85);
+}
+
+.comment {
+  background: #ffffff;
+  box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
+}
+
+.post-bottom-menu {
+  border-top: 1px solid #f3f3f3;
+}
+.post-bottom-menu > a {
+  color: black;
 }

source/css/color.scss

@@ -17,14 +17,6 @@ html::-webkit-scrollbar-thumb:hover {
     background: #0095ff1a;
 }
 
-// // Body
-// body {
-//     display: flex;
-//     flex-wrap: nowrap;
-//     flex-direction: column;
-//     align-items: center;
-// }
-
 // Header 头部
 .header {
     // 站点标题
@@ -102,6 +94,9 @@ main {
                     &:hover {
                         color: rgb(0, 0, 0, 0.65);
                     }
+                    > span{
+                        color: #c5c5c5;
+                    }
                 }
                 > span{
                     color: #c5c5c5;
@@ -151,6 +146,9 @@ main {
                 > .option{
                     color: rgb(0, 0, 0, 0.65);
                 }
+                > .info{
+                    color: #c5c5c5;
+                }
             }
         }
         
@@ -169,3 +167,16 @@ footer {
         }
     }
 }
+
+.comment
+{
+    background: #ffffff;
+    box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
+}
+
+.post-bottom-menu{
+    border-top: 1px solid #f3f3f3;
+    >a{
+        color: rgba(0, 0, 0, 1);
+    }
+}