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

Added responsive

Browse Source
This commit is contained in:
Rod 2020-08-14 12:50:58 -05:00
parent 46ce0da2c1
commit d39adde1d5
2 changed files with 169 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

359
css/style.css
View File

@ -1,257 +1,188 @@
:root { :root {
--fsg: 150px; --fsg: 150px;
--fsm: 85px; --fsm: 85px;
--fss: 30px; --fss: 30px;
--fses: 18px; --fses: 18px;
--bg: #1f2229; --bg: #1f2229;
--fg: #d8dee9; --fg: #d8dee9;
--qbg: #2c323d; --qbg: #2c323d;
--blue: #5e81ac; --blue: #5e81ac; }
} @media only screen and (max-width: 68.75em) {
:root {
--fsg: 100px;
--fsm: 65px;
--fss: 20px; } }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box; font-family: 'Proxima nova', monospace;
font-family: 'Proxima nova', monospace; color: var(--fg);
color: var(--fg); font-size: 13.5px;
font-size: 13.5px; transition: 0.2s ease-in-out; }
-webkit-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: -webkit-box; display: flex;
display: -ms-flexbox; align-items: center;
display: flex; justify-content: center; }
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.container { .container {
width: 150vh; width: 150vh;
height: 85vh; height: 85vh;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
grid-gap: 30px; grid-gap: 30px;
padding: 20px; padding: 20px; }
} @media only screen and (max-width: 68.75em) {
.container > * { .container {
width: 100%; grid-gap: 20px;
} padding: 40px; } }
.container > * {
width: 100%; }
.card { .card {
background-color: var(--qbg); background-color: var(--qbg);
-webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); 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; .card:hover {
}
.card:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem); transform: translateY(-0.3rem);
-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35);
}
.hour { .hour {
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
display: -webkit-box; display: flex;
display: -ms-flexbox; flex-direction: column;
display: flex; align-items: center;
-webkit-box-orient: vertical; justify-content: center; }
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.secon { .secon {
grid-column: 3 / span 2; grid-column: 3 / span 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
display: -webkit-box; display: flex;
display: -ms-flexbox; flex-direction: column;
align-items: center;
justify-content: center; }
.secon__date {
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
} margin-top: 30px; }
.secon__date { .secon__weather {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center; justify-content: center; }
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
}
.secon__weather {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.clock { .clock {
display: -webkit-box; display: flex;
display: -ms-flexbox; align-items: center;
display: flex; justify-content: center; }
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#hour, #hour,
#separator, #separator,
#minutes { #minutes {
font-size: var(--fsg); font-size: var(--fsg);
font-weight: bolder; font-weight: bolder; }
}
#month, #month,
#day { #day {
font-size: var(--fsm); font-size: var(--fsm);
font-weight: bold; font-weight: bold; }
}
#day { #day {
margin-left: 20px; margin-left: 20px; }
}
#greetings { #greetings {
font-size: var(--fses); font-size: var(--fses);
font-weight: lighter; font-weight: lighter; }
}
.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; }
}
.temperature-description p { .temperature-description p {
font-size: var(--fss); font-size: var(--fss);
margin-left: 15px; margin-left: 15px; }
}
.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) {
.qlink__icon { .qlink {
padding: 60px;
grid-gap: 20px; } }
.qlink__icon {
width: 26px; width: 26px;
height: 26px; height: 26px; }
} .qlink__link {
.qlink__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: var(--qbg); background-color: var(--qbg);
-webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
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 { grid-row: 1;
grid-row: 1; grid-column: 1; }
grid-column: 1; .qlink__link-2 {
} grid-row: 1;
.qlink__link-2 { grid-column: 2; }
grid-row: 1; .qlink__link-3 {
grid-column: 2; grid-row: 2;
} grid-column: 1; }
.qlink__link-3 { .qlink__link-4 {
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 2; }
} .qlink__link-5 {
.qlink__link-4 { grid-row: 1;
grid-row: 2; grid-column: 3; }
grid-column: 2; .qlink__link-6 {
} grid-row: 2;
.qlink__link-5 { grid-column: 3; }
grid-row: 1; .qlink__link:hover {
grid-column: 3; background-color: var(--blue);
} transform: translateY(-0.3rem); }
.qlink__link-6 { .qlink__link:hover svg {
grid-row: 2; stroke: var(--bg); }
grid-column: 3;
}
.qlink__link:hover {
background-color: var(--blue);
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem);
}
.qlink__link:hover svg {
stroke: var(--bg);
}
.qlist { .qlist {
display: -webkit-box; display: flex;
display: -ms-flexbox; align-items: center;
display: flex; flex-direction: column; }
-webkit-box-align: center; .qlist__3 {
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.qlist__3 {
grid-column: 3; grid-column: 3;
grid-row: 3 / span 2; grid-row: 3 / span 2; }
} .qlist__4 {
.qlist__4 {
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;
height: 30px; height: 30px; }
} .qlist__link {
.qlist__link {
text-decoration: none; text-decoration: none;
font-size: var(--fses); font-size: var(--fses);
margin-top: 1px; margin-top: 1px;
padding: 10px 12px; padding: 10px 12px;
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold; }
} .qlist__link:hover {
.qlist__link:hover { background-color: var(--blue);
background-color: var(--blue); color: var(--bg); }
color: var(--bg);
}

24
sass/main.scss
View File

@ -1,3 +1,11 @@
// Variables
$bp-largest: 75em;
$bp-large: 68.75em;
$bp-medium: 56.25em;
$bp-small: 37.5em;
$bp-smallest: 31.25em;
:root { :root {
--fsg: 150px; --fsg: 150px;
--fsm: 85px; --fsm: 85px;
@ -7,6 +15,12 @@
--fg: #d8dee9; --fg: #d8dee9;
--qbg: #2c323d; --qbg: #2c323d;
--blue: #5e81ac; --blue: #5e81ac;
@media only screen and (max-width: $bp-large) {
--fsg: 100px;
--fsm: 65px;
--fss: 20px;
}
} }
* { * {
@ -38,6 +52,11 @@ body {
grid-gap: 30px; grid-gap: 30px;
padding: 20px; padding: 20px;
@media only screen and (max-width: $bp-large) {
grid-gap: 20px;
padding: 40px;
}
& > * { & > * {
width: 100%; width: 100%;
} }
@ -141,6 +160,11 @@ body {
grid-gap: 30px; grid-gap: 30px;
padding: 30px; padding: 30px;
@media only screen and (max-width: $bp-large) {
padding: 60px;
grid-gap: 20px;
}
&__icon { &__icon {
width: 26px; width: 26px;
height: 26px; height: 26px;