From cd3d46490a0687c8b96826e82cd20e33442391c1 Mon Sep 17 00:00:00 2001 From: Rod Date: Sat, 29 Aug 2020 23:16:35 -0500 Subject: [PATCH] Added open sans --- css/style.css | 49 ++++++++++++++++++++++++++++++++---------------- index.html | 32 +++++++++++++++---------------- js/weather.js | 2 +- sass/main.scss | 51 ++++++++++++++++++++++++++++++++++++-------------- 4 files changed, 87 insertions(+), 47 deletions(-) diff --git a/css/style.css b/css/style.css index a845f48..e96ce5e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,14 +1,15 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); :root { --fsg: 150px; --fsm: 85px; --fss: 30px; --fses: 18px; - --accent: #3F8CC9; - --darkbg: #1E1F21; - --darksbg: #2C2D31; + --accent: #20a4f3; + --darkbg: #1e1f21; + --darksbg: #2c2d31; --darkfg: #d8dee9; - --lightbg: #FFFFFF; - --lightsbg: #F9FAFA; + --lightbg: #ffffff; + --lightsbg: #f9fafa; --lightfg: #000000; } @media only screen and (max-width: 68.75em) { :root { @@ -20,15 +21,32 @@ margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Proxima nova', monospace; + 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(--darkbg); display: flex; align-items: center; justify-content: center; } @@ -49,14 +67,13 @@ body { width: 100%; } .card { - background-color: var(--darksbg); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); border-radius: 5px; } .card:hover { transform: translateY(-0.3rem); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); } -.hour { +.fblock { grid-row: 1 / span 2; grid-column: 1 / span 2; display: flex; @@ -64,28 +81,28 @@ body { align-items: center; justify-content: center; } @media only screen and (max-width: 68.75em) { - .hour { + .fblock { grid-row: 1 / span 2; grid-column: 1 / span 4; } } -.secon { +.sblock { grid-column: 3 / span 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } - .secon__date { + .sblock__date { display: flex; align-items: center; justify-content: center; margin-top: 30px; } - .secon__weather { + .sblock__weather { display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 68.75em) { - .secon { + .sblock { display: none; } } .clock { @@ -184,10 +201,10 @@ body { @media only screen and (max-width: 68.75em) { .qlist { display: none; } } - .qlist__3 { + .qlist__1 { grid-column: 3; grid-row: 3 / span 2; } - .qlist__4 { + .qlist__2 { grid-column: 4; grid-row: 3 / span 2; } .qlist__head { diff --git a/index.html b/index.html index 846d854..6b9f6ed 100644 --- a/index.html +++ b/index.html @@ -6,30 +6,30 @@ - +
-
-
-
-
-
+
+
+
+
+
-
+
-
-
-
-
+
+
+
+
-
+
-

- °c

+

- °c

-

+

@@ -73,7 +73,7 @@
-
+
-
+
LinkedIn