Merge pull request #8 from spencer-rafada/spencer/scrollbar-fix

refactored scrollbar
spencer-rafada · Aug 3, 2023 · 87418d6 · 87418d6
2 parents 95ab4e8 + 14923e7
commit 87418d6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/src/main.css b/src/main.css
@@ -1,33 +1,33 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
 /* total width */
-.scrollbar::-webkit-scrollbar {
-  background-color: #fff;
+body::-webkit-scrollbar {
+  background-color: #070a13;
   width: 16px;
 }
 
 /* background of the scrollbar except button or resizer */
-.scrollbar::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track {
   background-color: #070a13;
 }
 
-.scrollbar::-webkit-scrollbar-track:hover {
+body::-webkit-scrollbar-track:hover {
   background-color: #062c47;
 }
 
 /* scrollbar itself */
-.scrollbar::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb {
   background-color: #babac0;
   border-radius: 16px;
   border: 5px solid #070a13;
 }
 
-.scrollbar::-webkit-scrollbar-thumb:hover {
+body::-webkit-scrollbar-thumb:hover {
   background-color: #2659f2;
   border: 4px solid #062c47;
 }
 
 /* set button(top and bottom of the scrollbar) */
-.scrollbar::-webkit-scrollbar-button {
+body::-webkit-scrollbar-button {
   display: none;
 }
 
@@ -60,6 +60,13 @@
 main {
   font-family: "Inter", serif;
   color: #D8E2FD;
+  height: auto;
+  background-color: #070a13;
+}
+@media screen and (min-width: 48em) {
+  main {
+    background-color: transparent;
+  }
 }
 
 .mainSection {
@@ -120,11 +127,16 @@ main {
 }
 .infoSection .infoSection__navBar {
   font-size: 1.5rem;
-  display: flex;
+  display: none;
   align-items: center;
   width: 50%;
   justify-content: space-between;
 }
+@media screen and (min-width: 48em) {
+  .infoSection .infoSection__navBar {
+    display: flex;
+  }
+}
 .infoSection .infoSection__navBar svg {
   cursor: pointer;
   color: #062c47;

diff --git a/src/main.css.map b/src/main.css.map
diff --git a/src/main.scss b/src/main.scss
@@ -16,32 +16,32 @@ $extraLargeScreen: 80em;
 
 // Scrollbar
 /* total width */
-.scrollbar::-webkit-scrollbar {
-  background-color:#fff;
+body::-webkit-scrollbar {
+  background-color:$backgroundColor;
   width:16px
 }
 
 /* background of the scrollbar except button or resizer */
-.scrollbar::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track {
   background-color:$backgroundColor;
 }
-.scrollbar::-webkit-scrollbar-track:hover {
+body::-webkit-scrollbar-track:hover {
   background-color:$secondaryColor;
 }
 
 /* scrollbar itself */
-.scrollbar::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb {
   background-color:#babac0;
   border-radius:16px;
   border:5px solid $backgroundColor
 }
-.scrollbar::-webkit-scrollbar-thumb:hover {
+body::-webkit-scrollbar-thumb:hover {
   background-color: $accentColor;
   border:4px solid $secondaryColor;
 }
 
 /* set button(top and bottom of the scrollbar) */
-.scrollbar::-webkit-scrollbar-button {display:none}
+body::-webkit-scrollbar-button {display:none}
 
 // Animations
 @keyframes hoverAnimation {
@@ -74,8 +74,12 @@ $extraLargeScreen: 80em;
 
 main {
   font-family: 'Inter', serif;
-  // background-color: $backgroundColor;
   color: $textColor;
+  height: auto;
+  background-color: $backgroundColor;
+  @media screen and (min-width: $mediumScreen) {
+    background-color: transparent;
+  }
 }
 
 .mainSection {
@@ -131,10 +135,13 @@ main {
   }
   .infoSection__navBar {
     font-size: 1.5rem;
-    display: flex;
+    display: none;
     align-items: center;
     width: 50%;
     justify-content: space-between;
+    @media screen and (min-width: $mediumScreen) {
+      display: flex;
+    }
     svg {
       cursor: pointer;
       color: $secondaryColor;