lio/yugen.work
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

dark theme stuff owo

Browse source
This commit is contained in:
monty 2019-11-19 07:52:41 +01:00
parent 329ac23ca2
commit 00e202978d
7 changed files with 294 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
assets/css/main.css
View file

@ -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=Source+Sans+Pro&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body { body {
background-color: black; background-color: black;
color: white; color: white;
} }
.light {
color: black !important;
background: white !important;
}
* { * {
margin: 0; margin: 0;
padding: 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 { .title {
font-family: 'Source Sans Pro', sans-serif;
font-size: 13vh; font-size: 13vh;
margin: 0; margin: 0;
cursor: copy;
}
sub {
font-size: 1vh;
} }
.center { .center {
@ -87,4 +42,139 @@ a {
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: 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 */ /*# sourceMappingURL=main.css.map */

2
assets/css/main.css.map
View file

@ -1,6 +1,6 @@
{ {
"version": 3, "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": [ "sources": [
"main.scss" "main.scss"
], ],

69
assets/css/main.scss
View file

@ -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=Source+Sans+Pro&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
$accent-color: red; $accent-color: red;
body { body {
@ -7,9 +8,41 @@ body {
//font-size: 3vw; //font-size: 3vw;
} }
.light {
color: black !important;
background: white !important;
}
* { * {
margin: 0; margin: 0;
padding: 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 { #box {
@ -25,9 +58,17 @@ body {
transition: border-color 0.5s ease-in-out; 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); $accents: ("portfolio": #ff6a5f, "lore": #92a9f3, "art": #c974da);
@ -41,22 +82,18 @@ $time: 2s;
border-color: $color; 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 { @each $link in $links {
.#{$link} { .#{$link} {
font-size: 6vh; 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;
}

30
assets/js/main.js
View file

@ -11,3 +11,33 @@ links.forEach((link) => {
}, 3 * 1000); }, 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');
}
});

11
routes/lore.js Normal file
View file

@ -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;

95
server.js
View file

@ -1,64 +1,69 @@
//! Deps //! 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'); 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.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.set('json spaces', 4);
app.use('/assets', express.static('./assets')) app.use('/assets', express.static('./assets'));
app.set('view options', { app.set('view options', {
layout: false layout: false
}); });
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({ app.use(
extended: true express.urlencoded({
})); extended: true
})
);
app.use(helmet()); app.use(helmet());
app.use(compression()); app.use(compression());
app.use(cors()); app.use(cors());
// Logging // Logging
app.use( 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) => { 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); }
}); );
}; };

2
views/index.hbs
View file

@ -1,6 +1,6 @@
<body> <body>
<div class="center"> <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-port="#123456" class="portfolio" href="/portfolio">portfolio</a>
<a data-lore="#654321" class="lore" href="/lore">lore</a> <a data-lore="#654321" class="lore" href="/lore">lore</a>
<a data-art="#294129" class="art" href="/art">art</a> <a data-art="#294129" class="art" href="/art">art</a>