Init

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": "last 2 versions, >1%, not dead"
+    }],
+  ],
+}

.eslintrc.yml

@@ -0,0 +1,60 @@
+---
+
+env:
+  es6: true
+
+extends:
+  # https://github.com/airbnb/javascript
+  - airbnb
+  - eslint:recommended
+  - prettier
+
+parser: babel-eslint
+
+rules:
+  # best practices
+  arrow-parens:
+    - 2
+    - as-needed
+  semi:
+    - 2
+    - never
+  class-methods-use-this: 0
+  comma-dangle:
+    - 2
+    - always-multiline
+  no-console:
+    - 2
+  no-unused-expressions: 0
+  no-param-reassign:
+    - 2
+    - props: false
+  no-useless-escape: 0
+  func-names: 0
+  quotes:
+    - 2
+    - single
+    - allowTemplateLiterals: true
+  no-underscore-dangle: 0
+  object-curly-newline: 0
+  function-paren-newline: 0
+  operator-linebreak:
+    - 2
+    - after
+  no-unused-vars:
+    - 2
+    - argsIgnorePattern: "^_"
+  # jsx a11y
+  jsx-a11y/no-static-element-interactions: 0
+  jsx-a11y/anchor-is-valid:
+    - 2
+    - specialLink:
+        - to
+
+globals:
+  document: true
+  requestAnimationFrame: true
+  window: true
+  self: true
+  fetch: true
+  Headers: true

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "parser": "babylon",
+  "printWidth": 100,
+  "trailingComma": "all"
+}

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 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
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,126 @@
+# Terminal
+
+![Terminal](https://github.com/panr/hugo-theme-terminal/blob/master/images/screenshot.png?raw=true)
+
+### DEMO - https://hugo-terminal.now.sh/
+
+## Features
+
+- **5 duetone themes**, depending on your preferences (orange is default, red, blue, green, pink)
+- monospaced font, everywhere!
+- **realy nice duotone**, custom syntax highlighting based on [**PrismJS**](https://prismjs.com)
+- an easy way to modify the theme (**Webpack, NodeJS, PostCSS etc.**)
+- fully responsive
+
+#### Built-in shortcodes
+
+- **`image`** (prop required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
+  - eg: `{{< 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`**
+  - eg: `{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}`
+
+#### Code highlighting
+
+A custom syntax highlighting based on PrismJS. All you need to do is to wrap you code like this:
+
+<pre>
+```html
+  // your code here
+```
+</pre>
+
+**Supported languages**: bash/shell, css, clike, javascript, apacheconf, actionscript, applescript, c, csharp, cpp, coffeescript, ruby, csp, css-extras, diff, django, docker, elixir, elm, markup-templating, erlang, fsharp, flow, git, go, graphql, less, handlebars, haskell, http, java, json, kotlin, latex, markdown, makefile, objectivec, ocaml, perl, php, php-extras, r, sql, processing, scss, python, jsx, typescript, toml, reason, textile, rust, sass, stylus, scheme, pug, swift, yaml, haml, twig, tsx, vim, visual-basic, wasm.
+
+## How to start
+
+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 clone it directly to your Hugo folder:
+
+```
+$ git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
+```
+
+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:
+
+```
+$ git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
+```
+
+## How to configure
+
+The theme doesn't require any advanced configuration. Just copy:
+
+```
+baseurl = "/"
+languageCode = "en-us"
+theme = "terminal"
+paginate = 5
+
+[params]
+  # dir name of your blog content (default is `content/posts`)
+  contentTypeName = "posts"
+  # ["orange", "blue", "red", "green", "pink"]
+  themeColor = "orange"
+
+[languages]
+  [languages.en]
+    title = "Terminal"
+    subtitle = "A simple, retro theme for Hugo"
+    keywords = ""
+    copyright = ""
+    readMore = "Read more"
+    readOtherPosts = "Read other posts"
+
+    [languages.en.params.logo]
+      logoText = "terminal"
+      logoHomeLink = "/"
+
+    [languages.en.menu]
+      [[languages.en.menu.main]]
+        identifier = "about"
+        name = "About"
+        url = "/about"
+      [[languages.en.menu.main]]
+        identifier = "showcase"
+        name = "Showcase"
+        url = "/showcase"
+```
+
+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/8f9b363e358aaa33f6d353c77feee959).
+
+## How to run your site
+
+From your Hugo root directory run:
+
+```
+$ hugo server -t terminal
+```
+
+and go to `localhost:1313` in your browser. From now on all the changes you make will go live, so you don't need to refresh your browser every single time.
+
+## How to edit the theme
+
+If you really want to edit the theme, you need to install Node dependencies. To do this, go to the theme directory (from your Hugo root directory):
+
+```
+$ cd themes/terminal
+```
+
+and then run:
+
+```
+$ npm install
+$ npm i yarn
+$ yarn
+```
+
+## How to contribute
+
+If you spot any bugs, please use [Issue Tracker](https://github.com/panr/hugo-theme-terminal/issues) or if you want to add a new feature directly please create a new [Pull Request](https://github.com/panr/hugo-theme-terminal/pulls).
+
+## Licence
+
+Copyright © 2019 Radosław Kozieł ([@panr](https://twitter.com/panr))
+
+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.

exampleSite/config.toml

@@ -0,0 +1,34 @@
+baseurl = "/"
+languageCode = "en-us"
+theme = "hugo-theme-terminal"
+paginate = 5
+
+[params]
+  contentTypeName = "posts"
+  themeColor = "orange"
+
+[params.logo]
+  logoText = "terminal"
+
+[languages]
+  [languages.en]
+    title = "Terminal"
+    subtitle = "A simple, retro theme for Hugo"
+    keywords = ""
+    copyright = ""
+    readMore = "Read more"
+    readOtherPosts = "Read other posts"
+
+    [languages.en.params.logo]
+      logoText = "terminal"
+      logoHomeLink = "/"
+
+    [languages.en.menu]
+      [[languages.en.menu.main]]
+        identifier = "about"
+        name = "About"
+        url = "/about"
+      [[languages.en.menu.main]]
+        identifier = "showcase"
+        name = "Showcase"
+        url = "/showcase"

exampleSite/content/about.md

@@ -0,0 +1,23 @@
++++
+title = "About"
+date = "2019-01-25"
+author = "Radek"
++++
+
+# Hi there
+
+My name is Radek and I'm the author of this theme. I made it to help you present your ideas easier.
+
+We all know how hard is to start something on the web, especially these days. You need to prepare a bunch of stuff, configure them and when that’s done — create the content.
+
+This theme is pretty basic and covers all of the essentials. All you have to do is start typing!
+
+The theme includes:
+
+- **5 duotone themes**, depending on your preferences (orange, red, blue, green, pink)
+- [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous!
+- **realy nice, custom duotone** syntax highlighting based on [**PrismJS**](https://prismjs.com)
+- an easy way to modify the theme (**Webpack, NodeJS, PostCSS etc.**)
+- mobile friendly layout
+
+So, there you have it... enjoy!

exampleSite/content/posts/hello.md

@@ -0,0 +1,20 @@
++++
+title = "Hello Friend…"
+date = "2019-01-25"
+author = "Lorem Ipsum"
+cover = "hello.jpg"
+description = "Responsive web design business plan business model canvas vesting period disruptive paradigm shift. Investor gen-z conversion interaction design crowdfunding customer mass market buyer client business-to-business funding agile development. Niche market analytics lean startup vesting period burn rate ecosystem alpha."
++++
+
+Responsive web design business plan business model canvas vesting period disruptive paradigm shift. Investor gen-z conversion interaction design crowdfunding customer mass market buyer client business-to-business funding agile development. Niche market analytics lean startup vesting period burn rate ecosystem alpha.
+
+Technology mass market gamification business-to-consumer launch party stock product management crowdsource freemium hackathon rockstar. Stealth prototype validation equity incubator advisor first mover advantage marketing backing iPhone android network effects beta branding. Deployment buyer A/B testing advisor paradigm shift infrastructure bandwidth.
+
+> Supply chain partner network network effects holy grail. Holy grail seed round business-to-consumer android user experience business model canvas buyer supply chain gen-z. Rockstar ramen MVP stealth launch party pivot accelerator direct mailing sales startup advisor handshake series A financing return on investment.
+
+Seed money business plan supply chain social media client twitter. Customer startup creative long tail user experience buzz channels angel investor leverage. Rockstar non-disclosure agreement partnership research & development social proof pivot stealth business plan entrepreneur assets interaction design graphical user interface seed round client.
+
+- Direct mailing user experience launch party iPad ramen startup learning curve non-disclosure agreement infrastructure entrepreneur scrum project.
+- Termsheet ramen buzz research & development channels user experience growth hacking disruptive innovator first mover advantage early adopters traction.
+  - Success holy grail venture android series A financing bootstrapping.
+  - Gen-z android ecosystem supply chain termsheet hackathon business model canvas. Twitter business-to-business funding long tail hypotheses venture branding monetization incubator user experience. Deployment pitch learning curve burn rate.

exampleSite/content/showcase.md

@@ -0,0 +1,86 @@
+---
+title: "Showcase"
+date: "2018-07-18"
+author: "Hello Robot"
+---
+
+## Header 2
+
+Backup two-step verification breach, anonymous terminal traffic worm virus reboot fsociety dat file. Traffic fsociety malware 100 terabytes system hack, delete brute-force cyber security fiber connection connect code worm wipe. Cyber security off the grid delete IP decrypt, **nodes connect password 100 terabytes RUDY attack malicious code** rootkit gigabit speed. Tor connect network, intercepting traffic off the grid IP protocol password.
+
+> Backup DDoS attack rootkit nodes disconnect website. Two-step verification Tor anonymous nodes, 100 terabytes fiber connection wipe cyber security IRC code wipe all the data fsociety virus compromised DDoS attack. Sys admin data center gigabit speed breach, worm DDoS attack AFK nodes.
+
+### Header 3
+
+Brute-force intercepting traffic fiber connection system boot up fsociety reboot AFK sys admin. Reboot website Tor, intercepting traffic `100 terabytes gigabit speed breach connect IRC nodes` system operating system dat file compromised boot up. Data center decrypt password network disconnect. Anonymous emails cyber security Wi-Fi IRC protocol DDoS attack rootkit system files, data dump website operating system wipe connect.
+
+```css
+/* PostCSS code */
+
+pre {
+  background: #1a1a1d;
+  padding: 20px;
+  border-radius: 8px;
+  font-size: 1rem;
+  overflow: auto;
+
+  @media (--phone) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  code {
+    background: none !important;
+    color: #ccc;
+    padding: 0;
+    font-size: inherit;
+  }
+}
+```
+
+```js
+// JS code
+
+const menuTrigger = document.querySelector('.menu-trigger')
+const menu = document.querySelector('.menu')
+const mobileQuery = getComputedStyle(document.body).getPropertyValue('--phoneWidth')
+const isMobile = () => window.matchMedia(mobileQuery).matches
+const isMobileMenu = () => {
+  menuTrigger.classList.toggle('hidden', !isMobile())
+  menu.classList.toggle('hidden', isMobile())
+}
+
+isMobileMenu()
+
+menuTrigger.addEventListener('click', () => menu.classList.toggle('hidden'))
+
+window.addEventListener('resize', isMobileMenu)
+```
+
+```html
+<!-- HTML code -->
+
+<section id="main">
+  <div>
+   <h1 id="title">{{ .Title }}</h1>
+    {{ range .Pages }}
+      {{ .Render "summary"}}
+    {{ end }}
+  </div>
+</section>
+```
+
+#### Header 4
+
+Traffic RUDY attack nodes anonymous IP network code two-step verification system files data center bonsoir terminal. Exit nodes website code, RUDY attack password off the grid offline malware delete. Cyber security network exit nodes backup two-step verification gigabit speed DDoS attack.
+
+- Fsociety delete malicious code nodes.
+- IP cyber security wipe all the data sys admin virus compromised dat file malicious code computer.
+- Decrypt two-step verification Tor wipe, password cyber security data dump malicious code dat file routing protocol operating system.
+- Anonymous boot up website AFK.
+  - Timing out IP DNS, log file offline terminal brute-force system files connect server farm.
+  - Reboot sys admin worm log file wipe.
+
+{{< youtube id="xIBiJ_SzJTA" >}}
+
+Tor boot up backup anonymous bonsoir IRC website. Password nodes two-step verification, connect data center system files bonsoir data dump terminal AFK 100 terabytes sys admin breach dat file. Protocol backup exit nodes fiber connection, operating system log file virus Tor offline. Password data center two-step verification disconnect IRC terminal. Tor IRC cyber security AFK protocol traffic disconnect. Code exit nodes IRC cyber security nodes worm.

layouts/_default/baseof.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language }}">
+<head>
+  {{ block "title" . }}
+    <title>{{ if .IsHome }}{{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ else }}{{ .Title }} :: {{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ end }}</title>
+  {{ end }}
+  {{ partial "head.html" . }}
+</head>
+<body class="">
+<div class="container">
+  {{ partial "header.html" . }}
+
+  <div class="content">
+    {{ block "main" . }}
+    {{ end }}
+  </div>
+
+  {{ block "footer" . }}
+    {{ partial "footer.html" . }}
+  {{ end }}
+</div>
+
+</body>
+</html>

layouts/_default/list.html

@@ -0,0 +1,43 @@
+{{ define "main" }}
+  <div class="posts">
+    {{ $isntDefault := not (or (eq (trim .Site.Params.contentTypeName " ") "posts") (eq (trim .Site.Params.contentTypeName " ") "")) }}
+    {{ $contentTypeName := cond $isntDefault (string .Site.Params.contentTypeName) "posts" }}
+    {{ $paginator := .Paginate (where .Data.Pages "Type" $contentTypeName) }}
+
+    {{ range $paginator.Pages }}
+    <div class="post on-list">
+      <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+      <div class="post-meta">
+        <span class="post-date">
+          {{ .Date.Format "2006-01-02" }}
+        </span>
+        <span class="post-author">:: {{ .Params.Author }}</span>
+      </div>
+
+      {{ if .Params.tags }}
+        <span class="post-tags">
+          {{ range .Params.tags }}
+            #<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">{{ . }}</a>&nbsp;
+          {{ end }}
+        </span>
+      {{ end }}
+
+      {{ with .Params.Cover }}
+        <img src="/img/{{ . }}" class="post-cover" />
+      {{ end }}
+
+      <div class="post-content">
+        {{ with .Description }}
+          {{ . | markdownify }}
+        {{ else }}
+          {{ if .Truncated }}
+            {{ .Summary | markdownify }}
+          {{ end }}
+        {{ end }}
+      </div>
+      <div><a class="read-more button" href="{{.RelPermalink}}">{{ .Site.Params.ReadMore }} →</a></div>
+    </div>
+    {{ end }}
+    {{ partial "pagination.html" . }}
+  </div>
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,53 @@
+{{ define "main" }}
+  <div class="post">
+    <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
+    <div class="post-meta">
+      <span class="post-date">
+        {{ .Date.Format "2006-01-02" }}
+      </span>
+      <span class="post-author">:: {{ .Params.Author }}</span>
+    </div>
+
+    {{ if .Params.tags }}
+      <span class="post-tags">
+        {{ range .Params.tags }}
+          #<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">{{ . }}</a>&nbsp;
+        {{ end }}
+      </span>
+    {{ end }}
+
+    {{ with .Params.Cover }}
+      <img src="/img/{{ . }}" class="post-cover" />
+    {{ end }}
+
+    <div class="post-content">
+      {{ .Content }}
+    </div>
+    {{ if or .NextInSection .PrevInSection }}
+      <div class="pagination">
+        <div class="pagination__title">
+          <span class="pagination__title-h">{{ .Site.Params.ReadOtherPosts }}</span>
+          <hr />
+        </div>
+        <div class="pagination__buttons">
+          {{ if .NextInSection }}
+            <span class="button previous">
+              <a href="{{ .NextInSection.Permalink }}">
+                <span class="button__icon">←</span>
+                <span class="button__text">{{ .NextInSection.Title }}</span>
+              </a>
+            </span>
+          {{ end }}
+          {{ if .PrevInSection }}
+            <span class="button next">
+              <a href="{{ .PrevInSection.Permalink }}">
+                <span class="button__text">{{ .PrevInSection.Title }}</span>
+                <span class="button__icon">→</span>
+              </a>
+            </span>
+          {{ end }}
+        </div>
+      </div>
+    {{ end }}
+  </div>
+{{ end }}

layouts/partials/footer.html

@@ -0,0 +1,15 @@
+<footer class="footer">
+  <div class="footer__inner">
+    {{ if .Site.Copyright }}
+      <div class="copyright copyright--user">{{ .Site.Copyright| safeHTML }}</div>
+    {{else}}
+      <div class="copyright">
+        <span>© {{ now.Year }} Powered by <a href="http://gohugo.io">Hugo</a></span>
+        <span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
+      </div>
+    {{end}}
+  </div>
+</footer>
+
+<script src="/assets/main.js"></script>
+<script src="/assets/prism.js"></script>

layouts/partials/head.html

@@ -0,0 +1,52 @@
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.Subtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}"/>
+<meta name="keywords" content="{{ .Site.Params.keywords }}"/>
+<meta name="robots" content="noodp"/>
+<link rel="canonical" href="{{ .Permalink }}" />
+
+<!-- Theme CSS -->
+<link rel="stylesheet" href="/assets/style.css">
+{{ if (ne .Site.Params.ThemeColor "orange") }}
+  <link rel="stylesheet" href="/assets/{{ .Site.Params.ThemeColor }}.css">
+{{ end }}
+
+<!-- Custom CSS to override theme properties (/static/style.css) -->
+<link rel="stylesheet" href="/style.css">
+
+<!-- Icons -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-144-precomposed.png">
+{{ with .Site.Params.ThemeColor }}
+  <link rel="shortcut icon" href="/img/favicon/{{ . }}.png">
+{{ end }}
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="{{ if .IsHome }}{{ $.Site.Title }} — {{ $.Site.Params.Subtitle }}{{ else }}{{ .Title }} :: {{ $.Site.Title }} — {{ $.Site.Params.Subtitle }}{{ end }}" />
+<meta name="twitter:description" content="{{ if .IsHome }}{{ $.Site.Params.tagline }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
+<meta name="twitter:site" content="{{ .Site.BaseURL }}" />
+<meta name="twitter:creator" content="{{ .Params.Author }}" />
+<meta name="twitter:image" content="{{ with .Params.Cover }}{{ $.Site.BaseURL }}img/post/{{ . }}{{ else }}{{ $.Site.BaseURL }}img/default.jpg{{ end }}">
+
+<!-- OG data -->
+<meta property="og:locale" content="{{ $.Site.Language.Lang }}" />
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+<meta property="og:title" content="{{ if .IsHome }}{{ $.Site.Title }} — {{ $.Site.Params.Subtitle }}{{ else }}{{ .Title }} :: {{ $.Site.Title }} — {{ $.Site.Params.Subtitle }}{{ end }}">
+<meta property="og:description" content="{{ if .IsHome }}{{ $.Site.Params.tagline }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:site_name" content="{{ .Title }}" />
+<meta property="og:image" content="{{ with .Params.Cover }}{{ $.Site.BaseURL }}img/post/{{ . }}{{ else }}{{ $.Site.BaseURL }}img/default.jpg{{ end }}">
+<meta property="og:image:width" content="2048">
+<meta property="og:image:height" content="1024">
+{{ range .Params.categories }}<meta property="article:section" content="{{ . }}" />{{ end }}
+{{ if isset .Params "date" }}<meta property="article:published_time" content="{{ time .Date }}" />{{ end }}
+
+<!-- RSS -->
+{{ if .RSSLink }}
+<link href="{{ .Site.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+{{ end }}
+
+<!-- JSON Feed -->
+{{ if .OutputFormats.Get "json" }}
+<link href="{{ if .OutputFormats.Get "json" }}{{ .Site.BaseURL }}feed.json{{ end }}" rel="alternate" type="application/json" title="{{ .Site.Title }}" />
+{{ end }}

layouts/partials/header.html

@@ -0,0 +1,11 @@
+<header class="header">
+  <div class="header__inner">
+    <div class="header__logo">
+      {{ partial "logo.html" . }}
+    </div>
+    <div class="menu-trigger">menu</div>
+  </div>
+  {{ if len .Site.Menus }}
+    {{ partial "menu.html" . }}
+  {{ end }}
+</header>

layouts/partials/logo.html

@@ -0,0 +1,5 @@
+<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL }}{{ end }}" style="text-decoration: none;">
+  <div class="logo">
+    {{ with .Site.Params.Logo.logoText }}{{ . }}{{ else }}Terminal{{ end }}
+  </div>
+</a>

layouts/partials/menu.html

@@ -0,0 +1,7 @@
+<nav class="menu">
+  <ul class="menu__inner">
+    {{ range .Site.Menus.main }}
+      <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+    {{ end }}
+  </ul>
+</nav>

layouts/partials/pagination.html

@@ -0,0 +1,20 @@
+<div class="pagination">
+  <div class="pagination__buttons">
+    {{ if .Paginator.HasPrev }}
+      <span class="button previous">
+        <a href="{{ .Paginator.Prev.URL }}">
+          <span class="button__icon">←</span>
+          <span class="button__text">Newer posts</span>
+        </a>
+      </span>
+    {{ end }}
+    {{ if .Paginator.HasNext }}
+      <span class="button next">
+        <a href="{{ .Paginator.Next.URL }}">
+          <span class="button__text">Older posts</span>
+          <span class="button__icon">→</span>
+        </a>
+      </span>
+    {{ end }}
+  </div>
+</div>

layouts/shortcodes/figure.html

@@ -0,0 +1,8 @@
+{{ 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" }}</figcaption>
+    {{ end }}
+  </figure>
+{{ end }}

layouts/shortcodes/image.html

@@ -0,0 +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 }} />
+{{ end }}

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "terminal",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
+  },
+  "browserslist": [
+    "last 2 versions",
+    ">1%",
+    "not dead"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.54",
+    "@babel/core": "^7.0.0-beta.54",
+    "@babel/plugin-transform-runtime": "^7.0.0-beta.54",
+    "@babel/preset-env": "^7.0.0-beta.54",
+    "@babel/preset-stage-2": "^7.0.0-beta.54",
+    "babel-eslint": "8.2.1",
+    "babel-loader": "^8.0.0-beta.0",
+    "browserslist": "^4.0.1",
+    "clean-webpack-plugin": "^0.1.16",
+    "clipboard": "^2.0.1",
+    "css-loader": "^1.0.0",
+    "cssnano": "^4.0.3",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "postcss": "^7.0.0",
+    "postcss-browser-reporter": "^0.5.0",
+    "postcss-cli": "^6.0.0",
+    "postcss-color-function": "^4.0.1",
+    "postcss-color-mod-function": "^3.0.3",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.0.5",
+    "postcss-nested": "^3.0.0",
+    "postcss-preset-env": "^5.2.2",
+    "postcss-reporter": "^5.0.0",
+    "postcss-url": "^7.3.2",
+    "prettier-eslint-cli": "^4.7.1",
+    "ramda": "^0.25.0",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,26 @@
+const url = require("postcss-url");
+const imports = require("postcss-import");
+const nested = require("postcss-nested");
+const postCSSPresetEnv = require("postcss-preset-env");
+const browsers = require("browserslist");
+const cssnano = require("cssnano");
+const color = require("postcss-color-mod-function");
+
+module.exports = () => ({
+  plugins: [
+    url,
+    imports,
+    nested,
+    postCSSPresetEnv({
+      stage: 1,
+      preserve: true,
+      features: {
+        "custom-properties": true,
+      },
+    }),
+    cssnano({
+      preset: "default",
+    }),
+    color,
+  ],
+});

source/css/buttons.css

@@ -0,0 +1,94 @@
+.button-container {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+button,
+.button,
+a.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-align: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+
+  /* variants */
+
+  &.outline {
+    background: transparent;
+    box-shadow: none;
+    padding: 8px 18px;
+
+    :hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  &.primary {
+    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+
+    &:hover {
+      box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
+    }
+  }
+
+  &.link {
+    background: none;
+    font-size: 1rem;
+  }
+
+
+  /* sizes */
+
+  &.small {
+    font-size: .8rem;
+  }
+
+  &.wide {
+    min-width: 200px;
+    padding: 14px 24px;
+  }
+}
+
+a.read-more,
+a.read-more:hover,
+a.read-more:active {
+  display: inline-flex;
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 20px 0;
+  max-width: 100%;
+}
+
+.code-toolbar {
+  margin-bottom: 20px;
+
+  .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;
+  }
+}

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

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

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

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

source/css/font.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'Fira Code';
+  font-style:  normal;
+  font-weight: 400;
+  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  font-style:  normal;
+  font-weight: 800;
+  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+}

source/css/footer.css

@@ -0,0 +1,50 @@
+.footer {
+  padding: 40px 0;
+  flex-grow: 0;
+  opacity: .5;
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    width: 760px;
+    max-width: 100%;
+
+    @media (--tablet) {
+      flex-direction: column;
+    }
+  }
+
+  a {
+    color: inherit;
+  }
+
+  .copyright {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 1rem;
+    color: var(--light-color-secondary);
+
+    &--user {
+      margin: auto;
+      text-align: center;
+    }
+
+    & > *:first-child:not(:only-child) {
+      margin-right: 10px;
+
+       @media (--tablet) {
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
+    }
+
+    @media (--tablet) {
+      flex-direction: column;
+      margin-top: 10px;
+    }
+  }
+}

source/css/header.css

@@ -0,0 +1,77 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &__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%;
+    }
+  }
+
+  .menu {
+    margin: 20px 0;
+
+    @media (--phone) {
+      position: absolute;
+      background: var(--background);
+      border: 2px solid;
+      top: 50px;
+      right: 0;
+      margin: 0;
+      padding: 10px;
+      z-index: 99;
+    }
+
+    &__inner {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        &:not(:last-of-type) {
+          margin-right: 20px;
+        }
+      }
+
+      @media (--phone) {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+
+        li {
+          margin: 0;
+          padding: 5px;
+        }
+      }
+    }
+
+    &-trigger {
+      color: var(--accent);
+      border: 2px solid;
+      margin-left: 10px;
+      height: 100%;
+      padding: 3px 8px;
+      position: relative;
+    }
+  }
+}

