commit 3637f1b7eb90d4641c60d2426564269275cc1932
parent 658702950cf8ddbdd7db31bd12c5ac3fe50fcd53
Author: oscarbenedito <oscar@oscarbenedito.com>
Date:   Sat, 21 Mar 2020 18:36:24 +0100

Composer mono font added and some JS style changes

Diffstat:

Massets/css/composer.scss | 10+++++-----


Massets/js/composer.js | 27++++++++++++++++-----------


Massets/js/main.js | 21+++++++--------------


Mlayouts/composer/single.html | 2+-


4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/assets/css/composer.scss b/assets/css/composer.scss
@@ -25,7 +25,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 --nav-color: hsl(0, 0%, 56%);
 }
 :root {
-  --font-family: serif;
+  --font-family: 'serif';
   --nav-height: 3em;
 
   @include lightcolors;
@@ -36,17 +36,18 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 .dark {
   @include darkcolors;
 }
+.mono {
+  --font-family: 'mono';
+}
 html {
   background-color: var(--bg-color);
-  transition-duration: .4s;
 }
 textarea {
   line-height: 1.4em;
-  font-family: 'var(--font-family)';
+  font-family: var(--font-family);
   padding: 1em calc((100% - 720px)/2);
   background-color: var(--bg-color);
   color: var(--text-color);
-  transition-duration: .4s;
   margin: 0;
   height: calc(100% - var(--nav-height));
   font-size: 1.2em;
@@ -67,7 +68,6 @@ nav {
   line-height: var(--nav-height);
   font-size: 1.2em;
   opacity: 0;
-  transition-duration: .4s;
   color: var(--nav-color);
   background-color: var(--bg-color);
   position: fixed;
diff --git a/assets/js/composer.js b/assets/js/composer.js
@@ -29,7 +29,7 @@ function updateWordCount() {
     words = content.replace(/\s+/gi, ' ').split(' ').length;
   }
   minutes = Math.floor(words/140);
-  $wordcount.textContent = words + " word" + (words != 1 ? "s" : "") + " · " + minutes + " minute" + (minutes != 1 ? "s" : "");
+  $wordcount.textContent = words + ' word' + (words != 1 ? 's' : '') + ' · ' + minutes + ' minute' + (minutes != 1 ? 's' : '');
 }
 function loadContents() {
   var content = localStorage.getItem(key);
@@ -73,18 +73,20 @@ var saveEvent = function(event) {
   }
 }
 function toggleTheme() {
-  if (localStorage && localStorage.getItem("theme") == "dark") {
-    localStorage.setItem("theme", "default");
+  if (localStorage && localStorage.getItem('theme') == 'dark') {
+    localStorage.removeItem('theme');
   } else if (localStorage) {
-    localStorage.setItem("theme", "dark");
+    localStorage.setItem('theme', 'dark');
   }
-  setTheme();
+  document.documentElement.classList.toggle('dark');
 }
-function setTheme() {
-  if (localStorage) {
-    var light = localStorage.getItem("theme") == "default";
-    document.documentElement.classList.toggle("dark");
+function toggleFont() {
+  if (localStorage && localStorage.getItem('font') == 'mono') {
+    localStorage.removeItem('font');
+  } else if (localStorage) {
+    localStorage.setItem('font', 'mono');
   }
+  document.documentElement.classList.toggle('mono');
 }
 
 key = (new URLSearchParams(window.location.search)).get('key');
@@ -92,8 +94,11 @@ if (key == '' || key == null) {
   key = 'null';
 }
 key = 'k-' + key;
-if (localStorage && localStorage.getItem("theme") == "dark") {
-  setTheme();
+if (localStorage && localStorage.getItem('theme') == 'dark') {
+  document.documentElement.classList.toggle('dark');
+}
+if (localStorage && localStorage.getItem('font') == 'mono') {
+  document.documentElement.classList.toggle('mono');
 }
 $composer.addEventListener('keyup input', resetTimer);
 $composer.addEventListener('keydown', resetTimer);
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -16,25 +16,18 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 'use strict';
 function toggleTheme() {
-  if (localStorage && localStorage.getItem("theme") === "dark") {
-    localStorage.setItem("theme", "default");
+  if (localStorage && localStorage.getItem('theme') === 'dark') {
+    localStorage.removeItem('theme');
   } else if (localStorage) {
-    localStorage.setItem("theme", "dark");
+    localStorage.setItem('theme', 'dark');
   }
-  setTheme();
+  document.body.classList.toggle('dark');
 }
 
-function setTheme() {
-  if (localStorage) {
-    var light = localStorage.getItem("theme") === "default";
-    document.body.classList.toggle("dark");
-  }
-}
-
-if (localStorage && localStorage.getItem("theme") === "dark") {
-  setTheme();
+if (localStorage && localStorage.getItem('theme') === 'dark') {
+  document.body.classList.toggle('dark');
 }
 
 function openMenu() {
-  document.getElementById("navbar").classList.toggle("show");
+  document.getElementById('navbar').classList.toggle('show');
 }
diff --git a/layouts/composer/single.html b/layouts/composer/single.html
@@ -7,7 +7,7 @@
   </head>
   <body>
     <nav>
-      <span id="word-count">0 words &middot; 0 minutes</span> &middot; <a onclick="toggleTheme()">Toggle theme</a>
+      <span id="word-count">0 words &middot; 0 minutes</span> &middot; <a onclick="toggleTheme()">Toggle theme</a> &middot; <a onclick="toggleFont()">Toggle font</a>
     </nav>
     <textarea id="composer" placeholder="Start writing..." autofocus></textarea>
     {{- $js := resources.Get "js/composer.js" | minify | fingerprint }}