Forest theme

layouts/_default/list.html

@@ -49,6 +49,8 @@ <h1>{{ .Title }}</h1>
     <td>
     {{ with .Params.categories }}
     {{ range first 1 . }}
+    <div class="postCardContainer">
+    <div class = "postCardFront">
     <div class="categories">
       <a href="{{ relURL (print "/categories/" . "/" | urlize) }}">{{ . }}</a>
     </div>
@@ -59,16 +61,25 @@ <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
       {{ if .Date }}<span>{{ .Date.Format "2006-01-02" }}</span>{{ end }}
       {{ with .Params.author }}<span>{{ . }}</span>{{ end }}
     </div>
+
+      <div class="postShort" style="width:100%">
+        <p> Aeroplane, generosity, sneak. Boat, nervous, find.</p>
+       <div> 
+      </div>     
     <div class="summary">
+      <div class="summaryText">
       {{ $summary := .Description }}
       {{ if $summary }}
       {{ $summary = (markdownify $summary) }}
       {{ else }}
       {{ $summary = ((delimit (findRE "(<p.*?>(.|\n)*?</p>\\s*)+" .Content) "[&hellip;] ") | plainify | truncate (default 200 .Site.Params.summaryLength) (default " &hellip;" .Site.Params.textTruncated ) | replaceRE "&amp;" "&") }}
       {{ end }}
       {{ $summary | replaceRE "^([A-Za-z])" "&$1 opf;" | replaceRE "^(&[A-Za-z]) (opf;)" "$1$2" | safeHTML }}
-      <a href="{{ .RelPermalink }}" class="more" title={{ i18n "readMore" }}>{{ i18n "readMore" }} &rarr;</a>
     </div>
+      <a href="{{ .RelPermalink }}" class="more" title={{ i18n "readMore" }}>{{ i18n "readMore" }} </a>
+    </div>
+    </div>
+
     </td>
     {{ if $.IsHome }}
     <td class="spacer spacer-right"></td>

static/css/custom.css

@@ -0,0 +1,69 @@
+.article-list:hover{
+    transform: translateY(5px);
+    transform: translateX(5px);
+    opacity: 90%;
+    box-shadow: 0 0 8px #9A9A9A;
+}
+
+.menu { background: #284241; }
+
+.menu a, .pagination a, .article-meta a {
+    color: white;
+}
+
+body{
+    background: #E8F1F1;
+}
+
+.container{
+    background: #E8F1F1;
+}
+
+
+
+.postCardFront{
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.summary {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    background-color: #284241;
+    color: white;
+    width: 100%;
+    height: 0;
+    transition: .5s ease;
+  }
+
+  .postShort:hover .summary {
+    height: 100%;
+  }
+
+  .summaryText{
+    padding-left: 10px;
+    padding-right:60px;
+    padding-top:20px
+  }
+
+  .more{
+    padding: 0.25rem;
+    outline: none;
+    border: none;
+    border-radius: 3px;
+    background: white;
+    color: black;
+    font-weight: bold;
+    cursor: pointer;
+    transition: 0.4s ease;
+    margin-left: 10px;
+  }
+
+  .more:hover{
+     background: dodgerblue;
+	 color: white
+  }