Add author box in post

1 files changed, 45 insertions, 5 deletions

diff --git a/assets/css/site.css b/assets/css/site.css
index a6668bd..25cd48f 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -2,6 +2,10 @@
   background-image: linear-gradient(to top, rgba(217, 219, 224, 0.7) 0, rgb(249, 250, 251) 500px);
 }
 
+.bg-twitter {
+  background-color: #4fafed;
+}
+
 .header {
   position: relative;
   min-height: 400px;
@@ -261,13 +265,49 @@
   @apply text-2xl;
 }
 
-.comments {
-  @apply my-4;
-  @apply py-4;
+.author {
+  @apply my-5;
+  @apply pt-10;
+  @apply pb-5;
   @apply border-t;
   @apply border-gray-400;
+  @apply flex;
+  @apply items-center;
+}
+
+.author .author__avatar {
+  @apply border;
+  @apply border-gray-400;
+  @apply p-1;
+  @apply w-10;
+  @apply h-10;
+  @apply rounded-full;
+  @apply mr-3;
+}
+
+.author .author__bio {
+  @apply flex-grow;
 }
 
-.comments h2 {
-  @apply mt-0;
+.author .author__share {
+  @apply text-white;
+  @apply text-xs;
+  @apply font-bold;
+  @apply rounded-md;
+  @apply no-underline;
+  @apply flex;
+  @apply items-center;
+  @apply px-3;
+  @apply py-2;
+}
+
+.author .author__share:hover {
+  @apply text-white;
+}
+
+.comments {
+  @apply my-5;
+  @apply py-5;
+  @apply border-t;
+  @apply border-gray-400;
 }