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

Added open sans

Browse Source
This commit is contained in:
Rod 2020-08-29 23:16:35 -05:00
parent dd20abae7a
commit cd3d46490a
4 changed files with 87 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/style.css
View File

@ -1,14 +1,15 @@
@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: #3F8CC9; --accent: #20a4f3;
--darkbg: #1E1F21; --darkbg: #1e1f21;
--darksbg: #2C2D31; --darksbg: #2c2d31;
--darkfg: #d8dee9; --darkfg: #d8dee9;
--lightbg: #FFFFFF; --lightbg: #ffffff;
--lightsbg: #F9FAFA; --lightsbg: #f9fafa;
--lightfg: #000000; } --lightfg: #000000; }
@media only screen and (max-width: 68.75em) { @media only screen and (max-width: 68.75em) {
:root { :root {
@ -20,15 +21,32 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Proxima nova', monospace; font-family: 'Open Sans', sans-serif;
color: var(--darkfg); 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(--darkbg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; } justify-content: center; }
@ -49,14 +67,13 @@ body {
width: 100%; } width: 100%; }
.card { .card {
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; }
.card:hover { .card:hover {
transform: translateY(-0.3rem); transform: translateY(-0.3rem);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); } box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
.hour { .fblock {
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
display: flex; display: flex;
@ -64,28 +81,28 @@ body {
align-items: center; align-items: center;
justify-content: center; } justify-content: center; }
@media only screen and (max-width: 68.75em) { @media only screen and (max-width: 68.75em) {
.hour { .fblock {
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 4; } } grid-column: 1 / span 4; } }
.secon { .sblock {
grid-column: 3 / span 2; grid-column: 3 / span 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; } justify-content: center; }
.secon__date { .sblock__date {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 30px; } margin-top: 30px; }
.secon__weather { .sblock__weather {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; } justify-content: center; }
@media only screen and (max-width: 68.75em) { @media only screen and (max-width: 68.75em) {
.secon { .sblock {
display: none; } } display: none; } }
.clock { .clock {
@ -184,10 +201,10 @@ body {
@media only screen and (max-width: 68.75em) { @media only screen and (max-width: 68.75em) {
.qlist { .qlist {
display: none; } } display: none; } }
.qlist__3 { .qlist__1 {
grid-column: 3; grid-column: 3;
grid-row: 3 / span 2; } grid-row: 3 / span 2; }
.qlist__4 { .qlist__2 {
grid-column: 4; grid-column: 4;
grid-row: 3 / span 2; } grid-row: 3 / span 2; }
.qlist__head { .qlist__head {

30
index.html
View File

@ -6,30 +6,30 @@
<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> <body class="darkfg darkbg">
<div class="container"> <div class="container">
<div class="hour"> <div class="fblock">
<div class="clock "> <div class="clock ">
<div id="hour"></div> <div id="hour" class="darkfg"></div>
<div id="separator"></div> <div id="separator" class="darkfg"></div>
<div id="minutes"></div> <div id="minutes" class="darkfg"></div>
</div> </div>
<div id="greetings"></div> <div id="greetings" class="darkfg"></div>
</div> </div>
<div class="secon"> <div class="sblock">
<div class="secon__date"> <div class="sblock__date">
<div id="month"></div> <div id="month" class="darkfg"></div>
<div id="day"></div> <div id="day" class="darkfg"></div>
</div> </div>
<div class="secon__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>c</span></p> <p>- °<span class="darkfg">c</span></p>
</div> </div>
<div class="temperature-description"> <div class="temperature-description">
<p></p> <p class="darkfg"></p>
</div> </div>
</div> </div>
</div> </div>
@ -73,7 +73,7 @@
</a> </a>
</div> </div>
<div class="card qlist qlist__3"> <div class="card darksbg 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 +97,7 @@
> >
</div> </div>
<div class="card qlist qlist__4"> <div class="card darksbg 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

2
js/weather.js
View File

@ -13,7 +13,7 @@ var tempUnit = 'C';
const KELVIN = 273.15; const KELVIN = 273.15;
// Use your own key for the Weather, Get it here: https://openweathermap.org/ // Use your own key for the Weather, Get it here: https://openweathermap.org/
const key = 'aa5b0a76dfbf87441928fb3cc32d3d68'; const key = 'aa5b0a76dfbf87441928fb3cc32d3d69';
// Set Position function // Set Position function
setPosition(); setPosition();

49
sass/main.scss
View File

@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
// Responsive // Responsive
$bp-largest: 75em; $bp-largest: 75em;
$bp-large: 68.75em; $bp-large: 68.75em;
@ -14,16 +15,16 @@ $bp-smallest: 31.25em;
// C O L O R S // C O L O R S
--accent: #3F8CC9; --accent: #20a4f3;
// Colors Dark theme // Colors Dark theme
--darkbg: #1E1F21; --darkbg: #1e1f21;
--darksbg: #2C2D31; --darksbg: #2c2d31;
--darkfg: #d8dee9; --darkfg: #d8dee9;
// Colors White theme // Colors White theme
--lightbg: #FFFFFF; --lightbg: #ffffff;
--lightsbg: #F9FAFA; --lightsbg: #f9fafa;
--lightfg: #000000; --lightfg: #000000;
@media only screen and (max-width: $bp-large) { @media only screen and (max-width: $bp-large) {
@ -36,18 +37,41 @@ $bp-smallest: 31.25em;
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;font-family: 'Open Sans', sans-serif;
font-family: 'Proxima nova', monospace;
color: var(--darkfg); 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(--darkbg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -73,7 +97,6 @@ body {
} }
.card { .card {
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;
@ -83,7 +106,7 @@ body {
} }
} }
.hour { .fblock {
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
@ -98,7 +121,7 @@ body {
} }
} }
.secon { .sblock {
grid-column: 3 / span 2; grid-column: 3 / span 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
@ -251,11 +274,11 @@ body {
display: none; display: none;
} }
&__3 { &__1 {
grid-column: 3; grid-column: 3;
grid-row: 3 / span 2; grid-row: 3 / span 2;
} }
&__4 { &__2 {
grid-column: 4; grid-column: 4;
grid-row: 3 / span 2; grid-row: 3 / span 2;
} }