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 }}