Styling & content

src/layouts/_default/list.html

@@ -35,7 +35,8 @@
                     <a href="{{ .RelPermalink }}"><h3>{{ .Title }}</h3></a>
                     <span class="grid-gray small">Published: {{ .Date.Format "02/01/2006" }}</span><br>
                     <span class="grid-gray small">Categories: {{ range .Params.categories }}<a class="grid-gray" href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>, {{ end }}</span>
-                        <span class="preview-content small mt-2">{{ .Content }}</span>
+                    <span class="preview-content small mt-2">{{ trim .Summary 5 | plainify }}</span>
+                    <a class="read-more" href="{{ .RelPermalink }}">Read More</a>
                   </div>
                 </div>
               </a>
@@ -61,8 +62,10 @@
 .preview-content {
   display: -webkit-box;
   overflow: hidden;
-    -webkit-line-clamp: 3;
+  -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  color: #fff;
 }
 
 .featured-image {
@@ -75,9 +78,19 @@
 .blog-listing {
   border: 1px solid #949494;
   transition: 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
   min-height: 400px;
 }
 
+.content-wrapper {
+  flex-grow: 1;
+}
+
+.blog-col {
+  display: flex;
+}
+
 .blog-listing:hover {
   background-color: #252525 !important;
 }
@@ -92,6 +105,18 @@
   line-height: 22px;
 }
 
+.read-more {
+  display: block;
+  margin-top: 10px;
+  font-size: 14px;
+  color: #00ffd0;
+  text-align: left;
+}
+
+.read-more:hover{
+  color: #e1e1e1;
+}
+
 .sidebar {
   flex: 0 0 30%;
   max-width: 20%;

src/layouts/_default/single.html

@@ -50,4 +50,8 @@
 img{
   max-width: 100%;
 }
+
+code{
+  color:#ff7ba7;
+}
 </style>

src/layouts/partials/sidebar.html

@@ -35,4 +35,12 @@
     line-height:12px;
   }
 
+  .sidebar-list a{
+    color: #fff;
+  }
+
+  .sidebar-list a:hover{
+    color: #00ffd0;
+  }
+
 </style>