Merge pull request #22 from aidan-yip/v2.0.0

Changed style to Neumorphism
aidan-yip · May 23, 2024 · 6526b54 · 6526b54
2 parents ad174c9 + 42f85ce
commit 6526b54
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 51 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
-
 .DS_Store
 public/.DS_Store
diff --git a/dark_mode.css b/dark_mode.css
@@ -1,39 +1,28 @@
 @media (prefers-color-scheme: dark) {
   #background {
-    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+    background-image: linear-gradient(to top, #1b7474 0%, #290753 100%);
   }
 
   .container {
-    background: linear-gradient(
-      137deg,
-      rgba(93, 93, 93, 0.4) 0%,
-      rgba(0, 0, 0, 0.4) 100%
-    );
-    border: solid 1px #515151;
-    box-shadow: 0px 0px 80px #eaeaea3b;
+    border-radius: 35px;
+    background: linear-gradient(145deg, #282828, #212121);
+    box-shadow: 13px 13px 28px #104747, -13px -13px 28px #290753;
   }
 
   .side_block {
-    background: linear-gradient(
-      137deg,
-      rgba(93, 93, 93, 0.6) 0%,
-      rgba(0, 0, 0, 0.6) 100%
-    );
-    border: solid 1px #6e6e6e;
-    box-shadow: 0px 0px 50px #eaeaea3b;
+    border-radius: 35px;
+    background: #252525;
+    box-shadow: 9px 9px 18px #131313, -9px -9px 18px #373737;
   }
 
   #inner {
-    background: linear-gradient(
-      137deg,
-      rgba(93, 93, 93, 0.6) 0%,
-      rgba(0, 0, 0, 0.6) 100%
-    );
-    border: solid 1px #6e6e6e;
-    box-shadow: 0px 0px 50px #eaeaea3b;
+    border-radius: 35px;
+    background: #252525;
+    box-shadow: 9px 9px 18px #131313, -9px -9px 18px #373737;
   }
 
-  h1, #location {
+  h1,
+  #location {
     color: #ffffff;
   }
 

diff --git a/index.html b/index.html
@@ -281,7 +281,7 @@ <h1 id="location">TODAY</h1>
         </div>
 
         <div id="side_out">
-          <div class="side_block">
+          <div class="side_block" id="block_one">
             <div class="column">
               <input
                 type="text"

diff --git a/styles.css b/styles.css
@@ -42,13 +42,13 @@
 }
 
 body {
-  background-color: #0052bc;
+  background-color: #4183bd;
   padding-top: 0px;
   min-width: 375px;
 }
 
 #background {
-  background-image: linear-gradient(to top, #92fe9d 0%, #00c9ff 100%);
+  background-image: linear-gradient(to top, #b6fabd 0%, #a7ecff 100%);
   background-size: cover;
   background-position: center;
   background-repeat: repeat;
@@ -67,15 +67,11 @@ body {
   height: auto;
   text-align: center;
   padding: 25px;
-  background: linear-gradient(
-    328deg,
-    rgba(209, 209, 209, 0.4) 0%,
-    rgba(186, 186, 186, 0.4) 100%
-  );
-  box-shadow: 0 0 80px #0000006b;
-  border-radius: 35px;
-  border: solid 1px #f1f1f1;
   margin-bottom: 10px;
+  border-radius: 35px;
+  background: #ebebeb;
+  box-shadow: 20px 20px 60px #b6fabd, -20px -20px 60px #a7ecff;
+  z-index: 1;
   /* fade in */
   animation: fadeInAnimation ease 5s;
   animation-iteration-count: 1;
@@ -86,24 +82,21 @@ body {
 #side_out {
   width: 32%;
   height: 100%;
+  margin-left: 20px;
 }
 
 .side_block {
   display: flex;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 20px;
   width: 100%;
   height: 200px;
+  z-index: 2;
   border-radius: 35px;
-  border: solid 1px #ffffff;
-  box-shadow: 0px 0px 20px #5b5b5b3b;
-  background: linear-gradient(
-    328deg,
-    rgba(255, 255, 255, 0.7) 0%,
-    rgba(255, 255, 255, 0.7) 100%
-  );
-  z-index: 1;
+  background: #ebebeb;
+  box-shadow: 10px 10px 20px #a5a5a5, -10px -10px 20px #ffffff;
 }
 
 #block_two {
@@ -150,15 +143,10 @@ iframe {
   height: auto;
   margin-left: auto;
   margin-right: auto;
+  z-index: 1;
   border-radius: 35px;
-  border: solid 1px #ffffff;
-  box-shadow: 0px 0px 20px #5b5b5b3b;
-  background: linear-gradient(
-    328deg,
-    rgba(255, 255, 255, 0.7) 0%,
-    rgba(255, 255, 255, 0.7) 100%
-  );
-  z-index: 0;
+  background: #ebebeb;
+  box-shadow: 10px 10px 20px #a5a5a5, -10px -10px 20px #ffffff;
 }
 
 h1,
@@ -322,6 +310,7 @@ a:visited {
 
   button {
     font-size: 15px;
+    margin-bottom: 0px;
   }
 
   #clock {
@@ -332,11 +321,21 @@ a:visited {
     height: auto;
     width: 100%;
     margin-top: 20px;
+    margin-bottom: 20px;
   }
 
   #side_out {
     width: 100%;
     padding-top: 20px;
+    margin-left: 0px;
+  }
+
+  .side_block {
+    margin-bottom: 20px;
+  }
+
+  #block_one {
+    height: 180px;
   }
 
   #block_two {