grid style example

28 files changed, 257 insertions, 99 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index f512724..95568ec 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -4,7 +4,7 @@ title = "Hugo W3 Simple Theme"
 theme = "hugo-w3-simple"
 disqusShortname = ""      # disqus_shortname
 googleAnalytics = ""      # UA-XXXXXXXX-X
-
+paginate = 12 #gridstyle use 3 column. so should be 3,6,9,12,15....
 
 [[menu.main]]
     name = "About"
@@ -22,6 +22,9 @@ googleAnalytics = ""      # UA-XXXXXXXX-X
 
 [params]
     relatedPosts = true
+    gridstyle = true  # list post with grid style. If false then simple list
+    readingtime = true  #display reading time
+    firstpic = true  # display first picture as thumbnail if no thumbnail set. For gridstyle only
     socialshare = true
     searchfunction = false #search function is not included in example site because it need server-side app. To see the demo please visit https://jesselau.com
     description = "Hugo W3 Simple Theme"
diff --git a/exampleSite/content/posts/eighth.md b/exampleSite/content/posts/eighth.md
index 4b75624..ea4e826 100644
--- a/exampleSite/content/posts/eighth.md
+++ b/exampleSite/content/posts/eighth.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:40:11+02:00
 image: "/images/blog/8.jpg"
 tags: ["interesting"]
 comments: false
+thumb-rigo-erives-594315-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/fifth.md b/exampleSite/content/posts/fifth.md
deleted file mode 100644
index a85e33f..0000000
--- a/exampleSite/content/posts/fifth.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "Fifth"
-date: 2018-10-07T11:39:22+02:00
-publishdate: 2018-10-07T11:39:22+02:00
-image: "/images/blog/5.jpg"
-tags: ["interesting", "drink"]
-comments: false
----
-# This is another post
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/fourth.md b/exampleSite/content/posts/fourth.md
index 3ba3ea8..a405812 100644
--- a/exampleSite/content/posts/fourth.md
+++ b/exampleSite/content/posts/fourth.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:39:16+02:00
 image: "/images/blog/4.jpg"
 tags: ["interesting"]
 comments: false
+thumb-samuele-errico-piccarini-206026-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/my-first-post.md b/exampleSite/content/posts/my-first-post.md
index 8e977e8..058cf97 100644
--- a/exampleSite/content/posts/my-first-post.md
+++ b/exampleSite/content/posts/my-first-post.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:17:14+02:00
 image: "/images/blog/1.jpg"
 tags: ["interesting"]
 comments: false
+thumb-samuel-zeller-4135-unsplash.jpg
 ---
 # This is my first post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/ninth.md b/exampleSite/content/posts/ninth.md
index a6aa2f7..95a57c3 100644
--- a/exampleSite/content/posts/ninth.md
+++ b/exampleSite/content/posts/ninth.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:40:14+02:00
 image: "/images/blog/9.jpg"
 tags: ["interesting", "drink"]
 comments: false
+thumb-joshua-fuller-667473-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/second.md b/exampleSite/content/posts/second.md
index 3709edc..1e2aeb6 100644
--- a/exampleSite/content/posts/second.md
+++ b/exampleSite/content/posts/second.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:39:10+02:00
 image: "/images/blog/2.jpg"
 tags: ["interesting"]
 comments: false
+thumb-john-towner-177554-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/seventh.md b/exampleSite/content/posts/seventh.md
index 34ccefe..18d8837 100644
--- a/exampleSite/content/posts/seventh.md
+++ b/exampleSite/content/posts/seventh.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:39:29+02:00
 image: "/images/blog/7.jpg"
 tags: ["interesting"]
 comments: false
+thumb-jeremy-bishop-211453-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/shortcodes-demopage.md b/exampleSite/content/posts/shortcodes-demopage.md
index 5d816c0..d4b10d0 100644
--- a/exampleSite/content/posts/shortcodes-demopage.md
+++ b/exampleSite/content/posts/shortcodes-demopage.md
@@ -10,6 +10,7 @@ categories:
 - Website Programming
 tags:
 - hugo
+thumb-jad-limcaco-183877-unsplash.jpg
 ---
 
 
