blog style update

config.yaml

@@ -10,6 +10,7 @@ taxonomies:
   tag: "tags"
   category: "categories"
 
+enableEmoji: true
 params:
   favicon: "/images/fav.png"
   description: "A high performance hugo theme for personal website. It is single page portfolio. It has blog."

content/blog/markdown_2.md

@@ -1,6 +1,5 @@
 ---
 title: "Markdown syntax"
-title: "Markdown syntax"
 date: 2020-08-15T13:22:10+05:30
 draft: false
 github_link: "https://github.com/gurusabarish/hugo-profile"
@@ -44,14 +43,12 @@ The blockquote element represents content that is quoted from another source, op
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
 
-
 #### Blockquote with attribution
 
 
 > Don't communicate by sharing memory, share memory by communicating.</p>
 > — <cite>Rob Pike[^1]</cite>
 
-
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
 ## Tables

exampleSite/config.yaml

@@ -11,6 +11,7 @@ taxonomies:
   tag: "tags"
   category: "categories"
 
+enableEmoji: true
 params:
   favicon: "/images/fav.png"
   description: "A high performance hugo theme for personal website. It is single page portfolio. It has blog."

layouts/_default/list.html

@@ -1,5 +1,9 @@
 {{ define "head"}}
 <meta name="description" content="blog of {{ .Site.Title}}" />
+<!-- Fonts -->
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"
+  media="all">
 <title>{{ .Title }}</title>
 {{ end }}
 

layouts/_default/single.html

@@ -1,5 +1,7 @@
 {{ define "head"}}
 <meta name="description" content="{{ .Params.description }}" />
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700&display=swap" rel="stylesheet">
 <title>{{ .Title }}</title>
 
 {{ end }}
@@ -7,53 +9,53 @@
 
 {{ define "main" }}
 
-<section>
+<section class="mincho-font">
+  <div class="py-4 bg-info text-center">
+    <!-- title and date -->
+    <h1 class="blog-title font-weight-bold">{{.Title}}</h1>
+    <div class="">
+      <!-- Date -->
+      <span class="px-1">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd"
+            d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z" />
+          <path fill-rule="evenodd"
+            d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z" />
+        </svg>
+      </span>
+      {{ dateFormat "Jan 2, 2006" .Date }}
+
+      <!-- Author -->
+      {{ if .Params.author }}
+      <span class="px-1">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
+        </svg>
+      </span>
+      {{ .Params.author }}
+      {{ end }}
+
+      <div class="pt-3">
+        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-size=large class="twitter-share-button"
+          data-show-count="false">Tweet my work</a>
+        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+      </div>
+    </div>
+
+    {{ if .Site.Params.showdescription }}
+    <div class="text-dark py-2">
+      {{ .Params.description }}
+    </div>
+    {{ end }}
+  </div>
+
   <div class="container-fluid">
     <div class="row justify-content-center ">
-      <div class="col-md-7 p-3">
-        <div class="px-3">
-          <div class="py-4 text-center">
-            <!-- title and date -->
-            <h1 class="blog-title">{{.Title}}</h1>
-            <div class="text-muted">
-              <!-- Date -->
-              <span class="px-1">
-                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd"
-                    d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z" />
-                  <path fill-rule="evenodd"
-                    d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z" />
-                </svg>
-              </span>
-              {{ dateFormat "Jan 2, 2006" .Date }}
-
-              <!-- Author -->
-              {{ if .Params.author }}
-              <span class="px-1">
-                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd"
-                    d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
-                </svg>
-              </span>
-              {{ .Params.author }}
-              {{ end }}
-
-              <div class="pt-3">
-                <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
-                  data-show-count="false">Tweet my work</a>
-                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-              </div>
-            </div>
-
-            {{ if .Site.Params.showdescription }}
-            <div class="text-dark py-2">
-              {{ .Params.description }}
-            </div>
-            {{ end }}
-          </div>
 
+      <div class="col-md-8 p-3">
+        <div class="px-md-3">
 
           <!-- image -->
           <div class="py-2">

layouts/index.html

@@ -1,6 +1,10 @@
 {{ define "head" }}
 <title>{{- .Site.Title -}}</title>
 <meta name="description" content="{{ .Site.Params.description }}">
+<!-- Fonts -->
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"
+    media="all">
 {{ template "_internal/google_analytics.html" . }}
 {{ end }}
 

layouts/partials/head.html

@@ -8,8 +8,3 @@
 <link rel="stylesheet" href="/css/all.min.css" media="all">
 <link rel="stylesheet" href="/css/fontawesome.min.css" media="all">
 <link rel="stylesheet" href="/css/index.css" media="all">
-
-<!-- Fonts -->
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"
-    media="all">

static/css/index.css

@@ -119,6 +119,10 @@ footer {
   font-size: 48px;
 }
 
+.mincho-font {
+  font-family: "Shippori Mincho B1", serif;
+}
+
 article {
   line-height: 1.756;
   font-size: 18px;
@@ -204,12 +208,12 @@ figcaption {
 
 article pre {
   margin: 5px;
-  padding-top: 0% !important;
-  padding-bottom: 1% !important;
   padding: 5%;
+  padding-left: 7%;
   font-size: 18px;
   background-color: #1f618d !important;
   color: white;
+  border-radius: 1.5% !important;
 }
 
 article pre > code {