basic single page

layouts/404.html

@@ -1,8 +1,22 @@
 {{ define "main" }}
+<style>
+    html {
+        scroll-behavior: smooth;
+    }
+
+    body {
+        font-family: "Roboto", sans-serif;
+        background-color: #0a192f;
+    }
+</style>
 <div class="container">
     <div class="row justify-centent-center py-5">
         <div class="display-4 font-weight-bold text-center col p-5">
+            {{ if eq .Site.Params.version 3 }}
+            <span class="text-light">404 page not found</span>
+            {{ else }}
             404 page not found
+            {{ end }}
             <div class="text-center p-5">
                 <a href="{{ .Site.BaseURL }}" class="font-weight-bold btn btn-primary rounded-pill p-3 mb-2">Back to
                     Home</a>

layouts/_default/baseof.html

@@ -13,10 +13,10 @@
   {{- block "head" . -}}{{- end }}
   {{ else if eq .Site.Params.version 3 }}
   {{- partial "sections/v3/head.html" . -}}
+  <link rel="stylesheet" href="/css/v3/navbar-footer.css">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap"
     rel="stylesheet">
-  <link rel="stylesheet" href="/css/v3/navbar-footer.css" media="all">
   {{- block "head" . -}}{{- end }}
   {{ else }}
   {{ end }}

layouts/_default/single.html

@@ -10,6 +10,7 @@
 <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700&display=swap" rel="stylesheet">
 <link href="/css/v2/post.css" rel="stylesheet">
 {{ else if eq .Site.Params.version 3 }}
+<link href="/css/v3/post.css" rel="stylesheet">
 {{ else }}
 {{ end }}
 {{ end }}
@@ -18,7 +19,55 @@
 {{ define "main" }}
 
 {{ if eq .Site.Params.version 3 }}
+<section style="font-family: 'Roboto', sans-serif; color: #8392a5">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8 py-4 px-0">
+        <div class="rounded bg-light text-dark p-3">
+          <h1 class="pb-2 text-center">{{ .Title }}</h1>
+          <article>
+            {{.Content}}
+          </article>
+        </div>
+      </div>
+      <div class="col-md-4 py-4">
+        <div class="bg-light shadow p-4 rounded mb-2">
+          <h4>Table of content</h4>
+          {{.TableOfContents}}
+        </div>
+
+        <div class="bg-light shadow p-4 rounded mt-2">
+          <h4>Share</h4>
+          <span class="rounded-circle p-1 m-1">
+            <a target="blank" class="text-decoration-none"
+              href="https://twitter.com/share?text={{ .Title }}&url={{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
+              <i class="fab fa-lg fa-twitter text-primary"></i>
+            </a>
+          </span>
+          <span class="rounded-circle p-1 m-1 bg-light">
+            <a target="blank" class="text-decoration-none"
+              href="mailto:?subject={{ .Title }}&amp;body=Check out this site {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
+              <i class="fa fa-lg fa-envelope text-danger"></i>
+            </a>
+          </span>
+          <span class="rounded-circle p-1 m-1 bg-light">
+            <a target="blank" class="text-decoration-none"
+              href="https://api.whatsapp.com/send?text={{ .Title }}: {{ .Site.Params.hostName }}{{ .Permalink | absURL }}"
+              data-action="share/whatsapp/share">
+              <i class="fab fa-lg fa-whatsapp text-success"></i>
+            </a>
+          </span>
+        </div>
+      </div>
+
+      {{ template "_internal/disqus.html" . }}
+
+    </div>
+  </div>
+</section>
 {{ else }}
+
+
 <section class="mincho-font">
   <div class="py-4 bg-info text-center">
     <div class="container-fluid">

static/css/v3/post.css

@@ -0,0 +1,135 @@
+html {
+  scroll-behavior: smooth;
+}
+body {
+  font-family: "Roboto", sans-serif;
+  background-color: #0a192f;
+}
+
+article {
+  line-height: 1.756;
+  font-size: 18px;
+}
+
+article blockquote {
+  margin: 0 !;
+  border-left: 4px solid #248aaa !important;
+  background-color: #248baa15 !important;
+  padding: 0.3rem !important;
+  padding-left: 1rem !important;
+}
+
+article blockquote > p {
+  color: #3c4858 !important;
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+article h1 {
+  font-size: 52px !important;
+  line-height: 1.15;
+}
+
+article h2 {
+  font-size: 32px;
+  line-height: 1.333;
+}
+
+article h3 {
+  font-size: 24px;
+  line-height: 1.45;
+}
+
+article h4,
+h5,
+h6 {
+  font-size: 18px;
+  line-height: 1.45;
+}
+
+article > table {
+  border-radius: 0.1rem;
+  background: #e5e9f2;
+  border: 1px solid #c0ccda;
+  padding: 0.1rem;
+}
+
+article > table > tr {
+  height: 40px !important;
+}
+
+article > table > thead > tr > th {
+  padding: 0.5rem !important;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+article > table > tbody > tr > td {
+  padding: 0.5rem !important;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+
+article > table > thead > tr {
+  background: #248aaa;
+  color: #e5e9f2;
+}
+
+article > tbody > tr:nth-child(odd) {
+  background-color: #e5e9f2;
+}
+
+article > tbody > tr:hover {
+  background: #c0ccda;
+}
+
+article img {
+  width: 100%;
+}
+
+article caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: #8392a5;
+}
+
+article pre {
+  border-radius: 0.5rem !important;
+  margin: 5px;
+  padding: 2%;
+  background-color: #1f618d !important;
+  color: white;
+}
+
+article pre > code {
+  color: white;
+}
+
+article a.header-anchor {
+  text-decoration: none;
+  color: #1c2d41;
+}
+
+article a.header-anchor i {
+  font-size: 10pt;
+  color: #3c4858;
+  display: none;
+  margin-left: 0.5rem;
+}
+
+article a.header-anchor:hover i {
+  display: inline-block;
+}
+
+article a.header-anchor code {
+  color: #e83e8c;
+}
+
+article kbd {
+  background-color: #248aaa !important;
+  color: #f9fafc;
+}
+
+article mark {
+  background-color: #ffc21280;
+}