dark theme stuff owo

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;
-}
+  font-family: 'Roboto', sans-serif;
-
-#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;
 }
 
 .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 */

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": "AAAA,OAAO,CAAC,2EAAI;AACZ,OAAO,CAAC,kEAAI;AAGZ,AAAA,IAAI,CAAC;EACJ,gBAAgB,EAAE,KAAY;EAC9B,KAAK,EAAE,KAAkB;CAEzB;;AAED,AAAA,MAAM,CAAC;EACN,KAAK,EAAE,gBAAgB;EACvB,UAAU,EAAE,gBAAgB;CAC5B;;AAED,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,oBAAoB;CACjC;;AAED,AAAA,MAAM,CAAC;EAEN,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,IAAI;CACZ;;AACD,AAAA,GAAG,CAAC;EACH,SAAS,EAAE,GAAG;CACd;;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;;AACD,AAAA,CAAC,CAAC;EACD,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACZ;;AAED,AAAA,IAAI,AAAA,MAAM,CAAC,CAAC,CAAC;EACZ,KAAK,EAAE,KAAK;CACZ;;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,IAAI,AAAA,MAAM,CAAC,IAAI,CAAC;EACf,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;;AAMA,AAAA,UAAU,AAAA,MAAM,CAAA;EACf,KAAK,EALiB,OAAO;CAU7B;;AAND,AAGC,UAHS,AAAA,MAAM,GAGX,IAAI,CAAC;EACR,YAAY,EARS,OAAO;CAS5B;;AAEF,AAAA,UAAU,AAAA,WAAW,CAAA;EACpB,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAbM,OAAO;CAc7B;;AACD,AAAA,IAAI,AAAA,MAAM,CAAC,UAAU,AAAA,WAAW,CAAA;EAE/B,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,OAAW;CAC7B;;AAfD,AAAA,KAAK,AAAA,MAAM,CAAK;EACf,KAAK,EALkC,OAAO;CAU9C;;AAND,AAGC,KAHI,AAAA,MAAM,GAGN,IAAI,CAAC;EACR,YAAY,EAR0B,OAAO;CAS7C;;AAEF,AAAA,KAAK,AAAA,WAAW,CAAK;EACpB,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAbuB,OAAO;CAc9C;;AACD,AAAA,IAAI,AAAA,MAAM,CAAC,KAAK,AAAA,WAAW,CAAK;EAE/B,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,OAAW;CAC7B;;AAfD,AAAA,IAAI,AAAA,MAAM,CAAM;EACf,KAAK,EALkD,OAAO;CAU9D;;AAND,AAGC,IAHG,AAAA,MAAM,GAGL,IAAI,CAAC;EACR,YAAY,EAR0C,OAAO;CAS7D;;AAEF,AAAA,IAAI,AAAA,WAAW,CAAM;EACpB,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAbuC,OAAO;CAc9D;;AACD,AAAA,IAAI,AAAA,MAAM,CAAC,IAAI,AAAA,WAAW,CAAM;EAE/B,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,OAAW;CAC7B;;AAGD,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",
     "sources": [
         "main.scss"
     ],

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 {
+body.light #box {
-	text-decoration: none;
+	position: absolute;
-	color: white;
+	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;
-}

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');
+	}
+});

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;

server.js

@@ -1,64 +1,69 @@
 //! Deps
-const express = require('express')
+const express = require('express');
-const helmet = require('helmet')
+const helmet = require('helmet');
-const compression = require('compression')
+const compression = require('compression');
-const cors = require('cors')
+const cors = require('cors');
-const morgan = require('morgan')
+const morgan = require('morgan');
-const chalk = require('chalk')
+const chalk = require('chalk');
 var hbs = require('express-handlebars');
-let {
+let { port, hostname } = {
-    port,
+	port: 3621
-    hostname
+	//    hostname: 'localhost'
-} = {
+};
-    port: 8080,
-    //    hostname: 'localhost'
-}
 
-const app = express()
+const app = express();
 
 app.set('view engine', 'hbs');
-app.engine('hbs', hbs({
+app.engine(
-    extname: 'hbs',
+	'hbs',
-    defaultView: 'default',
+	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({
+app.use(
-    extended: true
+	express.urlencoded({
-}));
+		extended: true
+	})
+);
 app.use(helmet());
 app.use(compression());
 app.use(cors());
 // Logging
 app.use(
-    morgan((tokens, req, res) => {
+	morgan((tokens, req, res) => {
-        return [
+		return [
-            chalk.hex('#34ace0').bold(tokens.method(req, res)),
+			chalk.hex('#34ace0').bold(tokens.method(req, res)),
-            chalk.hex('#ffb142').bold(tokens.status(req, res)),
+			chalk.hex('#ffb142').bold(tokens.status(req, res)),
-            chalk.hex('#ff5252').bold(req.hostname + tokens.url(req, res)),
+			chalk.hex('#ff5252').bold(req.hostname + tokens.url(req, res)),
-            chalk.hex('#2ed573').bold(tokens['response-time'](req, res) + 'ms'),
+			chalk.hex('#2ed573').bold(tokens['response-time'](req, res) + 'ms'),
-            chalk.hex('#f78fb3').bold('@ ' + tokens.date(req, res))
+			chalk.hex('#f78fb3').bold('@ ' + tokens.date(req, res))
-        ].join(' ');
+		].join(' ');
-    })
+	})
 );
 
+app.use('/lore', require('./routes/lore'));
+
 module.exports = (client) => {
-    app.get('/', async (req, res) => {
+	app.get('/', async (req, res) => {
-        res.render('index', {
+		res.render('index', {
-            layout: 'main',
+			layout: 'main',
-            link: 'ry'
+			link: 'ry'
-        })
+		});
+	});
 
-    });
+	app.listen(
-
+		port,
-
+		/* hostname, */ () => {
-    app.listen(port, /* hostname, */ () => {
+			setTimeout(() => {
-        setTimeout(() => {
+				console.log(`Listening on ${port}`);
-            console.log(`Listening on ${port}`);
+			}, 1000 * 3);
-        }, 1000 * 3);
+		}
-    });
+	);
-};
+};

views/index.hbs

@@ -1,6 +1,6 @@
 <body>
   <div class="center">
-    <h1 class="title"><i>{{link}}</i></h1>
+    <h1 class="title"><i>{{link}}</i><sub>click on me to change the theme</sub></h1>
     <a data-port="#123456" class="portfolio" href="/portfolio">portfolio</a>
     <a data-lore="#654321" class="lore" href="/lore">lore</a>
     <a data-art="#294129" class="art" href="/art">art</a>