Styling & content

src/layouts/_default/list.html

@@ -7,7 +7,7 @@
 
 {{ partial "navbar.html" . }}
 
-  <main>
+<main>
   <section class="teal-bg">
     <div class="container one-box">
       <div class="row">
@@ -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>
@@ -48,49 +49,73 @@
 
     </div>
   </div>
-  </main>
-  <footer>
+</main>
+<footer>
   {{- partial "footer-content.html" . -}}
   {{- partial "footer.html" . -}}
-  </footer>
+</footer>
 
 </body>
 
 <style>
 
-  .preview-content{
+.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 {
+.featured-image {
   width: 100%;
   height: 100px;
   background-size: cover;
   background-position: center;
-  }
+}
 
-  .blog-listing{
+.blog-listing {
   border: 1px solid #949494;
   transition: 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
   min-height: 400px;
-  }
+}
 
-  .blog-listing:hover{
+.content-wrapper {
+  flex-grow: 1;
+}
+
+.blog-col {
+  display: flex;
+}
+
+.blog-listing:hover {
   background-color: #252525 !important;
-  }
+}
 
-  h3{
+h3 {
   font-size: 28px;
   line-height: 34px;
-  }
+}
 
-  p{
+p {
   font-size: 14px;
   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%;

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>