Refactor styles

3 files changed, 37 insertions, 74 deletions

diff --git a/assets/css/site.css b/assets/css/site.css
index 33c0683..5c89cc8 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -18,6 +18,7 @@ html {
   background-color: #4fafed;
 }
 
+/* Home page header - with triangle effect */
 .header {
   position: relative;
   min-height: 400px;
@@ -48,28 +49,18 @@ html {
   border-right: 0;
 }
 
-/* .article styles */
+/* 
+ * These styles are needed since the markup is 
+ * created dynamically from MD files
+ */
+
 .article {
   @apply px-5;
   @apply pb-5;
   @apply text-gray-600;
 }
 
-.article__header {
-  @apply text-right;
-  @apply pb-6;
-}
-
-.artitle__title {
-  @apply leading-tight;
-  @apply mb-4;
-}
-
-.article__content > p:first-of-type {
-  @apply tracking-tight;
-  @apply text-2xl;
-}
-
+/* Make images/videos wider than post width, like Medium */
 @screen lg {
   .article__content > p > img,
   .article__content > video,
@@ -82,7 +73,6 @@ html {
 }
 
 .article a {
-  @apply text-gray-700;
   @apply transition;
   @apply duration-300;
   @apply ease-in-out;
@@ -92,8 +82,8 @@ html {
   @apply underline;
 }
 
-.article a:hover,
-.article a:focus {
+.article a:not([class^="text-"]):hover,
+.article a:not([class^="text-"]):focus {
   @apply text-blue-600;
 }
 
@@ -165,9 +155,8 @@ html {
   @apply text-xl;
 }
 
-
-.article ol,
-.article ul {
+.article ol:not(.list-none),
+.article ul:not(.list-none) {
   @apply ml-1;
   @apply list-inside;
   list-style-type: initial;
@@ -318,47 +307,7 @@ html {
   @apply text-2xl;
 }
 
-.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;
-}
-
-.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,
+/* .pagination is created by Hugo */
 .pagination {
   @apply my-5;
   @apply py-5;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4248f25..42ebd9f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -5,7 +5,7 @@
     <h1><a href="{{.Permalink}}" class="no-underline">{{ .Title }}</a></h1>
 
     {{if not .Params.hideMetadata }}
-      <header class="article__header">
+      <header class="text-right pb-6">
         {{ $readTime := cond (gt .ReadingTime 1) "minutes" "minute" }}
         <span class="">
           Read in {{ .ReadingTime }} {{ $readTime }} &middot;
@@ -16,24 +16,24 @@
       </header>
     {{ end }}
 
-    <div class="article__content py-5">
+    <div class="article__content">
       {{ .Content }}
     </div>
 
     {{if not .Params.hideAuthorBio }}
-      <section class="author">
+      <section class="my-5 pt-10 pb-5 border-t border-gray-400 flex items-center">
         {{if or (eq (substr .Site.Params.avatar 0 7) "http://") (eq (substr .Site.Params.avatar 0 8) "https://")}}
-          <img alt="Avatar photo" class="author__avatar" src="{{.Site.Params.avatar}}">
+          <img alt="Avatar photo" class="border border-gray-400 p-1 w-10 h-10 rounded-full mr-3" src="{{.Site.Params.avatar}}">
         {{ else }}
-          <img alt="Avatar photo" class="author__avatar" src="{{.Site.Params.avatar | relURL}}">
+          <img alt="Avatar photo" class="border border-gray-400 p-1 w-10 h-10 rounded-full mr-3" src="{{.Site.Params.avatar | relURL}}">
         {{ end }}
 
-        <span class="author__bio">{{ .Site.Params.authorBio | safeHTML }}</span>
+        <span class="flex-grow">{{ .Site.Params.authorBio | safeHTML }}</span>
 
         {{ $title := .Title }}
         {{ $url := printf "%s" .URL | absLangURL }}
         {{ $body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }}
-        <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Params.twitter }}{{ . }}{{ end }}" class="author__share bg-twitter hover:color-white hover:opacity-75">
+        <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Params.twitter }}{{ . }}{{ end }}" class="text-white text-xs font-bold rounded-md no-underline flex items-center px-3 py-2 bg-twitter hover:color-white hover:opacity-75 no-underline">
           <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
             <title>Twitter</title>
             <path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path>
@@ -45,7 +45,7 @@
     {{ end }}
 
     {{if not .Params.hideComments }}
-      <section class="comments ">
+      <section class="my-5 py-5 ">
         <h2>Comments</h2>
         {{ template "_internal/disqus.html" . }}
       </section>
diff --git a/layouts/partials/post-summary.html b/layouts/partials/post-summary.html
index 8fe9d04..3d96551 100644
--- a/layouts/partials/post-summary.html
+++ b/layouts/partials/post-summary.html
@@ -1,10 +1,24 @@
 <div class="flex flex-col md:flex-row border-b border-gray-400">
   <h2 class="text-3xl font-bold mb-2 md:w-32 flex-shrink-0 flex-grow-0">{{ .Key }}</h2>
   
-  <ol class="md:pt-3 mb-4">
+  <ol class="md:pt-3 mb-4 list-none">
     {{ range where .Pages "Type" "ne" "page" -}}
-    <li>
-      <a href="{{ .RelPermalink }}" class="tracking-tight">{{ .Title }}</a>
+    <li class="mb-8 flex flex-wrap">
+      <a href="{{ .RelPermalink }}" class="tracking-tight no-underline flex-grow w-full text-blue-600">
+        {{ .Title }}
+      </a>
+
+      <small class="mt-2 text-sm">
+        <time class="text-gray-500" datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}">
+          {{ dateFormat "January 2" (default .Date (.PublishDate)) }}
+        </time>
+
+        {{ range (.GetTerms "tags") }}
+          <a href="{{ .Permalink }}" class="inline-flex items-center px-4 py-1 rounded-full no-underline bg-orange-100 text-orange-800 hover:bg-orange-300 ml-4">
+            {{ .LinkTitle }}
+          </a>
+        {{ end }}
+      </small>
     </li>
     {{- end }}
   </ol>