Scrollbars

src/components/Person.js

@@ -52,7 +52,7 @@ export default function Person({ person, currentTag }) {
         )}
 
         {person.twitter && (
-          <span>
+          <TwitterHandle>
             <a
               href={`https://twitter.com/${person.twitter}`}
               target="_blank"
@@ -61,9 +61,8 @@ export default function Person({ person, currentTag }) {
               <span className="at">@</span>
               {person.twitter.replace('@', '')}
             </a>
-          </span>
+          </TwitterHandle>
         )}
-        {person.github && <span>{person.github}</span>}
       </PersonDeets>
     </PersonWrapper>
   );
@@ -146,10 +145,6 @@ const PersonDeets = styled.div`
   :first-child {
     border-inline-start: none;
   }
-  .at {
-    color: var(--yellow);
-    margin-right: 2px;
-  }
   .country {
     font-size: 3rem;
   }
@@ -157,3 +152,11 @@ const PersonDeets = styled.div`
     padding: 0;
   }
 `;
+
+const TwitterHandle = styled.span`
+  font-size: 1.24323423426928098420394802rem;
+  .at {
+    color: var(--yellow);
+    margin-right: 2px;
+  }
+`;

src/components/layout.js

@@ -65,12 +65,10 @@ const GlobalStyle = createGlobalStyle`
     font-weight: 100;
     font-size: 10px;
   }
-  ::selection {
-    background: var(--yellow);
-    color: var(--blue);
-  }
   body {
     font-size: 2rem;
+    overflow-y: scroll;
+    overflow-x: hidden;
   }
   h1,h2,h3,h4,h5,h6 {
     font-weight: 500;
@@ -83,6 +81,27 @@ const GlobalStyle = createGlobalStyle`
   code {
     background: var(--lightblue);
   }
+  ::selection {
+    background: var(--yellow);
+    color: var(--blue);
+  }
+
+  body::-webkit-scrollbar {
+    width: 12px;
+  }
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--yellow) var(--blue);
+  }
+  body::-webkit-scrollbar-track {
+    background: var(--blue);
+  }
+  body::-webkit-scrollbar-thumb {
+    background-color: var(--yellow) ;
+    border-radius: 6px;
+    border: 3px solid var(--blue);
+  }
+
 `;
 
 // Component Styles