From 00e202978d530523fd42b67c57afcf02411e9adc Mon Sep 17 00:00:00 2001 From: monty Date: Tue, 19 Nov 2019 07:52:41 +0100 Subject: [PATCH] dark theme stuff owo --- assets/css/main.css | 204 +++++++++++++++++++++++++++++----------- assets/css/main.css.map | 2 +- assets/css/main.scss | 69 ++++++++++---- assets/js/main.js | 30 ++++++ routes/lore.js | 11 +++ server.js | 97 ++++++++++--------- views/index.hbs | 2 +- 7 files changed, 294 insertions(+), 121 deletions(-) create mode 100644 routes/lore.js diff --git a/assets/css/main.css b/assets/css/main.css index 0e7c18f..d848941 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,74 +1,29 @@ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); body { background-color: black; color: white; } +.light { + color: black !important; + background: white !important; +} + * { margin: 0; padding: 0; -} - -#box { - position: absolute; - z-index: 999; - border: 25px solid white; - -webkit-box-sizing: border-box; - box-sizing: border-box; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - -webkit-transition: border-color 0.5s ease-in-out; - transition: border-color 0.5s ease-in-out; -} - -a { - text-decoration: none; - color: white; -} - -.portfolio:hover { - color: #ff6a5f; -} - -.portfolio:hover ~ #box { - border-color: #ff6a5f; -} - -.lore:hover { - color: #92a9f3; -} - -.lore:hover ~ #box { - border-color: #92a9f3; -} - -.art:hover { - color: #c974da; -} - -.art:hover ~ #box { - border-color: #c974da; -} - -.portfolio { - font-size: 6vh; -} - -.lore { - font-size: 6vh; -} - -.art { - font-size: 6vh; + font-family: 'Roboto', sans-serif; } .title { - font-family: 'Source Sans Pro', sans-serif; font-size: 13vh; margin: 0; + cursor: copy; +} + +sub { + font-size: 1vh; } .center { @@ -87,4 +42,139 @@ a { -ms-flex-pack: center; justify-content: center; } + +a { + text-decoration: none; + color: white; +} + +body.light a { + color: black; +} + +#box { + position: absolute; + z-index: 999; + border: 25px solid white; + -webkit-box-sizing: border-box; + box-sizing: border-box; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + -webkit-transition: border-color 0.5s ease-in-out; + transition: border-color 0.5s ease-in-out; +} + +body.light #box { + position: absolute; + z-index: 999; + border: 25px solid black; + -webkit-box-sizing: border-box; + box-sizing: border-box; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + -webkit-transition: border-color 0.5s ease-in-out; + transition: border-color 0.5s ease-in-out; +} + +.portfolio:hover { + color: #ff6a5f; +} + +.portfolio:hover ~ #box { + border-color: #ff6a5f; +} + +.portfolio::-moz-selection { + color: white; + background-color: #ff6a5f; +} + +.portfolio::selection { + color: white; + background-color: #ff6a5f; +} + +body.light .portfolio::-moz-selection { + color: black; + background-color: #ff8479; +} + +body.light .portfolio::selection { + color: black; + background-color: #ff8479; +} + +.lore:hover { + color: #92a9f3; +} + +.lore:hover ~ #box { + border-color: #92a9f3; +} + +.lore::-moz-selection { + color: white; + background-color: #92a9f3; +} + +.lore::selection { + color: white; + background-color: #92a9f3; +} + +body.light .lore::-moz-selection { + color: black; + background-color: #acc3ff; +} + +body.light .lore::selection { + color: black; + background-color: #acc3ff; +} + +.art:hover { + color: #c974da; +} + +.art:hover ~ #box { + border-color: #c974da; +} + +.art::-moz-selection { + color: white; + background-color: #c974da; +} + +.art::selection { + color: white; + background-color: #c974da; +} + +body.light .art::-moz-selection { + color: black; + background-color: #e38ef4; +} + +body.light .art::selection { + color: black; + background-color: #e38ef4; +} + +.portfolio { + font-size: 6vh; +} + +.lore { + font-size: 6vh; +} + +.art { + font-size: 6vh; +} /*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/assets/css/main.css.map b/assets/css/main.css.map index 017ef40..7cb6eaa 100644 --- a/assets/css/main.css.map +++ b/assets/css/main.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AAAA,OAAO,CAAC,2EAAI;AAGZ,AAAA,IAAI,CAAC;EACJ,gBAAgB,EAAE,KAAY;EAC9B,KAAK,EAAE,KAAkB;CAEzB;;AAED,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACV;;AAED,AAAA,IAAI,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,gBAAgB;EACxB,UAAU,EAAE,UAAU;EACtB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,cAAc,EAAE,IAAI;EACpB,UAAU,EAAE,6BAA6B;CACzC;;AAED,AAAA,CAAC,CAAC;EACD,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACZ;;AAMA,AAAA,UAAU,AAAA,MAAM,CAAA;EACf,KAAK,EALiB,OAAO;CAU7B;;AAND,AAGC,UAHS,AAAA,MAAM,GAGX,IAAI,CAAC;EACR,YAAY,EARS,OAAO;CAS5B;;AALF,AAAA,KAAK,AAAA,MAAM,CAAK;EACf,KAAK,EALkC,OAAO;CAU9C;;AAND,AAGC,KAHI,AAAA,MAAM,GAGN,IAAI,CAAC;EACR,YAAY,EAR0B,OAAO;CAS7C;;AALF,AAAA,IAAI,AAAA,MAAM,CAAM;EACf,KAAK,EALkD,OAAO;CAU9D;;AAND,AAGC,IAHG,AAAA,MAAM,GAGL,IAAI,CAAC;EACR,YAAY,EAR0C,OAAO;CAS7D;;AAIF,AAAA,UAAU,CAAA;EACT,SAAS,EAAE,GAAG;CACd;;AAFD,AAAA,KAAK,CAAK;EACT,SAAS,EAAE,GAAG;CACd;;AAFD,AAAA,IAAI,CAAM;EACT,SAAS,EAAE,GAAG;CACd;;AAEF,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,6BAA6B;EAC1C,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,CAAC;CACT;;AAED,AAAA,OAAO,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CACvB", + "mappings": "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", "sources": [ "main.scss" ], diff --git a/assets/css/main.scss b/assets/css/main.scss index 767675c..22f3a40 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); $accent-color: red; body { @@ -7,9 +8,41 @@ body { //font-size: 3vw; } +.light { + color: black !important; + background: white !important; +} + * { margin: 0; padding: 0; + font-family: 'Roboto', sans-serif; +} + +.title { + //font-family: 'Source Sans Pro', sans-serif !important; + font-size: 13vh; + margin: 0; + cursor: copy; +} +sub { + font-size: 1vh; +} + +.center { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +a { + text-decoration: none; + color: white; +} + +body.light a { + color: black; } #box { @@ -25,9 +58,17 @@ body { transition: border-color 0.5s ease-in-out; } -a { - text-decoration: none; - color: white; +body.light #box { + position: absolute; + z-index: 999; + border: 25px solid black; + box-sizing: border-box; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + transition: border-color 0.5s ease-in-out; } $accents: ("portfolio": #ff6a5f, "lore": #92a9f3, "art": #c974da); @@ -41,22 +82,18 @@ $time: 2s; border-color: $color; } } + .#{$link}::selection { + color: white; + background-color: $color; + } + body.light .#{$link}::selection { + //color: $color + 9a; + color: black; + background-color: $color + 26; + } } @each $link in $links { .#{$link} { font-size: 6vh; } } -.title { - font-family: 'Source Sans Pro', sans-serif; - font-size: 13vh; - margin: 0; -} - -.center { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} diff --git a/assets/js/main.js b/assets/js/main.js index d27e7d0..1b100f4 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -11,3 +11,33 @@ links.forEach((link) => { }, 3 * 1000); }); */ +let scheme = window.matchMedia(`(prefers-color-scheme: dark)`); +let theme = window.localStorage.getItem('prefer-light'); +let title = document.getElementsByClassName('title')[0]; +let body = document.getElementsByTagName('body')[0]; + +if (theme === 'yes') { + body.classList.add('light'); +} else if (theme === 'no') { + console.log('User does not like light, removing Light'); + body.classList.remove('light'); +} else { + if (scheme) { + body.classList.remove('light'); + console.log('User has not yet visited, but prefers dark'); + } else { + body.classList.add('light'); + console.log('User has not yet visited, but prefers light'); + } +} + +title.addEventListener('click', (e) => { + body.classList.toggle('light'); + if (body.classList.contains('light')) { + window.localStorage.setItem('prefer-light', 'yes'); + console.log('user likes light'); + } else { + window.localStorage.setItem('prefer-light', 'no'); + console.log('user likes dark'); + } +}); diff --git a/routes/lore.js b/routes/lore.js new file mode 100644 index 0000000..638616c --- /dev/null +++ b/routes/lore.js @@ -0,0 +1,11 @@ +var express = require('express'); +var lore = express.Router(); + +lore.get('/', (req, res) => { + res.status(200).jsonp({ + site: 'lore', + done: false + }); +}); + +module.exports = lore; diff --git a/server.js b/server.js index 3ccc45a..3f980be 100644 --- a/server.js +++ b/server.js @@ -1,64 +1,69 @@ //! Deps -const express = require('express') -const helmet = require('helmet') -const compression = require('compression') -const cors = require('cors') -const morgan = require('morgan') -const chalk = require('chalk') +const express = require('express'); +const helmet = require('helmet'); +const compression = require('compression'); +const cors = require('cors'); +const morgan = require('morgan'); +const chalk = require('chalk'); var hbs = require('express-handlebars'); -let { - port, - hostname -} = { - port: 8080, - // hostname: 'localhost' -} +let { port, hostname } = { + port: 3621 + // hostname: 'localhost' +}; -const app = express() +const app = express(); app.set('view engine', 'hbs'); -app.engine('hbs', hbs({ - extname: 'hbs', - defaultView: 'default', -})); +app.engine( + 'hbs', + hbs({ + extname: 'hbs', + defaultView: 'default' + }) +); app.set('json spaces', 4); -app.use('/assets', express.static('./assets')) +app.use('/assets', express.static('./assets')); app.set('view options', { - layout: false + layout: false }); app.use(express.json()); -app.use(express.urlencoded({ - extended: true -})); +app.use( + express.urlencoded({ + extended: true + }) +); app.use(helmet()); app.use(compression()); app.use(cors()); // Logging app.use( - morgan((tokens, req, res) => { - return [ - chalk.hex('#34ace0').bold(tokens.method(req, res)), - chalk.hex('#ffb142').bold(tokens.status(req, res)), - chalk.hex('#ff5252').bold(req.hostname + tokens.url(req, res)), - chalk.hex('#2ed573').bold(tokens['response-time'](req, res) + 'ms'), - chalk.hex('#f78fb3').bold('@ ' + tokens.date(req, res)) - ].join(' '); - }) + morgan((tokens, req, res) => { + return [ + chalk.hex('#34ace0').bold(tokens.method(req, res)), + chalk.hex('#ffb142').bold(tokens.status(req, res)), + chalk.hex('#ff5252').bold(req.hostname + tokens.url(req, res)), + chalk.hex('#2ed573').bold(tokens['response-time'](req, res) + 'ms'), + chalk.hex('#f78fb3').bold('@ ' + tokens.date(req, res)) + ].join(' '); + }) ); +app.use('/lore', require('./routes/lore')); + module.exports = (client) => { - app.get('/', async (req, res) => { - res.render('index', { - layout: 'main', - link: 'ry' - }) + app.get('/', async (req, res) => { + res.render('index', { + layout: 'main', + link: 'ry' + }); + }); - }); - - - app.listen(port, /* hostname, */ () => { - setTimeout(() => { - console.log(`Listening on ${port}`); - }, 1000 * 3); - }); -}; \ No newline at end of file + app.listen( + port, + /* hostname, */ () => { + setTimeout(() => { + console.log(`Listening on ${port}`); + }, 1000 * 3); + } + ); +}; diff --git a/views/index.hbs b/views/index.hbs index 2fa1106..2b3d3fc 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1,6 +1,6 @@
-

{{link}}

+

{{link}}click on me to change the theme

portfolio lore art