Improved author page display on smaller screens

2 files changed, 32 insertions, 13 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index a9aeae6..dca6fe1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -371,12 +371,14 @@ table {
 /* ============================================================ */
 /* Author */
 /* ============================================================ */
-.author-profile:after {
-  border-bottom: 1px dotted #303030;
-  content: "";
-  display: block;
-  margin: 40px auto 0;
-  width: 100px; }
+.author-profile {
+  margin: 0 40px; }
+  .author-profile:after {
+    border-bottom: 1px dotted #303030;
+    content: "";
+    display: block;
+    margin: 40px auto 0;
+    width: 100px; }
 
 .author-meta {
   color: #AEADAD;
@@ -464,7 +466,8 @@ table {
     display: block; }
 
   .post-container,
-  .post-list {
+  .post-list,
+  .author-profile {
     margin-right: 25px;
     margin-left: 25px; }
 
@@ -477,10 +480,16 @@ table {
     .share a {
       margin: 0 5px 0 0; } }
 @media only screen and (max-width: 400px) {
-  .post-title {
+  .post-title,
+  .author-name {
     font-size: 32px; }
 
   .post-container,
-  .post-list {
+  .post-list,
+  .author-profile {
     margin-right: 15px;
-    margin-left: 15px; } }
+    margin-left: 15px; }
+
+  .author-meta span {
+    display: block;
+    margin: 18px 0; } }
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
index 3418578..66fb010 100644
--- a/assets/sass/style.scss
+++ b/assets/sass/style.scss
@@ -421,6 +421,8 @@ table {
 /* ============================================================ */
 
 .author-profile {
+    margin: 0 40px;
+
     &:after {
         border-bottom: 1px dotted $secondary;
         content: "";
@@ -531,7 +533,8 @@ table {
     }
 
     .post-container,
-    .post-list {
+    .post-list,
+    .author-profile {
         margin-right: 25px;
         margin-left: 25px;
     }
@@ -549,11 +552,18 @@ table {
 }
 
 @media only screen and (max-width: 400px) {
-    .post-title { font-size: 32px; }
+    .post-title,
+    .author-name { font-size: 32px; }
 
     .post-container,
-    .post-list {
+    .post-list,
+    .author-profile {
         margin-right: 15px;
         margin-left: 15px;
     }
+
+    .author-meta span {
+        display: block;
+        margin: 18px 0;
+    }
 }