diff --git a/exampleSite/content/posts/sixth.md b/exampleSite/content/posts/sixth.md
index 9bdfb81..677aff5 100644
--- a/exampleSite/content/posts/sixth.md
+++ b/exampleSite/content/posts/sixth.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:39:25+02:00
 image: "/images/blog/6.jpg"
 tags: ["interesting", "drink"]
 comments: false
+thumbnail: thumb-christine-roy-343235-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/content/posts/third.md b/exampleSite/content/posts/third.md
index b9d6cc9..4e86eb8 100644
--- a/exampleSite/content/posts/third.md
+++ b/exampleSite/content/posts/third.md
@@ -5,6 +5,7 @@ publishdate: 2018-10-07T11:39:13+02:00
 image: "/images/blog/3.jpg"
 tags: ["interesting"]
 comments: false
+thumb-goran-ivos-343495-unsplash.jpg
 ---
 # This is another post
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla tempus urna ac laoreet. Curabitur sed bibendum lectus. Vivamus gravida venenatis porttitor. Phasellus aliquet nibh vel accumsan malesuada. Nulla nibh enim, auctor nec rhoncus a, pulvinar at tortor. Donec sodales consequat dolor et condimentum. Praesent convallis massa sit amet ultrices porta. Sed commodo, odio et porttitor fringilla, mi tortor sodales nulla, a fermentum dolor mi pulvinar mi. 
diff --git a/exampleSite/images/thumb-christine-roy-343235-unsplash.jpg b/exampleSite/images/thumb-christine-roy-343235-unsplash.jpg
new file mode 100644
index 0000000..c63d16b
--- /dev/null
+++ b/exampleSite/images/thumb-christine-roy-343235-unsplash.jpg
diff --git a/exampleSite/images/thumb-goran-ivos-343495-unsplash.jpg b/exampleSite/images/thumb-goran-ivos-343495-unsplash.jpg
new file mode 100644
index 0000000..45780c1
--- /dev/null
+++ b/exampleSite/images/thumb-goran-ivos-343495-unsplash.jpg
diff --git a/exampleSite/images/thumb-jad-limcaco-183877-unsplash.jpg b/exampleSite/images/thumb-jad-limcaco-183877-unsplash.jpg
new file mode 100644
index 0000000..db691d6
--- /dev/null
+++ b/exampleSite/images/thumb-jad-limcaco-183877-unsplash.jpg
diff --git a/exampleSite/images/thumb-jeremy-bishop-211453-unsplash.jpg b/exampleSite/images/thumb-jeremy-bishop-211453-unsplash.jpg
new file mode 100644
index 0000000..4e7e765
--- /dev/null
+++ b/exampleSite/images/thumb-jeremy-bishop-211453-unsplash.jpg
diff --git a/exampleSite/images/thumb-john-towner-177554-unsplash.jpg b/exampleSite/images/thumb-john-towner-177554-unsplash.jpg
new file mode 100644
index 0000000..d4e68f0
--- /dev/null
+++ b/exampleSite/images/thumb-john-towner-177554-unsplash.jpg
diff --git a/exampleSite/images/thumb-joshua-fuller-667473-unsplash.jpg b/exampleSite/images/thumb-joshua-fuller-667473-unsplash.jpg
new file mode 100644
index 0000000..2aabd61
--- /dev/null
+++ b/exampleSite/images/thumb-joshua-fuller-667473-unsplash.jpg
diff --git a/exampleSite/images/thumb-rigo-erives-594315-unsplash.jpg b/exampleSite/images/thumb-rigo-erives-594315-unsplash.jpg
new file mode 100644
index 0000000..b3e1000
--- /dev/null
+++ b/exampleSite/images/thumb-rigo-erives-594315-unsplash.jpg
diff --git a/exampleSite/images/thumb-samuel-zeller-4135-unsplash.jpg b/exampleSite/images/thumb-samuel-zeller-4135-unsplash.jpg
new file mode 100644
index 0000000..875a3dc
--- /dev/null
+++ b/exampleSite/images/thumb-samuel-zeller-4135-unsplash.jpg
diff --git a/exampleSite/images/thumb-samuele-errico-piccarini-206026-unsplash.jpg b/exampleSite/images/thumb-samuele-errico-piccarini-206026-unsplash.jpg
new file mode 100644
index 0000000..7491d2f
--- /dev/null
+++ b/exampleSite/images/thumb-samuele-errico-piccarini-206026-unsplash.jpg
diff --git a/images/screenshot.png b/images/screenshot.png
index 8c738bf..7d0ed6d 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/simplelist.png b/images/simplelist.png
new file mode 100644
index 0000000..d13f970
--- /dev/null
+++ b/images/simplelist.png
diff --git a/images/tn.png b/images/tn.png
index d13f970..a88f3eb 100644
--- a/images/tn.png
+++ b/images/tn.png
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 20e9b53..dd6e5eb 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,19 +1,94 @@
 {{ define "main" -}}
  <div class="w3-content w3-card-4" >
 {{if not .IsHome }}
