Numerous improvements and bug fixes.

- Refactored themes to always load with just a single file. This avoids
  a round trip on each request.
- Locally load font when available on the system, then try to
  load the woff2 file, then fall back to regular woff.
- Update markup to use relative urls where it is safe. RSS feeds still
  use absolute URLs.
- Only set og:image:(height/width) when using the standard color icon.
- Fixed styles on the pagination buttons.
- Added ability to switch font to Source Code Pro (useSourceCodePro).
- Added yellow theme.
- Added grey theme.
- Bold and remove underline for active page in header.
- Removed markdownify on summary.
- Only display date if present.

README.md

@@ -23,7 +23,7 @@
 
 ## Features
 
-- **5 duotone themes**, depending on your preferences (orange is default, red, blue, green, pink)
+- **6 duotone themes**, depending on your preferences (orange is default, red, blue, green, pink, yellow, and grey)
 - [**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
@@ -121,7 +121,7 @@ paginate = 5
   # the list of set content will show up on your index page (baseurl).
   contentTypeName = "posts"
 
-  # ["orange", "blue", "red", "green", "pink"]
+  # ["orange", "blue", "red", "green", "pink", "yellow", "grey"]
   themeColor = "orange"
 
   # if you set this to 0, only submenu trigger will be visible
@@ -165,6 +165,9 @@ paginate = 5
   # can be overridden in a page's front-matter
   # TocTitle = "Table of Contents" # default
 
+  # use Source Code Pro instead of Fira Code
+  # useSourceCodePro = true
+
 
 [params.twitter]
   # set Twitter handles for Twitter cards

assets/css/color/blue-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #23B0FF;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/blue.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #23B0FF;

assets/css/color/green-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #78E2A0;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/green.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #78E2A0;

assets/css/color/grey-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: lightgrey;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/grey.css

@@ -0,0 +1,8 @@
+@import '../style.css';
+
+:root {
+  --accent: lightgrey;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/orange-scp.css

@@ -0,0 +1 @@
+@import '../style-scp.css';

assets/css/color/orange.css

@@ -0,0 +1 @@
+@import '../style.css';

assets/css/color/pink-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #EE72F1;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/pink.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #EE72F1;

assets/css/color/red-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #FF6266;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/red.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #FF6266;

assets/css/color/yellow-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #ffe658;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/yellow.css

@@ -0,0 +1,8 @@
+@import '../style.css';
+
+:root {
+  --accent: #ffe658;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/font-scp.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-display: swap;
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Light.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Light.otf.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Regular.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Regular.otf.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Bold.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Bold.otf.woff") format("woff");
+  font-display: swap;
+}
+
+body {
+  font-family: 'Source Code Pro', Monaco, Consolas, Ubuntu Mono, monospace;
+}
+
+code,
+kbd {
+  font-family: 'Source Code Pro', Monaco, Consolas, Ubuntu Mono, monospace !important;
+}
+
+.post-content {
+  font-weight: 300;
+}

assets/css/font.css

@@ -3,7 +3,7 @@
   font-family: 'Fira Code';
   font-style: normal;
   font-weight: 400;
-  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  src: local("Fira Code") url("/assets/fonts/FiraCode-Regular.woff2") format("woff2") url("/assets/fonts/FiraCode-Regular.woff") format("woff");
   font-display: swap;
 }
 
@@ -11,7 +11,16 @@
   font-display: swap;
   font-family: 'Fira Code';
   font-style: normal;
-  font-weight: 800;
-  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  font-weight: 700;
+  src: local("Fira Code") url("/assets/fonts/FiraCode-Bold.woff2") format("woff2") url("/assets/fonts/FiraCode-Bold.woff") format("woff");
   font-display: swap;
 }
+
+body {
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+}
+
+code,
+kbd {
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
+}

assets/css/header.css

@@ -49,6 +49,11 @@
     --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
     margin: 20px 1px;
 
