adds hugo teminal orange theme

SITES.md

@@ -89,3 +89,6 @@
 * [Tanel Poder's performance & troubleshooting blog](https://tanelpoder.com)
 * [rgoswami.me](https://rgoswami.me)
 * [Ceso Adventures](https://ceso.github.io/)
+* [Efe Öge's Blog](https://efe.me)
+* [garrigos.cat Blog](https://garrigos.cat)
+* [ThePeachTimes](https://thepeachtimes.js.org/)

package.json

@@ -24,18 +24,18 @@
     "deploy": "gh-pages --dist dist"
   },
   "devDependencies": {
-    "@primer/css": "^14.1.0",
+    "@primer/css": "^14.2.0",
     "autoprefixer": "^9.7.4",
     "gh-pages": "^2.2.0",
     "github-syntax-dark": "^0.5.0",
     "github-syntax-light": "^0.5.0",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-clean-dist": "^0.0.6",
-    "posthtml-expressions": "^1.1.1",
-    "posthtml-include": "^1.3.3",
+    "posthtml-expressions": "^1.2.0",
+    "posthtml-include": "^1.4.0",
     "posthtml-md": "^1.1.0",
-    "sass": "^1.25.0",
-    "tslint": "^5.20.1",
-    "typescript": "^3.7.5"
+    "sass": "^1.26.3",
+    "tslint": "^6.1.0",
+    "typescript": "^3.8.3"
   }
 }

src/configuration-component.ts

@@ -130,6 +130,7 @@ export class ConfigurationComponent {
         <option value="github-light">GitHub Light</option>
         <option value="github-dark">GitHub Dark</option>
         <option value="github-dark-orange">GitHub Dark Orange</option>
+        <option value="hugo-terminal-orange">Hugo Terminal Orange</option>
         <option value="icy-dark">Icy Dark</option>
         <option value="dark-blue">Dark Blue</option>
         <option value="photon-dark">Photon Dark</option>

src/stylesheets/themes/github-dark-orange/index.scss

@@ -9,16 +9,3 @@
 @import "./placeholder.scss";
 @import "./combobox.scss";
 @import "./code.scss";
-
-body {
-  background-color: $bg-page;
-}
-
-iframe {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}

src/stylesheets/themes/hugo-terminal-orange/button.scss

@@ -0,0 +1,24 @@
+@import "./variables";
+
+.btn-primary {
+    color: $gray-900;
+    border-color: $gray-900;
+    background: $orange;
+
+    &:hover, &:active, &:focus {
+        border-color: $gray-900;
+        background: $orange;
+    }
+
+    &:disabled {
+        color: $gray-900;
+        background: $orange-200;
+    }
+}
+
+button[role=tab] {
+  color: $gray-600;
+  .selected {
+    color: $text-gray-dark;
+  }
+}

src/stylesheets/themes/hugo-terminal-orange/code.scss

@@ -0,0 +1,6 @@
+@import "./variables";
+
+.bg-gray-light,
+.bg-white {
+  background-color: $bg-gray !important;
+}

src/stylesheets/themes/hugo-terminal-orange/combobox.scss

@@ -0,0 +1,7 @@
+@import "./variables";
+
+.form-control, .form-select {
+  color: $text-gray-dark;
+  background-color: $bg-white !important;
+  border-radius: 3px;
+}

src/stylesheets/themes/hugo-terminal-orange/comment.scss

@@ -0,0 +1,11 @@
+@import "./variables";
+
+.form-select {
+  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUAgMAAAD5DFXkAAAACVBMVEXMzMzMzMzMzMzgWE1NAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiCwMFBDi4mDGnAAAAR0lEQVQI123JIRUAIQAE0eUEgghEIAV5SEEEIiAQMCnZh74RX+xKr6+bNE3ZBjxBV4KpAlt/NTjKsBRhKED1ePzkZeIwoeoCtokT7bjAVYwAAAAASUVORK5CYII=) no-repeat right 8px center;
+  background-size: 8px 10px;
+}
+
+.markdown-body kbd {
+  background-color: transparent;
+  color: $text-gray-dark;
+}

src/stylesheets/themes/hugo-terminal-orange/glow.scss

@@ -0,0 +1,18 @@
+@import "./variables";
+
+*:focus {
+  outline: none !important;
+  box-shadow: 0 0 0.2em 0.1em opacify($highlight, 0.1);
+  border-radius: 1px;
+}
+
+.tabnav-tab,
+.form-control,
+.form-select {
+  &.focus,
+  &:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 0.11em opacify($highlight, 0.1) !important;
+    outline-color: transparent;
+  }
+}

src/stylesheets/themes/hugo-terminal-orange/heading.scss

@@ -0,0 +1,5 @@
+@import "./variables";
+
+h1, h2, h3, h4, h5, h6 {
+  border-color: $line !important;
+}

src/stylesheets/themes/hugo-terminal-orange/index.scss

@@ -0,0 +1,24 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";
+@import "./glow.scss";
+@import "./heading.scss";
+@import "./comment.scss";
+@import "./selection.scss";
+@import "./placeholder.scss";
+@import "./combobox.scss";
+@import "./code.scss";
+
+body {
+  background-color: $bg-page;
+}
+
+iframe {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/stylesheets/themes/hugo-terminal-orange/placeholder.scss

@@ -0,0 +1,9 @@
+@import "./variables";
+
+@mixin placeholder {
+  ::placeholder { @content; }
+}
+
+@include placeholder {
+  color: $text-gray-dark;
+}

src/stylesheets/themes/hugo-terminal-orange/selection.scss

@@ -0,0 +1,14 @@
+@import "./variables";
+
+@mixin selection($element) {
+  #{$element}::selection { @content; }
+}
+
+@include selection("") {
+  background: $highlight;
+  color: $text-gray-dark !important;
+}
+
+@include selection("img") {
+  background: transparentize($highlight, 0.25);
+}

src/stylesheets/themes/hugo-terminal-orange/syntax.scss

@@ -0,0 +1 @@
+@import "github-syntax-dark/lib/github-dark";

src/stylesheets/themes/hugo-terminal-orange/utterances.scss

@@ -0,0 +1,11 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
+@import "./glow.scss";
+@import "./heading.scss";
+@import "./comment.scss";
+@import "./selection.scss";
+@import "./placeholder.scss";
+@import "./combobox.scss";
+@import "./code.scss";

src/stylesheets/themes/hugo-terminal-orange/variables.scss

@@ -0,0 +1,25 @@
+$orange: rgb(255,168,106);
+$orange-200: #ffd1ac;
+$gray-000: #181818;
+$gray-100: #2B303B;/*comment header bg*/
+$gray-200: #24292e;
+$gray-300: #4e4c4b;
+$gray-400: #586069;
+$gray-600: #bbbbbb;
+$gray-700: #959da5;
+$gray-900: #24292e;
+$bg-white: #222129; /*commnet bg*/
+$bg-gray: $gray-100; /*source code bg*/
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $gray-300; /*comment*/
+$border-gray-dark: $border-gray;
+$black-fade-15: rgba(#fff, 0.15);
+$black-fade-30: rgba(#fff, 0.3);
+$text-gray: #c9c9c9;
+$text-gray-dark: #f7f7f7;
+$text-blue: $orange;
+$bg-blue-light: #212021;
+$bg-page: #222129;
+
+$highlight: $orange;
+$line: #6f6e6e;

tslint.json

@@ -9,10 +9,9 @@
     "no-shadowed-variable": false,
     "no-string-literal": false,
     "trailing-comma": [false],
-    "member-ordering": [true, "fields-first"],
     "array-type": [true, "array"],
     "arrow-parens": false,
-    "max-classes-per-file": [false],
+    "max-classes-per-file": false,
     "prefer-for-of": false,
     "no-implicit-dependencies": false
   }