-
 <h1 class="w3-center">{{ .Title | markdownify }}</h1>
 {{ end }}
+{{ $paginator := .Paginate (where .Pages "Type" "post") }}
+
+
+{{ if  .Site.Params.gridstyle }}
+<!-- grid list style -->
+
+
+{{ range $i, $e:= $paginator.Pages }}
+	{{ if modBool $i 3 }}
+		<div class="w3-row  w3-section">
+	{{ end }}
+  <div class="w3-col w3-container w3-section m12 l4 ">
+    <div class="w3-card-2 w3-hover-shadow " >
+    	{{ with .Params.thumbnail }}
+	    <div class="w3-hover-opacity"><img src="{{ relURL . }}" alt="Thumbnail" /></div>
+	    {{ else }}
+	    {{ if .Site.Params.firstpic}}
+	    {{ $img := findRE "<img .*?>" .Content 1 }}
+	    {{ range $img }}
+	    <div class="w3-hover-opacity">{{ (print . ) | safeHTML }}</div>
+	    {{ end }}
+	    {{ end }}
+	{{ end }}
+    <header class="w3-container wraptext w3-text-indigo">
+      <h4>{{ .Title | markdownify }}</h4>
+      
+             
+    </header>
+
+    <div class="w3-container wraptext w3-white">
+    	<code> {{ .Date.Format "2006/01/02" }} </code>
+            
+          
+    	{{ if gt (len .Summary) 200 }}
 
-{{ .Content }}
+  
+  		<p>{{slicestr .Summary 0 200 }}</p>
+  
+  
+		{{ end }}
+      
+    </div>
+
+    <footer >
+      <a href="{{ .URL }}"><button class="w3-button w3-blue w3-block w3-hover-green">Read More</button></a>
+    </footer>
+  </div>
+  </div>
+  {{ if or (modBool (add $i 1) 3) (ge (add $i 1) $paginator.Pages) }}
+		</div>
+	{{ end }}
+
+{{ end }} 
+
+{{ else }}  
+
+<!-- simple list style -->
 
 <ul class="w3-ul w3-hoverable">
-  {{ range (where .Data.Pages "Section" "!=" "") }}
+
+
+
+{{ range $paginator.Pages }}
   <li>
     <span class="date">{{ .Date.Format "2006/01/02" }}</span> &nbsp; 
     <a href="{{ .URL }}">{{ .Title | markdownify }}</a>
   </li>
-  {{ end }}
+{{ end }} 
+{{ end }}
 </ul>
+
 </div>
-{{- end }}
\ No newline at end of file
+
+<br>
+<div class="w3-content" > 
+      <div class="w3-bar w3-section">
+
+	{{ with $paginator.Prev -}}
+  <a href="{{ .URL }}" class="w3-btn w3-text-indigo w3-hover-green">&#10094; Previous</a>
+    {{- end }}
+    {{ with $paginator.Next -}}
+  <a href="{{ .URL }}" class="w3-btn w3-right w3-text-indigo w3-hover-green">Next &#10095;</a>
+    {{- end }}
+</div>
+</div>
+
+{{- end }}
+
+
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index ff6f07b..4bf4a0c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,24 +1,6 @@
 {{ define "main" -}}
 
