2

layout/includes/_partials/information_card.pug

@@ -0,0 +1,5 @@
+include titled_card.pug
+
++create_card("Information - 信息")
+  div 这是我
+  div 随便写的文章

layout/includes/_partials/titled_card.pug

@@ -0,0 +1,7 @@
+mixin create_card(title)
+  .titled-block-compoment
+    .titled-block-container
+      .title-box
+        = title
+      .block-content 
+        block

layout/index.pug

@@ -1,4 +1,4 @@
 extends includes/layout.pug
 
 block content
-
+  include includes/_partials/information_card.pug

source/css/_partials/button.styl

@@ -3,7 +3,6 @@
   .button-container
     a.active
       background-position: -100% center;
-      padding-bottom: 1.75rem;
       color: rgb(180, 175, 154) !important;
       &:hover::before
         content: none !important;
@@ -16,9 +15,9 @@
       text-decoration: none;
       display: flex;
       flex-direction: column;
-      color: rgb(87, 84, 74);
+      color: rgb(74, 71, 62);
       align-items: flex-start;
-      background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 100%);
+      background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(74, 71, 62) 50%, rgb(74, 71, 62) 100%);
       background-size: 200%;
       transition: all 0.2s linear 0s;
       cursor: default;
@@ -28,7 +27,7 @@
 
       // line over the button
       &::before
-        background-color: rgb(87, 84, 74);
+        background-color: rgb(74, 71, 62);
         transition: all 0.2s ease 0s;
       &:hover::before
         height: 2px;
@@ -40,7 +39,7 @@
       
       // line under the button
       &::after
-        background-color: rgb(87, 84, 74);
+        background-color: rgb(74, 71, 62);
         transition: all 0.2s ease 0s;
       &:hover::after
         height: 2px;
@@ -66,7 +65,7 @@
           height: 5%;
           min-width: 20px;
           min-height: 20px;
-          background-image: linear-gradient(90deg, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
+          background-image: linear-gradient(90deg, rgb(74, 71, 62) 50%, rgb(74, 71, 62) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
           background-size: 200%;
           transition: all 0.1s linear 0s;
 

source/css/_partials/titled_card.styl

@@ -0,0 +1,9 @@
+.titled-block-container
+  background-color: rgb(231, 225, 199);
+  .title-box
+    background-color: rgb(74, 71, 62);
+    color: rgb(231, 225, 199);
+    padding: 0.5% 1%;
+  .block-content
+    padding: 0.5% 1%;
+    color: rgb(74, 71, 62);

source/css/common.styl

@@ -11,6 +11,9 @@ body
 #container
   padding: 1.5% 2% 2% 2%
 
+#main
+  margin-top: 0.5%
+
 .bottom-declaration
     // container左右各有2%的padding
     // 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104%
@@ -25,6 +28,7 @@ body
     background-size: 100px 4px;
     width: 100%;
     height: 4px;
+    margin: 0 -2% 0;
 
 *
   box-sizing: border-box