dark theme stuff owo
This commit is contained in:
monty
parent
329ac23ca2
commit
00e202978d
7 changed files with 294 additions and 121 deletions
|
|
@ -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 */
|
||||
|
|
@ -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"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue