Restyled theme to add visual sections

wieli99 · Nov 22, 2019 · 6f12bb0 · 6f12bb0
1 parent 06d0e25
commit 6f12bb0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/public/css/mobile.css b/public/css/mobile.css
@@ -93,6 +93,11 @@
         text-align: center;
     }
 
+    .sectionweek-weather{
+        border-radius: 25px;
+        background-color: #f5f5f5;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
+    }
 
     .sectionweeksection {
         display: flex;
@@ -170,6 +175,9 @@
 
     .sectioncharts {
         margin-top: 5%;
+        border-radius: 25px;
+        background-color: #f5f5f5;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     .humtimeline {
@@ -185,12 +193,14 @@
 
     .map {
         margin-top: 5%;
-        margin-left: 2%;
-        margin-right: 2%;
+        max-width: 100%;
+        border-radius: 25px;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     #mapid {
         height: 400px;
+        border-radius: 25px;
     }
 
 
@@ -214,6 +224,7 @@
         border: 2px solid;
         border-color: #e9e9e9;
         border-radius: 25px;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     button {
@@ -226,6 +237,7 @@
         border-radius: 25px;
         color: black;
         margin-right: 1%;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     button:hover {
@@ -273,6 +285,8 @@
         display: inline-block;
         width: 60px;
         height: 34px;
+        border-radius: 25px;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     /* Hide default HTML checkbox */
@@ -290,7 +304,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #ccc;
+        background-color: #e9e9e9;
         -webkit-transition: .4s;
         transition: .4s;
     }

diff --git a/public/css/night.css b/public/css/night.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #111133;
+    background-color: #141437;
 }
 
 
@@ -26,6 +26,11 @@ body {
     color: #e0e0e0;
 }
 
+.sectionweek-weather{
+    background-color: #101032;
+    border-radius: 25px;
+    box-shadow: 0 2px 20px 0 #000022, 0 -2px 20px 0 #000022;
+}
 
 .weekname {
     color: #e0e0e0;
@@ -50,16 +55,27 @@ body {
     filter: invert(1);
 }
 
+.sectioncharts{
+    background-color: #101032;
+    border-radius: 25px;
+    box-shadow: 0 2px 20px 0 #000022, 0 -2px 20px 0 #000022;
+}
+
 
 #searchcityname {
     color: #e0e0e0;
 }
 
+.map{
+    box-shadow: 0 2px 20px 0 #000022, 0 -2px 20px 0 #000022;
+}
+
 
 button {
     color: #c0c0c0;
     background-color: #222244;
     border-color: #222244;
+    box-shadow: 0 2px 20px 0 #000022, 0 -2px 20px 0 #000022;
 }
 
 button:hover {
@@ -71,8 +87,13 @@ input {
     color: #c0c0c0;
     background-color: #222244;
     border-color: #222244;
+    box-shadow: 0 2px 20px 0 #000022, 0 -2px 20px 0 #000022;
 }
 
+.switch{
+    border-radius: 25px;
+    box-shadow: 0 2px 20px 0 #000022, 0 -2px 20px 0 #000022;
+}
 
 footer {
     color: #e0e0e0;

diff --git a/public/css/style.css b/public/css/style.css
@@ -97,6 +97,9 @@
 
     .sectionweek-weather {
         display: flex;
+        border-radius: 25px;
+        background-color: #f5f5f5;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     .sectionweek {
@@ -154,6 +157,8 @@
         flex-direction: column;
         max-width: 1px;
         margin-right: 1%;
+        margin-top: 2%;
+        margin-bottom: 2%;
     }
 
     .sepline {
@@ -182,9 +187,10 @@
 
     .sectioncharts {
         display: flex;
-        flex-grow: 1;
-        flex-basis: 0;
         margin-top: 5%;
+        border-radius: 25px;
+        background-color: #f5f5f5;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     .humtimeline {
@@ -202,12 +208,14 @@
 
     .map {
         margin-top: 5%;
-        margin-left: 2%;
-        margin-right: 2%;
+        max-width: 100%;
+        border-radius: 25px;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     #mapid {
         height: 400px;
+        border-radius: 25px;
     }
 
 
@@ -236,6 +244,7 @@
         border-color: #e9e9e9;
         border-radius: 25px;
         color: black;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     button:hover {
@@ -257,6 +266,7 @@
         border: 2px solid;
         border-color: #e9e9e9;
         border-radius: 25px;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
 
@@ -273,11 +283,12 @@
 
     /* The switch - the box around the slider */
     .switch {
-        margin-right: 2%;
         position: relative;
         display: inline-block;
         width: 60px;
         height: 34px;
+        border-radius: 25px;
+        box-shadow: 0 2px 20px 0 #ababab, 0 -2px 20px 0 #ababab;
     }
 
     /* Hide default HTML checkbox */
@@ -295,7 +306,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #ccc;
+        background-color: #e9e9e9;
         -webkit-transition: .4s;
         transition: .4s;
     }