Update index.css

LarryIVC · Apr 21, 2023 · 4bbf163 · 4bbf163
1 parent bf95011
commit 4bbf163
Showing 1 changed file with 65 additions and 15 deletions.
diff --git a/src/index.css b/src/index.css
@@ -6,52 +6,71 @@
 }
 
 body {
-  background-color: cornflowerblue;
+  background-image: url(./bg-codm.jpg);
+  background-size: cover;
+  /* background-repeat: no-repeat;   */
   font-size: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  height: 100vh;
+}
+
+h1 {
+  color: rgb(87, 88, 57);
 }
 
 h2 {
   font-size: 1.25em;
+  color: rgb(87, 88, 57);
 }
 
 button {
   cursor: pointer;
   border: 1px solid #000;
   box-shadow: 2px 2px;
-  padding: 7px;
+  padding: 0.43rem;
+  transition: 300ms;
+}
+
+button:hover {
+  background-color: #F9EA00;
+  transform: scale(1.05);
 }
 
 ul {
   list-style: none;
 }
 
 .container-width {
-  width: 600px;
+  width: 37.5rem;
 }
 
 header {
   margin-top: 50px;
-  background-color: #fff;
+  background-color: rgba(255, 255, 255,0.8);
   padding: 10px;
+  border-top-right-radius: 1.56rem;
+  border-top-left-radius: 1.56rem;
 }
 
 main {
   display: flex;
   flex-direction: row;
   gap: 25px;
-  background-color: #fff;
+  background-color: rgba(255, 255, 255,0.8);
+  border-bottom-left-radius: 1.56rem;
+  border-bottom-right-radius: 1.56rem;
+  padding: 10px;
 }
 
 .left {
   display: flex;
   flex-direction: column;
   width: 50%;
-  gap: 15px;
-  padding: 5px;
+  gap: 0.93rem;
+  padding: 0.31rem;
 }
 
 .header-left {
@@ -61,14 +80,15 @@ main {
 }
 
 .scores-list {
-  border: 1px solid #000;
+  border: 1px solid rgb(87, 88, 57);
+  border-radius: 0.31rem;
   padding: 10px;
 }
 
 #ul-scores {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 0.31rem;
   justify-content: space-between;
 }
 
@@ -79,17 +99,16 @@ main {
 }
 
 .scores-list li:nth-child(even) {
-  background-color: rgba(212, 218, 221, 0.89);
+  background-color:  rgba(87, 88, 57, 0.9);
+  color: #fff;
 }
 
 .right {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 0.93rem;
   width: 50%;
-
-  /* text-align: right; */
-  padding: 5px;
+  padding: 0.31rem;
 }
 
 .frm-add-score {
@@ -101,10 +120,41 @@ main {
 
 .frm-add-score input {
   width: 100%;
-  padding: 5px 7px;
+  padding: 0.31rem 0.43rem;
+  border-radius: 0.31rem;
+  animation-duration: 300ms;
+}
+
+.frm-add-score input:hover {
+  transform:scale(1.07)
 }
 
 .btn-cnt {
   justify-content: right;
   text-align: right;
 }
+
+@media (max-width: 768px) {
+
+  body {
+    font-size: 12px;
+
+    background-size: contain;
+    background-repeat: repeat;
+  }
+
+  main {
+    flex-direction: column;
+  }
+
+  .left {
+    width: auto;
+  }
+
+  .right {
+    width: auto;
+  }
+  .container-width {
+    width: 80%;
+  }
+}