[chore] update package-lock.json

LOL, I'm still using 1.22.x

README.md

@@ -23,7 +23,6 @@
 - [How to edit the theme](#how-to-edit)
 - [Found a bug?](#bug)
 - [New cool idea or feature](#feature)
-- [Support](#support)
 - [License](#license)
 
 ## Features
@@ -130,7 +129,7 @@ This will clone the repository directly to the `themes/terminal` directory.
 git submodule add -f https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```
 
-This will install the repository as a submodule in the `themes/terminal` directory.
+This will install the repository as a sumbodule in the `themes/terminal` directory.
 
 ⚠️ If you encounter any issues with:
 
@@ -160,10 +159,6 @@ languageCode = "en-us"
 theme = "terminal"
 pagination.pagerSize = 5
 
-# Required for Chroma and the custom syntax highlighting.
-[markup.highlight]
-  noClasses = false
-
 [params]
   # dir name of your main content (default is `content/posts`).
   # the list of set content will show up on your index page (baseurl).
@@ -308,12 +303,8 @@ This will help keeping the theme close to its roots, and also allow anyone who w
 
 Sounds OK? Cool, let's rock! 🤘
 
-## Support
-
-If you like what I'm doing and want to support my work. You can do it [here](https://ko-fi.com/pan_r). Thank you! ♥️
-
 ## License
 
-Copyright © 2019-2025 Radek Kozieł ([@panr](https://rkoziel.com/))
+Copyright © 2019-2025 Radosław Kozieł ([@panr](https://radoslawkoziel.pl/))
 
 The theme is released under the MIT License. Check the [original theme license](https://github.com/panr/hugo-theme-terminal/blob/master/LICENSE.md) for additional licensing information.

assets/css/buttons.css

@@ -14,6 +14,7 @@ a.button {
   padding: 8px 18px;
   text-decoration: none;
   text-align: center;
+  border-radius: 8;
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -40,13 +41,13 @@ button.link,
 .button.link,
 a.button.link {
   background: none;
-  font-size: var(--font-size);
+  font-size: 1rem;
 }
 
 button.small,
 .button.small,
 a.button.small {
-  font-size: calc(var(--font-size) * 0.8);
+  font-size: 0.8rem;
 }
 
 button.wide,
@@ -71,6 +72,22 @@ 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 {
@@ -82,3 +99,20 @@ 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

@@ -3,6 +3,7 @@
 }
 
 pre:not(.chroma) {
+  margin: 20px 0;
   padding: 10px;
 }
 
@@ -19,14 +20,11 @@ pre code {
 
 code {
   color: var(--accent);
-  text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
 }
 
 .highlight {
   position: relative;
+  padding-top: 30px;
   margin: 20px 0;
   border: 1px solid var(--code-border);
 }
@@ -35,48 +33,25 @@ code {
   border: none;
 }
 
-.code-title {
+.chroma code[data-lang]:before {
+  content: attr(data-lang);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  height: 30px;
   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: calc(var(--font-size) * 0.8);
-  padding: 6px 10px;
+  font-size: .8em;
+  padding: 0 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%;
@@ -94,7 +69,7 @@ code {
   flex: 1;
   color: var(--accent);
   padding: 3px 10px;
-  font-size: calc(var(--font-size) * 0.9);
+  font-size: .9em;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -118,6 +93,16 @@ 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;
 }
@@ -125,3 +110,21 @@ 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.65;
+  opacity: 0.5;
 }
 
 .footer__inner {
@@ -9,6 +9,7 @@
   align-items: center;
   justify-content: space-between;
   margin: 0;
+  width: 760px;
   max-width: 100%;
 }
 
@@ -21,6 +22,7 @@
   flex-flow: row wrap;
   flex: 1;
   align-items: center;
+  font-size: 1rem;
   justify-content: center;
 }
 

assets/css/main.css

@@ -15,7 +15,6 @@ html {
 *::before,
 *::after {
   box-sizing: inherit;
-  word-break: break-word;
 }
 
 body {
@@ -67,7 +66,7 @@ img,
 figure,
 video,
 table {
-  margin: 25px 0;
+  margin: calc(var(--line-height) * 1.2) 0;
 }
 
 a {
@@ -164,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:
@@ -239,7 +238,7 @@ figure figcaption {
   background: var(--accent);
   color: var(--background);
   text-align: center;
-  font-size: var(--font-size);
+  font-size: 1rem;
   font-weight: normal;
   margin-top: -8px;
   padding: 0 8px;
@@ -285,7 +284,7 @@ kbd {
   border: 1px solid var(--code-border);
   padding: 1px 6px;
   margin: 0 2px;
-  font-size: calc(var(--font-size) * 0.95);
+  font-size: 0.95rem;
 }
 
 kbd {
@@ -307,7 +306,7 @@ pre {
   background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
   color: var(--foreground);
   padding: 20px 10px;
-  font-size: calc(var(--font-size) * 0.95) !important;
+  font-size: 0.95rem !important;
   overflow: auto;
   border-radius: var(--radius);
   border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
@@ -317,6 +316,7 @@ pre code {
   background: none !important;
   margin: 0;
   padding: 0;
+  font-size: inherit;
   border: none;
 }
 
@@ -416,6 +416,8 @@ hr {
   margin-top: 20px;
 }
 
+
+
 blockquote.twitter-tweet {
   position: relative;
   background: var(--background);
@@ -467,31 +469,8 @@ blockquote.twitter-tweet::before {
 }
 
 .__h_video {
-  position: relative;
+  padding-bottom: 58.23% !important;
   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"] {
@@ -500,13 +479,18 @@ iframe[src*="youtube.com"] {
 }
 
 @media (max-width: 684px) {
-  :root {
-    --font-size: 0.95rem;
+  body {
+    font-size: 1rem;
   }
 
   .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: calc(var(--font-size) * 0.8);
+  font-size: 0.8rem;
   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: inherit;
+  font-size: 1rem;
   padding: 0;
   appearance: none;
 }
@@ -63,6 +63,10 @@
   justify-content: center;
   flex: 1;
   padding: 8px 16px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .button__text {
@@ -79,6 +83,12 @@
   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: 25px 0;
+  margin-top: 20px;
 }
 
 .framed {
@@ -22,7 +22,7 @@
 .post {
   width: 100%;
   text-align: left;
-  padding: 30px 0;
+  padding: 40px 0;
 }
 
 .post:not(:last-of-type) {
@@ -30,9 +30,9 @@
 }
 
 .post-meta {
-  font-size: inherit;
+  font-size: 1rem;
   margin-bottom: 10px;
-  color: color-mix(in srgb, var(--foreground) 65%, transparent);
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
 }
 
 .post-meta > *:not(:first-child)::before {
@@ -67,7 +67,7 @@
 .post-tags {
   display: block;
   margin-bottom: 20px;
-  font-size: inherit;
+  font-size: 1rem;
   color: var(--accent);
 }
 
@@ -76,11 +76,11 @@
 }
 
 .post-content {
-  margin-top: 25px;
+  margin-top: 30px;
 }
 
 .post-cover {
-  margin: 25px 0;
+  margin: 40px 0;
 }
 
 .post ul {

assets/js/code.js

@@ -1,32 +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");
-
-  // 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

@@ -0,0 +1,20 @@
+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/code.js" | js.Build }}
+{{ $cp := resources.Get "js/copy-to-clipboard.js" | js.Build }}
 
 {{ $bundle := slice $menu $cp | resources.Concat "bundle.js" | resources.Minify }}
 

layouts/partials/pagination.html

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

theme.toml

@@ -10,4 +10,5 @@ min_version = 0.90
 
 [author]
   name = "panr"
-  homepage = "https://rkoziel.com"
+  homepage = "https://radoslawkoziel.pl"
+  twitter = "https://twitter.com/panr"