revise styles for displaying draft posts

assets/scss/hyde-hyde/_misc.scss

@@ -10,7 +10,7 @@
 	color: #333;
 	border-radius: 2px;
 	padding: 1px 5px;
-}	
+}
 
 .text-center {
 	text-align: center;
@@ -19,3 +19,7 @@
 .pull-right {
 	float: right;
 }
+
+.draft {
+    color: #999 !important;
+}

layouts/index.html

@@ -6,23 +6,30 @@
   <div class="post-list">
     {{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
     {{ range $paginator.Pages }}
+      {{ if .Draft }}
+        {{ .Scratch.Set "draftPage" true }}
+      {{ else }}
+        {{ .Scratch.Set "draftPage" false }}
+      {{ end }}
       <div class="post-list__item">
         <span class="item__title--big">
-          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-          {{ if .Draft }}<sup><i class="fas fa-comment-dots fa-xs"></i></sup>{{ end }}
+          <a href="{{ .RelPermalink }}" {{if .Scratch.Get "draftPage" }}class="draft"{{end}}>{{ .Title }}</a>
         </span>
         <span class="item__date">
           {{ .Date.Format (.Site.Params.dateformat | default "Jan 02, 2006") }}
         </span>
+        <span {{if .Scratch.Get "draftPage" }}class="draft"{{end}}>
         {{ if .Description }}
         {{ .Description }}
         {{ else }}
         {{ .Summary }}
         {{ end }}
+        </span>
         {{ if .Truncated }}
           ... <a class="read-more-symbol" href="{{ .RelPermalink }}">➦</a>
         {{ end }}
         </div>
+        {{ .Scratch.Delete "draftPage" }}
      {{ end }}
   </div>
   {{ partial "pagination.html" . }}

layouts/partials/posts-list.html

@@ -1,10 +1,10 @@
 {{ range . }}
 <li>
   <span class="list__title--small">
-    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+    <a href="{{ .RelPermalink }}" {{if .Draft}}class="draft"{{end}}>{{ .Title }}</a>
       {{if not .Date.IsZero}}
       <time class="pull-right hidden-tablet">{{.Date.Format ("Jan 02 '06")}}</time>
       {{end}}
   </span>
 </li>
-{{ end }}
+{{ end }}