AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dark / Light mode initial files

Browse Source
This commit is contained in:
Rod 2020-08-30 01:08:03 -05:00
parent cd3d46490a
commit c3c65f1dd5
5 changed files with 134 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
css/style.css
View File

@ -4,53 +4,56 @@
--fsm: 85px; --fsm: 85px;
--fss: 30px; --fss: 30px;
--fses: 18px; --fses: 18px;
--accent: #20a4f3; --accent: #186efd60;
--darkbg: #1e1f21; --bg: #1e1f21;
--darksbg: #2c2d31; --sbg: #2c2d31;
--darkfg: #d8dee9; --fg: #d8dee9; }
--lightbg: #ffffff;
--lightsbg: #f9fafa;
--lightfg: #000000; }
@media only screen and (max-width: 68.75em) { @media only screen and (max-width: 68.75em) {
:root { :root {
--fsg: 100px; --fsg: 100px;
--fsm: 65px; --fsm: 65px;
--fss: 20px; } } --fss: 20px; } }
.lightmode {
--accent: #186efdaa;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a; }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
color: var(--darkfg);
font-size: 13.5px; font-size: 13.5px;
transition: 0.2s ease-in-out; } 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 { body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: var(--bg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .container {
width: 150vh; width: 150vh;
height: 85vh; height: 85vh;
@ -68,10 +71,11 @@ body {
.card { .card {
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px; } border-radius: 5px;
background-color: var(--sbg); }
.card:hover { .card:hover {
transform: translateY(-0.3rem); transform: translateY(-0.2rem);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); } box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
.fblock { .fblock {
grid-row: 1 / span 2; grid-row: 1 / span 2;
@ -114,19 +118,21 @@ body {
#separator, #separator,
#minutes { #minutes {
font-size: var(--fsg); font-size: var(--fsg);
font-weight: bolder; } font-weight: bolder;
color: var(--fg); }
#month, #month,
#day { #day {
font-size: var(--fsm); font-size: var(--fsm);
font-weight: bold; } font-weight: bold;
color: var(--fg); }
#day { #day {
margin-left: 20px; } margin-left: 20px; }
#greetings { #greetings {
font-size: var(--fses); font-size: var(--fses);
font-weight: lighter; } color: var(--fg); }
@media only screen and (max-width: 68.75em) { @media only screen and (max-width: 68.75em) {
#greetings { #greetings {
font-size: var(--fss); } } font-size: var(--fss); } }
@ -138,11 +144,13 @@ body {
.temperature-value p { .temperature-value p {
font-size: var(--fss); font-size: var(--fss);
font-weight: bolder; font-weight: bolder;
margin-left: 15px; } margin-left: 15px;
color: var(--fg); }
.temperature-description p { .temperature-description p {
font-size: var(--fss); font-size: var(--fss);
margin-left: 15px; } margin-left: 15px;
color: var(--fg); }
.qlink { .qlink {
grid-row: 3 / span 2; grid-row: 3 / span 2;
@ -160,13 +168,14 @@ body {
padding: 20px; } } padding: 20px; } }
.qlink__icon { .qlink__icon {
width: 26px; width: 26px;
height: 26px; } height: 26px;
color: var(--fg); }
.qlink__link { .qlink__link {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--sbg);
width: 100%; width: 100%;
background-color: var(--darksbg);
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px; } border-radius: 5px; }
.qlink__link-1 { .qlink__link-1 {
@ -189,10 +198,10 @@ body {
grid-column: 3; } grid-column: 3; }
.qlink__link:hover { .qlink__link:hover {
background-color: var(--accent); background-color: var(--accent);
transform: translateY(-0.3rem); transform: translateY(-0.2rem);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); } box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
.qlink__link:hover svg { .qlink__link:hover svg {
stroke: var(--darkbg); } stroke: var(--fg); }
.qlist { .qlist {
display: flex; display: flex;
@ -211,14 +220,16 @@ body {
margin-top: 30px; margin-top: 30px;
margin-bottom: 20px; margin-bottom: 20px;
width: 30px; width: 30px;
color: var(--fg);
height: 30px; } height: 30px; }
.qlist__link { .qlist__link {
text-decoration: none; text-decoration: none;
font-size: var(--fses); font-size: var(--fses);
color: var(--fg);
margin-top: 1px; margin-top: 1px;
padding: 10px 12px; padding: 6px 12px;
border-radius: 5px; border-radius: 5px;
font-weight: bold; } font-weight: bold; }
.qlist__link:hover { .qlist__link:hover {
background-color: var(--accent); background-color: var(--accent);
color: var(--darkbg); } color: var(--fg); }

24
index.html
View File

@ -6,30 +6,31 @@
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<script src="https://unpkg.com/feather-icons"></script> <script src="https://unpkg.com/feather-icons"></script>
</head> </head>
<body class="darkfg darkbg"> <body class="">
<button id="themeButton"><i class="bicon" data-feather="sun"></i></button>
<div class="container"> <div class="container">
<div class="fblock"> <div class="fblock">
<div class="clock "> <div class="clock ">
<div id="hour" class="darkfg"></div> <div id="hour" class=""></div>
<div id="separator" class="darkfg"></div> <div id="separator" class=""></div>
<div id="minutes" class="darkfg"></div> <div id="minutes" class=""></div>
</div> </div>
<div id="greetings" class="darkfg"></div> <div id="greetings" class=""></div>
</div> </div>
<div class="sblock"> <div class="sblock">
<div class="sblock__date"> <div class="sblock__date">
<div id="month" class="darkfg"></div> <div id="month" class=""></div>
<div id="day" class="darkfg"></div> <div id="day" class=""></div>
</div> </div>
<div class="sblock__weather"> <div class="sblock__weather">
<div class="weather-icon"> <div class="weather-icon">
<img src="icons/unknown.png" /> <img src="icons/unknown.png" />
</div> </div>
<div class="temperature-value"> <div class="temperature-value">
<p>- °<span class="darkfg">c</span></p> <p class="">- °<span class="g">c</span></p>
</div> </div>
<div class="temperature-description"> <div class="temperature-description">
<p class="darkfg"></p> <p class=""></p>
</div> </div>
</div> </div>
</div> </div>
@ -73,7 +74,7 @@
</a> </a>
</div> </div>
<div class="card darksbg qlist qlist__1"> <div class="card qlist qlist__1">
<i class="qlist__head" data-feather="music"></i> <i class="qlist__head" data-feather="music"></i>
<a <a
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
@ -97,7 +98,7 @@
> >
</div> </div>
<div class="card darksbg qlist qlist__2"> <div class="card qlist qlist__2">
<i class="qlist__head" data-feather="coffee"></i> <i class="qlist__head" data-feather="coffee"></i>
<a href="https://www.linkedin.com" class="qlist__link" <a href="https://www.linkedin.com" class="qlist__link"
>LinkedIn</a >LinkedIn</a
@ -112,6 +113,7 @@
<script src="js/time.js"></script> <script src="js/time.js"></script>
<script src="js/weather.js"></script> <script src="js/weather.js"></script>
<script src="js/greeting.js"></script> <script src="js/greeting.js"></script>
<script src="js/theme.js"></script>
<script> <script>
feather.replace(); feather.replace();
</script> </script>

27
js/theme.js
View File

@ -1,23 +1,10 @@
let dark = document.getElementById('dark'); let darkTheme = localStorage.getItem('darkTheme');
let light = document.getElementById('light'); const themeToggle = document.querySelector('#themeButton');
let body = document.body;
let theme = localStorage.getItem('theme'); const enableDark = () => {
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');
} }
themeToggle.addEventListener('click', () => {
}); });
function getTheme() {
body.classList.add(theme)
toggleTheme.textContent = theme;
}
getTheme();

