80 changed files with 5791 additions and 9432 deletions
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -18,7 +18,7 @@ rules:
    - as-needed
  semi:
    - 2
-    - always
+    - never
  class-methods-use-this: 0
  comma-dangle:
    - 2
@ -33,7 +33,7 @@ rules:
  func-names: 0
  quotes:
    - 2
-    - double
+    - single
    - allowTemplateLiterals: true
  no-underscore-dangle: 0
  object-curly-newline: 0
--- a/.gitignore
+++ b/.gitignore
@ -88,6 +88,3 @@ typings/
 .dynamodb/

 # End of https://www.gitignore.io/api/node
-public
-resources
-.hugo_build.lock
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,27 @@
+const url = require("postcss-url");
+const imports = require("postcss-import");
+const nested = require("postcss-nested");
+const postCSSPresetEnv = require("postcss-preset-env");
+const cssnano = require("cssnano");
+const color = require("postcss-color-mod-function");
+const mixins = require("postcss-mixins");
+
+module.exports = () => ({
+  plugins: [
+    url,
+    imports,
+    mixins,
+    nested,
+    postCSSPresetEnv({
+      stage: 1,
+      preserve: true,
+      features: {
+        "custom-properties": true,
+      },
+    }),
+    cssnano({
+      preset: "default",
+    }),
+    color,
+  ],
+});
--- a/.prettierrc
+++ b/.prettierrc
@ -2,7 +2,6 @@
  "parser": "babel",
  "printWidth": 100,
  "trailingComma": "all",
