Dark / Light mode initial files
This commit is contained in:
Rod
parent
cd3d46490a
commit
c3c65f1dd5
@ -4,53 +4,56 @@
|
||||
--fsm: 85px;
|
||||
--fss: 30px;
|
||||
--fses: 18px;
|
||||
--accent: #20a4f3;
|
||||
--darkbg: #1e1f21;
|
||||
--darksbg: #2c2d31;
|
||||
--darkfg: #d8dee9;
|
||||
--lightbg: #ffffff;
|
||||
--lightsbg: #f9fafa;
|
||||
--lightfg: #000000; }
|
||||
--accent: #186efd60;
|
||||
--bg: #1e1f21;
|
||||
--sbg: #2c2d31;
|
||||
--fg: #d8dee9; }
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
:root {
|
||||
--fsg: 100px;
|
||||
--fsm: 65px;
|
||||
--fss: 20px; } }
|
||||
|
||||
.lightmode {
|
||||
--accent: #186efdaa;
|
||||
--bg: #f5f5f5;
|
||||
--sbg: #e4e6e6;
|
||||
--fg: #3a3a3a; }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: var(--darkfg);
|
||||
font-size: 13.5px;
|
||||
transition: 0.2s ease-in-out; }
|
||||
|
||||
.darkbg {
|
||||
background-color: var(--darkbg); }
|
||||
|
||||
.darksbg {
|
||||
background-color: var(--darksbg); }
|
||||
|
||||
.darkfg {
|
||||
color: var(--darkfg); }
|
||||
|
||||
.lightbg {
|
||||
background-color: var(--lightbg); }
|
||||
|
||||
.lightsbg {
|
||||
background-color: var(--lightsbg); }
|
||||
|
||||
.lightfg {
|
||||
color: var(--lightfg); }
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
|
||||
#themeButton {
|
||||
position: absolute;
|
||||
margin: 2em 2em 0 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: var(--fg);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #00000000;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none; }
|
||||
|
||||
.bicon {
|
||||
width: 26px;
|
||||
height: 26px; }
|
||||
|
||||
.container {
|
||||
width: 150vh;
|
||||
height: 85vh;
|
||||
@ -68,10 +71,11 @@ body {
|
||||
|
||||
.card {
|
||||
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 5px; }
|
||||
border-radius: 5px;
|
||||
background-color: var(--sbg); }
|
||||
.card:hover {
|
||||
transform: translateY(-0.3rem);
|
||||
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
|
||||
transform: translateY(-0.2rem);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
|
||||
|
||||
.fblock {
|
||||
grid-row: 1 / span 2;
|
||||
@ -114,19 +118,21 @@ body {
|
||||
#separator,
|
||||
#minutes {
|
||||
font-size: var(--fsg);
|
||||
font-weight: bolder; }
|
||||
font-weight: bolder;
|
||||
color: var(--fg); }
|
||||
|
||||
#month,
|
||||
#day {
|
||||
font-size: var(--fsm);
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
color: var(--fg); }
|
||||
|
||||
#day {
|
||||
margin-left: 20px; }
|
||||
|
||||
#greetings {
|
||||
font-size: var(--fses);
|
||||
font-weight: lighter; }
|
||||
color: var(--fg); }
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
#greetings {
|
||||
font-size: var(--fss); } }
|
||||
@ -138,11 +144,13 @@ body {
|
||||
.temperature-value p {
|
||||
font-size: var(--fss);
|
||||
font-weight: bolder;
|
||||
margin-left: 15px; }
|
||||
margin-left: 15px;
|
||||
color: var(--fg); }
|
||||
|
||||
.temperature-description p {
|
||||
font-size: var(--fss);
|
||||
margin-left: 15px; }
|
||||
margin-left: 15px;
|
||||
color: var(--fg); }
|
||||
|
||||
.qlink {
|
||||
grid-row: 3 / span 2;
|
||||
@ -160,13 +168,14 @@ body {
|
||||
padding: 20px; } }
|
||||
.qlink__icon {
|
||||
width: 26px;
|
||||
height: 26px; }
|
||||
height: 26px;
|
||||
color: var(--fg); }
|
||||
.qlink__link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--sbg);
|
||||
width: 100%;
|
||||
background-color: var(--darksbg);
|
||||
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 5px; }
|
||||
.qlink__link-1 {
|
||||
@ -189,10 +198,10 @@ body {
|
||||
grid-column: 3; }
|
||||
.qlink__link:hover {
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-0.3rem);
|
||||
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
|
||||
transform: translateY(-0.2rem);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
|
||||
.qlink__link:hover svg {
|
||||
stroke: var(--darkbg); }
|
||||
stroke: var(--fg); }
|
||||
|
||||
.qlist {
|
||||
display: flex;
|
||||
@ -211,14 +220,16 @@ body {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
width: 30px;
|
||||
color: var(--fg);
|
||||
height: 30px; }
|
||||
.qlist__link {
|
||||
text-decoration: none;
|
||||
font-size: var(--fses);
|
||||
color: var(--fg);
|
||||
margin-top: 1px;
|
||||
padding: 10px 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold; }
|
||||
.qlist__link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--darkbg); }
|
||||
color: var(--fg); }
|
||||
|
||||
24
index.html
24
index.html
@ -6,30 +6,31 @@
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
</head>
|
||||
<body class="darkfg darkbg">
|
||||
<body class="">
|
||||
<button id="themeButton"><i class="bicon" data-feather="sun"></i></button>
|
||||
<div class="container">
|
||||
<div class="fblock">
|
||||
<div class="clock ">
|
||||
<div id="hour" class="darkfg"></div>
|
||||
<div id="separator" class="darkfg"></div>
|
||||
<div id="minutes" class="darkfg"></div>
|
||||
<div id="hour" class=""></div>
|
||||
<div id="separator" class=""></div>
|
||||
<div id="minutes" class=""></div>
|
||||
</div>
|
||||
<div id="greetings" class="darkfg"></div>
|
||||
<div id="greetings" class=""></div>
|
||||
</div>
|
||||
<div class="sblock">
|
||||
<div class="sblock__date">
|
||||
<div id="month" class="darkfg"></div>
|
||||
<div id="day" class="darkfg"></div>
|
||||
<div id="month" class=""></div>
|
||||
<div id="day" class=""></div>
|
||||
</div>
|
||||
<div class="sblock__weather">
|
||||
<div class="weather-icon">
|
||||
<img src="icons/unknown.png" />
|
||||
</div>
|
||||
<div class="temperature-value">
|
||||
<p>- °<span class="darkfg">c</span></p>
|
||||
<p class="">- °<span class="g">c</span></p>
|
||||
</div>
|
||||
<div class="temperature-description">
|
||||
<p class="darkfg"></p>
|
||||
<p class=""></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,7 +74,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card darksbg qlist qlist__1">
|
||||
<div class="card qlist qlist__1">
|
||||
<i class="qlist__head" data-feather="music"></i>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
@ -97,7 +98,7 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="card darksbg qlist qlist__2">
|
||||
<div class="card qlist qlist__2">
|
||||
<i class="qlist__head" data-feather="coffee"></i>
|
||||
<a href="https://www.linkedin.com" class="qlist__link"
|
||||
>LinkedIn</a
|
||||
@ -112,6 +113,7 @@
|
||||
<script src="js/time.js"></script>
|
||||
<script src="js/weather.js"></script>
|
||||
<script src="js/greeting.js"></script>
|
||||
<script src="js/theme.js"></script>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
|
||||
27
js/theme.js
27
js/theme.js
@ -1,23 +1,10 @@
|
||||
let dark = document.getElementById('dark');
|
||||
let light = document.getElementById('light');
|
||||
let body = document.body;
|
||||
let theme = localStorage.getItem('theme');
|
||||
let toggleTheme = document.getElementById('toggleTheme');
|
||||
let darkTheme = localStorage.getItem('darkTheme');
|
||||
const themeToggle = document.querySelector('#themeButton');
|
||||
|
||||
const enableDark = () => {
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
|
||||
});
|
||||
|
||||
function getTheme() {
|
||||
body.classList.add(theme)
|
||||
toggleTheme.textContent = theme;
|
||||
}
|
||||
getTheme();
|
||||
@ -52,6 +52,6 @@ function getWeather(latitude, longitude) {
|
||||
// Display Weather info
|
||||
function displayWeather() {
|
||||
iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
|
||||
tempElement.innerHTML = `${weather.temperature.value}°<span>${tempUnit}</span>`;
|
||||
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
||||
descElement.innerHTML = weather.description;
|
||||
}
|
||||
|
||||
104
sass/main.scss
104
sass/main.scss
@ -15,17 +15,11 @@ $bp-smallest: 31.25em;
|
||||
|
||||
// C O L O R S
|
||||
|
||||
--accent: #20a4f3;
|
||||
--accent: #186efd60;
|
||||
|
||||
// Colors Dark theme
|
||||
--darkbg: #1e1f21;
|
||||
--darksbg: #2c2d31;
|
||||
--darkfg: #d8dee9;
|
||||
|
||||
// Colors White theme
|
||||
--lightbg: #ffffff;
|
||||
--lightsbg: #f9fafa;
|
||||
--lightfg: #000000;
|
||||
--bg: #1e1f21;
|
||||
--sbg: #2c2d31;
|
||||
--fg: #d8dee9;
|
||||
|
||||
@media only screen and (max-width: $bp-large) {
|
||||
--fsg: 100px;
|
||||
@ -33,49 +27,59 @@ $bp-smallest: 31.25em;
|
||||
--fss: 20px;
|
||||
}
|
||||
}
|
||||
.lightmode {
|
||||
|
||||
--accent: #186efdaa;
|
||||
|
||||
--bg: #f5f5f5;
|
||||
--sbg: #e4e6e6;
|
||||
--fg: #3a3a3a;
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;font-family: 'Open Sans', sans-serif;
|
||||
color: var(--darkfg);
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 13.5px;
|
||||
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.darkbg {
|
||||
background-color: var(--darkbg);
|
||||
}
|
||||
|
||||
.darksbg {
|
||||
background-color: var(--darksbg);
|
||||
}
|
||||
|
||||
.darkfg {
|
||||
color: var(--darkfg);
|
||||
}
|
||||
|
||||
.lightbg {
|
||||
background-color: var(--lightbg);
|
||||
}
|
||||
|
||||
.lightsbg {
|
||||
background-color: var(--lightsbg);
|
||||
}
|
||||
|
||||
|
||||
.lightfg {
|
||||
color: var(--lightfg);
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#themeButton {
|
||||
position: absolute;
|
||||
margin: 2em 2em 0 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
color: var(--fg);
|
||||
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #00000000;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
.bicon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.container {
|
||||
width: 150vh;
|
||||
height: 85vh;
|
||||
@ -99,10 +103,11 @@ body {
|
||||
.card {
|
||||
box-shadow: 0 5px 7px rgba(#000000, 0.35);
|
||||
border-radius: 5px;
|
||||
background-color: var(--sbg);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.3rem);
|
||||
box-shadow: 0 20px 30px rgba(#000000, 0.35);
|
||||
transform: translateY(-0.2rem);
|
||||
box-shadow: 0 10px 10px rgba(#000000, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,12 +163,14 @@ body {
|
||||
#minutes {
|
||||
font-size: var(--fsg);
|
||||
font-weight: bolder;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
#month,
|
||||
#day {
|
||||
font-size: var(--fsm);
|
||||
font-weight: bold;
|
||||
color: var(--fg);
|
||||
}
|
||||
#day {
|
||||
margin-left: 20px;
|
||||
@ -171,7 +178,7 @@ body {
|
||||
|
||||
#greetings {
|
||||
font-size: var(--fses);
|
||||
font-weight: lighter;
|
||||
color: var(--fg);
|
||||
|
||||
@media only screen and (max-width: $bp-large) {
|
||||
font-size: var(--fss);
|
||||
@ -188,10 +195,12 @@ body {
|
||||
font-size: var(--fss);
|
||||
font-weight: bolder;
|
||||
margin-left: 15px;
|
||||
color: var(--fg);
|
||||
}
|
||||
&-description p {
|
||||
font-size: var(--fss);
|
||||
margin-left: 15px;
|
||||
color: var(--fg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -217,14 +226,15 @@ body {
|
||||
&__icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--sbg);
|
||||
width: 100%;
|
||||
background-color: var(--darksbg);
|
||||
box-shadow: 0 5px 7px rgba(#000000, 0.35);
|
||||
border-radius: 5px;
|
||||
&-1 {
|
||||
@ -254,12 +264,12 @@ body {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-0.3rem);
|
||||
transform: translateY(-0.2rem);
|
||||
|
||||
box-shadow: 0 20px 30px rgba(#000000, 0.35);
|
||||
box-shadow: 0 10px 10px rgba(#000000, 0.35);
|
||||
|
||||
& svg {
|
||||
stroke: var(--darkbg);
|
||||
stroke: var(--fg);;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -286,19 +296,21 @@ body {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
width: 30px;
|
||||
color: var(--fg);
|
||||
height: 30px;
|
||||
}
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
font-size: var(--fses);
|
||||
color: var(--fg);
|
||||
margin-top: 1px;
|
||||
padding: 10px 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--darkbg);
|
||||
color: var(--fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user