source/css/logo.css

@@ -0,0 +1,8 @@
+.logo {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  background: var(--accent);
+  color: black;
+  padding: 5px 10px;
+}

source/css/main.css

@@ -0,0 +1,225 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+  font-size: 1rem;
+  line-height: 1.54;
+  background-color: color-mod(var(--accent) blend(#1D1E28 98%));
+  color: var(--color);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
+  font-variant-ligatures: contextual;
+  -webkit-overflow-scrolling: touch;
+  -webkit-text-size-adjust: 100%;
+
+  @media (--phone) {
+    font-size: 1rem;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  display: flex;
+  align-items: center;
+  font-weight: normal;
+  line-height: 1.3;
+}
+
+h1, h2, h3 {
+  font-size: 1.4rem;
+}
+
+h4, h5, h6 {
+  font-size: 1.2rem;
+}
+
+a {
+  color: inherit;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+
+  &.left {
+    margin-right: auto;
+  }
+
+  &.center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.right {
+    margin-left: auto;
+  }
+}
+
+p {
+  margin-bottom: 20px;
+}
+
+figure {
+  display: table;
+  max-width: 100%;
+  margin: 25px 0;
+
+  &.left {
+    margin-right: auto;
+  }
+
+  &.center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.right {
+    margin-left: auto;
+  }
+
+  figcaption {
+    font-size: 14px;
+    margin-top: 5px;
+    opacity: .8;
+
+    &.left {
+      text-align: left;
+    }
+
+    &.center {
+      text-align: center;
+    }
+
+    &.right {
+      text-align: right;
+    }
+  }
+}
+
+code {
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+  font-feature-settings: normal;
+  background: var(--background-secondary);
+  padding: 1px 6px;
+  margin: 0 2px;
+  border-radius: 5px;
+  font-size: .95rem;
+}
+
+pre {
+  background: transparent;
+  padding: 20px;
+  border-radius: 8px;
+  font-size: .95rem;
+  overflow: auto;
+
+  @media (--phone) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  code {
+    background: none !important;
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+  }
+}
+
+blockquote {
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
+  margin: 40px 0;
+  padding: 25px;
+
+  @media (--phone) {
+    padding-right: 0;
+  }
+
+  &:before {
+    content: '”';
+    font-family: Georgia, serif;
+    font-size: 3.875rem;
+    position: absolute;
+    left: -40px;
+    top: -20px;
+  }
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  p {
+    position: relative;
+  }
+
+  p:before {
+    content: '>';
+    display: block;
+    position: absolute;
+    left: -25px;
+    color: var(--accent);
+  }
+}
+
+ul, ol {
+  margin-left: 30px;
+  padding: 0;
+
+  li {
+    position: relative;
+  }
+
+  @media (--phone) {
+    margin-left: 20px;
+  }
+
+  ul, ol {
+    margin-top: 20px;
+  }
+}
+
+ol ol {
+  list-style-type: lower-alpha;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 40px;
+  border-right: 1px solid rgba(255, 255, 255, .1);
+  max-width: 864px;
+
+  @media (--phone) {
+    padding: 20px;
+  }
+}
+
+.content {
+  display: flex;
+}
+
+hr {
+  width: 100%;
+  border: none;
+  background: var(--border-color);
+  height: 1px;
+}
+
+.hidden {
+  display: none;
+}

source/css/pagination.css

@@ -0,0 +1,81 @@
+.pagination {
+  margin-top: 50px;
+
+  &__title {
+    display: flex;
+    text-align: center;
+    position: relative;
+    margin: 100px 0 20px;
+
+    &-h {
+      text-align: center;
+      margin: 0 auto;
+      padding: 5px 10px;
+      background: var(color-mod(var(--accent) blend(#1D1E28 98%)));
+      font-size: .8rem;
+      text-transform: uppercase;
+      text-decoration: none;
+      letter-spacing: .1em;
+      z-index: 1;
+    }
+
+    hr {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 100%;
+      margin-top: 15px;
+      z-index: 0;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  border-radius: 8px;
+  max-width: 40%;
+  padding: 0;
+  cursor: pointer;
+  appearance: none;
+
+  + .button {
+    margin-left: 10px;
+  }
+
+  a {
+    display: flex;
+    padding: 8px 16px;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &.next .button__icon {
+    margin-left: 8px;
+  }
+
+  &.previous .button__icon {
+    margin-right: 8px;
+  }
+}

source/css/post.css

@@ -0,0 +1,96 @@
+.post {
+  width: 100%;
+  text-align: left;
+  margin: 20px auto;
+  padding: 20px 0;
+
+  @media (--tablet) {
+    max-width: 660px;
+  }
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  &-meta {
+    font-size: 1rem;
+    margin-bottom: 10px;
+    color: color-mod(var(--accent) a(70%));
+  }
+
+  &-title {
+    --border: 3px dotted var(--accent);
+    position: relative;
+    color: var(--accent);
+    margin: 0 0 15px;
+    padding-bottom: 15px;
+    border-bottom: var(--border);
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 2px;
+      display: block;
+      width: 100%;
+      border-bottom: var(--border);
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &-tags {
+    display: block;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    opacity: .5;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &-content {
+    margin-top: 30px;
+  }
+
+  &-cover {
+    border: 20px solid var(--accent);
+    background: transparent;
+    margin: 40px 0;
+    padding: 20px;
+
+    @media (--phone) {
+      padding: 10px;
+      border-width: 10px;
+    }
+  }
+
+  ul {
+    list-style: none;
+
+    li:before {
+      content: '►';
+      position: absolute;
+      left: -20px;
+      color: var(--accent);
+    }
+  }
+}
+
+.post--regulation {
+  h1 {
+    justify-content: center;
+  }
+
+  h2 {
+    justify-content: center;
+    margin-bottom: 10px;
+
+    &+ h2 {
+      margin-top: -10px;
+      margin-bottom: 20px;
+    }
+  }
+}

source/css/prism.css

@@ -0,0 +1,209 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+c+csharp+bash+cpp+coffeescript+ruby+csp+css-extras+diff+django+docker+elixir+elm+markup-templating+erlang+fsharp+flow+git+go+graphql+less+handlebars+haskell+http+java+json+kotlin+latex+markdown+makefile+objectivec+ocaml+perl+php+php-extras+sql+processing+scss+python+jsx+typescript+reason+textile+rust+sass+stylus+scheme+pug+swift+yaml+haml+toml+twig+tsx+vim+visual-basic+wasm&plugins=line-numbers+toolbar+jsonp-highlight+command-line+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-"] {
+	background: none;
+	font-family: inherit, monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	border-radius: 8px;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+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;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+
+div.code-toolbar {
+	position: relative;
+	margin: 40px 0;
+	padding: 20px 0;
+	border-top: 1px solid rgba(255, 255, 255, .1);
+	border-bottom: 1px solid rgba(255, 255, 255, .1);
+
+	+ .code-toolbar {
+		border-top: 0;
+		margin-top: -40px;
+	}
+
+	+ .highlight,
+	+ .highlight .code-toolbar {
+		border-top: 0;
+	}
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+
+.command-line-prompt {
+	border-right: 1px solid #999;
+	display: block;
+	float: left;
+	font-size: 100%;
+	letter-spacing: -1px;
+	margin-right: 1em;
+	pointer-events: none;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: 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);
+}

source/css/style.css

@@ -0,0 +1,14 @@
+@import 'variables';
+
+@import 'font';
+@import 'buttons';
+
+@import 'header';
+@import 'logo';
+@import 'main';
+@import 'post';
+@import 'pagination';
+@import 'footer';
+
+@import 'prism';
+@import 'syntax';

source/css/syntax.css

@@ -0,0 +1,53 @@
+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 {
+  color: var(--accent);
+}
+
+.token.tag-id,
+.token.atrule-id,
+.token.operator,
+.token.unit,
+.token.placeholder,
+.token.variable,
+.token.attr-name {
+  color: color-mod(var(--accent) a(70%));
+}
+
+.token.property,
+.token.function,
+code.language-javascript,
+code.language-html {
+  color: color-mod(var(--accent) blend(#999 90%));
+}
+
+.token.selector,
+.token.tag,
+.token.punctuation {
+  color: white;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: rgba(255, 255, 255, .3);
+}
+
+.token.namespace {
+  opacity: .7;
+}

source/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 (width < 684px);
+@custom-media --tablet (width < 900px);

source/js/main.js

@@ -0,0 +1 @@
+// Add your script here

source/js/menu.js

@@ -0,0 +1,16 @@
+// Mobile menu
+
+const menuTrigger = document.querySelector(".menu-trigger");
+const menu = document.querySelector(".menu");
+const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+const isMobileMenu = () => {
+  menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
+  menu && menu.classList.toggle("hidden", isMobile());
+};
+
+isMobileMenu();
+
+menuTrigger && menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden"));
+
+window.addEventListener("resize", isMobileMenu);

static/assets/main.js

@@ -0,0 +1,124 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./source/js/main.js":
+/*!***************************!*\
+  !*** ./source/js/main.js ***!
+  \***************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("// Add your script here\n\n\n//# sourceURL=webpack:///./source/js/main.js?");
+
+/***/ }),
+
+/***/ "./source/js/menu.js":
+/*!***************************!*\
+  !*** ./source/js/menu.js ***!
+  \***************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\n// Mobile menu\nvar menuTrigger = document.querySelector(\".menu-trigger\");\nvar menu = document.querySelector(\".menu\");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue(\"--phoneWidth\");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar isMobileMenu = function isMobileMenu() {\n  menuTrigger && menuTrigger.classList.toggle(\"hidden\", !isMobile());\n  menu && menu.classList.toggle(\"hidden\", isMobile());\n};\n\nisMobileMenu();\nmenuTrigger && menuTrigger.addEventListener(\"click\", function () {\n  return menu && menu.classList.toggle(\"hidden\");\n});\nwindow.addEventListener(\"resize\", isMobileMenu);\n\n//# sourceURL=webpack:///./source/js/menu.js?");
+
+/***/ }),
+
+/***/ 0:
+/*!*****************************************************!*\
+  !*** multi ./source/js/main.js ./source/js/menu.js ***!
+  \*****************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("__webpack_require__(/*! /Users/radek/Documents/Git/Moje/hugoBasicExample/themes/terminal/source/js/main.js */\"./source/js/main.js\");\nmodule.exports = __webpack_require__(/*! /Users/radek/Documents/Git/Moje/hugoBasicExample/themes/terminal/source/js/menu.js */\"./source/js/menu.js\");\n\n\n//# sourceURL=webpack:///multi_./source/js/main.js_./source/js/menu.js?");
+
+/***/ })
+
+/******/ });

theme.toml

@@ -0,0 +1,12 @@
+name = "terminal"
+license = "MIT"
+licenselink = "https://gitlab.com/panr/hugo-theme-terminal/blob/master/LICENSE.md"
+description = "A simple, retro theme for Hugo."
+tags = ["blog", "clean", "customizable", "dark", "highlighting", "minimal", "monotone", "multilingual", "personal", "responsive", "simple", "technical", "retro"]
+features = ["blog", "shortcode", "syntax highlighting"]
+min_version = 0.30
+
+[author]
+  name = "panr"
+  homepage = "https://radoslawkoziel.pl"
+  twitter = "https://twitter.com/panr"

webpack.config.js

@@ -0,0 +1,95 @@
+const Webpack = require("webpack");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const CleanPlugin = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
+const path = require("path");
+
+const join = (...paths) => path.join(__dirname, ...paths);
+
+module.exports = {
+  resolve: {
+    extensions: [".js", ".css"],
+    modules: ["source", "node_modules"],
+  },
+  entry: {
+    "main.js": [join("source", "js", "main.js"), join("source", "js", "menu.js")],
+    "prism.js": join("source", "js", "prism.js"),
+    "style.css": join("source", "css", "style.css"),
+    "red.css": join("source", "css", "color", "red.css"),
+    "blue.css": join("source", "css", "color", "blue.css"),
+    "green.css": join("source", "css", "color", "green.css"),
+    "pink.css": join("source", "css", "color", "pink.css"),
+  },
+  output: {
+    filename: "[name]",
+    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: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: [
+            {
+              loader: "css-loader",
+              options: {
+                minimize: true,
+                modules: true,
+                importLoaders: 1,
+                localIdentName: "[local]",
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                config: {
+                  path: "postcss.config.js",
+                },
+              },
+            },
+          ],
+        }),
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendor",
+      minChunks: 2,
+    },
+    minimizer: [
+      new UglifyJsPlugin({
+        sourceMap: false,
+      }),
+    ],
+  },
+  plugins: [new CleanPlugin(join("static/assets")), new ExtractTextPlugin("[name]")],
+};