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

New Gif

Browse Source
This commit is contained in:
Rod 2020-08-30 13:22:11 -05:00
parent f13859d863
commit 50ab90c94a
4 changed files with 230 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/preview.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 804 KiB

BIN
assets/preview.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 KiB

403
css/style.css
View File

@ -1,235 +1,288 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
:root { :root {
--fsg: 150px; --fsg: 150px;
--fsm: 85px; --fsm: 85px;
--fss: 30px; --fss: 30px;
--fses: 18px; --fses: 18px;
--accent: #186efdaa; --accent: #186efdaa;
--bg: #f5f5f5; --bg: #f5f5f5;
--sbg: #e4e6e6; --sbg: #e4e6e6;
--fg: #3a3a3a; } --fg: #3a3a3a;
@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;
}
}
.darktheme { .darktheme {
--accent: #186efd60; --accent: #186efd60;
--bg: #1e1f21; --bg: #1e1f21;
--sbg: #2c2d31; --sbg: #2c2d31;
--fg: #d8dee9; } --fg: #d8dee9;
}
* { * {
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;
font-size: 13.5px; font-size: 13.5px;
transition: 0.2s ease-in-out; } transition: 0.2s ease-in-out;
}
body { body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: var(--bg); 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;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 30px;
padding: 20px; }
@media only screen and (max-width: 68.75em) {
.container {
grid-gap: 20px;
padding: 40px; } }
.container > * {
width: 100%; }
.card {
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px;
background-color: var(--sbg); }
.card:hover {
transform: translateY(-0.2rem);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
.fblock {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
@media only screen and (max-width: 68.75em) {
.fblock {
grid-row: 1 / span 2;
grid-column: 1 / span 4; } }
.sblock {
grid-column: 3 / span 2;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.sblock__date {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 30px; } }
.sblock__weather {
#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;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 30px;
padding: 20px;
}
@media only screen and (max-width: 68.75em) {
.container {
grid-gap: 20px;
padding: 40px;
}
}
.container > * {
width: 100%;
}
.card {
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px;
background-color: var(--sbg);
}
.card:hover {
transform: translateY(-0.2rem);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
}
.fblock {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 68.75em) {
.fblock {
grid-row: 1 / span 2;
grid-column: 1 / span 4;
}
}
.sblock {
grid-column: 3 / span 2;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sblock__date {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; } justify-content: center;
@media only screen and (max-width: 68.75em) { margin-top: 30px;
}
.sblock__weather {
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 68.75em) {
.sblock { .sblock {
display: none; } } display: none;
}
}
.clock { .clock {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; } justify-content: center;
}
#hour, #hour,
#separator, #separator,
#minutes { #minutes {
font-size: var(--fsg); font-size: var(--fsg);
font-weight: bolder; font-weight: bolder;
color: var(--fg); } color: var(--fg);
}
#month, #month,
#day { #day {
font-size: var(--fsm); font-size: var(--fsm);
font-weight: bold; font-weight: bold;
color: var(--fg); } color: var(--fg);
}
#day { #day {
margin-left: 20px; } margin-left: 20px;
}
#greetings { #greetings {
font-size: var(--fses); font-size: var(--fses);
color: var(--fg); } 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);
}
}
.weather-icon img { .weather-icon img {
width: 80px; width: 80px;
height: 80px; } height: 80px;
}
.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); } 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); } color: var(--fg);
}
.qlink { .qlink {
grid-row: 3 / span 2; grid-row: 3 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
grid-gap: 30px; grid-gap: 30px;
padding: 30px; } padding: 30px;
@media only screen and (max-width: 68.75em) { }
@media only screen and (max-width: 68.75em) {
.qlink { .qlink {
grid-row: 3 / span 2; grid-row: 3 / span 2;
grid-column: 1 / span 4; grid-column: 1 / span 4;
grid-gap: 40px; grid-gap: 40px;
padding: 20px; } } padding: 20px;
.qlink__icon { }
}
.qlink__icon {
width: 26px; width: 26px;
height: 26px; height: 26px;
color: var(--fg); } 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); background-color: var(--sbg);
width: 100%; width: 100%;
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 { }
grid-row: 1; .qlink__link-1 {
grid-column: 1; } grid-row: 1;
.qlink__link-2 { grid-column: 1;
grid-row: 1; }
grid-column: 2; } .qlink__link-2 {
.qlink__link-3 { grid-row: 1;
grid-row: 2; grid-column: 2;
grid-column: 1; } }
.qlink__link-4 { .qlink__link-3 {
grid-row: 2; grid-row: 2;
grid-column: 2; } grid-column: 1;
.qlink__link-5 { }
grid-row: 1; .qlink__link-4 {
grid-column: 3; } grid-row: 2;
.qlink__link-6 { grid-column: 2;
grid-row: 2; }
grid-column: 3; } .qlink__link-5 {
.qlink__link:hover { grid-row: 1;
background-color: var(--accent); grid-column: 3;
transform: translateY(-0.2rem); }
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); } .qlink__link-6 {
.qlink__link:hover svg { grid-row: 2;
stroke: var(--fg); } grid-column: 3;
}
.qlink__link:hover {
background-color: var(--accent);
transform: translateY(-0.2rem);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
}
.qlink__link:hover svg {
stroke: var(--fg);
}
.qlist { .qlist {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; } flex-direction: column;
@media only screen and (max-width: 68.75em) { }
@media only screen and (max-width: 68.75em) {
.qlist { .qlist {
display: none; } } display: none;
.qlist__1 { }
}
.qlist__1 {
grid-column: 3; grid-column: 3;
grid-row: 3 / span 2; } grid-row: 3 / span 2;
.qlist__2 { }
.qlist__2 {
grid-column: 4; grid-column: 4;
grid-row: 3 / span 2; } grid-row: 3 / span 2;
.qlist__head { }
.qlist__head {
margin-top: 30px; margin-top: 30px;
margin-bottom: 20px; margin-bottom: 20px;
width: 30px; width: 30px;
color: var(--fg); 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); color: var(--fg);
margin-top: 1px; margin-top: 1px;
padding: 6px 12px; padding: 6px 12px;
border-radius: 5px; border-radius: 5px;
font-weight: bold; } font-weight: bold;
.qlist__link:hover { }
background-color: var(--accent); .qlist__link:hover {
color: var(--fg); } background-color: var(--accent);
color: var(--fg);
}

4
index.html
View File

@ -111,9 +111,9 @@
</div> </div>
</div> </div>
<script src="js/time.js"></script> <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 src="js/theme.js"></script>
<script src="js/greeting.js"></script>
<script src="js/weather.js"></script>
<script> <script>
feather.replace(); feather.replace();
</script> </script>