Update theme to SASS

.github/workflows/deploy-production.yaml

@@ -27,5 +27,5 @@ jobs:
             sudo git config pull.ff only
             sudo git reset --hard
             sudo git pull
-            sudo ${TMP}/hugo -d /var/www/dimension.sh --gc -b https://dimension.sh/
+            sudo ${TMP}/hugo --gc --minify --cleanDestinationDir --logLevel INFO -d /var/www/dimension.sh -b https://dimension.sh/
             rm -rf ${TMP}

Makefile

@@ -1,2 +1,15 @@
-serve: 
-	hugo serve -D --gc -w -F
+.PHONY: serve
+serve:
+	hugo serve -D --gc -w -F --disableFastRender --printUnusedTemplates --printPathWarnings --bind 0.0.0.0
+
+.PHONY: build
+build:
+	HUGO_ENVIRONMENT=production HUGO_ENV=production hugo --gc --minify --cleanDestinationDir --logLevel INFO
+
+.PHONY: themedev
+themedev:
+	hugo serve -D --gc -w -F --disableFastRender --bind 0.0.0.0
+
+.PHONY: clean
+clean:
+	rm -rf public resources

config.toml

@@ -4,7 +4,7 @@ title = "dimension.sh"
 theme = "dimension"
 
 [params]
-style = "nord"
+style = "forest"
 
 [[params.styles]]
 name = "greenscreen"
@@ -21,6 +21,15 @@ shortcode = "ND"
 [[params.styles]]
 name = "purple"
 shortcode = "PU"
+[[params.styles]]
+name = "tuna"
+shortcode = "TU"
+[[params.styles]]
+name = "forest"
+shortcode = "FO"
+[[params.styles]]
+name = "twine"
+shortcode = "TW"
 
 [[params.links]]
 name = "HOME"

themes/dimension/assets/scss/main.scss

@@ -0,0 +1,180 @@
+:root {
+    --logo: var(--link);
+    --link-shadow: var(--bar);
+    --logo-shadow: var(--logo);
+}
+
+html {
+    font-family: monospace;
+    font-size: 1.3em;
+    line-height: 1.2em;
+    background-color: var(--background);
+    color: var(--primary);
+}
+
+div#logo {
+    text-align: center;
+
+    pre {
+        display: inline-block;
+        text-align: left;
+        line-height: 1.1em;
+        margin-bottom: 0;
+        color: var(--logo);
+        text-shadow: 0 0 20px var(--logo-shadow), 0 0 30px var(--logo-shadow), 0 0 40px var(--logo-shadow), 0 0 55px var(--logo-shadow), 0 0 75px var(--logo-shadow);
+    }
+}
+
+div.bar {
+    padding: 5px;
+    padding-left: 15px;
+    border-radius: 3px;
+}
+
+div#footer {
+    margin-top: 10px;
+}
+
+h1 {
+    text-transform: uppercase;
+}
+
+hr {
+    border: 0;
+    height: 2px;
+}
+
+div#main {
+    width: 100ch;
+    margin: 0 auto;
+}
+
+div#body {
+    padding: 10px pre {
+        padding: 10px;
+        border-radius: 5px;
+    }
+}
+
+li {
+    position: relative;
+    list-style: none;
+}
+
+li:before {
+    content: "*";
+    position: absolute;
+    left: -1.25em;
+}
+
+ul.user-list {
+    display: flex;
+    flex-flow: row wrap;
+    list-style: none;
+    padding: 0;
+
+    li {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 0 0 15%;
+    }
+
+    li:before {
+        content: "";
+    }
+}
+
+input,
+textarea {
+    font-family: input-mono, monospace;
+    font-size: 0.75em;
+    width: 100%;
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+}
+
+table {
+    text-align: left;
+    width: 100%;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+div.news h3 {
+    margin-bottom: 1px;
+}
+
+/* Homepage Boxes */
+div.container {
+    display: flex;
+}
+
+div#home-left {
+    width: 80%;
+    margin-right: 10px;
+}
+
+/* Patchlog */
+div#patchlog {
+    font-size: 0.75em;
+
+    p {
+        margin-top: 0px;
+    }
+}
+
+
+
+b,
+strong,
+a,
+a:link,
+a:visited,
+a:active,
+h1,
+h2,
+h3,
+h4,
+h5,
+label {
+    color: var(--link);
+}
+
+
+
+a:hover {
+    color: var(--primary);
+}
+
+hr,
+div.bar {
+    background: var(--bar);
+    color: var(--primary);
+    box-shadow: 2px 2px var(--shadow);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+th,
+label {
+    text-shadow: 2px 2px var(--link-shadow);
+}
+
+input,
+textarea {
+    background-color: var(--background);
+    color: var(--primary);
+    border: 1px solid var(--bar);
+}
+
+table,
+div#body pre {
+    border: 1px solid var(--bar);
+}
+
+@import 'themes';

themes/dimension/assets/scss/themes.scss

