XoTENoC · December 22, 2019 13:47 · Dec 22, 2019 · Dec 22, 2019
diff --git a/style.scss b/style.scss
@@ -233,13 +233,7 @@ input:checked+.slider:before {
     margin-top: 100px;
 }
 
-@mixin themable($theme-name,
-$body-bg,
-$left-bg,
-$right-bg,
-$innertext,
-$button-bg,
-$text-color) {
+@mixin themable($theme-name, $body-bg, $left-bg, $right-bg, $innertext, $button-bg, $text-color) {
     .#{$theme-name} {
         background-color: $body-bg;
         color: $text-color;
@@ -262,17 +256,5 @@ $text-color) {
     }
 }
 
-@include themable(light,
-#3498db,
-#497265,
-#82aa91,
-#fff,
-#bc6a49,
-#fff);
-@include themable(dark,
-#2d3436,
-#497265,
-#82aa91,
-#fff,
-#bc6a49,
-#fff);
+@include themable(light, #3498db, #497265, #82aa91, #fff, #bc6a49, #fff);
+@include themable(dark, #2d3436, #497265, #82aa91, #fff, #bc6a49, #fff);
diff --git a/style.scss b/style.scss
@@ -0,0 +1,278 @@
+@font-face {
+    font-family: 'Bro';
+    src: url('../Fonts/brandon-grotesque-regular-cufonfonts-webfont/brandon-grotesque-black-58a8a3e824392.woff') format('woff');
+}
+
+html {
+    margin: 0px;
+    padding: 0px;
+    font-family: Bro;
+}
+
+body {
+    margin: 0px;
+    padding: 0px;
+}
+
+.container {
+    margin-top: 100px;
+}
+
+.Location {
+    text-align: center;
+    font-size: 25pt;
+    padding-bottom: 0px;
+    font-weight: bold;
+    text-transform: uppercase;
+    p {
+        margin-bottom: 0px;
+    }
+}
+
+.today-weather {
+    display: grid;
+    width: 95%;
+    margin: 0px auto 0px auto;
+    grid-template-columns: 50% 50%;
+    .temperature {
+        font-size: 170pt;
+        text-align: right;
+        margin-right: 20px;
+        .main-degree {
+            font-size: 100pt;
+            margin-bottom: auto;
+            font-family: sans-serif;
+        }
+    }
+    .day {
+        font-size: 30pt;
+        line-height: 10px;
+        padding-top: 25px;
+        margin-left: 20px;
+        #dis {
+            text-transform: uppercase;
+        }
+    }
+}
+
+.forecast {
+    width: 80%;
+    margin: 0px auto;
+    .day-forecast {
+        display: grid;
+        grid-template-columns: 50% 40% 10%;
+        /* background-color: #fa7d7d; */
+        font-size: 40pt;
+        padding-top: 2vh;
+        .day-of-week {
+            text-align: left;
+        }
+        .icon-space {
+            text-align: center;
+            img {
+                filter: invert(1);
+                height: 70px;
+            }
+        }
+        .weather {
+            text-align: right;
+        }
+        .main-degree-forecast {
+            font-size: 25pt;
+            font-family: sans-serif;
+        }
+    }
+}
+
+//menu
+
+/* This just resets the styles of our unordered list that makes our hamburger/hotdog icon */
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+
+/* Styles for the menu button */
+
+.menu-btn {
+    background-color: 3498db;
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
+    cursor: pointer;
+    height: 56px;
+    left: 24px;
+    position: fixed;
+    top: 24px;
+    width: 56px;
+}
+
+
+/* Styles for the menu */
+
+.menu {
+    bottom: 0;
+    background-color: #636e72;
+    left: 0;
+    margin: 0;
+    padding: 32px;
+    position: fixed;
+    top: 0;
+    width: 288px;
+    transform: translate3d(-100%, 0, 0);
+    transition: transform .2s linear;
+}
+
+
+/* Creating the hamburger/hotdog icon in CSS */
+
+.menu-btn li {
+    background-color: #ffffff;
+    bottom: 0;
+    height: 2px;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    width: 16px;
+    top: 0;
+    transition: all .3s ease-in-out;
+}
+
+
+/* The following two lines set the three lines of our hamburger/hotdog icon apart */
+
+.menu-btn li:first-child {
+    transform: translate3d(0, -4px, 0);
+}
+
+.menu-btn li:last-child {
+    transform: translate3d(0, 4px, 0);
+}
+
+
+/* We're now in the animation territory. These are the classes you toggle on with our Javascript function. */
+
+.menu-btn--on li:first-child {
+    transform: rotate(135deg) translate3d(0, 0, 0);
+}
+
+.menu-btn--on li:last-child {
+    transform: rotate(-135deg) translate3d(0, 0, 0);
+}
+
+.menu-btn--on li:nth-child(2) {
+    opacity: 0;
+}
+
+.menu--open {
+    transform: translate3d(0, 0, 0);
+}
+
+//theme switcher
+.theme-switch-wrapper {
+    display: flex;
+    align-items: center;
+    em {
+        margin-left: 10px;
+        font-size: 2rem;
+    }
+}
+
+.theme-switch {
+    display: inline-block;
+    height: 34px;
+    position: relative;
+    width: 60px;
+}
+
+.theme-switch input {
+    display: none;
+}
+
+.slider {
+    background-color: #ccc;
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .4s;
+}
+
+.slider:before {
+    background-color: #fff;
+    bottom: 4px;
+    content: "";
+    height: 26px;
+    left: 4px;
+    position: absolute;
+    transition: .4s;
+    width: 26px;
+}
+
+input:checked+.slider {
+    background-color: #66bb6a;
+}
+
+input:checked+.slider:before {
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.padding-top {
+    margin-top: 100px;
+}
+
+@mixin themable($theme-name,
+$body-bg,
+$left-bg,
+$right-bg,
+$innertext,
+$button-bg,
+$text-color) {
+    .#{$theme-name} {
+        background-color: $body-bg;
+        color: $text-color;
+        .logo-clock {
+            padding-top: 50px;
+            .logo {
+                height: 200px;
+                padding-left: 10vh;
+            }
+            .clock {
+                font-size: 50pt;
+                float: right;
+                padding-right: 10vh;
+            }
+        }
+        .bro-font {
+            font-family: bro, sans-serif;
+            font-style: normal;
+        }
+    }
+}
+
+@include themable(light,
+#3498db,
+#497265,
+#82aa91,
+#fff,
+#bc6a49,
+#fff);
+@include themable(dark,
+#2d3436,
+#497265,
+#82aa91,
+#fff,
+#bc6a49,
+#fff);