Update _articles.scss

1 files changed, 50 insertions, 26 deletions

diff --git a/assets/sass/_articles.scss b/assets/sass/_articles.scss
index 0cfb21d..0ec01d0 100644
--- a/assets/sass/_articles.scss
+++ b/assets/sass/_articles.scss
@@ -1,5 +1,5 @@
 article {
-    border-radius: 4px;
+    border-radius: 1em;
     overflow: hidden;
     background-color: $article-background-color;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -21,7 +21,7 @@ article {
         content: "";
         display: block;
         border: 10px solid transparent;
-        border-right-color: #FFF;
+        border-right-color: #fff;
         position: absolute;
         top: 50px;
         left: -20px;
@@ -38,9 +38,22 @@ article {
     .content {
         padding: 2em;
 
+        blockquote,
+        dl,
+        figure,
+        form,
+        ol,
+        p,
+        pre,
+        table,
+        ul {
+            margin-bottom: 1.8rem;
+        }
+
         h1 {
             font-size: 1.75em;
             margin-bottom: 0.25em;
+            font-weight: 500;
 
             a {
                 font-style: normal;
@@ -53,26 +66,44 @@ article {
             }
         }
 
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 3.6rem;
+            margin-bottom: 1.2rem;
+            transition: all 0.3s ease-in-out;
+            &:hover {
+                transform: translateX(0.1em);
+            }
+        }
+
+        h2,
+        h3 {
+            border-bottom: 1px solid $meta-border-color;
+            padding-bottom: 1rem;
+        }
+
         h2 {
             font-size: 1.6em;
         }
 
         h3 {
-            font-size: 1.5em;
+            font-size: 1.4em;
         }
 
         h4 {
-            font-size: 1.4em;
+            font-size: 1.2em;
         }
 
         h5 {
-            font-size: 1.3em;
+            font-size: 1.1em;
         }
 
         h6 {
             font-size: 1.1em;
             text-transform: uppercase;
-            font-weight: bold;
         }
 
         .meta {
@@ -151,11 +182,6 @@ article {
                 list-style: none;
                 margin-top: 1.25em;
 
-                li {
-                    border-bottom: 1px solid #eee;
-                    padding-right: 10px;
-                }
-
                 a {
                     position: relative;
                     left: 0;
@@ -166,14 +192,9 @@ article {
                     font-style: normal;
 
                     span {
+                        font-size: 1.4rem;
                         color: $meta-text-color;
                     }
-
-                    &:hover {
-                        left: 10px;
-                        color: $base-color;
-                        text-decoration: none;
-                    }
                 }
             }
         }
@@ -184,7 +205,7 @@ article {
             margin: 1.5em 0;
             padding: 2em;
             border-left: 0.5em solid #ededed;
-            font-size: 1.1em;
+            font-size: 1.0em;
 
             cite {
                 text-transform: uppercase;
@@ -346,7 +367,7 @@ article {
             padding: 5.5%;
             margin: 0;
             text-align: center;
-            color: #FFF;
+            color: #fff;
             background: none;
             font-size: 1.2em;
             position: relative;
@@ -354,7 +375,7 @@ article {
 
             p {
                 line-height: 170%;
-                font-size: 1.10em;
+                font-size: 1.1em;
             }
 
             cite {
@@ -394,7 +415,8 @@ article {
     }
 
     // Video
-    &.video, &.article {
+    &.video,
+    &.article {
         .responsive-video {
             position: relative;
             /* 16:9 ratio*/
@@ -409,14 +431,16 @@ article {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border:0;
+                border: 0;
             }
         }
     }
 
     // Audio
-    &.audio, &.article {
-        .responsive-audio iframe, .responsive-audio audio {
+    &.audio,
+    &.article {
+        .responsive-audio iframe,
+        .responsive-audio audio {
             width: 100%;
             border: 0;
         }
@@ -437,7 +461,7 @@ article {
 
             &:after {
                 border-right-color: $highlight-color;
-                transition: all 0.3s ease-in-out
+                transition: all 0.3s ease-in-out;
             }
         }
 
@@ -477,7 +501,7 @@ article {
     }
 }
 
-#comments-container  {
+#comments-container {
     margin-left: 100px;
     padding-bottom: 1.2em;
 }