feat: CSS Fixes and adjustments (#1)

- Changed content container functions so that it is centered on all viewports.
- Removed card layout for posts when on small devices
- Gave blog tags a little more spacing and centered using flex
- Adjusted TOC component to suit new layout
- Softened the color on the search bar to be a bit less intense
- Centered footer content on small devices

Author: bloycey

components/Footer.vue

@@ -113,7 +113,10 @@
       flex 1
       display flex
       align-items center
-      justify-content flex-end
+      justify-content center
+
+      @media(min-width: $MQNarrow)
+        justify-content flex-end
       
       .copyright
         display flex

components/Header.vue

@@ -41,7 +41,6 @@
     background-color #FFF
     padding 20px 32px 20px
     margin auto
-    border-bottom 1px solid rgba(0, 0, 0, 0.15)
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05)
     transition: all 1s cubic-bezier(.25, .8, .25, 1)
     
@@ -107,7 +106,7 @@
         input
           border-radius 5px
           transition all .5s
-          border: 1px solid #000
+          border: 1px solid #cecece
           
           &:hover
             border: 1px solid $accentColor

components/Toc.vue

@@ -185,7 +185,7 @@
         padding-left: 1rem * (i - 2);
 
   // for vuepress-toc
-  @media (min-width: $MQNarrow)
+  @media (min-width: 1300px)
     .vuepress-toc
       display: block;
 </style>

global-components/BlogTag.vue

@@ -12,13 +12,14 @@
 
 <style lang="stylus">
   .blog-tag
-    display inline-block
+    display inline-flex
+    align-items center
+    height 45px
     word-break break-word
     font-size 20px
-    line-height 25px
     margin-right 20px
     margin-bottom 20px
-    padding 3px 15px
+    padding 0 15px
     border-radius 5px
     font-weight: 300
     text-align left

layouts/GlobalLayout.vue

@@ -24,9 +24,8 @@
 
 <style lang="stylus">
   .content-wrapper
-    padding-top 160px
+    padding 160px 15px 80px 15px
     min-height calc(100vh - 80px - 60px - 160px)
     max-width 740px
-    padding-left 20vw
-    padding-bottom 80px
+    margin 0 auto
 </style>

layouts/Post.vue

@@ -22,7 +22,9 @@
     font-family PT Serif, Serif
     color #2c3e50
     position relative
-    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.07);
+
+    @media(min-width: $MQNarrow)
+      box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.07)
   
 </style>
 

styles/wrapper.styl

@@ -2,8 +2,7 @@ $wrapper
   max-width $contentWidth
   margin 0 auto
   background-color #FFF
-  padding 3rem 4rem
-  @media (max-width: $MQNarrow)
+  @media (min-width: $MQNarrow)
     padding 2rem
   @media (max-width: $MQMobileNarrow)
     padding 1.5rem