From 9d8c4b2791aa1f4f13e1deb5a7e63a779e4b7aa3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 6 Nov 2019 17:21:04 +0100 Subject: dark mode support --- public/assets/css/bucky.css | 36 +++++++++++++++++++++++++++++++++++- public/assets/js/util/color.js | 16 +++++++++++++++- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css index 349c35c..96bdabc 100644 --- a/public/assets/css/bucky.css +++ b/public/assets/css/bucky.css @@ -7,6 +7,7 @@ html { min-height: 100%; margin: 0; padding: 0; + margin-bottom: 150px; } body { min-width: 100%; @@ -17,7 +18,7 @@ body { font-size: 10px; font-family: Trebuchet MS, Helvetica, Arial, sans-serif; margin: 0; - padding: 20px 30px 200px 30px; + padding: 20px 30px 30px 30px; transition: opacity 100ms; } body.loading { @@ -1244,3 +1245,36 @@ audio { padding-right: 2px; } } +@media (prefers-color-scheme: dark) { + body { + background: #180808; + color: #f8f8f8; + } + button, input[type=submit] { + color: #f8f8f8; + border: 2px #eee solid; + padding: 2px; + margin: 3px; + background-color: #18202c; + text-transform: uppercase; + cursor: pointer; + } + .desktop button:hover, + .desktop input[type=submit] { + color: #fff; + background-color: #28303c; + } + hr { + border-color: #fff; + } + a.headline:link, + a.headline:visited { color: #eee; text-decoration: none; } + .desktop a.headline:hover { color: #fff; text-decoration: none; } + .ledger .row td:nth-child(1) a { color: #ddd; } + #threads .keyword td a { color: #ddd; text-decoration: none; } + .desktop #threads .keyword td a:hover { color: #fff; text-decoration: underline; } + #threads .keyword td b a { color: #ddd; } + .desktop #threads .keyword td b a:hover { color: #fff; } + .subtitle a { color: #eee; text-decoration: none; } + .desktop.subtitle a:hover { color: #fff; text-decoration: underline; } +} \ No newline at end of file diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js index 6d33a72..1de555d 100644 --- a/public/assets/js/util/color.js +++ b/public/assets/js/util/color.js @@ -65,6 +65,19 @@ var COLORS = { black: new Color(32,32,37), } +var DARK_COLORS = { + plain: new Color(24,10,10), + ivory: new Color(18,18,18), + pink: new Color(40,23,35), + red: new Color(40,24,23), + orange: new Color(40,32,23), + yellow: new Color(40,40,31), + green: new Color(33,40,31), + blue: new Color(24,26,40), + purple: new Color(35,31,40), + black: new Color(0,0,0), +} + function nighttime_quotient() { var q = -10; var date = new Date() @@ -111,7 +124,8 @@ function set_background_color_from_time(){ } function set_background_color(color_name){ color_name = color_name || "plain" - var color = COLORS[color_name] + var color_set = window.matchMedia('prefers-color-scheme: dark') ? DARK_COLORS : COLORS + var color = color_set[color_name] .clone() .mottleRGB(4,4,8) // .add(nighttime_quotient()) -- cgit v1.2.3-70-g09d2 From debd9489af50173bd314a3a9b0e5f14aa07543ea Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 7 Nov 2019 15:57:55 +0100 Subject: fonts --- public/assets/css/bucky.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css index 96bdabc..5d6a34a 100644 --- a/public/assets/css/bucky.css +++ b/public/assets/css/bucky.css @@ -1277,4 +1277,10 @@ audio { .desktop #threads .keyword td b a:hover { color: #fff; } .subtitle a { color: #eee; text-decoration: none; } .desktop.subtitle a:hover { color: #fff; text-decoration: underline; } + .new { color: #ffffff; font-weight: bold; } + .recent { color: #e0f8f8; } + .med { color: #d0e8e8; } + .old { color: #c24040; } + .older { color: #bd8484; } + .quiet { color: #878787; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 630ad90e863aef121f675720f2bca7980a2842b7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 7 Nov 2019 15:58:56 +0100 Subject: matches --- public/assets/js/util/color.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js index 1de555d..c76dbdf 100644 --- a/public/assets/js/util/color.js +++ b/public/assets/js/util/color.js @@ -124,7 +124,7 @@ function set_background_color_from_time(){ } function set_background_color(color_name){ color_name = color_name || "plain" - var color_set = window.matchMedia('prefers-color-scheme: dark') ? DARK_COLORS : COLORS + var color_set = window.matchMedia('prefers-color-scheme: dark').matches ? DARK_COLORS : COLORS var color = color_set[color_name] .clone() .mottleRGB(4,4,8) -- cgit v1.2.3-70-g09d2 From 47b2ce772c868d588a4bb2cb86ad94e53ed75553 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 7 Nov 2019 18:18:15 +0100 Subject: fix matchmedia again --- public/assets/js/util/color.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js index c76dbdf..ec21925 100644 --- a/public/assets/js/util/color.js +++ b/public/assets/js/util/color.js @@ -124,7 +124,7 @@ function set_background_color_from_time(){ } function set_background_color(color_name){ color_name = color_name || "plain" - var color_set = window.matchMedia('prefers-color-scheme: dark').matches ? DARK_COLORS : COLORS + var color_set = window.matchMedia('(prefers-color-scheme: dark)').matches ? DARK_COLORS : COLORS var color = color_set[color_name] .clone() .mottleRGB(4,4,8) -- cgit v1.2.3-70-g09d2 From 5a09f91887d50edef65757f7d7a86b0120a9e00e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 19 Nov 2019 18:19:31 +0100 Subject: more dark mode fixes --- .env-sample | 1 + bucky/app/site.js | 2 +- public/assets/css/bucky.css | 33 ++++++++++++++++++++++++++------- views/partials/hootbox.ejs | 2 +- 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/.env-sample b/.env-sample index f9e6bbc..69a98b6 100644 --- a/.env-sample +++ b/.env-sample @@ -9,4 +9,5 @@ S3_BUCKET= S3_PATH=/bucky SESSIONS_IN_MEMORY=yes NODE_ENV=development +MONGODB_URL=mongodb://127.0.0.1:27107/buckySessionDb diff --git a/bucky/app/site.js b/bucky/app/site.js index e266716..4272b24 100644 --- a/bucky/app/site.js +++ b/bucky/app/site.js @@ -46,7 +46,7 @@ site.init = function(){ } if (!process.env.SESSIONS_IN_MEMORY) { sessionSettings.store = new MongoStore({ - url: 'mongodb://127.0.0.1:28108/buckySessionDb' + url: process.env.MONGODB_URL || 'mongodb://127.0.0.1:27107/buckySessionDb' // type: 'mongodb', // host: 'localhost', // port: 27017, diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css index 5d6a34a..0ff7a8d 100644 --- a/public/assets/css/bucky.css +++ b/public/assets/css/bucky.css @@ -1250,7 +1250,7 @@ audio { background: #180808; color: #f8f8f8; } - button, input[type=submit] { + button:not(.hoot), input[type=submit] { color: #f8f8f8; border: 2px #eee solid; padding: 2px; @@ -1259,7 +1259,7 @@ audio { text-transform: uppercase; cursor: pointer; } - .desktop button:hover, + .desktop button:not(.hoot):hover, .desktop input[type=submit] { color: #fff; background-color: #28303c; @@ -1278,9 +1278,28 @@ audio { .subtitle a { color: #eee; text-decoration: none; } .desktop.subtitle a:hover { color: #fff; text-decoration: underline; } .new { color: #ffffff; font-weight: bold; } - .recent { color: #e0f8f8; } - .med { color: #d0e8e8; } - .old { color: #c24040; } - .older { color: #bd8484; } + .recent { color: #f8f0f0; } + .med { color: #e8e0e0; } + .old { color: #b8b0b0; } + .older { color: #a7a4a4; } .quiet { color: #878787; } -} \ No newline at end of file + .bluebox { box-shadow: 0 0px 1.5px rgba(238,238,255,1.0), 0 0px 1.5px rgba(238,238,255,1.0); } + .search_form input[type='text']:focus { + border-bottom-color: #888; + } + .search_form input[type='text']:invalid { + caret-color: #888; + } + #comment_form textarea.empty { + border-bottom-color: #fff; + } + #comment_form textarea.empty::placeholder { + color: #fff; + } + #search { + color: #eee; + } + #search b { + color: #fff; + } +} diff --git a/views/partials/hootbox.ejs b/views/partials/hootbox.ejs index fe0298b..826b89a 100644 --- a/views/partials/hootbox.ejs +++ b/views/partials/hootbox.ejs @@ -1,7 +1,7 @@
- +
-- cgit v1.2.3-70-g09d2 From 9855bb480c2f357989bddb05de44d76cb2438c6b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 21 Nov 2019 17:18:23 +0100 Subject: ledger colors --- public/assets/css/bucky.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css index 0ff7a8d..b2e8c97 100644 --- a/public/assets/css/bucky.css +++ b/public/assets/css/bucky.css @@ -1277,12 +1277,12 @@ audio { .desktop #threads .keyword td b a:hover { color: #fff; } .subtitle a { color: #eee; text-decoration: none; } .desktop.subtitle a:hover { color: #fff; text-decoration: underline; } - .new { color: #ffffff; font-weight: bold; } - .recent { color: #f8f0f0; } - .med { color: #e8e0e0; } - .old { color: #b8b0b0; } - .older { color: #a7a4a4; } - .quiet { color: #878787; } + .ledger .new { color: #ffffff; font-weight: bold; } + .ledger .recent { color: #f8f0f0; } + .ledger .med { color: #e8e0e0; } + .ledger .old { color: #b8b0b0; } + .ledger .older { color: #a7a4a4; } + .ledger .quiet { color: #878787; } .bluebox { box-shadow: 0 0px 1.5px rgba(238,238,255,1.0), 0 0px 1.5px rgba(238,238,255,1.0); } .search_form input[type='text']:focus { border-bottom-color: #888; -- cgit v1.2.3-70-g09d2 From bfec74a85f54daf2e0c3440d2f1fc543f435b06e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Feb 2020 12:25:46 +0100 Subject: fix dollar signs --- public/assets/js/lib/views/details/comments.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js index b1c86bb..1e8d127 100644 --- a/public/assets/js/lib/views/details/comments.js +++ b/public/assets/js/lib/views/details/comments.js @@ -14,8 +14,8 @@ var CommentsView = FormView.extend({ this.$formRow = this.$("#comment_form") }, - load: function(comments, thread){ -console.log(comments) + load: function(comments, thread) { + // console.log(comments) thread = this.thread = thread || this.thread if (thread.settings.hootbox) { comments @@ -35,13 +35,13 @@ console.log(comments) } }, - parse: function(comment){ + parse: function(comment) { if (! comment.comment.length) return $('') var datetime = verbose_date(comment.date, true) var t = this.template.replace(/{{image}}/g, profile_image(comment.username)) .replace(/{{username}}/g, comment.username) .replace(/{{id}}/g, comment.id) - .replace(/{{comment}}/g, tidy_urls(comment.comment)) + .replace(/{{comment}}/g, function(){ return tidy_urls(comment.comment) }) .replace(/{{date}}/g, datetime[0]) .replace(/{{time}}/g, datetime[1]) var $t = $(t) -- cgit v1.2.3-70-g09d2