Redesign (#949)

* Tags pages

* Tags

* Categories and tags pages have been added

* Blog: List view

* Blog: List view

* Blog: Redesign: Posts

* Redesign: Authors, Tags, Posts

Author: dbazhenov

Diff for: assets/icons/rss-icon.svg

@@ -18,19 +18,10 @@ button {
 
 /* blockquote */
 blockquote {
-  padding: 0 2rem;
-  margin: 0 2rem 0 2rem;
-}
-
-blockquote:before {
-  display: block;
-  content: "\1f5e8";
-  font-size: 2rem;
-  padding: 1rem 0 0 0;
-  margin: 0 0 -1.8rem -2rem;
-  height: max-content;
-  color: $palette1;
-  font-weight: bold;
+  margin: 1rem 0rem;
+  padding: .25rem 0.5rem 0.5rem 0.5rem;
+  color: #59636e;
+  border-left: .25em solid #d1d9e0;
 }
 
 /* links */

Diff for: assets/scss/common/_elements.scss

@@ -3,7 +3,7 @@
 .hero {
   .contentblock {
       padding-top: 2rem;
-      padding-bottom: 2rem;
+      padding-bottom: 1rem;
   }
 }
 
@@ -34,10 +34,17 @@
 
   @media screen and (max-width: 760px) {
     text-align: left;
+    padding: 0;
+
+    p {
+      font-size: 0.75rem;
+      margin-top: 1rem;
+      line-height: 1.5;
+    }
 
     h1 {
-      font-size: 2rem;
-      line-height: 1em;
+      font-size: 1.5rem;
+      line-height: 1.2;
     }
   }  
 }

Diff for: assets/scss/common/_hero.scss

@@ -1,11 +1,12 @@
 @import "variables";
 
 .paginator {
-  margin-top:1.5rem;
-  margin-bottom:1rem;
-  text-align:center;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  text-align: center;
+
   a {
-    display:inline-block;
+    display: inline-block;
     text-decoration: none;
     border-radius: 3px;
     color: $dark;
@@ -14,29 +15,20 @@
       0.2s background-color ease-in-out,
       0.2s color ease-in-out,
       0.2s border-color ease-in-out;
-    &:hover,&.active {
+
+    &:hover,
+    &.active {
       background: $palette2;
       color: $palette3;
       border: 1px solid $palette2;
     }
 
-    height:1.5rem;
-    width:1.5rem;
-    line-height:1.5rem;
-    font-size:1rem;
-    margin-left:0.2rem;
-    margin-right:0.2rem;
-    @media screen and (min-width: 768px) {
-      height:1.5rem;
-      width:1.5rem;
-      line-height:1.5rem;
-      font-size:1rem;
-    }
-    @media screen and (min-width: 900px) {
-      height:3rem;
-      width:3rem;
-      line-height:3rem;
-      font-size:1.2rem;
-    }
+    height: 1.5rem;
+    width: 1.5rem;
+    line-height: 1.5rem; 
+    font-size: 1rem;
+    margin-left: 0.2rem;
+    margin-right: 0.2rem;
+    margin-bottom: 0.2rem;
   }
-}
+}