diff --git a/src/components/Person.js b/src/components/Person.js
index 5ab73b0b..16a4831b 100644
--- a/src/components/Person.js
+++ b/src/components/Person.js
@@ -52,7 +52,7 @@ export default function Person({ person, currentTag }) {
)}
{person.twitter && (
-
+
@
{person.twitter.replace('@', '')}
-
+
)}
- {person.github && {person.github}}
);
@@ -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;
+ }
+`;
diff --git a/src/components/layout.js b/src/components/layout.js
index 9c2c5c26..4e6a0e55 100644
--- a/src/components/layout.js
+++ b/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