summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.env-sample1
-rw-r--r--bucky/app/site.js2
-rw-r--r--public/assets/css/bucky.css61
-rw-r--r--public/assets/js/lib/views/details/comments.js8
-rw-r--r--public/assets/js/util/color.js16
-rw-r--r--views/partials/hootbox.ejs2
6 files changed, 82 insertions, 8 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 349c35c..b2e8c97 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,61 @@ audio {
padding-right: 2px;
}
}
+@media (prefers-color-scheme: dark) {
+ body {
+ background: #180808;
+ color: #f8f8f8;
+ }
+ button:not(.hoot), input[type=submit] {
+ color: #f8f8f8;
+ border: 2px #eee solid;
+ padding: 2px;
+ margin: 3px;
+ background-color: #18202c;
+ text-transform: uppercase;
+ cursor: pointer;
+ }
+ .desktop button:not(.hoot):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; }
+ .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;
+ }
+ .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/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)
diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js
index 6d33a72..ec21925 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)').matches ? DARK_COLORS : COLORS
+ var color = color_set[color_name]
.clone()
.mottleRGB(4,4,8)
// .add(nighttime_quotient())
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 @@
<div class="bluebox" id="hootbox">
<form autocomplete="off">
<input type="text" name="comment" autocomplete="off">
- <button><%= hoot_text %></button>
+ <button class="hoot"><%= hoot_text %></button>
<div class="errors"></div>
</form>
<table id="hoots">