Update headerbar to be more responsive and take custom text

1 files changed, 18 insertions, 18 deletions

diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index 6289dfc..c3d46fc 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -5,6 +5,10 @@ import SVG from "react-inlinesvg";
 import header1 from "./header_1.svg";
 import header2 from "./header_2.svg";
 
+interface HeaderBarProps {
+  title?: string
+}
+
 const headerImageStyles = css`
 z-index: -1;
 top: 0;
@@ -13,22 +17,22 @@ width: 100%;
 transition: height 1s;
 
 @media (max-width: 770px) {
-  height: 180px;
-}
-
-@media (max-width: 580px) {
   height: 140px;
 }
 `;
 
-function HeaderBar() {
+function HeaderBar({ title }: HeaderBarProps) {
+  if (!title) {
+    title = "Python Discord Forms";
+  };
+  
   return <div>
     <div>
       <SVG src={header1} css={headerImageStyles}/>
       <SVG src={header2} css={headerImageStyles}/>
     </div>
     <h1 css={css`
-      font-size: 4em;
+      font-size: 4vw;
       margin: 0;
       margin-top: 30px;
       margin-left: 30px;
@@ -37,26 +41,22 @@ function HeaderBar() {
       transition-duration: 1s;
       font-family: "Uni Sans", "Hind", "Arial", sans-serif;
 
-      @media (max-width: 770px) {
-        margin-bottom: 100px;
-        font-size: 3em;
+      @media (max-width: 1000px) {
+        margin-top: 15px;
+        font-size: 8vw;
       }
 
-      @media (max-width: 580px) {
-        font-size: 2em;
+      @media (max-width: 770px) {
+        margin-top: 15px;
+        font-size: 6vw;
+        margin-bottom: 100px;
       }
-
       @media (max-width: 450px) {
-        font-size: 1.70em;
         text-align: center;
         margin-left: 0;
       }
-
-      @media (max-width: 400px) {
-        font-size: 1.3em;
-      }
     `}>
-      Python Discord Forms
+      {title}
     </h1>
   </div>
 }