-  "arrowParens": "avoid",
  "overrides": [{
    "files": ".html",
    "options": {
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -1,10 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier-scss"
-  ],
-  "rules": {
-    "max-empty-lines": 1 
-  }
-}
-
--- a/README.md
+++ b/README.md
@ -1,20 +1,9 @@
 # Terminal

-## The theme is no longer maintained, but can still be used
-
-Even if the repository is archived you can still use the theme, fork it, download it, expand it, etc. Remember that each Hugo theme is a module that can be modified to match your needs. The theme is fully "open" and it depends only on the internal engines implemented in Hugo.
-
-The theme brings many useful features thanks to [all people that contributed to it](https://github.com/panr/hugo-theme-terminal/graphs/contributors) (I want to thank you all!). At the time of archiving the theme has reached 9th place on the [official Hugo Themes list](https://themes.gohugo.io/). This is huge! Thanks to you!
-
----
-
 ![Terminal](https://github.com/panr/hugo-theme-terminal/blob/master/images/screenshot.png?raw=true)

-
 ### DEMO - https://hugo-terminal.now.sh/

-### ⚠️ The theme needs at least Hugo **Extended** v0.90.x.
-
 ---

 - [Features](#features)
@ -25,11 +14,11 @@ The theme brings many useful features thanks to [all people that contributed to
 - [How to configure](#how-to-configure)
 - [Post archetype](#post-archetype)
 - [Add-ons](#add-ons)
- [How to edit the theme](#how-to-edit)
+- [How to (safely) edit the theme](#how-to-edit)
 - [Found a bug?](#bug)
 - [New cool idea or feature](#feature)
 - [Terminal theme user?](#terminal-theme-user)
- [License](#license)
+- [Licence](#licence)

 ## Features

@ -37,7 +26,6 @@ The theme brings many useful features thanks to [all people that contributed to
 - [**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)
 - fully responsive
- fully based on Hugo ecosystem (Pipes and Modules)

 #### Built-in shortcodes

@ -93,64 +81,25 @@ A custom syntax highlighting based on PrismJS. All you need to do is to wrap you

 You can download the theme manually by going to [https://github.com/panr/hugo-theme-terminal.git](https://github.com/panr/hugo-theme-terminal.git) and pasting it to `themes/terminal` in your root directory.

-You can also choose **one of the 3 possibilities** to install the theme:
+You can also clone it directly to your Hugo folder:

-1. as Hugo Module
-2. as a standalone local directory
-3. as a git submodule
-
-⚠️ The theme needs at least Hugo **Extended** v0.90.x.
-
-### Install theme as Hugo Module
-
-```bash
-# If this is the first time you're using Hugo Modules
-# in your project. You have to initiate your own module before
-# you fetch the theme module.
-#
-# hugo mod init [your website/module name]
-hugo mod get github.com/panr/hugo-theme-terminal/v3
+```
+git clone -b webpack https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```

-and in your config file add:
+If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. You can also include it as a git submodule:

-```toml
-[module]
-  # this is needed when you fetch the theme as a submodule to your repo.
-  # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal"
-[[module.imports]]
-  path = 'github.com/panr/hugo-theme-terminal/v3'
+```
+git submodule add -b webpack -f https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```

-Keep in mind that the theme by default won't show up in the `themes` directory. This means that you are using the theme as it was on the repository at the moment you fetched it. Your local `go.sum` file keeps all the references. Read more about Hugo Modules in the [official documentation](https://gohugo.io/hugo-modules/).
-
-### Install theme locally
-
-```bash
-git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
-```
-
-This will clone the repository directly to the `themes/terminal` directory.
-
-### Install theme as a submodule
-
-```bash
-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.
-
-⚠️ If you encounter any issues with:
-
-```bash
-Error: module "terminal" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist
-```
-
-then please try to remove `theme = "terminal"` from your config file.
+⚠️ **The theme needs at least Hugo version 0.74.x**.

 ## How to run your site

-```bash
+If you installed all needed `npm` dependencies, then you can run:
+
+```
 hugo server -t terminal
 ```

@ -163,8 +112,6 @@ The theme doesn't require any advanced configuration. Just copy:
 ```toml
 baseurl = "/"
 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

@ -240,8 +187,6 @@ paginate = 5
    olderPosts = "Older posts"
    missingContentMessage = "Page not found..."
    missingBackButtonLabel = "Back to home page"
-    minuteReadingTime = "min read"
-    words = "words"

    [languages.en.params.logo]
      logoText = "Terminal"
@ -256,14 +201,6 @@ paginate = 5
        identifier = "showcase"
        name = "Showcase"
        url = "/showcase"
-
-[module]
-  # In case you would like to make changes to the theme and keep it locally in you repository,
-  # uncomment the line below (and correct the local path if necessary).
-  # --
-  # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal"
-[[module.imports]]
-  path = 'github.com/panr/hugo-theme-terminal'
 ```

 to `config.toml` file in your Hugo root directory and change params fields. In case you need, here's [a YAML version](https://gist.github.com/panr/9eeea6f595c257febdadc11763e3a6d1).
@ -280,11 +217,39 @@ See the default `post` file params supported by the theme — https://github.com
 - **Extended Head** — please take a look at `layouts/partials/extended_head.html` https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/extended_head.html
 - **Extended Footer** — please take a look at `layouts/partials/extended_footer.html` https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/extended_footer.html

-## How to edit the theme <a id="how-to-edit" />
+## How to (safely) edit the theme <a id="how-to-edit" />

-If you are using as a remote Hugo Module (you don't have the theme files in the `theme/terminal`) and you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.
+If you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.

-If you have the theme files in the theme directory, then you can directly edit anything in the theme, you just have to go to `themes/terminal` and modify the files. No compilation step needed.
+To change something directly in the theme, you have to go to `themes/terminal` and modify the files.
+
+First, you need to install Node dependencies. To do so, go to the theme directory (from your Hugo root directory):
+
+```bash
+ cd themes/terminal
+```
+
+ then run:
+
+ ```bash
+ npm install
+ npm i yarn
+ yarn
+ ```
+
+After you modified the files you can run webpack in watch mode:
+
+```bash
+yarn dev
+```
+
+or rebuild theme
+
+```bash
+yarn build
+```
+
+To see the changes (remember to restart `hugo server`).

 ## Found a bug? <a id="bug" />

@ -311,7 +276,6 @@ Sounds OK? Cool, let's rock! 🤘

 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)! 🤗

-
 ## License

 Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))
--- a/USERS.md
+++ b/USERS.md
@ -1,20 +1,27 @@
 # Meet the users of Terminal theme!
-
 - https://xicode.se **magistern** (Teacher)
 - https://devmaster64.com **devmaster64** (Software Developer)
+- https://mickie1.gitlab.io/blog/ **mickie** (Engineer)
 - 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://geekx.tech/ **Sagar Ladla** (Student Developer & Cyber Security Specialist)
 - https://tears.io/ **Alex** (SRE)
 - https://ayushkarn.me/ **Ayush Karn** (Student Developer)
+- https://ssgram.dev **Ramaseshan Parthasarathy** (Software Developer)
 - https://zaine.me **Amine Zaine** (Cloud Engineer)
 - https://notes.dmaitre.phyip3.dur.ac.uk/computing-club/ **Ryan Moodie** (Physics PhD student)
+- https://thecodecousins.com **Stanley Nguyen** (Software Engineer) & **Hoang Do** (Software & IoT Engineer)
+- https://schacherbauer.dev **Markus Schacherbauer** (Student Developer)
+- https://rinma.dev **Marvin Dalheimer** (Software Developer)
 - https://lunar.computer **Lunar Computer** (DevOps Engineer)
 - https://naxxfish.net **Chris Roberts** (Broadcast Systems Engineer)
+- https://security.jtang.dev **Jonathan Tang** (Student & Software Engineer)
 - https://andreacaravano.net **Andrea Caravano** (Student)
+- https://dawsonverboven.com/ **Dawson Verboven** (Student & Software Developer)
 - https://qbunt.com **Jeremy Bunting** (Software Engineer)
 - https://smeik.org **Smeik** (Embedded Developer)
 - https://code.willstocks.co.uk **Will Stocks** (Blogger & Developer)
@ -23,9 +30,12 @@
 - 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://waterloos.niflheimr.blue/ **cindrmon** (Student and Aspiring Software Engineer)
 - https://monocle.rpod.club/ **classx** (DevOps Engineer)
- https://erisianrite.com/ **ErisianRite** (Coding, Engineering, Tools for Thought)
+- https://wjdevschool.com/ **Wojciech Bogócki** (Making Things & Teaching / W&J Dev School)
+- https://dongzhi.me **Joe** (Software Developer)
 - https://isaes.com.tr/ **Isa Es** (Software Engineer)
+- https://conight.com **Conight Wang** (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)
@ -33,6 +43,8 @@
 - 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://markopolo123.github.io **Markopolo** (DevOps Engineer)
+- https://openfoxblog.leven.dev/ **Damon Leven** (Student & Software Developer)
 - 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)
@ -42,20 +54,16 @@
 - https://biplav.xyz **Biplav's Blog** (Student)
 - https://santiago.wtf **Nicholas Santiago** (DevOps Engineer)
 - https://2200g.github.io/ **2200g** (Blogger/Student)
+- https://cristiioan.me **Cristian Margine** (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://bg117.xyz/projects **bg117** (Student and Hobby Programmer)
 - 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:
@ -63,4 +71,3 @@
 - https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)

 -->
-
--- a/archetypes/posts.md
+++ b/archetypes/posts.md
@ -10,5 +10,4 @@ description = ""
 showFullContent = false
 readingTime = false
 hideComments = false
-color = "" #color from the theme settings
 +++
--- a/assets/css/buttons.scss
+++ b/assets/css/buttons.scss
@ -12,13 +12,12 @@ a.button {
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
-  margin: 5px 0;
+  margin-bottom: 5px;
  text-decoration: none;
  text-align: center;
-  border-radius: 8;
-  border: 1px solid $accent;
-  background: $accent;
-  color: $background;
+  border-radius: 0;
+  border: 1px solid var(--accent);
+  background: var(--accent);
  font: inherit;
  font-weight: bold;
  appearance: none;
@ -26,7 +25,7 @@ a.button {
  outline: none;

  &:hover {
-    background: transparentize($accent, .1);
+    background: color-mod(var(--accent) a(90%));
  }

  /* variants */
@ -64,7 +63,7 @@ a.read-more:hover,
 a.read-more:active {
  display: inline-flex;
  border: none;
-  color: $accent;
+  color: var(--accent);
  background: none;
  box-shadow: none;
  padding: 0;
--- a/assets/css/code.scss
+++ b/assets/css/code.scss
@ -1,5 +1,5 @@
 .collapsable-code {
-  $border-color: mix($accent, #999, 90%);
+  --border-color: color-mod(var(--accent) blend(#999 90%));

  position: relative;
  width: 100%;
@ -39,13 +39,13 @@
    min-width: 30px;
    min-height: 30px;
    margin: 0;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
  }

  &__title {
    flex: 1;
-    color: $accent;
+    color: var(--accent);
    padding: 3px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
@ -53,15 +53,15 @@
  }

  &__language {
-    color: $accent;
-    border: 1px solid $border-color;
+    color: var(--accent);
+    border: 1px solid var(--border-color);
    border-bottom: none;
    text-transform: uppercase;
    padding: 3px 10px;
  }

  &__toggle {
-    color: $accent;
+    color: var(--accent);
    font-size: 16px;
    padding: 3px 10px;

--- a/assets/css/color/blue.css
+++ b/assets/css/color/blue.css
@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #23B0FF;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}
--- a/assets/css/color/blue.scss
+++ b/assets/css/color/blue.scss
@ -1 +0,0 @@
-$accent: #23B0FF;
--- a/assets/css/color/green.css
+++ b/assets/css/color/green.css
@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #78E2A0;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}
--- a/assets/css/color/green.scss
+++ b/assets/css/color/green.scss
@ -1 +0,0 @@
-$accent: #78E2A0;
--- a/assets/css/color/orange.scss
+++ b/assets/css/color/orange.scss
@ -1 +0,0 @@
-$accent: #FFA86A;
--- a/assets/css/color/pink.css
+++ b/assets/css/color/pink.css
@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #EE72F1;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}
--- a/assets/css/color/pink.scss
+++ b/assets/css/color/pink.scss
@ -1 +0,0 @@
-$accent: #EE72F1;
--- a/assets/css/color/red.css
+++ b/assets/css/color/red.css
@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #FF6266;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}
--- a/assets/css/color/red.scss
+++ b/assets/css/color/red.scss
@ -1 +0,0 @@
-$accent: #FF6266;
--- a/assets/css/font.scss
+++ b/assets/css/font.scss
@ -4,6 +4,7 @@
  font-style:  normal;
  font-weight: 400;
  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  font-display: swap;
 }

@font-face {
@ -12,4 +13,5 @@
  font-style:  normal;
  font-weight: 800;
  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  font-display: swap;
 }
--- a/assets/css/footer.scss
+++ b/assets/css/footer.scss
@ -11,7 +11,7 @@
    width: 760px;
    max-width: 100%;

-    @media ($tablet) {
+    @media (--tablet) {
      flex-direction: column;
    }
  }
@ -22,11 +22,10 @@

  .copyright {
    display: flex;
-    flex-flow: row wrap;
-    flex: 1;
+    flex-direction: row;
    align-items: center;
    font-size: 1rem;
-    justify-content: center;
+    color: var(--light-color-secondary);

    &--user {
      margin: auto;
@ -35,10 +34,17 @@

    & > *:first-child:not(:only-child) {
      margin-right: 10px;
+
+       @media (--tablet) {
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
    }

-    span {
-      white-space: nowrap;
+    @media (--tablet) {
+      flex-direction: column;
+      margin-top: 10px;
    }
  }
 }
--- a/assets/css/form.css
+++ b/assets/css/form.css
@ -0,0 +1,30 @@
+input, textarea, select {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 0;
+  padding: 10px;
+  font: inherit;
+  appearance: none;
+
+  &:focus, :active {
+    border-color: var(--color);
+    outline: 1px solid var(--color);
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+select {
+  background: var(--background);
+
+  option {
+    background: var(--background);
+  }
+}
+
+::placeholder {
+  color: color-mod(var(--accent) a(50%));
+}
--- a/assets/css/form.scss
+++ b/assets/css/form.scss
@ -1,43 +0,0 @@
-input, textarea, select {
-  background: transparent;
-  color: $accent;
-  border: 1px solid $accent;
-  border-radius: 0;
-  padding: 10px;
-  margin: 5px 0;
-  font: inherit;
-  appearance: none;
-
-  &:focus, :active {
-    border-color: $color;
-    outline: 1px solid $color;
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-}
-
-select {
-  background: $background;
-
-  option {
-    background: $background;
-  }
-}
-
-::placeholder {
-  color: transparentize($accent, .5);
-}
-
-input {
-  &[type="checkbox"] {
-    vertical-align: middle;
-    padding: 10px;
-    box-shadow: inset 0 0 0 3px $background;
-
-    &:checked {
-      background: $accent;
-    }
-  }
-}
--- a/assets/css/gist.scss
+++ b/assets/css/gist.scss
--- a/assets/css/header.css
+++ b/assets/css/header.css
@ -0,0 +1,162 @@
+@define-mixin menu {
+  position: absolute;
+  background: var(--background);
+  box-shadow: var(--shadow);
+  color: white;
+  border: 2px solid;
+  margin: 0;
+  padding: 10px;
+  list-style: none;
+  z-index: 99;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  @media print {
+    display: none;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__logo {
+    display: flex;
+    flex: 1;
+
+    &:after {
+      content: '';
+      background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
+      display: block;
+      width: 100%;
+      right: 10px;
+    }
+
+    a {
+      flex: 0 0 auto;
+      max-width: 100%;
+      text-decoration: none;
+    }
+  }
+
+  .menu {
+    --shadow-color: color-mod(var(--background) a(80%));
+    --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
+    margin: 20px 1px;
+
+    @media (--phone) {
+      @mixin menu;
+      top: 50px;
+      right: 0;
+    }
+
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      &--desktop {
+        @media (--phone) {
+          display: none;
+        }
+      }
+
+      &--mobile {
+        display: none;
+
+        @media (--phone) {
+          display: block;
+        }
+      }
+
+      li {
+        &:not(:last-of-type) {
+          margin-right: 20px;
+          margin-bottom: 10px;
+          flex: 0 0 auto;
+        }
+      }
+
+      @media (--phone) {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+
+        li {
+          margin: 0;
+          padding: 5px;
+        }
+      }
+    }
+
+    &__sub-inner {
+      position: relative;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      &:not(:only-child) {
+        margin-left: 20px;
+      }
+
+      &-more {
+        @mixin menu;
+        top: 35px;
+        left: 0;
+
+        &-trigger {
+          color: var(--accent);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        li {
+          margin: 0;
+          padding: 5px;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .spacer {
+      flex-grow: 1;
+    }
+
+    .language-selector {
+      position: relative;
+      list-style: none;
+      margin: 0;
+
+      &-current {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        color: var(--accent);
+        cursor: pointer;
+        margin: 0;
+      }
+
+      &__more {
+        @mixin menu;
+        top: 35px;
+        right: 0;
+      }
+    }
+
+    &-trigger {
+      color: var(--accent);
+      border: 2px solid;
+      margin-left: 10px;
+      height: 100%;
+      padding: 3px 8px;
+      position: relative;
+    }
+  }
+}
--- a/assets/css/header.scss
+++ b/assets/css/header.scss
@ -1,34 +0,0 @@
-.header {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  @media print {
-    display: none;
-  }
-
-  &__inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__logo {
-    display: flex;
-    flex: 1;
-
-    &:after {
-      content: '';
-      background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
-      display: block;
-      width: 100%;
-      right: 10px;
-    }
-
-    a {
-      flex: 0 0 auto;
-      max-width: 100%;
-      text-decoration: none;
-    }
-  }
-}
--- a/assets/css/logo.scss
+++ b/assets/css/logo.scss
@ -2,7 +2,7 @@
  display: flex;
  align-items: center;
  text-decoration: none;
-  background: $accent;
+  background: var(--accent);
  color: black;
  padding: 5px 10px;
 }
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@ -15,8 +15,8 @@ body {
  font-size: 1rem;
  line-height: 1.54;
  letter-spacing: -0.02em;
-  background-color: $background;
-  color: $color;
+  background-color: color-mod(var(--accent) blend(#1D1E28 98%));
+  color: var(--color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
@ -24,7 +24,7 @@ body {
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;

-  @media ($phone) {
+  @media (--phone) {
    font-size: 1rem;
  }
 }
@ -61,7 +61,7 @@ a {

  /* Waiting for a better times... */
  /* &:has(code) {
-    text-decoration-color: $accent;
+    text-decoration-color: var(--accent);
  } */
 }

@ -109,8 +109,8 @@ figure {
    font-size: 14px;
    padding: 5px 10px;
    margin-top: 5px;
-    background: $accent;
-    color: $background;
+    background: var(--accent);
+    color: var(--background);
    /* opacity: .8; */

    &.left {
@ -130,8 +130,8 @@ figure {
 code, kbd {
  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
  font-feature-settings: normal;
-  background: transparentize($accent, .8);
-  color: $accent;
+  background: color-mod(var(--accent) a(20%));
+  color: var(--accent);
  padding: 1px 6px;
  margin: 0 2px;
  font-size: .95rem;
@ -157,7 +157,7 @@ pre {
    margin-top: -40px;
  }

-  @media ($phone) {
+  @media (--phone) {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
@ -172,12 +172,12 @@ pre {
 }

 blockquote {
-  border-top: 1px solid $accent;
-  border-bottom: 1px solid $accent;
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
  margin: 40px 0;
  padding: 25px;

-  @media ($phone) {
+  @media (--phone) {
    padding-right: 0;
  }

@ -198,15 +198,15 @@ blockquote {
    display: block;
    position: absolute;
    left: -25px;
-    color: $accent;
+    color: var(--accent);
  }

  &.twitter-tweet {
    position: relative;
-    background: transparentize($accent, .9);
+    background: color-mod(var(--accent) a(10%));
    font: inherit;
    color: inherit;
-    border: 1px solid $accent;
+    border: 1px solid var(--accent);
    padding-top: 60px;

    p:before {
@ -217,12 +217,12 @@ blockquote {
      content: '> From Twitter:';
      position: absolute;
      top: 20px;
-      color: $accent;
+      color: var(--accent);
      font-weight: bold;
    }

    a {
-      color: $accent;
+      color: var(--accent);
    }
  }
 }
@ -237,12 +237,12 @@ table {
 table,
 th,
 td {
-  border: 1px dashed $accent;
+  border: 1px dashed var(--accent);
  padding: 10px;
 }

 th {
-  color: $accent;
+  color: var(--accent);
 }

 ul,
@ -254,7 +254,7 @@ ol {
    position: relative;
  }

-  @media ($phone) {
+  @media (--phone) {
    margin-left: 20px;
  }
 }
@ -263,35 +263,35 @@ ol {
  list-style: none;
  counter-reset: li;

-  > li {
+  li {
    counter-increment: li;
+  }

-    &:before {
+  li:before {
    content: counter(li);
    position: absolute;
    right: calc(100% + 10px);
-      color: $accent;
+    color: var(--accent);
    display: inline-block;
    text-align: right;
  }

-    > ol {
+  ol {
    margin-left: 38px;

-      > li {
+    li {
      counter-increment: li;
+    }

-        &:before {
+    li:before {
      content: counters(li, ".") " ";
    }
  }
 }
-  }
-}

 mark {
-  background: $accent;
-  color: $background;
+  background: var(--accent);
+  color: var(--background);
 }

 .container {
@ -312,7 +312,7 @@ mark {
    max-width: 100%;
  }

-  @media ($phone) {
+  @media (--phone) {
    padding: 20px;
  }

@ -333,7 +333,7 @@ mark {
 hr {
  width: 100%;
  border: none;
-  background: $border-color;
+  background: var(--border-color);
  height: 1px;
 }

--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@ -1,157 +0,0 @@
-@mixin menu {
-  display: none;
-  flex-direction: column;
-  $shadow-color: transparentize($background, .2);
-  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
-  position: absolute;
-  background: $background;
-  box-shadow: $shadow;
-  color: white;
-  border: 2px solid;
-  margin: 0;
-  padding: 10px;
-  top: 10px;
-  left: 0;
-  list-style: none;
-  z-index: 99;
-}
-
-@mixin header-menu-trigger {
-  color: $accent;
-  border: 2px solid;
-  margin-left: 10px;
-  height: 100%;
-  padding: 3px 8px;
-  margin-bottom: 0 !important;
-  position: relative;
-  cursor: pointer;
-}
-
-.navigation-menu {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin: 20px 1px;
-
-  @media ($phone) {
-    margin: 0;
-  }
-
-  &__inner {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    > li {
-      flex: 0 0 auto;
-      margin-bottom: 10px;
-      white-space: nowrap;
-
-      &:not(:last-of-type) {
-        margin-right: 20px;
-      }
-    }
-
-    @media ($phone) {
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 0;
-
-      li {
-        margin: 0;
-        padding: 5px;
-      }
-    }
-  }
-
-  .spacer {
-    flex-grow: 1 !important;
-  }
-}
-
-.menu {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  &__trigger {
-    margin-right: 0 !important;
-    color: $accent;
-    user-select: none;
-    cursor: pointer;
-  }
-
-  &__dropdown {
-    @include menu;
-
-    .open & {
-      display: flex;
-    }
-
-    > li {
-      flex: 0 0 auto;
-
-      &:not(:last-of-type) {
-        margin-bottom: 10px;
-      }
-
-      a {
-        display: flex;
-        padding: 5px;
-      }
-    }
-  }
-
-  &--desktop {
-    @media ($phone) {
-      display: none
-    }
-  }
-
-  &--mobile {
-    .menu__trigger {
-      @include header-menu-trigger;
-      display: none;
-
-      @media ($phone) {
-        display: block;
-      }
-    }
-
-    .menu__dropdown {
-      @media ($phone) {
-        left: auto;
-        right: 0;
-      }
-    }
-
-    li {
-      flex: 0 0 auto;
-
-      &:not(:last-of-type) {
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  &--language-selector {
-    .menu__trigger {
-      @include header-menu-trigger;
-
-      @media ($phone) {
-        display: none;
-      }
-    }
-
-    .menu__dropdown {
-      left: auto;
-      right: 0;
-    }
-  }
-}
--- a/assets/css/pagination.scss
+++ b/assets/css/pagination.scss
@ -15,8 +15,7 @@
      text-align: center;
      margin: 0 auto;
      padding: 5px 10px;
-      background: $background;
-      color: transparentize($color, .7);
+      background: color-mod(var(--accent) blend(#1D1E28 98%));
      font-size: .8rem;
      text-transform: uppercase;
      text-decoration: none;
@ -38,8 +37,6 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    flex-flow: row wrap;
-    gap: 10px;

    a {
      text-decoration: none;
@ -50,20 +47,22 @@
 .button {
  position: relative;
  display: inline-flex;
+  flex: 1;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
+  border-radius: 8px;
  padding: 0;
+  cursor: pointer;
  appearance: none;
+  overflow: hidden;

-  @media($phone) {
-    flex: 1;
+  + .button {
+    margin-left: 10px;
  }

  a {
    display: flex;
-    justify-content: center;
-    flex: 1;
    padding: 8px 16px;
    text-decoration: none;
    text-overflow: ellipsis;
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@ -3,7 +3,7 @@
 }

 .framed {
-  border: 1px solid $accent;
+  border: 1px solid var(--accent);
  padding: 20px;

  *:first-child {
@ -25,31 +25,27 @@
  margin: 20px auto;
  padding: 20px 0;

+  @media (--tablet) {
+    max-width: 660px;
+  }
+
  &:not(:last-of-type) {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
  }

  &-meta {
    font-size: 1rem;
    margin-bottom: 10px;
-    color: transparentize($accent, .3);
-
-    & > *:not(:first-child) {
-      &::before {
-        content: "::";
-        display: inline-block;
-        margin: 0 8px;
-      }
-    }
+    color: color-mod(var(--accent) a(70%));
  }

  &-title {
-    $border: 3px dotted $accent;
+    --border: 3px dotted var(--accent);
    position: relative;
-    color: $accent;
+    color: var(--accent);
    margin: 0 0 15px;
    padding-bottom: 15px;
-    border-bottom: $border;
+    border-bottom: var(--border);

    &:after {
      content: '';
@ -57,7 +53,7 @@
      bottom: 2px;
      display: block;
      width: 100%;
-      border-bottom: $border;
+      border-bottom: var(--border);
    }

    a {
@ -81,12 +77,12 @@
  }

  &-cover {
-    border: 20px solid $accent;
+    border: 20px solid var(--accent);
    background: transparent;
    margin: 40px 0;
    padding: 20px;

-    @media ($phone) {
+    @media (--phone) {
      padding: 10px;
      border-width: 10px;
    }
@ -99,7 +95,7 @@
      content: '-';
      position: absolute;
      left: -20px;
-      color: $accent;
+      color: var(--accent);
    }
  }
 }
@ -121,7 +117,7 @@
 }

 .hanchor {
-  color: transparentize($accent, .1);
+  color: color-mod(var(--accent) alpha(90%));
  text-decoration: none;
  margin-left: 10px;
  visibility: hidden;
@ -132,5 +128,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }

 .footnotes {
-  color: transparentize($color, .5);
+  color: color-mod(var(--color) alpha(50%));
 }
--- a/assets/css/prism.scss
+++ b/assets/css/prism.scss
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,18 @@
+@import 'variables.css';
+
+@import 'font.css';
+@import 'buttons.css';
+@import 'form.css';
+
+@import 'header.css';
+@import 'logo.css';
+@import 'main.css';
+@import 'post.css';
+@import 'pagination.css';
+@import 'footer.css';
+
+@import 'prism.css';
+@import 'syntax.css';
+@import 'code.css';
+@import 'terms.css';
+@import 'gist.css';
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -1,19 +0,0 @@
-@import "variables";
-
-@import "font";
-@import "buttons";
-@import "form";
-
-@import "header";
-@import "menu";
-@import "logo";
-@import "main";
-@import "post";
-@import "pagination";
-@import "footer";
-
-@import "prism";
-@import "syntax";
-@import "code";
-@import "terms";
-@import "gist";
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@ -17,7 +17,7 @@ code.language-scss,
 .token.number,
 .token.inserted,
 .token.important {
-  color: $accent !important;
+  color: var(--accent) !important;
 }

 .token.tag-id,
@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: transparentize($accent, .3) !important;
+  color: color-mod(var(--accent) a(70%)) !important;
 }

 .token.property,
@ -44,7 +44,7 @@ code.language-scss,
 code.language-javascript,
 code.language-html,
 .command-line-prompt > span:before {
-  color: mix($accent, #999, .9) !important;
+  color: color-mod(var(--accent) blend(#999 90%)) !important;
 }

 .token.selector,
@ -80,7 +80,7 @@ pre[class*="language-"] {
  right: 0;
  padding: 0;
  margin: 0;
-  background: transparentize(mix($accent, #999, 90%), .92);
+  background: color-mod(var(--accent) blend(#999 90%) a(8%));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
@ -115,10 +115,13 @@ pre[class*="language-"] {
  content: none;
 }

+:root {
+	--code-margin: 40px;
+}
+
 .code-toolbar {
-  $code-margin: 40px;
 	position: relative;
-	margin: $code-margin 0;
+	margin: var(--code-margin) 0;
 	padding: 20px;
 	border: 1px solid rgba(255, 255, 255, .1);

@ -126,7 +129,7 @@ pre[class*="language-"] {
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
-		margin-top: calc(-1 * $code-margin);
+		margin-top: calc(-1 * var(--code-margin));
 	}

 	pre, code {
--- a/assets/css/terms.css
+++ b/assets/css/terms.css
@ -0,0 +1,9 @@
+.terms {
+  h1 {
+    color: var(--accent);
+  }
+
+  h3 {
+    font-size: initial;
+  }
+}
--- a/assets/css/terms.scss
+++ b/assets/css/terms.scss
@ -1,22 +0,0 @@
-.terms {
-  h3 {
-    font-size: initial;
-  }
-
-  ul {
-    list-style: none;
-
-    li {
-      a {
-        color: $accent;
-      }
-    }
-
-    li:not(:empty):before {
-      content: '-';
-      position: absolute;
-      left: -20px;
-      color: $accent;
-    }
-  }
-}
--- a/assets/css/variables.css
+++ b/assets/css/variables.css
@ -0,0 +1,13 @@
+:root {
+  --accent: #FFA86A;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+
+  /* variables for js, must be the same as these in @custom-media queries */
+  --phoneWidth: (max-width: 684px);
+  --tabletWidth: (max-width: 900px);
+}
+
+@custom-media --phone (max-width: 684px);
+@custom-media --tablet (max-width: 900px);
--- a/assets/css/variables.scss
+++ b/assets/css/variables.scss
@ -1,8 +0,0 @@
-/* COLOR VARIABLES */
-$background: mix($accent, #1D1E28, 2%);
-$color: white;
-$border-color: rgba(255, 255, 255, .1);
-
-/* MEDIA QUERIES */
-$phone: "max-width: 684px";
-$tablet: "max-width: 900px";
--- a/assets/fonts/FiraCode-Bold.woff
+++ b/assets/fonts/FiraCode-Bold.woff
--- a/assets/fonts/FiraCode-Regular.woff
+++ b/assets/fonts/FiraCode-Regular.woff
--- a/assets/js/languageSelector.js
+++ b/assets/js/languageSelector.js
@ -0,0 +1,23 @@
+const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+
+const languageSelector = document.querySelector(".language-selector-current");
+const moreLanguagesContainer = document.querySelector(".language-selector__more");
+
+document.body.addEventListener("click", () => {
+  if (
+    !isMobile() &&
+    moreLanguagesContainer &&
+    !moreLanguagesContainer.classList.contains("hidden")
+  ) {
+    moreLanguagesContainer.classList.add("hidden");
+  }
+});
+
+languageSelector &&
+  languageSelector.addEventListener("click", (e) => {
+    if (!isMobile()) {
+      e.stopPropagation();
+      moreLanguagesContainer.classList.toggle("hidden");
+    }
+  });
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@ -1,44 +1,51 @@
 const container = document.querySelector(".container");
-const allMenus = document.querySelectorAll(".menu");
+const menu = document.querySelector(".menu");
+const mobileMenuTrigger = document.querySelector(".menu-trigger");
+const desktopMenu = document.querySelector(".menu__inner--desktop");
+const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");
+const menuMore = document.querySelector(".menu__sub-inner-more");
+const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+const handleMenuClasses = () => {
+  mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());
+  menu && menu.classList.toggle("hidden", isMobile());
+  menuMore && menuMore.classList.toggle("hidden", !isMobile());
+};
+
+// Common
+
+menu && menu.addEventListener("click", e => e.stopPropagation());
+menuMore && menuMore.addEventListener("click", e => e.stopPropagation());
+
+handleMenuClasses();

-// Hide menus on body click
 document.body.addEventListener("click", () => {
-  allMenus.forEach(menu => {
-    if (menu.classList.contains("open")) {
-      menu.classList.remove("open");
+  if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
+    menuMore.classList.add("hidden");
+  } else if (isMobile() && !menu.classList.contains("hidden")) {
+    menu.classList.add("hidden");
  }
 });
-});

-// Reset menus on resize
-window.addEventListener("resize", () => {
-  allMenus.forEach(menu => {
-    menu.classList.remove("open");
-  });
-});
+window.addEventListener("resize", handleMenuClasses);

-// Handle desktop menu
-allMenus.forEach(menu => {
-  const trigger = menu.querySelector(".menu__trigger");
-  const dropdown = menu.querySelector(".menu__dropdown");
+// Mobile menu

-  trigger.addEventListener("click", e => {
+mobileMenuTrigger &&
+  mobileMenuTrigger.addEventListener("click", e => {
    e.stopPropagation();
-
-    if (menu.classList.contains("open")) {
-      menu.classList.remove("open");
-    } else {
-      // Close all menus...
-      allMenus.forEach(m => m.classList.remove("open"));
-      // ...before opening the current one
-      menu.classList.add("open");
-    }
-
-    if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) {
-      dropdown.style.left = "auto";
-      dropdown.style.right = 0;
-    }
+    menu && menu.classList.toggle("hidden");
  });

-  dropdown.addEventListener("click", e => e.stopPropagation());
+// Desktop menu
+
+desktopMenuTrigger &&
+  desktopMenuTrigger.addEventListener("click", e => {
+    e.stopPropagation();
+    menuMore && menuMore.classList.toggle("hidden");
+
+    if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {
+      menuMore.style.left = "auto";
+      menuMore.style.right = 0;
+    }
  });
--- a/config.toml
+++ b/config.toml
@ -1,4 +0,0 @@
-[module]
-  [module.hugoVersion]
-    extended = true
-    min = '0.90.0'
--- a/go.mod
+++ b/go.mod
@ -1,3 +0,0 @@
-module github.com/panr/hugo-theme-terminal/v3
-
-go 1.19
--- a/layouts/_default/index.html
+++ b/layouts/_default/index.html
@ -19,16 +19,15 @@
        <h1 class="post-title">
          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
        </h1>
-
        <div class="post-meta">
-          {{- if .Date -}}
+          {{- with .Date }}
            <time class="post-date">
-              {{- .Date.Format "2006-01-02" -}}
+              {{ .Format "2006-01-02" }}
            </time>
-          {{- end -}}
-          {{- with .Params.Author -}}
-            <span class="post-author">{{ . }}</span>
-          {{- end -}}
+          {{- end }}
+          {{ with .Params.Author }}
+            <span class="post-author">:: {{ . }}</span>
+          {{ end }}
        </div>

        {{ if .Params.tags }}
@ -41,26 +40,28 @@
          </span>
        {{ end }}

+
        {{ partial "cover.html" . }}

+
        <div class="post-content">
          {{ if .Params.showFullContent }}
            {{ .Content }}
          {{ else if .Description }}
            {{ .Description | markdownify }}
          {{ else }}
-            {{ .Summary }}
+            {{ .Summary | markdownify }}
          {{ end }}
        </div>

        {{ if not .Params.showFullContent }}
        <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+          <a class="read-more button"
+            href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
        </div>
        {{ end }}
      </article>
    {{ end }}
-
    {{ partial "pagination.html" . }}
  </div>
 {{ end }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -11,14 +11,14 @@
          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
        </h1>
        <div class="post-meta">
-          {{- if .Date -}}
+          {{- with .Date }}
            <time class="post-date">
-              {{- .Date.Format "2006-01-02" -}}
+              {{ .Format "2006-01-02" }}
            </time>
-          {{- end -}}
-          {{- with .Params.Author -}}
-            <span class="post-author">{{- . -}}</span>
-          {{- end -}}
+          {{- end }}
+          {{ with .Params.Author }}
+            <span class="post-author">:: {{ . }}</span>
+          {{ end }}
        </div>

        {{ if .Params.tags }}
@ -33,6 +33,7 @@

        {{ partial "cover.html" . }}

+      
        <div class="post-content">
          {{ if .Params.showFullContent }}
            {{ .Content }}
@ -45,12 +46,12 @@

        {{ if not .Params.showFullContent }}
        <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+          <a class="read-more button"
+            href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
        </div>
        {{ end }}
      </article>
    {{ end }}
-
    {{ partial "pagination.html" . }}
  </div>
 {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,23 +1,22 @@
 {{ define "main" }}
 <article class="post">
  <h1 class="post-title">
-    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-  </h1>
+    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
  <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" -}}]
-        {{- end -}}
-      </time>
-    {{- end -}}
-    {{- with .Params.Author -}}
-      <span class="post-author">{{ . }}</span>
-    {{- end -}}
-    {{- if and (.Param "readingTime") (eq (.Param "readingTime") true) -}}
-      <span class="post-reading-time">{{ .ReadingTime }} {{ $.Site.Params.minuteReadingTime | default "min read" }} ({{ .WordCount }} {{ $.Site.Params.words | default "words" }})</span>
-    {{- end -}}
+    {{ if .Params.Date }}
+      <span class="post-date">
+        <time>{{ .Date.Format "2006-01-02" }}</time>
+        {{ if $.Site.Params.showLastUpdated }}
+          [{{or $.Site.Params.updatedDatePrefix "Updated"}}: <time>{{ .Lastmod.Format "2006-01-02" }}</time>]
+        {{ end }}
+      </span>
+    {{ end }}
+    {{ with .Params.Author }}
+      <span class="post-author">:: {{ . }}</span>
+    {{ end }}
+    {{ if and (.Param "readingTime") (eq (.Param "readingTime") true) }}
+      <span class="post-reading-time">:: {{ .ReadingTime }} min read ({{ .WordCount }} words)</span>
+    {{ end }}
  </div>

  {{ if .Params.tags }}
@ -41,7 +40,7 @@
  <div class="post-content">
    {{- with .Content -}}
      <div>
-        {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor">&#8983;</a> ${3}` | safeHTML }}
+        {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" aria-label="Anchor">&#8983;</a> ${3}` | safeHTML }}
      </div>
    {{- end -}}
  </div>
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@ -1,57 +0,0 @@
-{{ 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 }}
-            {{ .Description | markdownify }}
-          {{ else }}
-            {{ .Summary }}
-          {{ end }}
-        </div>
-
-        {{ if not .Params.showFullContent }}
-          <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
-          </div>
-        {{ end }}
-      </article>
-    {{ end }}
-
-    {{ partial "pagination.html" . }}
-  </div>
-{{ end }}
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@ -1,11 +1,6 @@
 {{ define "main" }}
  <div class="terms">
    <h1>{{ .Title }}</h1>
-    {{ with .Content }}
-      <div class="index-content">
-        {{ . }}
-      </div>
-    {{ end }}
    <ul>
      {{ $type := .Type }}
      {{ range $key, $value := .Data.Terms.Alphabetical }}
@ -13,7 +8,7 @@
      {{ $count := .Count }}
      {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
        <li>
-          <a class="terms-title" href="{{ .Permalink }}">{{ .Name }} [{{ $count }}]</a>
+          <a class="terms-title" href="{{ .Permalink }}">{{ .Name }} ({{ $count }})</a>
        </li>
      {{ end }}
      {{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -5,19 +5,19 @@
        <span>{{ $.Site.Copyright | safeHTML }}</span>
    {{ else }}
      <div class="copyright">
-        <span>© {{ now.Year }} Powered by <a href="https://gohugo.io">Hugo</a></span>
+        <span>© {{ now.Year }} Powered by <a href="http://gohugo.io">Hugo</a></span>
    {{ end }}
-      <span>:: <a href="https://github.com/panr/hugo-theme-terminal" target="_blank">Theme</a> made by <a href="https://github.com/panr" target="_blank">panr</a></span>
+        <span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
      </div>
  </div>
 </footer>

-{{ $menu := resources.Get "js/menu.js" | js.Build }}
-{{ $prism := resources.Get "js/prism.js" | js.Build }}
+<script src="{{ "assets/main.js" | absURL }}"></script>
+<script src="{{ "assets/prism.js" | absURL }}"></script>

-{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }}
-
-<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
+{{ if $.Site.Params.showLanguageSelector }}
+  <script src="{{ "assets/languageSelector.js" | absURL }}"></script>
+{{ end }}

 <!-- Extended footer section-->
 {{ partial "extended_footer.html" . }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -2,31 +2,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else if .Description}}{{ .Description | plainify }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
 <meta name="keywords" content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}" />
-{{ if .Params.noindex }}
-  {{ if or (eq (.Param "noindex") true) (eq (.Param "noindex") "true") }}
-    <meta name="robots" content="noindex" /> 
-  {{ end }}
-{{ else }}
 <meta name="robots" content="noodp" />
-{{ end }}
 <link rel="canonical" href="{{ .Permalink }}" />

 {{ template "_internal/google_analytics.html" . }}

-{{ $defaultStyles := resources.Get "css/style.scss" }}
-<!-- Local Theme Variables -->
-{{ if and (isset .Params "color") (not (eq .Params.color "")) }}
-  {{ $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) }}
-  {{ $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) }}
-  {{ $localColorStyles := $localCss | resources.ToCSS }}
-  <link rel="stylesheet" href="{{ $localColorStyles.Permalink }}">
-{{ else }}
-  <!-- Theme Variables -->
-  {{ $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) }}
-  {{ $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" }}
-  {{ $options := (dict "targetPath" "styles.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
-  {{ $styles := $css | resources.ToCSS $options }}
-  <link rel="stylesheet" href="{{ $styles.Permalink }}">
+<!-- Theme CSS -->
+<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
+{{ if (isset .Params "color") }}
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
+{{ else if and (ne $.Site.Params.ThemeColor "orange") (ne $.Site.Params.ThemeColor "color" "") }}
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" $.Site.Params.ThemeColor) | absURL }}">
 {{ end }}

 <!-- Custom CSS to override theme properties (/static/style.css) -->
@ -35,11 +21,11 @@
 {{- end }}

 <!-- Icons -->
+<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon-192x192.png" | absURL }}">
 {{ if isset $.Site.Params "favicon" }}
  <link rel="shortcut icon" href="{{ $.Site.Params.favicon | absURL }}">
 {{ else }}
-  <link rel="shortcut icon" href="{{ printf "img/theme-colors/%s.png" (or .Params.color $.Site.Params.ThemeColor | default "orange") | absURL }}">
-  <link rel="apple-touch-icon" href="{{ printf "img/theme-colors/%s.png" (or .Params.color $.Site.Params.ThemeColor | default "orange") | absURL }}">
+  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | absURL }}">
 {{ end }}

 <!-- Twitter Card -->
@ -58,12 +44,8 @@
 <meta property="og:description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else if .Description}}{{ .Description | plainify }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
 <meta property="og:url" content="{{ .Permalink }}" />
 <meta property="og:site_name" content="{{ $.Site.Title }}" />
-{{ if (isset .Params "cover") }}
-  {{ $pageCover := .Param "cover" }}
-  {{ with (.Resources.GetMatch (.Param "cover")) }}
-    {{ $pageCover = .RelPermalink }}
-  {{ end }}
-  <meta property="og:image" content="{{ $pageCover | absURL }}">
+{{ if and (not .IsHome) (isset .Params "cover") }}
+  <meta property="og:image" content="{{ .Param "cover" | absURL }}">
 {{ else }}
  {{ if isset $.Site.Params "favicon" }}
    <meta property="og:image" content="{{ $.Site.Params.favicon | absURL }}">
@ -71,8 +53,8 @@
    <meta property="og:image" content="{{ printf "img/favicon/%s.png" $.Site.Params.ThemeColor | absURL }}">
  {{ end }}
 {{ end }}
-<meta property="og:image:width" content="1200">
-<meta property="og:image:height" content="627">
+<meta property="og:image:width" content="2048">
+<meta property="og:image:height" content="1024">
 {{ range .Params.categories }}
  <meta property="article:section" content="{{ . }}" />
 {{ end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -4,10 +4,7 @@
      {{ partial "logo.html" . }}
    </div>
    {{ if len $.Site.Menus }}
-      {{ partial "mobile-menu.html" . }}
-    {{ end }}
-    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
-      {{ partial "language-menu.html" . }}
+      <div class="menu-trigger">menu</div>
    {{ end }}
  </div>
  {{ if len $.Site.Menus }}
--- a/layouts/partials/language-menu.html
+++ b/layouts/partials/language-menu.html
@ -1,10 +0,0 @@
-<ul class="menu menu--desktop menu--language-selector">
-  <li class="menu__trigger">{{ .Language.LanguageName }}&nbsp;▾</li>
-  <li>
-    <ul class="menu__dropdown">
-      {{ range $.Site.Home.AllTranslations }}
-        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
-      {{ end }}
-    </ul>
-  </li>
-</ul>
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@ -1,33 +1,60 @@
-<nav class="navigation-menu">
-  <ul class="navigation-menu__inner menu--desktop">
+<nav class="menu">
+  <ul class="menu__inner menu__inner--desktop">
    {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
      {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
        {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+          <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
        {{ end }}
      {{ end }}
      {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
-        <li>
-          <ul class="menu">
-            <li class="menu__trigger">{{ $.Site.Params.MenuMore }}&nbsp;▾</li>
-            <li>
-              <ul class="menu__dropdown">
+        <ul class="menu__sub-inner">
+          <li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore }} ▾</li>
+
+          <ul class="menu__sub-inner-more hidden">
            {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
              {{ if not .HasChildren }}
-                    <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+                <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
              {{ end }}
            {{ end }}
          </ul>
-            </li>
        </ul>
-        </li>
      {{ end }}
    {{ else }}
      {{ range $.Site.Menus.main }}
        {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+          <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
        {{ end }}
      {{ end }}
    {{ end }}
+
+    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
+    <div class="spacer"></div>
+    <ul class="language-selector">
+      <ul class="language-selector-current">
+          <li>{{ .Language.LanguageName }} ▾</li>
+      </ul>
+      <ul class="language-selector__more hidden">
+        {{ range $.Site.Home.AllTranslations }}
+        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        {{ end }}
+      </ul>
+    </ul>
+    {{ end }}
+  </ul>
+
+  <ul class="menu__inner menu__inner--mobile">
+    {{ range $.Site.Menus.main }}
+      {{ if not .HasChildren }}
+        <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
+      {{ end }}
+    {{ end }}
+    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
+    <hr />
+      {{ range $.Site.Home.AllTranslations }}
+        <li>
+          <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+        </li>
+      {{ end }}
+    {{ end }}
  </ul>
 </nav>
--- a/layouts/partials/mobile-menu.html
+++ b/layouts/partials/mobile-menu.html
@ -1,20 +0,0 @@
-<ul class="menu menu--mobile">
-  <li class="menu__trigger">Menu&nbsp;▾</li>
-  <li>
-    <ul class="menu__dropdown">
-      {{ range $.Site.Menus.main }}
-        {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ end }}
-      {{ end }}
-      {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
-        <hr />
-        {{ range $.Site.Home.AllTranslations }}
-          <li>
-            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-          </li>
-        {{ end }}
-      {{ end }}
-    </ul>
-  </li>
-</ul>
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@ -1,16 +1,20 @@
 <div class="pagination">
  <div class="pagination__buttons">
    {{ if .Paginator.HasPrev }}
-      <a href="{{ .Paginator.Prev.URL }}" class="button previous">
+      <span class="button previous">
+        <a href="{{ .Paginator.Prev.URL }}">
          <span class="button__icon">←</span>
          <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
        </a>
+      </span>
    {{ end }}
    {{ if .Paginator.HasNext }}
-      <a href="{{ .Paginator.Next.URL }}" class="button next">
+      <span class="button next">
+        <a href="{{ .Paginator.Next.URL }}">
          <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
          <span class="button__icon">→</span>
        </a>
+      </span>
    {{ end }}
  </div>
 </div>
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@ -1,3 +1,3 @@
 {{ if .Get "src" }}
-<img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} {{ with .Get "width" }} width="{{ . | plainify }}" {{ end }} {{ with .Get "height" }} height="{{ . | plainify }}" {{ end }} />
+  <img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />
 {{ end }}
--- a/layouts/shortcodes/prismjs.html
+++ b/layouts/shortcodes/prismjs.html
@ -20,7 +20,6 @@
      >{{ $inner }}</code></pre>
  {{ else }}
    <pre class="language-{{ .Get 0 }}">
-      <code class="language-{{ .Get 0 }}">{{ $inner }}</code>
-    </pre>
+      <code class="language-{{ .Get 0 }}">{{ $inner }}</code></pre>
  {{ end }}
 {{ end }}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.hugo.json
+++ b/package.hugo.json
@ -1,39 +0,0 @@
-{
-  "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
-  "browserslist": [
-    "last 2 versions",
-    ">1%",
-    "not dead"
-  ],
-  "comments": {
-    "dependencies": {
-      "yarn": "project"
-    },
-    "devDependencies": {
-      "browserslist": "project",
-      "clipboard": "project",
-      "eslint-config-airbnb": "project",
-      "eslint-config-prettier": "project",
-      "eslint-plugin-jsx-a11y": "project",
-      "husky": "project"
-    }
-  },
-  "dependencies": {
-    "yarn": "^1.22.10"
-  },
-  "devDependencies": {
-    "browserslist": "^4.16.5",
-    "clipboard": "^2.0.4",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "husky": "^5.1.3"
-  },
-  "license": "MIT",
-  "main": "index.js",
-  "name": "terminal",
-  "scripts": {
-    "test": "echo 'Test'"
-  },
-  "version": "2.1.0"
-}
--- a/package.json
+++ b/package.json
@ -1,43 +1,60 @@
 {
  "name": "terminal",
-  "version": "3.1.0",
-  "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
+  "version": "2.1.0",
  "main": "index.js",
+  "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
  "license": "MIT",
-  "scripts": {
-    "test": "echo 'Test'"
-  },
  "browserslist": [
    "last 2 versions",
    ">1%",
    "not dead"
  ],
-  "comments": {
-    "dependencies": {
-      "yarn": "project"
-    },
-    "devDependencies": {
-      "browserslist": "project",
-      "clipboard": "project",
-      "eslint-config-airbnb": "project",
-      "eslint-config-prettier": "project",
-      "eslint-plugin-jsx-a11y": "project",
-      "husky": "project"
-    }
-  },
-  "dependencies": {
-    "yarn": "^1.22.10"
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
  },
  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/parser": "^7.4.2",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-stage-2": "^7.0.0",
+    "angular-html-parser": "^1.2.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.5",
    "browserslist": "^4.16.5",
+    "clean-webpack-plugin": "^3.0.0",
    "clipboard": "^2.0.4",
-    "eslint": "^7.32.0",
+    "css-loader": "^5.1.3",
+    "cssnano": "^5.0.8",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "file-loader": "^6.1.0",
    "husky": "^5.1.3",
-    "stylelint": "^14.14.1",
-    "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard-scss": "^6.1.0"
+    "mini-css-extract-plugin": "^1.3.9",
+    "postcss": "^8.2.10",
+    "postcss-browser-reporter": "^0.6.0",
+    "postcss-cli": "^8.3.1",
+    "postcss-color-function": "^4.0.1",
+    "postcss-color-mod-function": "^3.0.3",
+    "postcss-import": "^14.0.0",
+    "postcss-loader": "^5.2.0",
+    "postcss-mixins": "^7.0.3",
+    "postcss-nested": "^5.0.5",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-reporter": "^7.0.2",
+    "postcss-url": "^10.1.3",
+    "prettier-eslint-cli": "^5.0.0",
+    "ramda": "^0.27.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "url-loader": "^4.1.0",
+    "webpack": "^5.27.1",
+    "webpack-cli": "^4.5.0"
+  },
+  "dependencies": {
+    "yarn": "^1.22.10"
  }
 }
--- a/static/assets/2078a57b79d547bf1e2502f8d249b867.woff
+++ b/static/assets/2078a57b79d547bf1e2502f8d249b867.woff
--- a/static/assets/58cebbe9a6bdcba6d4bb56a22a9e812f.woff
+++ b/static/assets/58cebbe9a6bdcba6d4bb56a22a9e812f.woff
--- a/static/assets/blue.css
+++ b/static/assets/blue.css
--- a/static/assets/green.css
+++ b/static/assets/green.css
--- a/static/assets/languageSelector.js
+++ b/static/assets/languageSelector.js
@ -0,0 +1,4 @@
+(function(){var __webpack_modules__={"./assets/js/languageSelector.js":
+/*!***************************************!*\
+  !*** ./assets/js/languageSelector.js ***!
+  \***************************************/function(){eval('var mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar languageSelector = document.querySelector(".language-selector-current");\nvar moreLanguagesContainer = document.querySelector(".language-selector__more");\ndocument.body.addEventListener("click", function () {\n  if (!isMobile() && moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {\n    moreLanguagesContainer.classList.add("hidden");\n  }\n});\nlanguageSelector && languageSelector.addEventListener("click", function (e) {\n  if (!isMobile()) {\n    e.stopPropagation();\n    moreLanguagesContainer.classList.toggle("hidden");\n  }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/languageSelector.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/languageSelector.js"]()})();
--- a/static/assets/main.js
+++ b/static/assets/main.js
@ -0,0 +1,4 @@
+(function(){var __webpack_modules__={"./assets/js/menu.js":
+/*!***************************!*\
+  !*** ./assets/js/menu.js ***!
+  \***************************/function(){eval('var container = document.querySelector(".container");\nvar menu = document.querySelector(".menu");\nvar mobileMenuTrigger = document.querySelector(".menu-trigger");\nvar desktopMenu = document.querySelector(".menu__inner--desktop");\nvar desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");\nvar menuMore = document.querySelector(".menu__sub-inner-more");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar handleMenuClasses = function handleMenuClasses() {\n  mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());\n  menu && menu.classList.toggle("hidden", isMobile());\n  menuMore && menuMore.classList.toggle("hidden", !isMobile());\n}; // Common\n\n\nmenu && menu.addEventListener("click", function (e) {\n  return e.stopPropagation();\n});\nmenuMore && menuMore.addEventListener("click", function (e) {\n  return e.stopPropagation();\n});\nhandleMenuClasses();\ndocument.body.addEventListener("click", function () {\n  if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {\n    menuMore.classList.add("hidden");\n  } else if (isMobile() && !menu.classList.contains("hidden")) {\n    menu.classList.add("hidden");\n  }\n});\nwindow.addEventListener("resize", handleMenuClasses); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener("click", function (e) {\n  e.stopPropagation();\n  menu && menu.classList.toggle("hidden");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener("click", function (e) {\n  e.stopPropagation();\n  menuMore && menuMore.classList.toggle("hidden");\n\n  if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n    menuMore.style.left = "auto";\n    menuMore.style.right = 0;\n  }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/menu.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/menu.js"]()})();
--- a/static/assets/pink.css
+++ b/static/assets/pink.css
--- a/static/assets/prism.js
+++ b/static/assets/prism.js
--- a/static/assets/red.css
+++ b/static/assets/red.css
--- a/static/assets/style.css
+++ b/static/assets/style.css
--- a/static/img/theme-colors/blue.png
+++ b/static/img/theme-colors/blue.png
--- a/static/img/theme-colors/green.png
+++ b/static/img/theme-colors/green.png
--- a/static/img/theme-colors/orange.png
+++ b/static/img/theme-colors/orange.png
--- a/static/img/theme-colors/pink.png
+++ b/static/img/theme-colors/pink.png
--- a/static/img/theme-colors/red.png
+++ b/static/img/theme-colors/red.png
--- a/theme.toml
+++ b/theme.toml
@ -5,7 +5,7 @@ description = "A simple, retro theme for Hugo."
 homepage = "https://github.com/panr/hugo-theme-terminal/"
 tags = ["blog", "clean", "customizable", "dark", "highlighting", "minimal", "monotone", "multilingual", "personal", "responsive", "simple", "technical", "retro"]
 features = ["blog", "shortcode", "syntax highlighting"]
-min_version = 0.90
+min_version = 0.74

 [author]
  name = "panr"
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,104 @@
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
+const path = require("path");
+
+const join = (...paths) => path.join(__dirname, ...paths);
+
+module.exports = (env, { mode }) => ({
+  resolve: {
+    extensions: [".js", ".css"],
+    modules: ["assets", "node_modules"],
+  },
+  entry: {
+    main: join("assets", "js", "menu.js"),
+    languageSelector: join("assets", "js", "languageSelector.js"),
+    prism: join("assets", "js", "prism.js"),
+    style: join("assets", "css", "style.css"),
+    red: join("assets", "css", "color", "red.css"),
+    blue: join("assets", "css", "color", "blue.css"),
+    green: join("assets", "css", "color", "green.css"),
+    pink: join("assets", "css", "color", "pink.css"),
+  },
+  output: {
+    filename: "[name].js",
+    path: join("static/assets"),
+    publicPath: "",
+  },
+  performance: {
+    hints: false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg|woff|woff2|ttf|eot|svg)$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+              import: true,
+              importLoaders: 1,
+            },
+          },
+          "postcss-loader",
+        ],
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendor",
+      minChunks: 2,
+    },
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        extractComments: false,
+      }),
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [join("static/assets")],
+      cleanAfterEveryBuildPatterns: [
+        join("static/assets/style.js"),
+        join("static/assets/blue.js"),
+        join("static/assets/green.js"),
+        join("static/assets/red.js"),
+        join("static/assets/pink.js"),
+      ],
+      verbose: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }),
+  ],
+});
--- a/yarn.lock
+++ b/yarn.lock