diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..aa225de
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,2 @@
+css:
+ sassc _includes/form.scss > _includes/form.css
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
index f3c06a0..ee492b0 100644
--- a/TODO.md
+++ b/TODO.md
@@ -10,12 +10,12 @@ title: Roadmap
### Planned
- [ ] Check color accessibility for viewed-grey-color.
-- [ ] Create a /settings page
+- [x] Create a /settings page
- [ ] Show syndicated articles in home page (default OFF)
- [ ] Pick sections for home-page
- - [ ] Highlight words
+ - [x] Highlight words
- [ ] Font adjustments
- - [ ] Clear "read articles"
+ - [x] Clear "read articles"
- [ ] **Blocked** Use upstream as canonical page if it ever becomes stable and fast
- [ ] **Stable**: Old links stop working on upstream. We break them intentionally, since this is a "daily news" site, but upstream ought not to break. See [this link](https://app.beatrootnews.com/#article-5773) for eg.
- [ ] **Fast**: Current upstream is too slow. See [this report](https://pagespeed.web.dev/analysis/https-app-beatrootnews-com/scbmz1pf5r?form_factor=mobile).
diff --git a/_includes/_defs.scss b/_includes/_defs.scss
new file mode 100644
index 0000000..d3258c3
--- /dev/null
+++ b/_includes/_defs.scss
@@ -0,0 +1,41 @@
+// The MIT License (MIT)
+//
+// Copyright (c) 2015-2023 Yegor Bugayenko
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// sizes
+$em: (18 / 16) * 1rem;
+$spacing: 18px;
+
+// fonts
+$sans-serif: system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// colors
+$beatroot: #660033;
+$background: #eee8d5;
+$white: white;
+%sans-serif {
+ font-family: $sans-serif;
+ font-size: $em;
+ font-stretch: normal;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.65 * $em;
+}
\ No newline at end of file
diff --git a/_includes/app.js b/_includes/app.js
index 66a7e94..b82bec5 100644
--- a/_includes/app.js
+++ b/_includes/app.js
@@ -43,14 +43,31 @@ document.addEventListener('DOMContentLoaded', function () {
// Set highlight words
if(hw = document.getElementById('highlight-words')) {
- hw.value = (JSON.parse(localStorage.getItem("highlightWords"))||[]).join("\n");
+ hw.value = (JSON.parse(localStorage.getItem("highlightWords"))||[]).join(",");
+
+ // Dealing with Textarea Height
+ function calcHeight(value) {
+ let numberOfLineBreaks = (value.match(/\n/g) || []).length;
+ let newHeight = Math.max(50,50+numberOfLineBreaks * 20);
+ return newHeight;
+ }
+
+ hw.style.height = calcHeight(hw.value) + "px";
+ hw.addEventListener("keyup", () => {
+ hw.style.height = calcHeight(hw.value) + "px";
+ });
+
}
// Save settings
if(document.getElementById('btn-settings-save')) {
document.getElementById('btn-settings-save').addEventListener('click', function (e) {
- val = document.getElementById('highlight-words').value.split("\n").map(function(x){return x.trim()});
+ val = document.getElementById('highlight-words').value.split(",").map(function(x){return x.trim()});
localStorage.setItem('highlightWords', JSON.stringify(val));
+ // Flash save
+ document.getElementById('btn-settings-save').value='Saved';
+ setTimeout(function(){document.getElementById('btn-settings-save').value='Save';}, 500);
+ // Don't refresh page
return false;
});
}
@@ -66,4 +83,17 @@ document.addEventListener('DOMContentLoaded', function () {
markInstance.mark(JSON.parse(words), {});
}
}
+
+ // Reset read articles
+ if(reset = document.getElementById('btn-settings-reset')){
+ reset.addEventListener('click', function (e) {
+ localStorage.setItem('eventHashes', JSON.stringify([]));
+ // Flash reset
+ e.target.value='All articles marked unread';
+ e.target.disabled=true;
+ setTimeout(function(){e.target.value='Reset';e.target.disabled=false;}, 500);
+ // Don't refresh page
+ return false;
+ });
+ }
});
diff --git a/_includes/form.css b/_includes/form.css
new file mode 100644
index 0000000..e391ae6
--- /dev/null
+++ b/_includes/form.css
@@ -0,0 +1,117 @@
+form option {
+ font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 1.125rem;
+ font-stretch: normal;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.85625rem; }
+
+form fieldset label,
+form fieldset legend {
+ display: block; }
+
+form fieldset legend {
+ margin: 1.125rem 0; }
+
+form input,
+form textarea,
+form select,
+form button {
+ display: inline-block;
+ padding: 0.61875rem; }
+ form input + label,
+ form input + input[type="checkbox"],
+ form input + input[type="radio"],
+ form textarea + label,
+ form textarea + input[type="checkbox"],
+ form textarea + input[type="radio"],
+ form select + label,
+ form select + input[type="checkbox"],
+ form select + input[type="radio"],
+ form button + label,
+ form button + input[type="checkbox"],
+ form button + input[type="radio"] {
+ page-break-before: always; }
+
+form input,
+form select,
+form label {
+ margin-right: 0.225rem; }
+
+form textarea {
+ min-height: 5.625rem;
+ min-width: 22.5rem; }
+
+form label {
+ display: inline-block;
+ margin-bottom: 0.7875rem; }
+ form label + * {
+ page-break-before: always; }
+ form label > input {
+ margin-bottom: 0; }
+
+form input[type="submit"],
+form input[type="reset"],
+form button {
+ background: #660033;
+ color: white;
+ cursor: pointer;
+ display: inline;
+ margin-bottom: 1.125rem;
+ margin-right: 0.45rem;
+ padding: 0.4078125rem 1.4625rem;
+ text-align: center; }
+ form input[type="submit"]:hover,
+ form input[type="reset"]:hover,
+ form button:hover {
+ background: #d9d9d9; }
+
+form input[type="submit"],
+form button[type="submit"] {
+ background: #660033;
+ color: white; }
+ form input[type="submit"]:hover,
+ form button[type="submit"]:hover {
+ background: #1a000d;
+ color: #bfbfbf; }
+
+form input,
+form select,
+form textarea {
+ margin-bottom: 1.125rem; }
+
+form input[type="text"],
+form input[type="password"],
+form input[type="email"],
+form input[type="url"],
+form input[type="phone"],
+form input[type="tel"],
+form input[type="number"],
+form input[type="datetime"],
+form input[type="date"],
+form input[type="month"],
+form input[type="week"],
+form input[type="color"],
+form input[type="time"],
+form input[type="search"],
+form input[type="range"],
+form input[type="file"],
+form input[type="datetime-local"],
+form select,
+form textarea {
+ border: 1px solid #660033;
+ padding: 0.3375rem 0.39375rem; }
+
+form input[type="checkbox"],
+form input[type="radio"] {
+ flex-grow: 0;
+ height: 1.85625rem;
+ margin-left: 0;
+ margin-right: 9px;
+ vertical-align: middle; }
+ form input[type="checkbox"] + label,
+ form input[type="radio"] + label {
+ page-break-before: avoid; }
+
+form select[multiple] {
+ min-width: 270px; }
diff --git a/_includes/form.scss b/_includes/form.scss
new file mode 100644
index 0000000..aa353db
--- /dev/null
+++ b/_includes/form.scss
@@ -0,0 +1,133 @@
+// Generated Automatically from form.scss
+// Run sassc form.scss > form.css
+@import 'defs';
+
+form{
+ fieldset {
+ label,
+ legend {
+ display: block;
+ }
+
+ legend {
+ margin: $em 0;
+ }
+ }
+
+ input,
+ textarea,
+ select,
+ button {
+ display: inline-block;
+ padding: .55 * $em;
+
+ + label,
+ + input[type="checkbox"],
+ + input[type="radio"] {
+ page-break-before: always;
+ }
+ }
+
+ input,
+ select,
+ label {
+ margin-right: .2 * $em;
+ }
+
+ option {
+ @extend %sans-serif;
+ }
+
+ textarea {
+ min-height: 5 * $em;
+ min-width: 20 * $em;
+ }
+
+ label {
+ display: inline-block;
+ margin-bottom: .7 * $em;
+
+ + * {
+ page-break-before: always;
+ }
+
+ > input {
+ margin-bottom: 0;
+ }
+ }
+
+ input[type="submit"],
+ input[type="reset"],
+ button {
+ background: $beatroot;
+ color: white;
+ cursor: pointer;
+ display: inline;
+ margin-bottom: $em;
+ margin-right: .4 * $em;
+ padding: .3625 * $em 1.3 * $em;
+ text-align: center;
+
+ &:hover {
+ background: darken($white, 15);
+ }
+
+ }
+
+ input[type="submit"],
+ button[type="submit"] {
+ background: $beatroot;
+ color: $white;
+
+ &:hover {
+ background: darken($beatroot, 15);
+ color: darken($white, 25);
+ }
+ }
+
+ input,
+ select,
+ textarea {
+ margin-bottom: $em;
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ input[type="url"],
+ input[type="phone"],
+ input[type="tel"],
+ input[type="number"],
+ input[type="datetime"],
+ input[type="date"],
+ input[type="month"],
+ input[type="week"],
+ input[type="color"],
+ input[type="time"],
+ input[type="search"],
+ input[type="range"],
+ input[type="file"],
+ input[type="datetime-local"],
+ select,
+ textarea {
+ border: 1px solid $beatroot;
+ padding: .3 * $em .35 * $em;
+ }
+
+ input[type="checkbox"],
+ input[type="radio"] {
+ flex-grow: 0;
+ height: 1.65 * $em;
+ margin-left: 0;
+ margin-right: .5 * $spacing;
+ vertical-align: middle;
+
+ + label {
+ page-break-before: avoid;
+ }
+ }
+
+ select[multiple] {
+ min-width: 15 * $spacing;
+ }
+}
\ No newline at end of file
diff --git a/settings.html b/settings.html
index 4d46494..f203fd9 100644
--- a/settings.html
+++ b/settings.html
@@ -6,11 +6,16 @@ permalink: /settings/
# https://github.com/jekyll/jekyll-seo-tag/issues/100
noindex: true
---
-
+
+
\ No newline at end of file