👩‍🎨 styling final toucher

lauechev · Feb 11, 2025 · 75f1460 · 75f1460
1 parent 0f8d001
commit 75f1460
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -65,10 +65,10 @@ <h1>Type Checker</h1>
       <div class="option">
         <label> Colors</label>
         <div class="colors">
-          <div style="background-color: #2a2a2a; color: #fff" class="selected">a</div>
-          <div style="background-color: #fff; color: #2a2a2a">a</div>
-          <div style="background-color: #63ff03; color: #2a2a2a">a</div>
-          <div style="background-color: #ee0073; color: #2a2a2a">a</div>
+          <div style="background-color: #6b1f2d; color: #fa9ebc" class="selected">a</div>
+          <div style="background-color: #fd6f2f; color: #f1e3d1">a</div>
+          <div style="background-color: #fa9ebc; color: #6b1f2d">a</div>
+          <div style="background-color: #f1e3d1; color: #fa9ebc">a</div>
         </div>
       </div>
     </section>

diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -42,8 +42,8 @@ body {
   font-size: 16px;
   line-height: 1.5;
 
-  background-color: var(--background);
-  color: var(--textColor);
+  background-color: var(--plum);
+  color: var(--pink);
   margin: 0 0 0 280px;
 }
 
@@ -53,14 +53,15 @@ body {
   left: 0;
   height: 100vh;
   width: 280px;
-  background-color: var(--background);
+  background-color: var(--pink);
+  color: var(--plum);
   padding: 40px;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border: none;
 }
 
 h1 {
   font-weight: 700;
-  font-size: 24px;
+  font-size: 30px;
 }
 
 .option {
@@ -85,68 +86,82 @@ label span {
 
 input[type='text'] {
   width: 100%;
-  background-color: var(--background2);
+  background-color: var(--pinkGray);
   border: none;
-  color: var(--white);
+  color: var(--cream);
   outline: none;
   padding: 5px 7px 5px 7px;
 }
+::placeholder {
+  color: var(--lightPlum);
+}
 
 .output {
+  font-family: 'Taviraj';
   font-size: 64px;
   width: 100%;
   background: none;
-  color: var(--white);
+  color: var(--pink);
   border: none;
   outline: none;
   min-height: 100vh;
   padding: 40px;
 }
 
+::selection {
+  color: var(--plum);
+  background-color: var(--pink);
+}
 input[type='range'] {
   width: 100%;
   appearance: none;
   border-radius: 50px;
   cursor: pointer;
+  background-color: var(--cream);
 
   &::-webkit-slider-thumb {
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: var(--background2); // Change this to your desired color
+    background: var(--plum); // Change this to your desired color
     cursor: pointer;
   }
 
   &::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: var(--yourColor); // Change this to your desired color
+    background: var(--plum); // Change this to your desired color
     cursor: pointer;
   }
 
   &::-ms-thumb {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: var(--yourColor); // Change this to your desired color
+    background: var(--plum); // Change this to your desired color
     cursor: pointer;
   }
 }
 
 select {
   width: 100%;
+  background-color: var(--cream);
+  color: var(--plum);
+  border: none;
+}
+option {
+  color: var(--plum);
 }
-
 .colors {
   display: flex;
 }
 
 .colors div {
   width: 30px;
   height: 30px;
-  border: 2px solid rgba(255, 255, 255, 0.25);
+  border: 2px solid rgba(116, 48, 48, 0.25);
   border-radius: 50%;
   text-align: center;
   margin: 5px 10px 0 0;
@@ -156,3 +171,33 @@ select {
 div.selected {
   border: 2px solid #fff;
 }
+
+input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background-color: var(--pinkGray);
+  outline: none;
+  border-radius: 50%;
+  transition: background-color 0.25s;
+}
+
+input[type='checkbox']:checked {
+  background-color: var(--cream);
+}
+
+@media screen and (max-width: 700px) {
+  body {
+    margin: 0 0 0 200px;
+  }
+  .options {
+    height: 100vh;
+    width: 200px;
+    padding: 25px;
+  }
+
+  .output {
+    padding: 35px;
+  }
+}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
@@ -1,12 +1,8 @@
 :root {
   --fontTitles: 'Faune';
-  --fontBody: 'IBM Plex Mono';
-  --gray: #575757;
-  --lightBlack: #1f1f1f;
-  --white: #e9e8e4;
-  --textColor: var(--white);
-  --textColorInverted: var(--white);
-  --background: var(--lightBlack);
-  --backgroundInverted: var(--green);
-  --background2: var(--gray);
+  --pinkGray: #da8fa8;
+  --plum: #6b1f2d;
+  --lightPlum: #ac4659;
+  --cream: #f1e3d1;
+  --pink: #fa9ebc;
 }