Fixed time issues

This commit is contained in:
Rod 2020-08-29 22:47:08 -05:00
parent 322a5f405d
commit a868cf6c43
4 changed files with 64 additions and 21 deletions

View File

@ -3,10 +3,13 @@
--fsm: 85px;
--fss: 30px;
--fses: 18px;
--bg: #1f2229;
--fg: #d8dee9;
--qbg: #2c323d;
--accent: #5e81ac; }
--accent: #3F8CC9;
--darkbg: #1E1F21;
--darksbg: #2C2D31;
--darkfg: #d8dee9;
--lightbg: #FFFFFF;
--lightsbg: #F9FAFA;
--lightfg: #000000; }
@media only screen and (max-width: 68.75em) {
:root {
--fsg: 100px;
@ -18,14 +21,14 @@
padding: 0;
box-sizing: border-box;
font-family: 'Proxima nova', monospace;
color: var(--fg);
color: var(--darkfg);
font-size: 13.5px;
transition: 0.2s ease-in-out; }
body {
width: 100vw;
height: 100vh;
background-color: var(--bg);
background-color: var(--darkbg);
display: flex;
align-items: center;
justify-content: center; }
@ -46,7 +49,7 @@ body {
width: 100%; }
.card {
background-color: var(--qbg);
background-color: var(--darksbg);
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px; }
.card:hover {
@ -146,7 +149,7 @@ body {
justify-content: center;
align-items: center;
width: 100%;
background-color: var(--qbg);
background-color: var(--darksbg);
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px; }
.qlink__link-1 {
@ -169,9 +172,10 @@ body {
grid-column: 3; }
.qlink__link:hover {
background-color: var(--accent);
transform: translateY(-0.3rem); }
transform: translateY(-0.3rem);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
.qlink__link:hover svg {
stroke: var(--bg); }
stroke: var(--darkbg); }
.qlist {
display: flex;
@ -200,4 +204,4 @@ body {
font-weight: bold; }
.qlist__link:hover {
background-color: var(--accent);
color: var(--bg); }
color: var(--darkbg); }

23
js/theme.js Normal file
View File

@ -0,0 +1,23 @@
let dark = document.getElementById('dark');
let light = document.getElementById('light');
let body = document.body;
let theme = localStorage.getItem('theme');
let toggleTheme = document.getElementById('toggleTheme');
toggleTheme.addEventListener('click', function() {
if (body.classList.contains('light')) {
body.classList.remove('light');
toggleTheme.textContent = 'Dark';
localStorage.setItem('theme', 'dark');
} else {
body.classList.add('light');
toggleTheme.textContent = 'Light';
localStorage.setItem('theme', 'light');
}
});
function getTheme() {
body.classList.add(theme)
toggleTheme.textContent = theme;
}
getTheme();

View File

@ -35,5 +35,8 @@ function displayClock() {
document.getElementById('separator').innerHTML = ' : ';
document.getElementById('minutes').innerText = min + ampm;
document.getElementById('month').innerText = mm;
document.getElementById('day').innerText = dd;
setTimeout(displayClock, 1000);
}

View File

@ -6,14 +6,25 @@ $bp-small: 37.5em;
$bp-smallest: 31.25em;
:root {
// Fonts
--fsg: 150px;
--fsm: 85px;
--fss: 30px;
--fses: 18px;
--bg: #1f2229;
--fg: #d8dee9;
--qbg: #2c323d;
--accent: #5e81ac;
// C O L O R S
--accent: #3F8CC9;
// Colors Dark theme
--darkbg: #1E1F21;
--darksbg: #2C2D31;
--darkfg: #d8dee9;
// Colors White theme
--lightbg: #FFFFFF;
--lightsbg: #F9FAFA;
--lightfg: #000000;
@media only screen and (max-width: $bp-large) {
--fsg: 100px;
@ -27,7 +38,7 @@ $bp-smallest: 31.25em;
padding: 0;
box-sizing: border-box;
font-family: 'Proxima nova', monospace;
color: var(--fg);
color: var(--darkfg);
font-size: 13.5px;
transition: 0.2s ease-in-out;
@ -36,7 +47,7 @@ $bp-smallest: 31.25em;
body {
width: 100vw;
height: 100vh;
background-color: var(--bg);
background-color: var(--darkbg);
display: flex;
align-items: center;
justify-content: center;
@ -62,7 +73,7 @@ body {
}
.card {
background-color: var(--qbg);
background-color: var(--darksbg);
box-shadow: 0 5px 7px rgba(#000000, 0.35);
border-radius: 5px;
@ -190,7 +201,7 @@ body {
justify-content: center;
align-items: center;
width: 100%;
background-color: var(--qbg);
background-color: var(--darksbg);
box-shadow: 0 5px 7px rgba(#000000, 0.35);
border-radius: 5px;
&-1 {
@ -222,8 +233,10 @@ body {
background-color: var(--accent);
transform: translateY(-0.3rem);
box-shadow: 0 20px 30px rgba(#000000, 0.35);
& svg {
stroke: var(--bg);
stroke: var(--darkbg);
}
}
}
@ -262,7 +275,7 @@ body {
&:hover {
background-color: var(--accent);
color: var(--bg);
color: var(--darkbg);
}
}
}