4.2.0 (#530)

* revamp code highlighting

* replace standard Fira Code with a variable version

* change buttons arrows

* redesign code blocks

* make terminal logo more prominent

* separate terminal theme styles from terminal.css

Terminal.css styles only can change the color scheme.

* update docs and version

* remove USERS.md

* fix header pattern

* remove old prismjs shortcode

* remove old rss template

* remove old figure shortcode

* [chore] update yarn

LOL, I'm still using 1.22.x

* [chore] update package-lock.json

* fix pagination & boost meta visibility

* fix code blocks on mobile & move some parts from CSS to JS

assets/css/buttons.css

@@ -14,7 +14,6 @@ a.button {
   padding: 8px 18px;
   text-decoration: none;
   text-align: center;
-  border-radius: 8;
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -41,13 +40,13 @@ button.link,
 .button.link,
 a.button.link {
   background: none;
-  font-size: 1rem;
+  font-size: var(--font-size);
 }
 
 button.small,
 .button.small,
 a.button.small {
-  font-size: 0.8rem;
+  font-size: calc(var(--font-size) * 0.8);
 }
 
 button.wide,
@@ -72,22 +71,6 @@ a.button.inline:hover {
   background: none;
 }
 
-a.button.inline::before {
-  content: "["
-}
-
-a.button.inline::after {
-  content: "]"
-}
-
-a.button.inline.prev::before {
-  content: "< ["
-}
-
-a.button.inline.next::after {
-  content: "] >"
-}
-
 a.read-more,
 a.read-more:hover,
 a.read-more:active {
@@ -99,20 +82,3 @@ a.read-more:active {
   max-width: 100%;
   text-decoration: none;
 }
-
-.copy-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 3px 8px;
-  margin-bottom: 5px;
-  text-decoration: none;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 500;
-  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-}

assets/css/code.css

@@ -24,7 +24,6 @@ code {
 
 .highlight {
   position: relative;
-  padding-top: 30px;
   margin: 20px 0;
   border: 1px solid var(--code-border);
 }
@@ -33,25 +32,48 @@ code {
   border: none;
 }
 
-.chroma code[data-lang]:before {
-  content: attr(data-lang);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  height: 30px;
+.code-title {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   background: color-mix(in srgb, var(--foreground) 5%, transparent);
   border-bottom: 1px solid var(--code-border);
   color: var(--comment);
   text-transform:uppercase;
-  font-size: .8em;
-  padding: 0 10px;
+  font-size: calc(var(--font-size) * 0.8);
+  padding: 6px 10px;
   line-height: 1;
 }
 
+.copy-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  text-decoration: none;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.code-title .copy-button {
+  z-index: 1;
+  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
+}
+
+.code-title:hover .copy-button {
+  display: inline-block;
+}
+
+.code-title .copy-button:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--background));
+}
+
 .collapsable-code {
   position: relative;
   width: 100%;
@@ -69,7 +91,7 @@ code {
   flex: 1;
   color: var(--accent);
   padding: 3px 10px;
-  font-size: .9em;
+  font-size: calc(var(--font-size) * 0.9);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -93,16 +115,6 @@ code {
   background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
-.collapsable-code summary::marker {
-  /* content: "+"; */
-  font-weight: bold;
-}
-
-.collapsable-code[open] summary::marker {
-  /* content: "-"; */
-}
-
-
 .collapsable-code pre {
   margin-top: 0;
 }
@@ -110,21 +122,3 @@ code {
 .collapsable-code pre::first-line {
   line-height: 0;
 }
-
-.chroma .copy-button {
-  display: none;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  margin: .5em;
-  z-index: 1;
-  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
-}
-
-.chroma:hover .copy-button {
-  display: inline-block;
-}
-
-.chroma .copy-button:hover {
-  background: color-mix(in srgb, var(--accent) 10%, var(--background));
-}

assets/css/footer.css

@@ -1,7 +1,7 @@
 .footer {
   padding: 40px 0;
   flex-grow: 0;
-  opacity: 0.5;
+  opacity: 0.65;
 }
 
 .footer__inner {
@@ -9,7 +9,6 @@
   align-items: center;
   justify-content: space-between;
   margin: 0;
-  width: 760px;
   max-width: 100%;
 }
 
@@ -22,7 +21,6 @@
   flex-flow: row wrap;
   flex: 1;
   align-items: center;
-  font-size: 1rem;
   justify-content: center;
 }
 

assets/css/main.css

@@ -66,7 +66,7 @@ img,
 figure,
 video,
 table {
-  margin: calc(var(--line-height) * 1.2) 0;
+  margin: 25px 0;
 }
 
 a {
@@ -163,10 +163,10 @@ select:active {
 
 select {
   background-image: linear-gradient(
-      45deg,
-      transparent 50%,
-      var(--foreground) 50%
-    ),
+    45deg,
+    transparent 50%,
+    var(--foreground) 50%
+  ),
     linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
   background-position: calc(100% - 20px), calc(100% - 1em);
   background-size:
@@ -238,7 +238,7 @@ figure figcaption {
   background: var(--accent);
   color: var(--background);
   text-align: center;
-  font-size: 1rem;
+  font-size: var(--font-size);
   font-weight: normal;
   margin-top: -8px;
   padding: 0 8px;
@@ -284,7 +284,7 @@ kbd {
   border: 1px solid var(--code-border);
   padding: 1px 6px;
   margin: 0 2px;
-  font-size: 0.95rem;
+  font-size: calc(var(--font-size) * 0.95);
 }
 
 kbd {
@@ -306,7 +306,7 @@ pre {
   background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
   color: var(--foreground);
   padding: 20px 10px;
-  font-size: 0.95rem !important;
+  font-size: calc(var(--font-size) * 0.95) !important;
   overflow: auto;
   border-radius: var(--radius);
   border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
@@ -316,7 +316,6 @@ pre code {
   background: none !important;
   margin: 0;
   padding: 0;
-  font-size: inherit;
   border: none;
 }
 
@@ -416,8 +415,6 @@ hr {
   margin-top: 20px;
 }
 
-
-
 blockquote.twitter-tweet {
   position: relative;
   background: var(--background);
@@ -469,8 +466,31 @@ blockquote.twitter-tweet::before {
 }
 
 .__h_video {
-  padding-bottom: 58.23% !important;
+  position: relative;
   overflow: visible !important;
+  height: auto !important;
+  padding-bottom: 0 !important;
+}
+
+.__h_video a {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.__h_video a img {
+  width: 100%;
+}
+
+.__h_video a .play {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 60px;
+  height: 60px;
 }
 
 iframe[src*="youtube.com"] {
@@ -479,18 +499,13 @@ iframe[src*="youtube.com"] {
 }
 
 @media (max-width: 684px) {
-  body {
-    font-size: 1rem;
+  :root {
+    --font-size: 0.95rem;
   }
 
   .container {
     padding: 20px;
   }
-
-  ul,
-  ol {
-    margin-left: 20px;
-  }
 }
 
 @media print {

assets/css/pagination.css

@@ -15,7 +15,7 @@
   padding: 5px 10px;
   background: var(--background);
   color: color-mix(in srgb var(--foreground) 30%, transparent);
-  font-size: 0.8rem;
+  font-size: calc(var(--font-size) * 0.8);
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: 0.1em;
@@ -53,7 +53,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 1rem;
+  font-size: inherit;
   padding: 0;
   appearance: none;
 }
@@ -63,10 +63,6 @@
   justify-content: center;
   flex: 1;
   padding: 8px 16px;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .button__text {
@@ -83,12 +79,6 @@
   margin-right: 8px;
 }
 
-@media (max-width: 684px) {
-  .button {
-    flex: 1;
-  }
-}
-
 @media print {
   .pagination {
     display: none;

assets/css/post.css

@@ -1,5 +1,5 @@
 .index-content {
-  margin-top: 20px;
+  margin: 25px 0;
 }
 
 .framed {
@@ -22,7 +22,7 @@
 .post {
   width: 100%;
   text-align: left;
-  padding: 40px 0;
+  padding: 30px 0;
 }
 
 .post:not(:last-of-type) {
@@ -30,9 +30,9 @@
 }
 
 .post-meta {
-  font-size: 1rem;
+  font-size: inherit;
   margin-bottom: 10px;
-  color: color-mix(in srgb, var(--foreground) 50%, transparent);
+  color: color-mix(in srgb, var(--foreground) 65%, transparent);
 }
 
 .post-meta > *:not(:first-child)::before {
@@ -67,7 +67,7 @@
 .post-tags {
   display: block;
   margin-bottom: 20px;
-  font-size: 1rem;
+  font-size: inherit;
   color: var(--accent);
 }
 
@@ -76,11 +76,11 @@
 }
 
 .post-content {
-  margin-top: 30px;
+  margin-top: 25px;
 }
 
 .post-cover {
-  margin: 40px 0;
+  margin: 25px 0;
 }
 
 .post ul {

assets/js/code.js

@@ -0,0 +1,32 @@
+const blockcodes = document.querySelectorAll(".chroma code[data-lang]");
+
+for (const bc of blockcodes) {
+  const parent = bc.parentElement;
+  const content = bc.innerText.split("\n").filter(Boolean).join("\n");
+
+  // Code title
+  const title = document.createElement("div");
+  const lang = bc.dataset.lang;
+  title.classList.add("code-title");
+  title.innerText = lang;
+
+  // Copy to clipboard
+  if (navigator.clipboard !== undefined) {
+    const cpbutton = document.createElement("button");
+    cpbutton.classList.add("copy-button");
+    cpbutton.innerText = "Copy";
+
+    cpbutton.addEventListener("click", () => {
+      cpbutton.innerText = "Copied";
+      setTimeout(() => {
+        cpbutton.innerText = "Copy";
+      }, 1000);
+
+      navigator.clipboard.writeText(content);
+    });
+
+    title.append(cpbutton);
+  }
+
+  parent.closest(".highlight").prepend(title);
+}

assets/js/copy-to-clipboard.js

@@ -1,20 +0,0 @@
-const blockcodes = document.querySelectorAll(".chroma code[data-lang]");
-
-for (const bc of blockcodes) {
-  const parent = bc.parentElement;
-  const content = bc.innerText.split("\n").filter(Boolean).join("\n");
-  const cpbutton = document.createElement("button");
-  cpbutton.classList.add("copy-button");
-  cpbutton.innerText = "Copy";
-
-  cpbutton.addEventListener("click", () => {
-    cpbutton.innerText = "Copied";
-    setTimeout(() => {
-      cpbutton.innerText = "Copy";
-    }, 1000);
-
-    navigator.clipboard.writeText(content);
-  });
-
-  parent.prepend(cpbutton);
-}

layouts/_default/index.html

@@ -55,7 +55,7 @@
 
         {{ if not .Params.showFullContent }}
           <div>
-            <a class="read-more button inline" href="{{ .RelPermalink }}">{{ $.Site.Params.ReadMore }}</a>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
           </div>
         {{ end }}
       </article>

layouts/_default/list.html

@@ -45,7 +45,7 @@
 
         {{ if not .Params.showFullContent }}
            <div>
-            <a class="read-more button inline" href="{{ .RelPermalink }}">{{ $.Site.Params.ReadMore }}</a>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
           </div>
         {{ end }}
       </article>

layouts/_default/term.html

@@ -1,57 +1,57 @@
-{{ define "main" }}
-  <h1>Posts for: #{{ .Title }}</h1>
-  {{ with .Content }}
-    <div class="index-content">
-      {{ . }}
-    </div>
-  {{ end }}
-  <div class="posts">
-    {{ range .Paginator.Pages }}
-      <article class="post on-list">
-        <h1 class="post-title">
-          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-        </h1>
-        <div class="post-meta">
-          {{- if .Date -}}
-            <time class="post-date">
-              {{- .Date.Format "2006-01-02" -}}
-            </time>
-          {{- end -}}
-          {{- with .Params.Author -}}
-            <span class="post-author">{{- . -}}</span>
-          {{- end -}}
-        </div>
-
-        {{ if .Params.tags }}
-          <span class="post-tags">
-            {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
-              {{- . -}}
-            </a>&nbsp;
-            {{ end }}
-          </span>
-        {{ end }}
-
-        {{ partial "cover.html" . }}
-
-        <div class="post-content">
-          {{ if .Params.showFullContent }}
-            {{ .Content }}
-          {{ else if .Description }}
-            <p>{{ .Description | markdownify }}</p>
-          {{ else }}
-            {{ .Summary }}
-          {{ end }}
-        </div>
-
-        {{ if not .Params.showFullContent }}
-          <div>
-            <a class="read-more button inline" href="{{ .RelPermalink }}">{{ $.Site.Params.ReadMore }}</a>
-          </div>
-        {{ end }}
-      </article>
-    {{ end }}
-
-    {{ partial "pagination.html" . }}
-  </div>
-{{ end }}
+{{ define "main" }}
+  <h1>Posts for: #{{ .Title }}</h1>
+  {{ with .Content }}
+    <div class="index-content">
+      {{ . }}
+    </div>
+  {{ end }}
+  <div class="posts">
+    {{ range .Paginator.Pages }}
+      <article class="post on-list">
+        <h1 class="post-title">
+          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+        </h1>
+        <div class="post-meta">
+          {{- if .Date -}}
+            <time class="post-date">
+              {{- .Date.Format "2006-01-02" -}}
+            </time>
+          {{- end -}}
+          {{- with .Params.Author -}}
+            <span class="post-author">{{- . -}}</span>
+          {{- end -}}
+        </div>
+
+        {{ if .Params.tags }}
+          <span class="post-tags">
+            {{ range .Params.tags }}
+            #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+              {{- . -}}
+            </a>&nbsp;
+            {{ end }}
+          </span>
+        {{ end }}
+
+        {{ partial "cover.html" . }}
+
+        <div class="post-content">
+          {{ if .Params.showFullContent }}
+            {{ .Content }}
+          {{ else if .Description }}
+            <p>{{ .Description | markdownify }}</p>
+          {{ else }}
+            {{ .Summary }}
+          {{ end }}
+        </div>
+
+        {{ if not .Params.showFullContent }}
+          <div>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
+          </div>
+        {{ end }}
+      </article>
+    {{ end }}
+
+    {{ partial "pagination.html" . }}
+  </div>
+{{ end }}

layouts/partials/footer.html

@@ -13,7 +13,7 @@
 </footer>
 
 {{ $menu := resources.Get "js/menu.js" | js.Build }}
-{{ $cp := resources.Get "js/copy-to-clipboard.js" | js.Build }}
+{{ $cp := resources.Get "js/code.js" | js.Build }}
 
 {{ $bundle := slice $menu $cp | resources.Concat "bundle.js" | resources.Minify }}
 

layouts/partials/pagination.html

@@ -2,12 +2,15 @@
   <div class="pagination__buttons">
     {{ if .Paginator.HasPrev }}
       <a href="{{ .Paginator.Prev.URL }}" class="button inline prev">
-        <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
+        &lt; [<span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>]
       </a>
     {{ end }}
+    {{ if and .Paginator.HasPrev .Paginator.HasNext }}
+      ::
+    {{ end }}
     {{ if .Paginator.HasNext }}
       <a href="{{ .Paginator.Next.URL }}" class="button inline next">
-        <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
+        [<span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>] &gt;
       </a>
     {{ end }}
   </div>

layouts/partials/posts_pagination.html

@@ -7,7 +7,7 @@
   <div class="pagination__buttons">
     {{ if .NextInSection }}
       <a href="{{ .NextInSection.Permalink }}" class="button inline prev">
-        {{ .NextInSection.Title }}
+        &lt; [<span class="button__text">{{ .NextInSection.Title }}</span>]
       </a>
     {{ end }}
     {{ if and .NextInSection .PrevInSection }}
@@ -15,7 +15,7 @@
     {{ end }}
     {{ if .PrevInSection }}
       <a href="{{ .PrevInSection.Permalink }}" class="button inline next">
-        {{ .PrevInSection.Title }}
+         [<span class="button__text">{{ .PrevInSection.Title }}</span>] &gt;
       </a>
     {{ end }}
   </div>