add word-break to all elements

fix for the issue #537

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+
+indent_size = 2
+indent_style = space

COMMUNITY-FEATURES.md

@@ -23,3 +23,12 @@ eg:
 - **Single Page Website** (https://github.com/justinnuwin/hugo-theme-terminal)
   - A layout where the homepage can render lists of pages and the navigation menu can link to sections on the homepage.
   - Justin Nguyen, software and hardware developer.
+
+- **Support for beautiful *KaTeX* formulae** ([amtoine/hugo-theme-terminal-katex](https://github.com/amtoine/hugo-theme-terminal-katex))
+  - SHORT DESCRIPTION
+  - Antoine Stevan ([@amtoine](https://github.com/amtoine)), software engineer into open source
+
+- **Configurable timestamping for posts** ([KatieTheDev/hugo-theme-terminal](https://github.com/KatieTheDev/hugo-theme-terminal))
+  - Allows for configuring timestamping, not just datestamping
+  - Works with last modification dates as well
+  - KatieTheDev ([@KatieTheDev](https://github.com/KatieTheDev))

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 panr
+Copyright (c) 2024 panr
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,10 +1,14 @@
 # Terminal
 
+**Demo: https://panr.github.io/hugo-theme-terminal-demo/**
+
+**Create your own color scheme: https://panr.github.io/terminal-css/**
+
 ![Terminal](https://github.com/panr/hugo-theme-terminal/blob/master/images/terminal-theme.png?raw=true)
 
-**DEMO - https://panr.github.io/hugo-theme-terminal-demo/**
+---
 
-**⚠️ The theme needs at least Hugo **Extended** v0.90.x.**
+⚠️ The theme needs at least Hugo **Extended** v0.90.x.
 
 ---
 
@@ -19,14 +23,14 @@
 - [How to edit the theme](#how-to-edit)
 - [Found a bug?](#bug)
 - [New cool idea or feature](#feature)
-- [Terminal theme user?](#terminal-theme-user)
+- [Support](#support)
 - [License](#license)
 
 ## Features
 
-- fully customizable color schemes generated by [**terminal.css**](https://panr.github.io/terminal-css/).
+- fully customizable color schemes generated by [**Terminal.css**](https://panr.github.io/terminal-css/).
 - [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous!
-- **really nice duotone**, custom syntax highlighting based on [**PrismJS**](https://prismjs.com)
+- **really nice duotone**, custom syntax highlighting based on [**Chroma**](https://github.com/alecthomas/chroma) (fast, built-in Hugo syntax highlighter)
 - fully responsive
 - fully based on Hugo ecosystem (Pipes and Modules)
 
@@ -37,15 +41,10 @@
   ```go
   {{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
   ```
-- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**)
+- **`code`** (props required: **`language`**; props optional: **`title`**, **`open`**)
   - e.g.
   ```go
-  {{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}
-  ```
-- **`code`** (props required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
-  - e.g.
-  ```go
-  {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
+  {{< code language="css" title="Really cool snippet" open="true" >}}
   pre {
     background: #1a1a1d;
     padding: 20px;
@@ -70,7 +69,7 @@
 
 #### Code highlighting
 
-A custom syntax highlighting based on PrismJS. All you need to do is to wrap you code like this:
+A custom syntax highlighting based on Chroma. All you need to do is to wrap you code like this:
 
 ````
 ```html
@@ -78,7 +77,9 @@ A custom syntax highlighting based on PrismJS. All you need to do is to wrap you
 ```
 ````
 
-**Supported languages**: actionscript, apacheconf, applescript, bash, c, clike, cmake, coffeescript, cpp, csharp, csp, css, css-extras, diff, django, docker, elixir, elm, erlang, flow, fsharp, git, go, graphql, haml, handlebars, haskell, http, java, javascript, json, jsx, kotlin, latex, less, llvm, makefile, markdown, markup, markup-templating, nasm, objectivec, ocaml, perl, php, php-extras, powershell, processing, pug, python, r, reason, ruby, rust, sass, scala, scheme, scss, sql, stylus, swift, textile, toml, tsx, twig, typescript, vim, visual-basic, wasm, yaml.
+You can find more here in the official Hugo [documentation](https://gohugo.io/content-management/syntax-highlighting/).
+
+**Supported languages**: https://github.com/alecthomas/chroma?tab=readme-ov-file#supported-languages
 
 ## How to start
 
@@ -129,7 +130,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 sumbodule in the `themes/terminal` directory.
+This will install the repository as a submodule in the `themes/terminal` directory.
 
 ⚠️ If you encounter any issues with:
 
@@ -157,7 +158,11 @@ languageCode = "en-us"
 # Add it only if you keep the theme in the `themes` directory.
 # Remove it if you use the theme as a remote Hugo Module.
 theme = "terminal"
-paginate = 5
+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`).
@@ -199,6 +204,20 @@ paginate = 5
   # can be overridden in a page's front-matter
   # TocTitle = "Table of Contents" # default
 
+  # Set date/time format for posts
+  # This will impact the date/time displayed on
+  # index.html, the posts list page, and on posts themselves
+  # This value can also be configured per-post on front matter
+  # If you have any issues with the timezone rendering differently
+  # than you expected, please ensure your timezone is correctly set
+  # on your server.
+  # This value can be customized according to Hugo documentation:
+  # https://gohugo.io/functions/time/format/
+  # Default value (no changes needed):
+  # dateFormat = "2006-01-02"
+  # Example format, with date, time, and timezone abbreviation:
+  # dateFormat = "2006-01-02 3:04:06 PM MST"
+
 
 [params.twitter]
   # set Twitter handles for Twitter cards
@@ -289,13 +308,12 @@ This will help keeping the theme close to its roots, and also allow anyone who w
 
 Sounds OK? Cool, let's rock! 🤘
 
-## Terminal theme user?
-
-I'd be happy to know more about you and what you are doing. If you want to share it, please make a contribution and [add your site to the list](https://github.com/panr/hugo-theme-terminal/blob/master/USERS.md)! 🤗
+## 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-2024 Radosław Kozieł ([@panr](https://twitter.com/panr))
+Copyright © 2019-2025 Radek Kozieł ([@panr](https://rkoziel.com/))
 
 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.

USERS.md

@@ -1,66 +0,0 @@
-# Meet the users of Terminal theme!
-
-- https://xicode.se **magistern** (Teacher)
-- https://devmaster64.com **devmaster64** (Software Developer)
-- https://calloc.net **Vaibhav Yenamandra** (Software Engineer)
-- https://potatofrom.space **Kevin Liu** (Software)
-- https://horochx.org **horochx** (Software Developer)
-- https://feng.si **Si Feng** (Software Engineer)
-- https://ben-on-vms.com **Benedikt Frenzel** (Technical Support Engineer)
-- https://johngazzini.com **John Gazzini** (Software Engineer)
-- https://tears.io/ **Alex** (SRE)
-- https://ayushkarn.me/ **Ayush Karn** (Student Developer)
-- https://zaine.me **Amine Zaine** (Cloud Engineer)
-- https://notes.dmaitre.phyip3.dur.ac.uk/computing-club/ **Ryan Moodie** (Physics PhD student)
-- https://lunar.computer **Lunar Computer** (DevOps Engineer)
-- https://naxxfish.net **Chris Roberts** (Broadcast Systems Engineer)
-- https://andreacaravano.net **Andrea Caravano** (Student)
-- https://qbunt.com **Jeremy Bunting** (Software Engineer)
-- https://smeik.org **Smeik** (Embedded Developer)
-- https://code.willstocks.co.uk **Will Stocks** (Blogger & Developer)
-- https://blog.vnandag.me **Nanda Gopal** (Student Developer)
-- https://m47r1x.github.io **Neo** (Citizen of Zion)
-- https://bgameiro.me/ **Bernardo Gameiro** (Engineer Physicist student)
-- https://return-to-libc.com/ **elraro** (Cyber Security Specialist)
-- https://pablart.com/ **Pablo Diaz-Gutierrez** (Software Engineer, General Tinkerer)
-- https://monocle.rpod.club/ **classx** (DevOps Engineer)
-- https://erisianrite.com/ **ErisianRite** (Coding, Engineering, Tools for Thought)
-- https://isaes.com.tr/ **Isa Es** (Software Engineer)
-- https://blog.m5e.de/ **Christoph Miksche** (Software Developer)
-- https://mpostument.com/ **Maksym Postument** (DevOps Engineer)
-- https://mathiejosh.xyz **Josh Mathie** (Electrical Engineering Technology Student/Sales and Engineering Tech)
-- https://yuji.ne.jp/ **YUJI** (Student & Software Developer)
-- https://blog.puvvadi.me **KD Puvvadi** (Software Dev & Cloud Orchestrator)
-- https://hidden.land/ **Louisload** (Game Developer & Musician)
-- https://linuxbase.nl **Michael Trip** (DevOps Engineer)
-- https://blog.sethforprivacy.com **Seth For Privacy** (Security, privacy, and cryptocurrency writer, podcaster)
-- https://thesprawl.city **crish** (Software and stuff)
-- https://justinnuwin.com **Justin Nguyen** (Software & Hardware Developer)
-- https://blog.woosal.com/ **Vusal Ismayilov** (Computer Engineering Student)
-- https://itsembedded.com/  **Norbert Kremeris** (digital logic design and verification engineer)
-- https://nereuxofficial.github.io **Nereuxofficial** (Software Developer & Student)
-- https://biplav.xyz **Biplav's Blog** (Student)
-- https://santiago.wtf **Nicholas Santiago** (DevOps Engineer)
-- https://2200g.github.io/ **2200g** (Blogger/Student)
-- https://they.mint.lgbt **Joey Aliaga** (Software Developer & Student)
-- https://tatewilhelm.me **Tate Wilhelm** (Student, Programmer & Tinkerer)
-- https://mikefoden.com **Mike Foden** (Software Developer)
-- https://undemalum.github.io/portfolio/ **Mateusz Konat** (Student)
-- https://ku0hn.radio **Ben Kuhn** (Ham Radio Operator, InfoSec Engineer, Tinkerer)
-- https://www.grumpymetalguy.com **GrumpyMetalGuy** (General Grumper and Developer)
-- https://blog.jontes.page **Jonte** (general tech geek)
-- https://nazdarthegame.com/ **Michal Skoula** (Software Developer)
-- https://1mup.myorange.house **Antonio Garosi** (Street art gallery)
-- https://kitchvx.github.io **Nathan Kitching** (IT Student)
-- https://dgood.win **Dom Goodwin** (Platform Engineer)
-- https://sir-photch.xyz **Sir-Photch** (ComSci-student. German Blog)
-- https://drewmorris.info **Drew Morris** (Mathematician && Computer Scientist)
-- https://blog.darkiiiiiice.com **MarioMang** (Software Developer)
-
-<!--
- TEMPLATE:
-
- - https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)
-
- -->
-

archetypes/posts.md

@@ -1,6 +1,7 @@
 +++
 title = "{{ replace .TranslationBaseName "-" " " | title }}"
 date = "{{ .Date }}"
+#dateFormat = "2006-01-02" # This value can be configured for per-post date formatting
 author = ""
 authorTwitter = "" #do not include @
 cover = ""

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,25 +82,3 @@ a.read-more:active {
   max-width: 100%;
   text-decoration: none;
 }
-
-.code-toolbar {
-  margin-bottom: 20px;
-}
-
-.code-toolbar .toolbar-item a {
-  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-radius: 8px;
-  border: 1px solid transparent;
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-}

assets/css/code.css

@@ -1,87 +1,100 @@
-/* _code.scss */
-pre {
-  margin: 20px 0;
+:root {
+  --code-border: color-mix(in srgb, var(--foreground) 10%, transparent);
 }
 
-.code-toolbar {
-  position: relative;
-  margin: 20px 0;
-  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
+pre:not(.chroma) {
+  padding: 10px;
 }
 
-.code-toolbar + .code-toolbar,
-.code-toolbar + .highlight,
-.code-toolbar + .highlight .code-toolbar {
-  border-top: 0;
-  margin-top: -20px;
+pre.chroma {
+  margin: 0;
+  padding: 10px 0;
+  color: var(--foreground);
 }
 
-.code-toolbar pre, .code-toolbar code {
+pre code {
+  color: var(--foreground);
   border: none;
 }
 
-.code-toolbar code {
-  display: block;
-  color: color-mix(in srgb, var(--accent) 50%, var(--foreground));
+code {
+  color: var(--accent);
+  text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
-.code-toolbar > .toolbar button {
-  font-size: 0.8em !important;
-  font-weight: bold !important;
-  background:  var(--accent) !important;
-  color: var(--background) !important;
-  border-radius: var(--radius) !important;
-  box-shadow: none !important;
-  border: 1px solid var(--background) !important;
-  margin: 6px !important;
-  padding: 10px !important;
-  user-select: none;
+.highlight {
+  position: relative;
+  margin: 20px 0;
+  border: 1px solid var(--code-border);
+}
+
+.highlight pre {
+  border: none;
+}
+
+.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: 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%;
-  margin: 40px 0;
-}
+  margin: 20px 0;
+  border: 1px solid var(--accent);
 
-.collapsable-code input[type=checkbox] {
-  position: absolute;
-  visibility: hidden;
-}
-
-.collapsable-code input[type=checkbox]:checked ~ pre,
-.collapsable-code input[type=checkbox]:checked ~ .code-toolbar pre {
-  display: none;
-}
-
-.collapsable-code input[type=checkbox]:checked ~ .code-toolbar {
-  padding: 0;
-  border-top: none;
-}
-
-.collapsable-code input[type=checkbox]:checked ~ .code-toolbar .toolbar {
-  display: none;
-}
-
-.collapsable-code input[type=checkbox]:checked ~ label .collapsable-code__toggle::after {
-  content: attr(data-label-expand);
-}
-
-.collapsable-code label {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  min-width: 30px;
-  min-height: 30px;
-  margin: 0;
-  border-bottom: 1px solid var(--accent);
-  cursor: pointer;
+  .highlight {
+    margin: 0;
+  }
 }
 
 .collapsable-code__title {
+  display: inline-flex;
+  align-items: center;
   flex: 1;
   color: var(--accent);
   padding: 3px 10px;
+  font-size: calc(var(--font-size) * 0.9);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -95,14 +108,14 @@ pre {
   padding: 3px 10px;
 }
 
-.collapsable-code__toggle {
+.collapsable-code summary {
   color: var(--accent);
-  font-size: 16px;
-  padding: 3px 10px;
+  padding: 0 10px;
+  cursor: pointer;
 }
 
-.collapsable-code__toggle::after {
-  content: attr(data-label-collapse);
+.collapsable-code summary:hover {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
 .collapsable-code pre {
@@ -112,7 +125,3 @@ pre {
 .collapsable-code pre::first-line {
   line-height: 0;
 }
-
-.collapsable-code .code-toolbar {
-  margin: 0;
-}

assets/css/fonts.css

@@ -1,15 +1,18 @@
-/* _font.scss */
+/* latin-ext */
 @font-face {
-  font-display: swap;
-  font-family: "Fira Code";
+  font-family: 'Fira Code';
   font-style: normal;
-  font-weight: 400;
-  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  font-weight: 300 700;
+  font-display: swap;
+  src: url("../fonts/FiraCode-LatinExt.woff2") format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+/* latin */
 @font-face {
-  font-display: swap;
-  font-family: "Fira Code";
+  font-family: 'Fira Code';
   font-style: normal;
-  font-weight: 800;
-  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  font-weight: 300 700;
+  font-display: swap;
+  src: url("../fonts/FiraCode-Latin.woff2") format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

assets/css/footer.css

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

assets/css/gist.css

@@ -1,4 +1,3 @@
-/* _gist.scss */
 body .gist .blob-num,
 body .gist .blob-code-inner {
   border: none;

assets/css/header.css

@@ -1,4 +1,3 @@
-/* _header.scss */
 .header {
   display: flex;
   flex-direction: column;
@@ -36,6 +35,7 @@
   text-decoration: none;
   background: var(--accent);
   color: var(--background);
+  font-weight: bold;
   padding: 5px 10px;
 }
 

assets/css/main.css

@@ -1,4 +1,12 @@
-/* _main.scss */
+:root {
+  --background: #1a170f;
+  --foreground: #eceae5;
+  --accent: #eec35e;
+  --font-size: 1rem;
+  --line-height: 1.54em;
+  --radius: 0;
+}
+
 html {
   box-sizing: border-box;
 }
@@ -7,25 +15,387 @@ html {
 *::before,
 *::after {
   box-sizing: inherit;
+  word-break: break-word;
 }
 
 body {
   margin: 0;
   padding: 0;
   font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
-  font-size: 1rem;
-  line-height: 1.54;
-  letter-spacing: -0.02em;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
   background-color: var(--background);
   color: var(--foreground);
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
-  font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
-  font-variant-ligatures: contextual;
   -webkit-overflow-scrolling: touch;
   text-size-adjust: 100%;
 }
 
+h1 {
+  font-size: calc(var(--font-size) * 1.45);
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: calc(var(--font-size) * 1.35);
+  letter-spacing: 0;
+}
+
+h3 {
+  font-size: calc(var(--font-size) * 1.15);
+  letter-spacing: 0;
+}
+
+h4,
+h5,
+h6 {
+  font-size: calc(var(--font-size) * 1);
+  letter-spacing: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+img,
+figure,
+video,
+table {
+  margin: 25px 0;
+}
+
+a {
+  color: var(--accent);
+}
+
+button {
+  position: relative;
+  font: inherit;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  background: transparent;
+  color: var(--accent);
+  padding: 5px 18px;
+  border: 4px solid var(--accent);
+  border-radius: var(--radius);
+  transition: background 0.15s linear;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+fieldset {
+  display: inline-block;
+  border: 2px solid var(--foreground);
+  border-radius: calc(var(--radius) * 1.6);
+  padding: 10px;
+}
+
+fieldset *:first-child {
+  margin-top: 0;
+}
+
+fieldset input,
+fieldset select,
+fieldset textarea,
+fieldset label,
+fieldset button {
+  margin-top: calc(var(--line-height) * 0.5);
+  width: 100%;
+}
+
+label {
+  display: inline-block;
+}
+
+label input {
+  margin-top: 0;
+}
+
+input,
+textarea,
+select {
+  background: transparent;
+  color: var(--foreground);
+  border: 1px solid var(--foreground);
+  border-radius: var(--radius);
+  padding: 10px;
+  font: inherit;
+  appearance: none;
+}
+
+input[type="checkbox"] {
+  width: auto;
+}
+
+input:focus-visible,
+input:active,
+textarea:focus-visible,
+textarea:active,
+select:focus-visible,
+select:active {
+  border-color: var(--accent);
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+input:active,
+textarea:active,
+select:active {
+  box-shadow: none;
+}
+
+select {
+  background-image: linear-gradient(
+    45deg,
+    transparent 50%,
+    var(--foreground) 50%
+  ),
+    linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
+  background-position: calc(100% - 20px), calc(100% - 1em);
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 40px;
+}
+
+select option {
+  background: var(--background);
+}
+
+input[type="checkbox"] {
+  vertical-align: middle;
+  padding: 10px;
+  box-shadow: inset 0 0 0 3px var(--background);
+}
+
+input[type="checkbox"]:checked {
+  background: var(--accent);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  border: 8px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 8px;
+  overflow: hidden;
+}
+
+img.left {
+  margin-right: auto;
+}
+
+img.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.right {
+  margin-left: auto;
+}
+
+figure {
+  width: fit-content;
+}
+
+figure.left {
+  margin-right: auto;
+}
+
+figure.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+figure.right {
+  margin-left: auto;
+}
+
+figure img,
+figure video {
+  margin-bottom: 0;
+}
+
+figure figcaption {
+  background: var(--accent);
+  color: var(--background);
+  text-align: center;
+  font-size: var(--font-size);
+  font-weight: normal;
+  margin-top: -8px;
+  padding: 0 8px;
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+
+figure figcaption p:first-child {
+  margin-top: 0;
+}
+
+ul,
+ol {
+  margin-left: 4ch;
+  padding: 0;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+  margin-top: 0;
+}
+
+li::marker {
+  color: var(--accent);
+}
+
+ul li,
+ol li {
+  position: relative;
+}
+
+code,
+kbd {
+  font-family:
+    "Fira Code",
+    Monaco,
+    Consolas,
+    "Ubuntu Mono",
+    monospace !important;
+  font-feature-settings: normal;
+  background: color-mix(in srgb, var(--foreground) 5%, transparent);
+  border: 1px solid var(--code-border);
+  padding: 1px 6px;
+  margin: 0 2px;
+  font-size: calc(var(--font-size) * 0.95);
+}
+
+kbd {
+  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
+  border-left: 1px solid var(--accent);
+  border-right: 1px solid var(--accent);
+  border-bottom: 4px solid var(--accent);
+  border-radius: 4px;
+}
+
+code code {
+  background: transparent;
+  padding: 0;
+  margin: 0;
+}
+
+pre {
+  tab-size: 4;
+  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;
+  overflow: auto;
+  border-radius: var(--radius);
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
+pre code {
+  background: none !important;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+sup {
+  line-height: 0;
+}
+
+abbr {
+  position: relative;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--accent);
+  cursor: help;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.25em;
+}
+
+mark {
+  background: color-mix(in srgb, var(--accent) 45%, transparent);
+  color: var(--foreground);
+}
+
+blockquote {
+  position: relative;
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
+  margin: 0;
+  padding: 25px;
+}
+
+blockquote::before {
+  content: ">";
+  display: block;
+  position: absolute;
+  left: 0;
+  color: var(--accent);
+}
+
+blockquote p:first-child {
+  margin-top: 0;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+table {
+  table-layout: auto;
+  border-collapse: collapse;
+}
+
+table,
+th,
+td {
+  border: 2px solid var(--foreground);
+  padding: 10px;
+}
+
+th {
+  border-style: solid;
+  color: var(--foreground);
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+hr {
+  width: 100%;
+  border: none;
+  background: var(--accent);
+  height: 2px;
+}
+
+/* One Heading Size */
 .headings--one-size h1,
 .headings--one-size h2,
 .headings--one-size h3,
@@ -46,44 +416,6 @@ body {
   margin-top: 20px;
 }
 
-img.left {
-  margin-right: auto;
-}
-
-img.center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-img.right {
-  margin-left: auto;
-}
-
-figure.left {
-  margin-right: auto;
-}
-
-figure.center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-figure.right {
-  margin-left: auto;
-}
-
-figure figcaption.left {
-  text-align: left;
-}
-
-figure figcaption.center {
-  text-align: center;
-}
-
-figure figcaption.right {
-  text-align: right;
-}
-
 blockquote.twitter-tweet {
   position: relative;
   background: var(--background);
@@ -135,8 +467,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"] {
@@ -145,18 +500,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/menu.css

@@ -1,4 +1,3 @@
-/* _menu.scss */
 .navigation-menu {
   display: flex;
   align-items: flex-start;
@@ -101,7 +100,7 @@
 .menu--language-selector .menu__trigger {
   color: var(--accent);
   border: 2px solid;
-  margin-left: 10px;
+  margin-left: 5px;
   height: 100%;
   padding: 3px 8px;
   margin-bottom: 0 !important;

assets/css/pagination.css

@@ -1,4 +1,3 @@
-/* _pagination.scss */
 .pagination {
   margin-top: 50px;
 }
@@ -16,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;
@@ -54,7 +53,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 1rem;
+  font-size: inherit;
   padding: 0;
   appearance: none;
 }
@@ -64,10 +63,6 @@
   justify-content: center;
   flex: 1;
   padding: 8px 16px;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .button__text {
@@ -84,12 +79,6 @@
   margin-right: 8px;
 }
 
-@media (max-width: 684px) {
-  .button {
-    flex: 1;
-  }
-}
-
 @media print {
   .pagination {
     display: none;

assets/css/post.css

@@ -1,6 +1,5 @@
-/* _post.scss */
 .index-content {
-  margin-top: 20px;
+  margin: 25px 0;
 }
 
 .framed {
@@ -23,7 +22,7 @@
 .post {
   width: 100%;
   text-align: left;
-  padding: 40px 0;
+  padding: 30px 0;
 }
 
 .post:not(:last-of-type) {
@@ -31,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 {
@@ -68,7 +67,7 @@
 .post-tags {
   display: block;
   margin-bottom: 20px;
-  font-size: 1rem;
+  font-size: inherit;
   color: var(--accent);
 }
 
@@ -77,11 +76,11 @@
 }
 
 .post-content {
-  margin-top: 30px;
+  margin-top: 25px;
 }
 
 .post-cover {
-  margin: 40px 0;
+  margin: 25px 0;
 }
 
 .post ul {

assets/css/prism.css

@@ -1,324 +0,0 @@
-/* _prism.scss */
-
-/* PrismJS 1.24.1
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */
-
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
-code[class*=language-],
-pre[class*=language-] {
-  color: #ccc;
-  background: none;
-  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  font-size: 1em;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  tab-size: 4;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*=language-] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*=language-],
-pre[class*=language-] {
-  background: #2d2d2d;
-}
-
-/* Inline code */
-:not(pre) > code[class*=language-] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #999;
-}
-
-.token.punctuation {
-  color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #e2777a;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #cc99cd;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #7ec699;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-
-pre[data-line] {
-  position: relative;
-  padding: 1em 0 1em 3em;
-}
-
-.line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  padding: inherit 0;
-  margin-top: 1em;
-
-  /* Same as .prism’s padding-top */
-  background: hsla(24deg, 20%, 50%, 8%);
-  background: linear-gradient(to right, hsla(24deg, 20%, 50%, 10%) 70%, hsla(24deg, 20%, 50%, 0%));
-  pointer-events: none;
-  line-height: inherit;
-  white-space: pre;
-}
-
-@media print {
-  .line-highlight {
-    /*
-     * This will prevent browsers from replacing the background color with white.
-     * It's necessary because the element is layered on top of the displayed code.
-     */
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.line-highlight::before,
-.line-highlight[data-end]::after {
-  content: attr(data-start);
-  position: absolute;
-  top: 0.4em;
-  left: 0.6em;
-  min-width: 1em;
-  padding: 0 0.5em;
-  background-color: hsla(24deg, 20%, 50%, 40%);
-  color: hsl(24deg, 20%, 95%);
-  font: bold 65%/1.5 sans-serif;
-  text-align: center;
-  vertical-align: 0.3em;
-  border-radius: 999px;
-  text-shadow: none;
-  box-shadow: 0 1px white;
-}
-
-.line-highlight[data-end]::after {
-  content: attr(data-end);
-  top: auto;
-  bottom: 0.4em;
-}
-
-.line-numbers .line-highlight::before,
-.line-numbers .line-highlight::after {
-  content: none;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows {
-  pointer-events: all;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows > span::before {
-  cursor: pointer;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows > span:hover::before {
-  background-color: rgba(128, 128, 128, 20%);
-}
-
-pre[class*=language-].line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-
-pre[class*=language-].line-numbers > code {
-  position: relative;
-  white-space: inherit;
-}
-
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-
-  /* works for line-numbers below 1000 lines */
-  letter-spacing: -1px;
-  border-right: 1px solid #999;
-  user-select: none;
-}
-
-.line-numbers-rows > span {
-  display: block;
-  counter-increment: linenumber;
-}
-
-.line-numbers-rows > span::before {
-  content: counter(linenumber);
-  color: #999;
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-
-.command-line-prompt {
-  border-right: 1px solid #999;
-  display: block;
-  float: left;
-  font-size: 100%;
-  letter-spacing: -1px;
-  margin-right: 1em;
-  pointer-events: none;
-  user-select: none;
-}
-
-.command-line-prompt > span::before {
-  color: #999;
-  content: " ";
-  display: block;
-  padding-right: 0.8em;
-}
-
-.command-line-prompt > span[data-user]::before {
-  content: "["attr(data-user) "@"attr(data-host) "] $";
-}
-
-.command-line-prompt > span[data-user=root]::before {
-  content: "["attr(data-user) "@"attr(data-host) "] #";
-}
-
-.command-line-prompt > span[data-prompt]::before {
-  content: attr(data-prompt);
-}
-
-div.code-toolbar {
-  position: relative;
-}
-
-div.code-toolbar > .toolbar {
-  position: absolute;
-  top: 0.3em;
-  right: 0.2em;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
-}
-
-div.code-toolbar:hover > .toolbar {
-  opacity: 1;
-}
-
-/* Separate line b/c rules are thrown out if selector is invalid.
-   IE11 and old Edge versions don't support :focus-within. */
-div.code-toolbar:focus-within > .toolbar {
-  opacity: 1;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item {
-  display: inline-block;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item > a {
-  cursor: pointer;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item > button {
-  background: none;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-
-  /* for button */
-  user-select: none;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item > a,
-div.code-toolbar > .toolbar > .toolbar-item > button,
-div.code-toolbar > .toolbar > .toolbar-item > span {
-  color: #bbb;
-  font-size: 0.8em;
-  padding: 0 0.5em;
-  background: #f5f2f0;
-  background: rgba(224, 224, 224, 20%);
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 20%);
-  border-radius: 0.5em;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item > a:hover,
-div.code-toolbar > .toolbar > .toolbar-item > a:focus,
-div.code-toolbar > .toolbar > .toolbar-item > button:hover,
-div.code-toolbar > .toolbar > .toolbar-item > button:focus,
-div.code-toolbar > .toolbar > .toolbar-item > span:hover,
-div.code-toolbar > .toolbar > .toolbar-item > span:focus {
-  color: inherit;
-  text-decoration: none;
-}

assets/css/syntax.css

@@ -1,116 +1,97 @@
-/* _syntax.scss */
-code.language-css,
-code.language-scss,
-.token.boolean,
-.token.string,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.language-scss .token.string,
-.style .token.string,
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.statement,
-.token.regex,
-.token.atrule,
-.token.number,
-.token.inserted,
-.token.important {
-  color: var(--accent) !important;
+:root {
+  --first-tone: var(--accent);
+  --second-tone: color-mix(in srgb, var(--accent) 70%, transparent);
+  --comment: color-mix(in srgb, var(--foreground) 50%, transparent);
 }
 
-.token.tag-id,
-.token.atrule-id,
-.token.operator,
-.token.unit,
-.token.placeholder,
-.token.variable,
-.token.attr-name,
-.token.namespace,
-.token.deleted,
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
-}
+/* Background */ .bg { }
+/* PreWrapper */ .chroma { overflow:auto; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err {  }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { width:100%;vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTableTDNumbers */ .chroma .lntd:first-child { width: auto; }
+/* Custom */ .chroma .lntd code { display:grid; }
+/* LineTable */ .chroma .lntable { width:100%;border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:color-mix(in srgb, var(--foreground) 5%, transparent) !important}
+/* LineNumbersTable */ .chroma .lnt { color:var(--comment);white-space:pre;-webkit-user-select:none;user-select:none;padding:0 10px; }
+/* LineNumbers */ .chroma .ln { color:var(--comment);white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.8em;padding:0 0.4em 0 0; }
+/* Line */ .chroma .line { display:flex;padding:0 10px; }
+/* Keyword */ .chroma .k { color:var(--second-tone) }
+/* KeywordConstant */ .chroma .kc { color:var(--second-tone) }
+/* KeywordDeclaration */ .chroma .kd { color:var(--second-tone) }
+/* KeywordNamespace */ .chroma .kn { color:var(--second-tone) }
+/* KeywordPseudo */ .chroma .kp { color:var(--second-tone) }
+/* KeywordReserved */ .chroma .kr { color:var(--second-tone) }
+/* KeywordType */ .chroma .kt { color:var(--second-tone) }
+/* Name */ .chroma .n { color:var(--first-tone) }
+/* NameAttribute */ .chroma .na { color:var(--second-tone) }
+/* NameBuiltin */ .chroma .nb { color:var(--first-tone) }
+/* NameBuiltinPseudo */ .chroma .bp { color:var(--first-tone) }
+/* NameClass */ .chroma .nc { color:var(--foreground) }
+/* NameConstant */ .chroma .no { color:var(--first-tone) }
+/* NameDecorator */ .chroma .nd { color:var(--first-tone) }
+/* NameEntity */ .chroma .ni { color:var(--first-tone) }
+/* NameException */ .chroma .ne { color:var(--first-tone) }
+/* NameFunction */ .chroma .nf { color:var(--first-tone); }
+/* NameFunctionMagic */ .chroma .fm { color:var(--first-tone); }
+/* NameLabel */ .chroma .nl { color:var(--first-tone) }
+/* NameNamespace */ .chroma .nn { color:var(--first-tone) }
+/* NameOther */ .chroma .nx { color:var(--first-tone) }
+/* NameProperty */ .chroma .py { color:var(--first-tone) }
+/* NameTag */ .chroma .nt { color:var(--first-tone) }
+/* NameVariable */ .chroma .nv { color:var(--first-tone) }
+/* NameVariableClass */ .chroma .vc { color:var(--first-tone) }
+/* NameVariableGlobal */ .chroma .vg { color:var(--first-tone) }
+/* NameVariableInstance */ .chroma .vi { color:var(--first-tone) }
+/* NameVariableMagic */ .chroma .vm { color:var(--first-tone) }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color:var(--foreground) }
+/* LiteralStringAffix */ .chroma .sa { color:var(--foreground) }
+/* LiteralStringBacktick */ .chroma .sb { color:var(--foreground) }
+/* LiteralStringChar */ .chroma .sc { color:var(--foreground) }
+/* LiteralStringDelimiter */ .chroma .dl { color:var(--foreground) }
+/* LiteralStringDoc */ .chroma .sd { color:var(--foreground) }
+/* LiteralStringDouble */ .chroma .s2 { color:var(--foreground) }
+/* LiteralStringEscape */ .chroma .se { color:var(--foreground) }
+/* LiteralStringHeredoc */ .chroma .sh { color:var(--foreground) }
+/* LiteralStringInterpol */ .chroma .si { color:var(--foreground) }
+/* LiteralStringOther */ .chroma .sx { color:var(--foreground) }
+/* LiteralStringRegex */ .chroma .sr { color:var(--foreground) }
+/* LiteralStringSingle */ .chroma .s1 { color:var(--foreground) }
+/* LiteralStringSymbol */ .chroma .ss { color:var(--foreground) }
+/* LiteralNumber */ .chroma .m { color:var(--first-tone) }
+/* LiteralNumberBin */ .chroma .mb { color:var(--first-tone) }
+/* LiteralNumberFloat */ .chroma .mf { color:var(--first-tone) }
+/* LiteralNumberHex */ .chroma .mh { color:var(--first-tone) }
+/* LiteralNumberInteger */ .chroma .mi { color:var(--first-tone) }
+/* LiteralNumberIntegerLong */ .chroma .il { color:var(--first-tone) }
+/* LiteralNumberOct */ .chroma .mo { color:var(--first-tone) }
+/* Operator */ .chroma .o { color:var(--foreground) }
+/* OperatorWord */ .chroma .ow { color:var(--foreground) }
+/* Punctuation */ .chroma .p { color:var(--foreground) }
+/* Comment */ .chroma .c { color:var(--comment) }
+/* CommentHashbang */ .chroma .ch { color:var(--comment) }
+/* CommentMultiline */ .chroma .cm { color:var(--comment) }
+/* CommentSingle */ .chroma .c1 { color:var(--comment) }
+/* CommentSpecial */ .chroma .cs { color:var(--comment) }
+/* CommentPreproc */ .chroma .cp { color:var(--comment) }
+/* CommentPreprocFile */ .chroma .cpf { color:var(--comment) }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color:var(--first-tone) }
+/* GenericEmph */ .chroma .ge {  }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh {  }
+/* GenericInserted */ .chroma .gi { color:var(--second-tone); }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs {  }
+/* GenericSubheading */ .chroma .gu {  }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }
 
-.token.property,
-.token.function,
-.token.function-name,
-.token.deleted,
-code.language-javascript,
-code.language-html,
-.command-line-prompt > span::before {
-  color: var(--accent) !important;
-}
-
-.token.selector,
-.token.tag,
-.token.punctuation {
-  color: color-mix(in srgb, var(--accent) 50%, var(--foreground)) !important;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: color-mix(in srgb, var(--foreground) 30%, transparent) !important;
-}
-
-.token.namespace {
-  opacity: 0.7 !important;
-}
-
-pre[data-line] {
-  position: relative;
-}
-
-pre[class*=language-] {
-  margin: 0;
-  overflow: auto;
-}
-
-.line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  padding: 0;
-  margin: 0;
-  background: color-mix(in srgb, var(--foreground) 7%, transparent);
-  pointer-events: none;
-  line-height: inherit;
-  white-space: pre;
-}
-
-.line-highlight::before,
-.line-highlight[data-end]::after {
-  content: attr(data-start);
-  position: absolute;
-
-  /* top: .4em; */
-  left: 0.6em;
-  min-width: 1em;
-  padding: 0 0.5em;
-  background-color: color-mix(in srgb, var(--foreground) 40%, transparent);
-  color: var(--foreground);
-  font: bold 65%/1.5 sans-serif;
-  text-align: center;
-  vertical-align: 0.3em;
-  border-radius: 999px;
-  text-shadow: none;
-  box-shadow: 0 1px var(--foreground);
-}
-
-.line-highlight[data-end]::after {
-  content: attr(data-end);
-  top: auto;
-  bottom: 0.4em;
-}
-
-.line-numbers .line-highlight::before,
-.line-numbers .line-highlight::after {
-  content: none;
-}
+/* LANGUAGE FIXES */
+/* PHP CommentPreproc */ .chroma .language-php .cp { color:var(--foreground) }

assets/css/terminal.css

@@ -1,377 +1,2 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Code:wght@400;700&display=swap");
-
-:root {
-  --background: #222129;
-  --foreground: #ffffff;
-  --accent: #ffa86a;
-  --font-size: 1rem;
-  --line-height: 1.54rem;
-  --radius: 0px;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family:
-    "Fira Code",
-    Monaco,
-    Consolas,
-    Ubuntu Mono,
-    monospace;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: var(--line-height);
-  letter-spacing: -0.02em;
-  background-color: var(--background);
-  color: var(--foreground);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
-  font-variant-ligatures: contextual;
-  -webkit-overflow-scrolling: touch;
-  -webkit-text-size-adjust: 100%;
-}
-
-::placeholder {
-  color: color-mix(in srgb var(--foreground) 50%, black);
-}
-
-h1,
-h2 {
-  font-size: calc(var(--font-size) * 1.1);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-h1 {
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-underline-offset: calc(var(--font-size) * 0.2);
-}
-
-h3,
-h4,
-h5,
-h6 {
-  font-size: calc(var(--font-size) * 1.1);
-  letter-spacing: 0.04em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-ol,
-img,
-figure,
-video,
-table {
-  margin: calc(var(--line-height) * 1.2) 0;
-}
-
-a {
-  color: var(--accent);
-}
-
-button {
-  position: relative;
-  font: inherit;
-  font-weight: bold;
-  text-decoration: none;
-  text-align: center;
-  background: transparent;
-  color: var(--accent);
-  padding: 5px 18px;
-  border: 4px solid var(--accent);
-  border-radius: var(--radius);
-  transition: background 0.15s linear;
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-}
-
-button:hover {
-  background: color-mix(in srgb, var(--accent) 15%, transparent);
-}
-
-button:focus-visible,
-a:focus-visible {
-  outline: 1px solid var(--accent);
-  outline-offset: 2px;
-}
-
-fieldset {
-  display: inline-block;
-  border: 2px solid var(--foreground);
-  border-radius: calc(var(--radius) * 1.6);
-  padding: 10px;
-}
-
-fieldset *:first-child {
-  margin-top: 0;
-}
-
-fieldset input,
-fieldset select,
-fieldset textarea,
-fieldset label,
-fieldset button {
-  margin-top: calc(var(--line-height) * 0.5);
-  width: 100%;
-}
-
-label {
-  display: inline-block;
-}
-
-label input {
-  margin-top: 0;
-}
-
-input,
-textarea,
-select {
-  background: transparent;
-  color: var(--foreground);
-  border: 1px solid var(--foreground);
-  border-radius: var(--radius);
-  padding: 10px;
-  font: inherit;
-  appearance: none;
-}
-
-input[type="checkbox"] {
-  width: auto;
-}
-
-input:focus-visible,
-input:active,
-textarea:focus-visible,
-textarea:active,
-select:focus-visible,
-select:active {
-  border-color: var(--accent);
-  outline: 1px solid var(--accent);
-  outline-offset: 2px;
-}
-
-input:active,
-textarea:active,
-select:active {
-  box-shadow: none;
-}
-
-select {
-  background-image: linear-gradient(
-      45deg,
-      transparent 50%,
-      var(--foreground) 50%
-    ),
-    linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
-  background-position: calc(100% - 20px), calc(100% - 1em);
-  background-size:
-    5px 5px,
-    5px 5px;
-  background-repeat: no-repeat;
-  padding-right: 40px;
-}
-
-select option {
-  background: var(--background);
-}
-
-input[type="checkbox"] {
-  vertical-align: middle;
-  padding: 10px;
-  box-shadow: inset 0 0 0 3px var(--background);
-}
-
-input[type="checkbox"]:checked {
-  background: var(--accent);
-}
-
-img {
-  display: block;
-  max-width: 100%;
-  border: 8px solid var(--accent);
-  border-radius: var(--radius);
-  padding: 8px;
-  overflow: hidden;
-}
-
-figure img,
-figure video {
-  margin-bottom: 0;
-}
-
-figure figcaption {
-  background: var(--accent);
-  color: var(--background);
-  text-align: center;
-  font-size: 1rem;
-  font-weight: normal;
-  margin-top: -8px;
-  border-radius: 0 0 var(--radius) var(--radius);
-}
-
-ul,
-ol {
-  margin-left: 4ch;
-  padding: 0;
-}
-
-ul ul,
-ul ol,
-ol ul,
-ol ol {
-  margin-top: 0;
-}
-
-li::marker {
-  color: var(--accent);
-}
-
-ul li,
-ol li {
-  position: relative;
-}
-
-code,
-kbd {
-  font-family:
-    "Fira Code",
-    Monaco,
-    Consolas,
-    Ubuntu Mono,
-    monospace !important;
-  font-feature-settings: normal;
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  color: var(--accent);
-  padding: 1px 6px;
-  margin: 0 2px;
-  font-size: 0.95rem;
-}
-
-kbd {
-  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
-  border-left: 1px solid var(--accent);
-  border-right: 1px solid var(--accent);
-  border-bottom: 4px solid var(--accent);
-  border-radius: 4px;
-}
-
-code code {
-  background: transparent;
-  padding: 0;
-  margin: 0;
-}
-
-pre {
-  tab-size: 4;
-  background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
-  color: var(--foreground);
-  padding: 20px 10px;
-  font-size: 0.95rem !important;
-  overflow: auto;
-  border-radius: var(--radius);
-  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
-}
-
-pre code {
-  background: none !important;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-  border: none;
-}
-
-sup {
-  line-height: 0;
-}
-
-abbr {
-  position: relative;
-  text-decoration-style: wavy;
-  text-decoration-color: var(--accent);
-  cursor: help;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.25em;
-}
-
-mark {
-  background: color-mix(in srgb, var(--accent) 45%, transparent);
-  color: var(--foreground);
-}
-
-blockquote {
-  position: relative;
-  border-top: 1px solid var(--accent);
-  border-bottom: 1px solid var(--accent);
-  margin: 0;
-  padding: 25px;
-}
-
-blockquote:before {
-  content: ">";
-  display: block;
-  position: absolute;
-  left: 0;
-  color: var(--accent);
-}
-
-blockquote p:first-child {
-  margin-top: 0;
-}
-
-blockquote p:last-child {
-  margin-bottom: 0;
-}
-
-table {
-  table-layout: auto;
-  border-collapse: collapse;
-}
-
-table,
-th,
-td {
-  border: 2px solid var(--foreground);
-  padding: 10px;
-}
-
-th {
-  border-style: solid;
-  color: var(--foreground);
-  text-align: left;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-hr {
-  width: 100%;
-  border: none;
-  background: var(--accent);
-  height: 2px;
-}
+/* Placeholder file for your custom settings. */
+/* You can get the color scheme variables from https://panr.github.io/terminal-css/ */

assets/css/terms.css

@@ -1,4 +1,3 @@
-/* _terms.scss */
 .terms h3 {
   font-size: initial;
 }

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);
+}

exampleSite/config.toml

@@ -1,7 +1,7 @@
 baseurl = "https://example.com/"
 languageCode = "en-us"
 theme = "hugo-theme-terminal"
-paginate = 5
+pagination.pagerSize = 5
 
 [markup.goldmark.renderer]
   unsafe = true

layouts/_default/index.html

@@ -23,7 +23,7 @@
         <div class="post-meta">
           {{- if .Date -}}
             <time class="post-date">
-              {{- .Date.Format "2006-01-02" -}}
+              {{- partial "post-date" . -}}
             </time>
           {{- end -}}
           {{- with .Params.Author -}}
@@ -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

@@ -13,7 +13,7 @@
         <div class="post-meta">
           {{- if .Date -}}
             <time class="post-date">
-              {{- .Date.Format "2006-01-02" -}}
+              {{- partial "post-date" . -}}
             </time>
           {{- end -}}
           {{- with .Params.Author -}}
@@ -37,15 +37,15 @@
           {{ if .Params.showFullContent }}
             {{ .Content }}
           {{ else if .Description }}
-            {{ .Description | markdownify }}
+            <p>{{ .Description | markdownify }}</p>
           {{ else }}
             {{ .Summary }}
           {{ end }}
         </div>
 
         {{ if not .Params.showFullContent }}
-          <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+           <div>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
           </div>
         {{ end }}
       </article>

layouts/_default/rss.xml

@@ -1,40 +0,0 @@
-{{- $pctx := . -}}
-{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
-{{- $pages := slice -}}
-{{- if or $.IsHome $.IsSection -}}
-{{- $pages = $pctx.RegularPages -}}
-{{- else -}}
-{{- $pages = $pctx.Pages -}}
-{{- end -}}
-{{- $limit := .Site.Config.Services.RSS.Limit -}}
-{{- if ge $limit 1 -}}
-{{- $pages = $pages | first $limit -}}
-{{- end -}}
-{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
-    <link>{{ .Permalink }}</link>
-    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
-    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
-    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
-    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
-    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
-    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
-    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
-    {{- with .OutputFormats.Get "RSS" -}}
-    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
-    {{- end -}}
-    {{ range $pages }}
-    <item>
-      <title>{{ .Title }}</title>
-      <link>{{ .Permalink }}</link>
-      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
-      <guid>{{ .Permalink }}</guid>
-      <description>{{ .Summary | html }}</description>
-      <content>{{ .Content | html }}</content>
-    </item>
-    {{ end }}
-  </channel>
-</rss>

layouts/_default/single.html

@@ -6,9 +6,9 @@
   <div class="post-meta">
     {{- if .Date -}}
       <time class="post-date">
-        {{- .Date.Format "2006-01-02" -}}
-        {{- if $.Site.Params.showLastUpdated -}}
-          [{{- or $.Site.Params.updatedDatePrefix "Updated" -}} :: {{- .Lastmod.Format "2006-01-02" -}}]
+        {{- partial "post-date" . -}}
+        {{- if and $.Site.Params.showLastUpdated .Lastmod -}}
+          &nbsp;{{- partial "post-lastmod" . -}}
         {{- end -}}
       </time>
     {{- end -}}

layouts/_default/term.html

@@ -38,7 +38,7 @@
           {{ if .Params.showFullContent }}
             {{ .Content }}
           {{ else if .Description }}
-            {{ .Description | markdownify }}
+            <p>{{ .Description | markdownify }}</p>
           {{ else }}
             {{ .Summary }}
           {{ end }}
@@ -46,7 +46,7 @@
 
         {{ if not .Params.showFullContent }}
           <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
           </div>
         {{ end }}
       </article>

layouts/_default/terms.html

@@ -9,13 +9,13 @@
     <ul>
       {{ $type := .Type }}
       {{ range $key, $value := .Data.Terms.Alphabetical }}
-      {{ $name := .Name }}
-      {{ $count := .Count }}
-      {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
-        <li>
-          <a class="terms-title" href="{{ .Permalink }}">{{ .Name }} [{{ $count }}]</a>
-        </li>
-      {{ end }}
+        {{ $name := .Name }}
+        {{ $count := .Count }}
+        {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
+          <li>
+            <a class="terms-title" href="{{ .Permalink }}">{{ .Name }} [{{ $count }}]</a>
+          </li>
+        {{ end }}
       {{ end }}
     </ul>
   </div>

layouts/partials/footer.html

@@ -13,9 +13,9 @@
 </footer>
 
 {{ $menu := resources.Get "js/menu.js" | js.Build }}
-{{ $prism := resources.Get "js/prism.js" | js.Build }}
+{{ $cp := resources.Get "js/code.js" | js.Build }}
 
-{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }}
+{{ $bundle := slice $menu $cp | resources.Concat "bundle.js" | resources.Minify }}
 
 <script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
 

layouts/partials/pagination.html

@@ -1,15 +1,16 @@
 <div class="pagination">
   <div class="pagination__buttons">
     {{ if .Paginator.HasPrev }}
-      <a href="{{ .Paginator.Prev.URL }}" class="button prev">
-        <span class="button__icon">←</span>
-        <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
+      <a href="{{ .Paginator.Prev.URL }}" class="button inline prev">
+        &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 next">
-        <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
-        <span class="button__icon">→</span>
+      <a href="{{ .Paginator.Next.URL }}" class="button inline next">
+        [<span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>] &gt;
       </a>
     {{ end }}
   </div>

layouts/partials/post-date.html

@@ -0,0 +1,10 @@
+{{- $date := .Date -}}
+{{- with .Params.dateFormat -}}
+  {{- $date | time.Format . -}}
+{{- else -}}
+  {{- with .Site.Params.dateFormat -}}
+    {{- $date | time.Format . -}}
+  {{- else -}}
+    {{- $date | time.Format "2006-01-02" -}}
+  {{- end -}}
+{{- end -}}

layouts/partials/post-lastmod.html

@@ -0,0 +1,10 @@
+{{- $date := .Lastmod -}}
+{{- with .Params.dateFormat -}}
+  {{- $date | time.Format . -}}
+{{- else -}}
+  {{- with .Site.Params.dateFormat -}}
+    [{{- or $.Site.Params.updatedDatePrefix "Updated: " }} {{ $date | time.Format . -}}]
+  {{- else -}}
+    [{{- or $.Site.Params.updatedDatePrefix "Updated: " }} {{ $date | time.Format "2006-01-02" -}}]
+  {{- end -}}
+{{- end -}}

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>

layouts/shortcodes/code.html

@@ -1,15 +1,16 @@
 {{ $id := delimit (shuffle (seq 1 9)) "" }}
+{{ $open := .Get "open" }}
+{{ $lang := .Get "language" }}
+{{ $opts := .Get "opts" }}
 
-{{ if .Get "language" }}
-  <div class="collapsable-code">
-    <input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked {{- end }} />
-    <label for="{{ .Get "id" | default $id }}">
-      <span class="collapsable-code__language">{{ .Get "language" }}</span>
-      {{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
-      <span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}" data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
-    </label>
-    <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
-  </div>
+{{- if $lang -}}
+  <details class="collapsable-code" {{ if eq $open "true" -}} open {{- end }}>
+    <summary title="Click to interact">
+      {{- if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end -}}
+    </summary>
+    {{ $trInner := trim .Inner "\n" }}
+    {{- transform.Highlight $trInner $lang $opts -}}
+  </details>
 {{ else }}
   {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}
-{{ end }}
+{{- end -}}

layouts/shortcodes/figure.html

@@ -1,8 +0,0 @@
-{{ if .Get "src" }}
-  <figure class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" >
-    <img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />
-    {{ if .Get "caption" }}
-      <figcaption class="{{ with .Get "captionPosition"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "captionStyle" }} style="{{ . | safeCSS }}" {{ end }}>{{ .Get "caption" | safeHTML }}</figcaption>
-    {{ end }}
-  </figure>
-{{ end }}

layouts/shortcodes/prismjs.html

@@ -1,26 +0,0 @@
-{{ $inner := replaceRE "^\r?\n" "" .Inner | string }}
-{{ if len .Params | eq 0 }}
-  <pre><code>{{ $inner }}</code></pre>
-{{ else }}
-  {{ if .IsNamedParams }}
-    <pre class="
-      {{- if .Get "lang" }}language-{{ .Get "lang" }}{{ end }}
-      {{- if .Get "line-numbers" }} line-numbers{{ end }}
-      {{- if .Get "command-line" }} command-line{{ end }}"
-      {{- /* line highlight plugin */ -}}
-      {{- if .Get "line" }} data-line="{{ .Get "line" }}"{{ end }}
-      {{- /* line number plugin */ -}}
-      {{- if .Get "start" }} data-start="{{ .Get "start" }}"{{ end }}
-      {{- /* command-line plugin */ -}}
-      {{- if .Get "user" }} data-user="{{ .Get "user" }}"{{ end }}
-      {{- if .Get "host" }} data-host="{{ .Get "host" }}"{{ end }}
-      {{- if .Get "prompt" }} data-prompt="{{ .Get "prompt" }}"{{ end }}
-      {{- if .Get "output" }} data-output="{{ .Get "output" }}"{{ end }}
-      ><code {{ if .Get "lang" }}class="language-{{ .Get "lang" }}"{{ end }}
-      >{{ $inner }}</code></pre>
-  {{ else }}
-    <pre class="language-{{ .Get 0 }}">
-      <code class="language-{{ .Get 0 }}">{{ $inner }}</code>
-    </pre>
-  {{ end }}
-{{ end }}

package.hugo.json

@@ -35,5 +35,5 @@
   "scripts": {
     "test": "echo 'Test'"
   },
-  "version": "2.1.0"
+  "version": "4.2.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminal",
-  "version": "3.1.0",
+  "version": "4.2.0",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
   "main": "index.js",
   "license": "MIT",

theme.toml

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