diff options
| -rw-r--r-- | public/themes/gray.css | 46 | ||||
| -rw-r--r-- | public/themes/pink.css | 35 | ||||
| -rw-r--r-- | public/themes/steel.css | 35 | ||||
| -rw-r--r-- | public/themes/tan.css | 35 | ||||
| -rw-r--r-- | public/themes/yellow.css | 46 | ||||
| -rw-r--r-- | schema.sql | 2 | ||||
| -rw-r--r-- | server.js | 2 | ||||
| -rw-r--r-- | views/head.pug | 7 | ||||
| -rw-r--r-- | views/header.pug | 5 |
9 files changed, 210 insertions, 3 deletions
diff --git a/public/themes/gray.css b/public/themes/gray.css new file mode 100644 index 0000000..1382d81 --- /dev/null +++ b/public/themes/gray.css @@ -0,0 +1,46 @@ +/* light gray */ +:root { + --color-head: hsl(0, 0%, 85%); + --color-body: hsl(0, 0%, 95%); + --color-text: hsl(0, 0%, 100%); + + --color-post-head: hsl(0, 0%, 85%); + --color-post-body: hsl(0, 0%, 98%); + + --color-table-head: hsl(0, 0%, 85%); + --color-table-foot: hsl(0, 0%, 90%); + --color-table-body: hsl(0, 0%, 98%); + --color-table-stripe: hsl(0, 0%, 96%); + + --color-focus: hsl(210, 40%, 65%); + + --color-blue: hsl(240, 100%, 50%); + --color-red: hsl(0, 100%, 35%); + --color-green: hsl(120, 100%, 30%); + + --color-accent: hsl(0, 60%, 40%); +} + +/* dark gray */ +@media (prefers-color-scheme: dark) { +:root { + --color-head: hsl(0, 0%, 75%); + --color-body: hsl(0, 0%, 85%); + --color-text: hsl(0, 0%, 95%); + + --color-post-head: hsl(0, 0%, 75%); + --color-post-body: hsl(0, 0%, 90%); + + --color-table-head: hsl(0, 0%, 75%); + --color-table-foot: hsl(0, 0%, 80%); + --color-table-body: hsl(0, 0%, 90%); + --color-table-stripe: hsl(0, 0%, 88%); + + --color-focus: hsl(210, 40%, 60%); + + --color-blue: hsl(240, 100%, 40%); + --color-red: hsl(0, 100%, 35%); + --color-green: hsl(120, 100%, 30%); + + --color-accent: hsl(0, 60%, 35%); +}} diff --git a/public/themes/pink.css b/public/themes/pink.css new file mode 100644 index 0000000..9f57650 --- /dev/null +++ b/public/themes/pink.css @@ -0,0 +1,35 @@ +/* light tan */ +:root { + --color-head: hsl(5, 35%, 85%); + --color-body: hsl(5, 35%, 95%); + --color-text: hsl(5, 35%, 100%); + + --color-post-head: hsl(5, 35%, 85%); + --color-post-body: hsl(5, 35%, 98%); + + --color-table-head: hsl(5, 35%, 85%); + --color-table-foot: hsl(5, 35%, 90%); + --color-table-body: hsl(5, 35%, 98%); + --color-table-stripe: hsl(5, 20%, 95%); + + --color-accent: hsl(340, 60%, 40%); +} + +/* dark tan */ +@media (prefers-color-scheme: dark) { +:root { + --color-head: hsl(5, 35%, 75%); + --color-body: hsl(5, 35%, 85%); + --color-text: hsl(5, 35%, 95%); + + --color-post-head: hsl(5, 35%, 75%); + --color-post-body: hsl(5, 35%, 90%); + + --color-table-head: hsl(5, 35%, 75%); + --color-table-foot: hsl(5, 35%, 80%); + --color-table-body: hsl(5, 35%, 90%); + --color-table-stripe: hsl(5, 35%, 87%); + + --color-accent: hsl(340, 60%, 35%); +}} + diff --git a/public/themes/steel.css b/public/themes/steel.css new file mode 100644 index 0000000..d491583 --- /dev/null +++ b/public/themes/steel.css @@ -0,0 +1,35 @@ +/* light tan */ +:root { + --color-head: hsl(220, 15%, 85%); + --color-body: hsl(220, 15%, 95%); + --color-text: hsl(220, 15%, 100%); + + --color-post-head: hsl(220, 15%, 85%); + --color-post-body: hsl(220, 15%, 98%); + + --color-table-head: hsl(220, 15%, 85%); + --color-table-foot: hsl(220, 15%, 90%); + --color-table-body: hsl(220, 15%, 98%); + --color-table-stripe: hsl(220, 20%, 95%); + + --color-accent: hsl(340, 60%, 40%); +} + +/* dark tan */ +@media (prefers-color-scheme: dark) { +:root { + --color-head: hsl(220, 15%, 75%); + --color-body: hsl(220, 15%, 85%); + --color-text: hsl(220, 15%, 95%); + + --color-post-head: hsl(220, 15%, 75%); + --color-post-body: hsl(220, 15%, 90%); + + --color-table-head: hsl(220, 15%, 75%); + --color-table-foot: hsl(220, 15%, 80%); + --color-table-body: hsl(220, 15%, 90%); + --color-table-stripe: hsl(220, 15%, 87%); + + --color-accent: hsl(340, 60%, 35%); +}} + diff --git a/public/themes/tan.css b/public/themes/tan.css new file mode 100644 index 0000000..6a06c49 --- /dev/null +++ b/public/themes/tan.css @@ -0,0 +1,35 @@ +/* light tan */ +:root { + --color-head: hsl(35, 15%, 85%); + --color-body: hsl(35, 15%, 95%); + --color-text: hsl(35, 15%, 100%); + + --color-post-head: hsl(35, 15%, 85%); + --color-post-body: hsl(35, 15%, 98%); + + --color-table-head: hsl(35, 15%, 85%); + --color-table-foot: hsl(35, 15%, 90%); + --color-table-body: hsl(35, 15%, 98%); + --color-table-stripe: hsl(35, 20%, 95%); + + --color-accent: hsl(340, 60%, 40%); +} + +/* dark tan */ +@media (prefers-color-scheme: dark) { +:root { + --color-head: hsl(35, 15%, 75%); + --color-body: hsl(35, 15%, 85%); + --color-text: hsl(35, 15%, 95%); + + --color-post-head: hsl(35, 15%, 75%); + --color-post-body: hsl(35, 15%, 90%); + + --color-table-head: hsl(35, 15%, 75%); + --color-table-foot: hsl(35, 15%, 80%); + --color-table-body: hsl(35, 15%, 90%); + --color-table-stripe: hsl(35, 15%, 87%); + + --color-accent: hsl(340, 60%, 35%); +}} + diff --git a/public/themes/yellow.css b/public/themes/yellow.css new file mode 100644 index 0000000..62a7603 --- /dev/null +++ b/public/themes/yellow.css @@ -0,0 +1,46 @@ +/* light yellow */ +:root { + --color-head: hsl(48, 50%, 85%); + --color-body: hsl(48, 50%, 95%); + --color-text: hsl(48, 50%, 100%); + + --color-post-head: hsl(48, 50%, 85%); + --color-post-body: hsl(48, 50%, 98%); + + --color-table-head: hsl(48, 50%, 85%); + --color-table-foot: hsl(48, 50%, 90%); + --color-table-body: hsl(48, 50%, 98%); + --color-table-stripe: hsl(48, 50%, 96%); + + --color-focus: hsl(210, 40%, 65%); + + --color-blue: hsl(240, 100%, 50%); + --color-red: hsl(0, 100%, 35%); + --color-green: hsl(120, 100%, 30%); + + --color-accent: hsl(0, 60%, 40%); +} + +/* dark yellow */ +@media (prefers-color-scheme: dark) { +:root { + --color-head: hsl(0, 0%, 75%); + --color-body: hsl(0, 0%, 85%); + --color-text: hsl(0, 0%, 95%); + + --color-post-head: hsl(0, 0%, 75%); + --color-post-body: hsl(0, 0%, 90%); + + --color-table-head: hsl(0, 0%, 75%); + --color-table-foot: hsl(0, 0%, 80%); + --color-table-body: hsl(0, 0%, 90%); + --color-table-stripe: hsl(0, 0%, 88%); + + --color-focus: hsl(210, 40%, 60%); + + --color-blue: hsl(240, 100%, 40%); + --color-red: hsl(0, 100%, 35%); + --color-green: hsl(120, 100%, 30%); + + --color-accent: hsl(0, 60%, 35%); +}} @@ -35,7 +35,7 @@ create table if not exists users ( insert or ignore into users (user_id, name, mail, ctime) - values (0, 'Deleted', 'deleted@rally-the-troops.com', null) + values (0, 'Deleted', 'deleted@nowhere', null) ; create table if not exists user_last_seen ( @@ -167,6 +167,8 @@ let app = express() app.locals.SITE_NAME = SITE_NAME app.locals.SITE_URL = SITE_URL +app.locals.SITE_THEME = process.env.SITE_THEME +app.locals.SITE_ICON = process.env.SITE_ICON app.locals.ENABLE_MAIL = !!mailer app.locals.ENABLE_WEBHOOKS = !!WEBHOOKS app.locals.ENABLE_FORUM = process.env.FORUM | 0 diff --git a/views/head.pug b/views/head.pug index b10c3ce..8b3f25b 100644 --- a/views/head.pug +++ b/views/head.pug @@ -4,6 +4,8 @@ meta(name="viewport" content="width=device-width,initial-scale=1") link(rel="icon" type="image/svg+xml" href="/favicon.svg") link(rel="stylesheet" href="/fonts/fonts.css") link(rel="stylesheet" href="/style.css") +if SITE_THEME + link(rel="stylesheet" href="/themes/"+SITE_THEME) mixin social(title,description,game) meta(property="og:title" content=title) @@ -11,7 +13,10 @@ mixin social(title,description,game) if game meta(property="og:image" content=SITE_URL+"/"+game+"/cover.2x.jpg") else - meta(property="og:image" content=SITE_URL+"/images/rally-the-troops.png") + if SITE_ICON + meta(property="og:image" content=SITE_URL+"/images/"+SITE_ICON) + else + meta(property="og:image" content=SITE_URL+"/images/rally-the-troops.png") meta(property="og:description" content=description) mixin gamecover(title_id) diff --git a/views/header.pug b/views/header.pug index 454c35a..d386969 100644 --- a/views/header.pug +++ b/views/header.pug @@ -1,6 +1,9 @@ header a(href="/") - img(src="/images/rally-the-troops.svg" width=48 height=48) + if SITE_ICON + img(src="/images/"+SITE_ICON width=48 height=48) + else + img(src="/images/rally-the-troops.svg" width=48 height=48) nav a(href="/about") About if user |