feat: add code highlighting

style: change tags' style

assets/scss/_syntax.scss

@@ -1,5 +1,5 @@
 /* Background */ .bg { background-color: #f8f8f8; }
-/* PreWrapper */ .chroma { background-color: #f8f8f8; padding: 16px; border-radius: 4px;}
+/* PreWrapper */ .chroma { background-color: #f8f8f8; padding: 16px; border-radius: 4px; border: 1px dashed grey;}
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err {  }
 /* CodeLine */ .chroma .cl {  }

assets/scss/style.scss

@@ -1,5 +1,11 @@
 @import "_syntax.scss";
 
+body {
+    font-family: Inter;
+    line-height: 1.4;
+    background-color: #ebf4f3;
+}
+
 #page {
     height: 100vh;
     margin: 0
@@ -31,12 +37,51 @@
 #home-title {
     color: #202020;
     font-family: Inter;
-    font-size: 48px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }
 
+#post-title {
+    color: #202020;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin-bottom: 0;
+}
+
+.post-header {
+    margin-bottom: 40px;
+}
+
+.post-meta {
+    margin-top: .5em;
+    span {
+        color: #303030;
+    }
+}
+
+.post-tags {
+    margin: 10px 0;
+    display: flex;
+    gap: 6px;
+
+    .tag {
+        font-size: .7em;
+        padding: 3px 14px;
+        text-transform: lowercase;
+        border: 1px solid;
+        margin-bottom: 6px;
+
+        a {
+            outline: none;
+            text-decoration: none;
+            color: #5C5C5C;
+        }
+    }
+}
+
 #home-nav {
     display: flex;
     flex-direction: column;
@@ -120,7 +165,7 @@
 
     a {
         text-decoration: none;
-        color: #252525;
+        color: #656565;
 
         &:hover {
             text-decoration: underline;
@@ -200,4 +245,6 @@
 
 .content {
     max-width: 720px;
+    font-size: 1em;
+    color: #303030;
 }

config.toml

@@ -47,7 +47,7 @@ paginate = 5
   tag = "tags"
 
 [params]
-  dateform        = "Jan 2, 2006"
+  dateform        = "2 January 2006"
   dateformShort   = "Jan 2"
   dateformNum     = "2006-01-02"
   dateformNumTime = "2006-01-02 15:04 -0700"
@@ -63,7 +63,7 @@ paginate = 5
 
   relatedPosts = false  # Add a related content section to all single posts page
 
-  code_copy_button = true # Turn on/off the code-copy-button for code-fields
+  code_copy_button = false
 
   # Add custom css
   # customCSS = ["css/syntax.css"]

layouts/partials/posts/header.html

@@ -0,0 +1,14 @@
+<header id="site-header" class="animated slideInUp">
+    <div>
+        <div class="back-title">
+                <a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
+                <h1 id="post-title">{{ .Title }}</h1>
+                <div class="post-meta"><span>{{ time.Format .Site.Params.dateform .Date }}</span></div>
+        </div>
+        <div>
+            {{ if (or .Params.images .Params.featuredImg) -}}
+            <button id="img-btn" class="hdr-btn" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
+            {{- end }}
+        </div>
+    </div>
+</header>

layouts/posts/single.html

@@ -9,7 +9,7 @@
 {{ end }}
 
 {{ define "header" }}
-{{ partial "header.html" . }}
+{{ partial "posts/header.html" . }}
 {{ end }}
 
 {{ define "main" }}
@@ -19,15 +19,12 @@
 	<main class="site-main section-inner animated fadeIn faster">
 		<article class="thin">
 			<header class="post-header">
-				<h1>{{ .Title }}</h1>
-				<div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
 				{{- with .Params.tags }}
-				<p>
+				<div class="post-tags">
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
 					{{- range . -}}
 					<span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{.}}</a></span>
 					{{- end }}
-				</p>
+				</div>
 				{{- end }}
 			</header>
 			<div class="content">

resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json

@@ -1 +1 @@
-{"Target":"css/style.min.7c30431c941fd683f6909898424496e6ad0fee9bd65dfcd9cbf840011ff84aad.css","MediaType":"text/css","Data":{"Integrity":"sha256-fDBDHJQf1oP2kJiYQkSW5q0P7pvWXfzZy/hAAR/4Sq0="}}
+{"Target":"css/style.min.13b66600e3edbc9d2db3b022baef0d2e945f2475557c2e39ba61bd09bec0863c.css","MediaType":"text/css","Data":{"Integrity":"sha256-E7ZmAOPtvJ0ts7Aiuu8NLpRfJHVVfC45umG9Cb7Ahjw="}}