@@ -0,0 +1,107 @@
+html[data-theme='dracula'] {
+    --background: #282936;
+    --shadow: #3a3c4e;
+    --bar: #4d4f68;
+    --primary: #e9e9f4;
+    --link: #00f769;
+    --logo: var(--link);
+}
+
+html[data-theme='greenscreen'] {
+    --background: #001100;
+    --shadow: #003300;
+    --bar: #005500;
+    --link: #00ff00;
+    --primary: #00bb00;
+}
+
+html[data-theme='nord'] {
+    --background: #2E3440;
+    --shadow: #3B4252;
+    --bar: #434C5E;
+    --primary: #E5E9F0;
+    --link: #8FBCBB;
+}
+
+html[data-theme='palenight'] {
+    --background: #292D3E;
+    --shadow: #444267;
+    --bar: #32374D;
+    --logo: #676E95;
+    --primary: #959DCB;
+    --link: #FFFFFF;
+}
+
+html[data-theme='purple'] {
+    --background: #001100;
+    --primary: #8575fb;
+    --link: #a296ff;
+    --shadow: #1a1153;
+    --bar: #3c3573;
+}
+
+/* New Themes */
+html[data-theme='tuna'] {
+    $back: #35333B;
+    $for: #06B7AA;
+
+    --background: #{$back};
+    --primary: #{$for};
+    --link: #{scale-color($for, $lightness: 25%)};
+    --bar: #{scale-color($for, $lightness: -30%)};
+    --shadow: #{scale-color($for, $lightness: -50%)};
+    --link-shadow: #{scale-color($back, $lightness: 25%)};
+    --logo-shadow: #{scale-color($for, $lightness: -25%)};
+}
+
+html[data-theme='twine'] {
+    $back: #371F03;
+    $for: #C9945B;
+
+    --background: #{$back};
+    --primary: #{$for};
+    --link: #{scale-color($for, $lightness: 25%)};
+    --bar: #{scale-color($for, $lightness: -30%)};
+    --shadow: #{scale-color($for, $lightness: -50%)};
+    --link-shadow: #{scale-color($back, $lightness: 25%)};
+    --logo-shadow: #{scale-color($for, $lightness: -25%)};
+}
+
+html[data-theme='cerulean'] {
+    $for: #22AAD3;
+    $back: #0B2A4B;
+
+    --background: #{$back};
+    --primary: #{$for};
+    --link: #{scale-color($for, $lightness: 25%)};
+    --bar: #{scale-color($for, $lightness: -30%)};
+    --shadow: #{scale-color($for, $lightness: -50%)};
+    --link-shadow: #{scale-color($back, $lightness: 25%)};
+    --logo-shadow: #{scale-color($for, $lightness: -25%)};
+}
+
+html[data-theme='razz'] {
+    $for: #FA1B67;
+    $back: #0E020E;
+
+    --background: #{$back};
+    --primary: #{$for};
+    --link: #{scale-color($for, $lightness: 25%)};
+    --bar: #{scale-color($for, $lightness: -30%)};
+    --shadow: #{scale-color($for, $lightness: -50%)};
+    --link-shadow: #{scale-color($back, $lightness: 25%)};
+    --logo-shadow: #{scale-color($for, $lightness: -25%)};
+}
+
+html[data-theme='forest'] {
+    $for: #178D50;
+    $back: #090203;
+
+    --background: #{$back};
+    --primary: #{$for};
+    --link: #{scale-color($for, $lightness: 25%)};
+    --bar: #{scale-color($for, $lightness: -30%)};
+    --shadow: #{scale-color($for, $lightness: -50%)};
+    --link-shadow: var(--shadow);
+    --logo-shadow: #{scale-color($for, $lightness: 5%)};
+}

themes/dimension/layouts/_default/baseof.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html data-theme="greenscreen" lang="en">
 <html>
     {{- partial "header.html" . -}}
     <body>

themes/dimension/layouts/partials/css.html

@@ -0,0 +1,16 @@
+{{ $opts := dict
+"transpiler" "libsass"
+"targetPath" "css/dimension.css"
+"enableSourceMap" (not hugo.IsProduction)
+}}
+{{- with resources.Get "scss/main.scss" }}
+{{- if eq hugo.Environment "development" }}
+{{- with . | toCSS $opts }}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- end }}
+{{- else }}
+{{- with . | toCSS $opts | minify | fingerprint }}
+<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{- end }}
+{{- end }}
+{{- end }}

themes/dimension/layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <div class="bar" id="footer">
   <small>
-    Themes: {{- range .Site.Params.styles -}}<a href="#" onclick="change_theme('{{ .name }}');">{{ .shortcode }}</a>&nbsp;{{ end }}
+    Themes: {{ range .Site.Params.styles -}}<a href="#" onclick="change_theme('{{ .name }}');">{{ .shortcode }}</a>&nbsp;{{ end }}
   </small>
 </div>

themes/dimension/layouts/partials/header.html

@@ -23,7 +23,5 @@
 	{{ end -}}
 
 	<script src="{{ .Site.BaseURL }}js/theme.js"></script>
-	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/site.css" />
-	<link rel="stylesheet" type="text/css" id="theme" href="{{ .Site.BaseURL }}css/{{ .Site.Params.style }}.css" />
-	<link rel="stylesheet" href="https://use.typekit.net/njb8bgs.css">
+	{{ partialCached "css.html" . }}
 </head>