Merge pull request #32 from VandyHacks/just-header-fix

Making header full width only
VandyHacks · Mar 24, 2021 · b128d94 · b128d94
2 parents 3ca3923 + 366f4c4
commit b128d94
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 28 deletions.
diff --git a/global.css b/global.css
@@ -5,8 +5,6 @@ main {
   padding: 0;
   width: 100vw;
   height: 100vh;
-  overflow-x: hidden;
-  background-size: 135vh;
 }
 
 body {
@@ -22,14 +20,12 @@ body {
   background-repeat: no-repeat;
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
 }
 
 
 /* Use a media query to scale the background image */
 @media only screen and (max-width: 600px) {
   body {
-    background-size: 173vw;
     background-position: 0% 50%;
   }
 }

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { styled, css} from "astroturf";
+import styled from "astroturf";
 import Facebook from "../assets/icons/facebook.svg";
 import Github from "../assets/icons/github.svg";
 import Instagram from "../assets/icons/instagram.svg";
@@ -8,7 +8,6 @@ import Twitter from "../assets/icons/twitter.svg";
 import Youtube from "../assets/icons/youtube.svg";
 
 const FooterContainer = styled.footer`
-  width: 100%;
   color: #ffffff;
   left: 0;
   bottom: 2vh;

diff --git a/src/components/PageLinks.tsx b/src/components/PageLinks.tsx
@@ -1,19 +1,17 @@
 import React from "react"
 import styled from "astroturf";
-import VHLogo from "../assets/icons/VH_Home_Logo.svg"
+import VHLogo from "../assets/icons/VH_Home_Logo.svg";
 
 const Container = styled("div")`
   position: fixed;
-  width: 90 vw;
-  left: 26px;
-  right: 36px;
+  width: 100vw;
+  margin: 0;
   z-index: 2;
   display: grid;
   color: #ffffff;
+  box-sizing: border-box;
+  padding: 3vh 2.5vw;
   backdrop-filter: blur(6px);
-  padding-top: 4vh;
-  padding-bottom: 4vh;
-  padding-left: 1em;
   -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
   -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
   box-shadow: 1px 2px 3px rgba(0,0,0,.5);
@@ -28,9 +26,12 @@ const TextContainer = styled("a")`
 `;
 
 const Text = styled("p")`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 1rem;
   font-family: Inter;
-  font-weight: 300;
+  font-weight: 500;
   margin: 0;
   color: #FFFFFF;
 `;
@@ -46,19 +47,19 @@ const HomeContainer = styled("a")`
 
 
 export const PageLinks: React.FC<{}> = () => (
-    <Container className="headers">
-      <HomeContainer href="/" className="headers-content">
-        <VHLogo width="45" height="45" className="zoom-button"/>
-      </HomeContainer>
-      <TextContainer className="headers-content" href="/about" >
-        <Text className="underline-button">About</Text>
-      </TextContainer>
-      <TextContainer className="headers-content" href="/events">
-        <Text className="underline-button">Events</Text>
-      </TextContainer>
-      <TextContainer className="headers-content" href="/join">
-        <Text className="underline-button">Join</Text>
-      </TextContainer>
-    </Container>
+  <Container className="headers">
+    <HomeContainer href="/" className="headers-content">
+      <VHLogo width="60" height="60" className="zoom-button" />
+    </HomeContainer>
+    <TextContainer className="headers-content" href="/about" >
+      <Text className="underline-button">About</Text>
+    </TextContainer>
+    <TextContainer className="headers-content" href="/events">
+      <Text className="underline-button">Events</Text>
+    </TextContainer>
+    <TextContainer className="headers-content" href="/join">
+      <Text className="underline-button">Join</Text>
+    </TextContainer>
+  </Container>
 );