+    a.active {
+      font-weight: bold;
+      text-decoration: none;
+    }
+
     @media (--phone) {
       @mixin menu;
       top: 50px;

assets/css/main.css

@@ -11,10 +11,9 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
   font-size: 1rem;
   line-height: 1.54;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   background-color: color-mod(var(--accent) blend(#1D1E28 98%));
   color: var(--color);
   text-rendering: optimizeLegibility;
@@ -128,7 +127,6 @@ figure {
 }
 
 code, kbd {
-  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
   background: color-mod(var(--accent) a(20%));
   color: var(--accent);

assets/css/pagination.css

@@ -42,32 +42,40 @@
       text-decoration: none;
     }
   }
-}
 
-.button {
+  .button:hover, a.button:hover, button:hover {
+    background: none;
+  }
+
+  .button {
+    border: none;
+    color: var(--accent);
+    background: none;
     position: relative;
     display: inline-flex;
     flex: 1;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
-  border-radius: 8px;
+    border-radius: 0;
     padding: 0;
     cursor: pointer;
     appearance: none;
     overflow: hidden;
 
-  + .button {
+    +.button {
       margin-left: 10px;
     }
 
-  a {
+    a, a:hover {
       display: flex;
       padding: 8px 16px;
       text-decoration: none;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      background: none !important;
+      border: none;
     }
 
     &__text {
@@ -83,4 +91,5 @@
     &.previous .button__icon {
       margin-right: 8px;
     }
+  }
 }

assets/css/style-scp.css

@@ -0,0 +1,18 @@
+@import 'variables.css';
+
+@import 'font-scp.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';

layouts/404.html

@@ -3,7 +3,7 @@
     <h1 class="post-title">404 — {{ $.Site.Params.missingContentMessage | default "Page not found..." }}</h1>
 
     <div class="post-content">
-      <a href="{{ "/" | absURL }}">{{ $.Site.Params.missingBackButtonLabel | default "Back to home page" }}&nbsp;→</a>
+      <a href="{{ "/" | relURL }}">{{ $.Site.Params.missingBackButtonLabel | default "Back to home page" }}&nbsp;→</a>
     </div>
 
   </div>

layouts/_default/index.html

@@ -17,12 +17,14 @@
     {{ range $paginator.Pages }}
       <div class="post on-list">
         <h1 class="post-title">
-          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+          <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
         </h1>
         <div class="post-meta">
+          {{ with .Date }}
           <span class="post-date">
-            {{ .Date.Format "2006-01-02" }}
+            {{ .Format "2006-01-02" }}
           </span>
+          {{ end }}
           {{ with .Params.Author }}
             <span class="post-author">:: {{ . }}</span>
           {{ end }}
@@ -31,7 +33,7 @@
         {{ if .Params.tags }}
           <span class="post-tags">
             {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+            #<a href="{{ (urlize (printf "tags/%s/" . )) | relLangURL }}">
               {{- . -}}
             </a>&nbsp;
             {{ end }}

layouts/_default/list.html

@@ -8,12 +8,14 @@
     {{ range .Paginator.Pages }}
       <div class="post on-list">
         <h1 class="post-title">
-          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+          <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
         </h1>
         <div class="post-meta">
+          {{ with .Date }}
           <span class="post-date">
-            {{ .Date.Format "2006-01-02" }}
+            {{ .Format "2006-01-02" }}
           </span>
+          {{ end }}
           {{ with .Params.Author }}
             <span class="post-author">:: {{ . }}</span>
           {{ end }}
@@ -22,7 +24,7 @@
         {{ if .Params.tags }}
           <span class="post-tags">
             {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+            #<a href="{{ (urlize (printf "tags/%s/" . )) | relLangURL }}">
               {{- . -}}
             </a>&nbsp;
             {{ end }}
@@ -38,7 +40,7 @@
           {{ else if .Description }}
             {{ .Description | markdownify }}
           {{ else }}
-            {{ .Summary | markdownify }}
+            {{ .Summary }}
           {{ end }}
         </div>
 

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <div class="post">
   <h1 class="post-title">
-    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h1>
   <div class="post-meta">
     {{ if .Params.Date }}
       <span class="post-date">
@@ -22,7 +22,7 @@
   {{ if .Params.tags }}
   <span class="post-tags">
     {{ range .Params.tags }}
-    #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp;
+    #<a href="{{ (urlize (printf "tags/%s/" .)) | relLangURL }}">{{ . }}</a>&nbsp;
     {{ end }}
   </span>
   {{ end }}

layouts/_default/terms.html

@@ -8,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="{{ .RelPermalink }}">{{ .Name }} ({{ $count }})</a>
         </li>
       {{ end }}
       {{ end }}

layouts/partials/cover.html

@@ -5,7 +5,7 @@
   {{- if .Resources.GetMatch .Params.Cover }}
     {{- $cover = (.Resources.GetMatch .Params.Cover).RelPermalink -}}
   {{- else -}}
-    {{- $cover = absURL .Params.Cover -}}
+    {{- $cover = relURL .Params.Cover -}}
   {{- end -}}
 {{- else if $.Site.Params.AutoCover -}}
   {{- if (not .Params.Cover) -}}

layouts/partials/footer.html

@@ -12,11 +12,11 @@
   </div>
 </footer>
 
-<script src="{{ "assets/main.js" | absURL }}"></script>
-<script src="{{ "assets/prism.js" | absURL }}"></script>
+<script defer src="{{ "assets/main.js" | relURL }}"></script>
+<script defer src="{{ "assets/prism.js" | relURL }}"></script>
 
 {{ if $.Site.Params.showLanguageSelector }}
-  <script src="{{ "assets/languageSelector.js" | absURL }}"></script>
+  <script src="{{ "assets/languageSelector.js" | relURL }}"></script>
 {{ end }}
 
 <!-- Extended footer section-->

layouts/partials/head.html

@@ -8,24 +8,32 @@
 {{ template "_internal/google_analytics.html" . }}
 
 <!-- Theme CSS -->
-<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
+{{ $scp := "" }}
+{{ if (isset $.Site.Params "usesourcecodepro") }}
+{{ if $.Site.Params.useSourceCodePro }}
+{{ $scp = "-scp" }}
+{{ end }}
+{{ end }}
+
 {{ if (isset .Params "color") }}
-  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
+  <link rel="stylesheet" href="{{ (printf "assets/%s%s.css" .Params.color $scp) | relURL }}">
 {{ 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 }}">
+  <link rel="stylesheet" href="{{ (printf "assets/%s%s.css" $.Site.Params.ThemeColor $scp) | relURL }}">
+{{ else }}
+  <link rel="stylesheet" href="{{ (printf "assets/orange%s.css" $scp) | relURL }}">
 {{ end }}
 
 <!-- Custom CSS to override theme properties (/static/style.css) -->
 {{ if (fileExists "static/style.css") -}}
-  <link rel="stylesheet" href="{{ "style.css" | absURL }}">
+  <link rel="stylesheet" href="{{ "style.css" | relURL }}">
 {{- end }}
 
 <!-- Icons -->
-<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon-192x192.png" | absURL }}">
+<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon-192x192.png" | relURL }}">
 {{ if isset $.Site.Params "favicon" }}
-  <link rel="shortcut icon" href="{{ $.Site.Params.favicon | absURL }}">
+  <link rel="shortcut icon" href="{{ $.Site.Params.favicon | relURL }}">
 {{ else }}
-  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | absURL }}">
+  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | relURL }}">
 {{ end }}
 
 <!-- Twitter Card -->
@@ -51,10 +59,10 @@
     <meta property="og:image" content="{{ $.Site.Params.favicon | absURL }}">
   {{ else }}
     <meta property="og:image" content="{{ printf "img/favicon/%s.png" $.Site.Params.ThemeColor | absURL }}">
+    <meta property="og:image:width" content="2048">
+    <meta property="og:image:height" content="1024">
   {{ end }}
 {{ end }}
-<meta property="og:image:width" content="2048">
-<meta property="og:image:height" content="1024">
 {{ range .Params.categories }}
   <meta property="article:section" content="{{ . }}" />
 {{ end }}

layouts/partials/menu.html

@@ -1,9 +1,12 @@
 <nav class="menu">
   <ul class="menu__inner menu__inner--desktop">
+    {{ $currentPage := . }}
     {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
       {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
+        {{ $menu_item_url := .URL | relLangURL }}
+        {{ $page_url := $currentPage.RelPermalink | relLangURL }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          <li><a{{ if eq $menu_item_url $page_url }} class="active"{{ end }} href="{{ .URL }}">{{ .Name }}</a></li>
         {{ end }}
       {{ end }}
       {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
@@ -13,7 +16,9 @@
           <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 }}">{{ .Name }}</a></li>
+                {{ $menu_item_url := .URL | relLangURL }}
+                {{ $page_url := $currentPage.RelPermalink | relLangURL }}
+                <li><a{{ if eq $menu_item_url $page_url }} class="active"{{ end }} href="{{ .URL }}">{{ .Name }}</a></li>
               {{ end }}
             {{ end }}
           </ul>
@@ -21,8 +26,10 @@
       {{ end }}
     {{ else }}
       {{ range $.Site.Menus.main }}
+        {{ $menu_item_url := .URL | relLangURL }}
+        {{ $page_url := $currentPage.RelPermalink | relLangURL }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          <li><a{{ if eq $menu_item_url $page_url }} class="active"{{ end }} href="{{ .URL }}">{{ .Name }}</a></li>
         {{ end }}
       {{ end }}
     {{ end }}
@@ -35,7 +42,7 @@
       </ul>
       <ul class="language-selector__more hidden">
         {{ range $.Site.Home.AllTranslations }}
-        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        <li><a{{ if eq .Language $.Language }} class="active"{{ end }} href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
         {{ end }}
       </ul>
     </ul>
@@ -44,15 +51,17 @@
 
   <ul class="menu__inner menu__inner--mobile">
     {{ range $.Site.Menus.main }}
+      {{ $menu_item_url := .URL | relLangURL }}
+      {{ $page_url := $currentPage.RelPermalink | relLangURL }}
       {{ if not .HasChildren }}
-        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+        <li><a{{ if eq $menu_item_url $page_url }} class="active"{{ end }} 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>
+          <a{{ if eq .Language $.Language }} class="active"{{ end }} href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
         </li>
       {{ end }}
     {{ end }}

layouts/partials/posts_pagination.html

@@ -6,20 +6,16 @@
     </div>
     <div class="pagination__buttons">
         {{ if .NextInSection }}
-        <span class="button previous">
-            <a href="{{ .NextInSection.Permalink }}">
+        <a class="button previous" href="{{ .NextInSection.RelPermalink }}">
             <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 }}">
+        <a class="button next" href="{{ .PrevInSection.RelPermalink }}">
             <span class="button__text">{{ .PrevInSection.Title }}</span>
             <span class="button__icon">→</span>
         </a>
-        </span>
         {{ end }}
     </div>
 </div>

layouts/shortcodes/code.html

@@ -11,5 +11,5 @@
     <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
   </div>
 {{ else }}
-  {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}
+  {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.RelPermalink }}
 {{ end }}

package.json

@@ -55,6 +55,6 @@
     "webpack-cli": "^4.5.0"
   },
   "dependencies": {
-    "yarn": "^1.22.10"
+    "yarn": "^1.22.19"
   }
 }