-  <div class="w3-content w3-card-4" >
-    <!-- post-header -->
-    <header class="w3-container w3-center w3-padding-32">
-      <h1>{{ .Title }}</h1>
-
-      <div class="post-meta">
-        <span class="post-time"> {{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} </span>
-        {{ with .Params.categories -}}
-          <div >
-            {{ range . }}
-              <a class="w3-btn w3-small w3-round w3-green" href="{{ "categories" | relLangURL }}/{{ . | urlize }}/"> {{ . }} </a>
-            {{ end }}
-          </div>
-        {{- end }}
-       
-        
-      </div>
-    </header>
-
+  
    
     <!-- Content -->
     <div class="w3-container">
@@ -26,70 +8,7 @@
     </div>
 
     
-   
-
-    <div class="w3-container">
-    	
-      {{ with .Params.tags -}}
-        <div class="w3-container">
-        	<hr class = "tag">
-        Tags: 
-          {{ range . }}
-          <a class="w3-btn w3-small w3-round w3-green" href="{{ "tags" | relLangURL }}/{{ . | urlize }}/">{{ . }}</a>
-          {{ end }}
-          <hr class = "tag">
-       
-        </div>
-      {{- end }}
-     
-	</div>
-
-    {{ if .Site.Params.relatedPosts }}
-    {{ $related := .Site.RegularPages.Related . | first 5 }}
-    {{ with $related }}
-    <div class="w3-container">
-        <!-- related content -->
-        <h2>Related Articles:</h2>
-        <ul class="w3-ul w3-hoverable">
-            
-            {{ range . }}
-
-              <li class="w3-padding-large"><span class="date">{{ .Date.Format "2006/01/02" }}</span> &nbsp; <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></li>
-            {{ end }}
-        </ul>
-    </div>
-    {{ end }}
-    {{ end }}
-    <br>  
-</div>
-      <!-- Post Pagination -->
-    <div class="w3-content" > 
-      <div class="w3-bar w3-section">
-	     {{ with .NextInSection }}
-	      <a  href="{{ .URL }}" class="w3-btn w3-text-indigo w3-hover-green">
-	          &#10094; {{ .Title }}
-	      </a>
-	    {{- end }}
-	    {{ with .PrevInSection }}
-	      <a class="w3-btn w3-right w3-text-indigo w3-hover-green" href="{{ .URL }}">
-	       {{ .Title }} &#10095;
-	      </a>
-	    {{- end }}
-  	  </div>
-    </div>
-	
   
-
-  <!-- w3colorjs -->
-  {{ if  (.Params.w3codecolor) }}
-      
-      <script src="{{ "/js/w3codecolor-min.js" | relURL }}"></script>
-
-      <script>
-      w3CodeColor();
-      </script>
-  {{- end -}}
-
   
 
 
diff --git a/layouts/partials/post/toc.html b/layouts/partials/post/toc.html
new file mode 100644
index 0000000..8019475
--- /dev/null
+++ b/layouts/partials/post/toc.html
@@ -0,0 +1,23 @@
+{{ if  (.Params.toc) }}
+
+<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right" style="width:200px;right:0;" id="tocSidebar">
+  <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
+  
+  {{.TableOfContents}}
+</div>
+
+<div class="w3-main" style="margin-right:200px">
+<div class="w3-teal">
+  <button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">&#9776;</button>
+  
+</div>
+
+<script>
+function w3_open() {
+    document.getElementById("tocSidebar").style.display = "block";
+}
+function w3_close() {
+    document.getElementById("tocSidebar").style.display = "none";
+}
+</script>
+{{ end }}
diff --git a/layouts/post/single.html b/layouts/post/single.html
new file mode 100644
index 0000000..3e0b3ef
--- /dev/null
+++ b/layouts/post/single.html
@@ -0,0 +1,137 @@
+{{ define "main" -}}
+ <!-- TOC -->
+    {{ if and (ge (len .TableOfContents) 100) (ne .Params.toc "false")  }}
+
+      <div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right" style="width:200px;right:0;" id="tocSidebar">
+        <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
+         
+          <h3 class="w3-center">T.O.C</h3>
+            {{.TableOfContents}}
+         
+      </div>
+
+      <div class="w3-main" style="margin-right:200px">
+      <div class="w3-teal">
+        <button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">&#9776;</button>
+        
+      </div>
+
+     
+{{ end }}
+
+  <div class="w3-content w3-card-4" >
+    <!-- post-header -->
+    <header class="w3-container w3-center w3-padding-32">
+      <h1>{{ .Title }}</h1>
+
+      <div >
+        <p> {{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} 
+          {{ if .Site.Params.readingtime }}
+             <code> {{  .WordCount }} Words </code>
+             <code> Reading Time: {{  .ReadingTime }} Minutes </code>
+          {{ end }}
+        </p>
+        {{ with .Params.categories -}}
+          <div >
+            {{ range . }}
+              <a class="w3-btn w3-small w3-round w3-green" href="{{ "categories" | relLangURL }}/{{ . | urlize }}/"> {{ . }} </a>
+            {{ end }}
+          </div>
+        {{- end }}
+       
+        
+      </div>
+    </header>
+
+   
+    <!-- Content -->
+    <div class="w3-container">
+      {{ .Content }}
+    </div>
+
+    
+   
+
+    <div class="w3-container">
+    	
+      {{ with .Params.tags -}}
+        <div class="w3-container">
+        	<hr class = "tag">
+        Tags: 
+          {{ range . }}
+          <a class="w3-btn w3-small w3-round w3-green" href="{{ "tags" | relLangURL }}/{{ . | urlize }}/">{{ . }}</a>
+          {{ end }}
+          <hr class = "tag">
+       
+        </div>
+      {{- end }}
+     
+	</div>
+
+    {{ if .Site.Params.relatedPosts }}
+    {{ $related := .Site.RegularPages.Related . | first 5 }}
+    {{ with $related }}
+    <div class="w3-container">
+        <!-- related content -->
+        <h2>Related Articles:</h2>
+        <ul class="w3-ul w3-hoverable">
+            
+            {{ range . }}
+
+              <li class="w3-padding-large"><span class="date">{{ .Date.Format "2006/01/02" }}</span> &nbsp; <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></li>
+            {{ end }}
+        </ul>
+    </div>
+    {{ end }}
+    {{ end }}
+    <br>  
+</div>
+      <!-- Post Pagination -->
+    <div class="w3-content" > 
+      <div class="w3-bar w3-section">
+	     {{ with .NextInSection }}
+	      <a  href="{{ .URL }}" class="w3-btn w3-text-indigo w3-hover-green">
+	          &#10094; {{ .Title }}
+	      </a>
+	    {{- end }}
+	    {{ with .PrevInSection }}
+	      <a class="w3-btn w3-right w3-text-indigo w3-hover-green" href="{{ .URL }}">
+	       {{ .Title }} &#10095;
+	      </a>
+	    {{- end }}
+  	  </div>
+    </div>
+	
+  <!-- TOC -->
+    {{ if and (ge (len .TableOfContents) 100) (ne .Params.toc "false")  }}
+
+      
+      </div>
+
+      <script>
+      function w3_open() {
+          document.getElementById("tocSidebar").style.display = "block";
+      }
+      function w3_close() {
+          document.getElementById("tocSidebar").style.display = "none";
+      }
+      </script>
+{{ end }}
+
+  <!-- w3colorjs -->
+  {{ if  (.Params.w3codecolor) }}
+      
+      <script src="{{ "/js/w3codecolor-min.js" | relURL }}"></script>
+
+      <script>
+      w3CodeColor();
+      </script>
+  {{- end -}}
+
+  
+
+
+
+{{- end }}
+
+
diff --git a/static/css/style.css b/static/css/style.css
index 116cbce..fd4e419 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -45,6 +45,8 @@ a:hover {
 
 code { color:crimson;background-color:#f9f9f9;padding-left:4px;padding-right:4px; }
 /* misc elements */
+.wraptext{word-wrap:break-word}
+
 img, iframe, video { 
     max-width: 100%; 
     height:auto;
@@ -72,7 +74,7 @@ blockquote p {
 em {
    
    font-style: normal;
-   color:red;
+   color:crimson;
 }
 
 /* social share css */