Fixed time issues
This commit is contained in:
parent
322a5f405d
commit
a868cf6c43
@ -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
23
js/theme.js
Normal 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();
|
@ -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);
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user