2
js/weather.js
View File

@ -52,6 +52,6 @@ function getWeather(latitude, longitude) {
// Display Weather info // Display Weather info
function displayWeather() { function displayWeather() {
iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`; 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; descElement.innerHTML = weather.description;
} }

104
sass/main.scss
View File

@ -15,17 +15,11 @@ $bp-smallest: 31.25em;
// C O L O R S // C O L O R S
--accent: #20a4f3; --accent: #186efd60;
// Colors Dark theme --bg: #1e1f21;
--darkbg: #1e1f21; --sbg: #2c2d31;
--darksbg: #2c2d31; --fg: #d8dee9;
--darkfg: #d8dee9;
// Colors White theme
--lightbg: #ffffff;
--lightsbg: #f9fafa;
--lightfg: #000000;
@media only screen and (max-width: $bp-large) { @media only screen and (max-width: $bp-large) {
--fsg: 100px; --fsg: 100px;
@ -33,49 +27,59 @@ $bp-smallest: 31.25em;
--fss: 20px; --fss: 20px;
} }
} }
.lightmode {
--accent: #186efdaa;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;font-family: 'Open Sans', sans-serif; box-sizing: border-box;
color: var(--darkfg); font-family: 'Open Sans', sans-serif;
font-size: 13.5px; font-size: 13.5px;
transition: 0.2s ease-in-out; 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 { body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: var(--bg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .container {
width: 150vh; width: 150vh;
height: 85vh; height: 85vh;
@ -99,10 +103,11 @@ body {
.card { .card {
box-shadow: 0 5px 7px rgba(#000000, 0.35); box-shadow: 0 5px 7px rgba(#000000, 0.35);
border-radius: 5px; border-radius: 5px;
background-color: var(--sbg);
&:hover { &:hover {
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);
} }
} }
@ -158,12 +163,14 @@ body {
#minutes { #minutes {
font-size: var(--fsg); font-size: var(--fsg);
font-weight: bolder; font-weight: bolder;
color: var(--fg);
} }
#month, #month,
#day { #day {
font-size: var(--fsm); font-size: var(--fsm);
font-weight: bold; font-weight: bold;
color: var(--fg);
} }
#day { #day {
margin-left: 20px; margin-left: 20px;
@ -171,7 +178,7 @@ body {
#greetings { #greetings {
font-size: var(--fses); font-size: var(--fses);
font-weight: lighter; color: var(--fg);
@media only screen and (max-width: $bp-large) { @media only screen and (max-width: $bp-large) {
font-size: var(--fss); font-size: var(--fss);
@ -188,10 +195,12 @@ body {
font-size: var(--fss); font-size: var(--fss);
font-weight: bolder; font-weight: bolder;
margin-left: 15px; margin-left: 15px;
color: var(--fg);
} }
&-description p { &-description p {
font-size: var(--fss); font-size: var(--fss);
margin-left: 15px; margin-left: 15px;
color: var(--fg);
} }
} }
@ -217,14 +226,15 @@ body {
&__icon { &__icon {
width: 26px; width: 26px;
height: 26px; height: 26px;
color: var(--fg);
} }
&__link { &__link {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--sbg);
width: 100%; width: 100%;
background-color: var(--darksbg);
box-shadow: 0 5px 7px rgba(#000000, 0.35); box-shadow: 0 5px 7px rgba(#000000, 0.35);
border-radius: 5px; border-radius: 5px;
&-1 { &-1 {
@ -254,12 +264,12 @@ body {
&:hover { &:hover {
background-color: var(--accent); 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 { & svg {
stroke: var(--darkbg); stroke: var(--fg);;
} }
} }
} }
@ -286,19 +296,21 @@ body {
margin-top: 30px; margin-top: 30px;
margin-bottom: 20px; margin-bottom: 20px;
width: 30px; width: 30px;
color: var(--fg);
height: 30px; height: 30px;
} }
&__link { &__link {
text-decoration: none; text-decoration: none;
font-size: var(--fses); font-size: var(--fses);
color: var(--fg);
margin-top: 1px; margin-top: 1px;
padding: 10px 12px; padding: 6px 12px;
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold;
&:hover { &:hover {
background-color: var(--accent); background-color: var(--accent);
color: var(--darkbg); color: var(--fg);
} }
} }
} }