static/assets/languageSelector.js

@@ -1,4 +1 @@
-(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"]()})();
+!function(){var e=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),t=function(){return window.matchMedia(e).matches},n=document.querySelector(".language-selector-current"),o=document.querySelector(".language-selector__more");document.body.addEventListener("click",(function(){t()||!o||o.classList.contains("hidden")||o.classList.add("hidden")})),n&&n.addEventListener("click",(function(e){t()||(e.stopPropagation(),o.classList.toggle("hidden"))}))}();

static/assets/main.js

@@ -1,4 +1 @@
-(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"]()})();
+!function(){var e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),i=(document.querySelector(".menu__inner--desktop"),document.querySelector(".menu__sub-inner-more-trigger")),o=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(d).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),o&&o.classList.toggle("hidden",!c())};t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),o&&o.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!o||o.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):o.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),i&&i.addEventListener("click",(function(t){t.stopPropagation(),o&&o.classList.toggle("hidden"),o.getBoundingClientRect().right>e.getBoundingClientRect().right&&(o.style.left="auto",o.style.right=0)}))}();

webpack.config.js

@@ -19,7 +19,18 @@ module.exports = (env, { mode }) => ({
     red: join("assets", "css", "color", "red.css"),
     blue: join("assets", "css", "color", "blue.css"),
     green: join("assets", "css", "color", "green.css"),
+    orange: join("assets", "css", "color", "orange.css"),
     pink: join("assets", "css", "color", "pink.css"),
+    yellow: join("assets", "css", "color", "yellow.css"),
+    grey: join("assets", "css", "color", "grey.css"),
+    'style-scp': join("assets", "css", "style.css"),
+    'red-scp': join("assets", "css", "color", "red-scp.css"),
+    'blue-scp': join("assets", "css", "color", "blue-scp.css"),
+    'green-scp': join("assets", "css", "color", "green-scp.css"),
+    'orange-scp': join("assets", "css", "color", "orange-scp.css"),
+    'pink-scp': join("assets", "css", "color", "pink-scp.css"),
+    'yellow-scp': join("assets", "css", "color", "yellow-scp.css"),
+    'grey-scp': join("assets", "css", "color", "grey-scp.css"),
   },
   output: {
     filename: "[name].js",
@@ -93,6 +104,17 @@ module.exports = (env, { mode }) => ({
         join("static/assets/green.js"),
         join("static/assets/red.js"),
         join("static/assets/pink.js"),
+        join("static/assets/orange.js"),
+        join("static/assets/yellow.js"),
+        join("static/assets/grey.js"),
+        join("static/assets/style-scp.js"),
+        join("static/assets/blue-scp.js"),
+        join("static/assets/green-scp.js"),
+        join("static/assets/red-scp.js"),
+        join("static/assets/pink-scp.js"),
+        join("static/assets/orange-scp.js"),
+        join("static/assets/yellow-scp.js"),
+        join("static/assets/grey-scp.js"),
       ],
       verbose: true,
     }),