Fix Navbar, Add Return buttons

KendallDoesCoding · Apr 10, 2023 · 21a9fbb · 21a9fbb
1 parent 5b4c529
commit 21a9fbb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/credits/index.html b/credits/index.html
@@ -7,7 +7,12 @@
         <link rel="stylesheet" href="styles.css" />
         <title>Credits</title>
     </head>
-<body>
+<body>  
+  <a href="../index.html" class="back-arrow">
+    <svg width="40" height="40" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path class='arrow' d="M0.792893 6.79289C0.402369 7.18342 0.402369 7.81658 0.792893 8.20711L7.15685 14.5711C7.54738 14.9616 8.18054 14.9616 8.57107 14.5711C8.96159 14.1805 8.96159 13.5474 8.57107 13.1569L2.91421 7.5L8.57107 1.84315C8.96159 1.45262 8.96159 0.819456 8.57107 0.428932C8.18054 0.0384079 7.54738 0.0384079 7.15685 0.428932L0.792893 6.79289ZM18.5 8.5C19.0523 8.5 19.5 8.05228 19.5 7.5C19.5 6.94772 19.0523 6.5 18.5 6.5V8.5ZM1.5 8.5H18.5V6.5H1.5V8.5Z"fill="#496C42"/>
+      </svg>
+    </a> 
   <h1 class="heading"> Credits</h1>
   <p class="subtext"> Credits to all the people who made the songs in the album (A Very Mogul Christmas), and to the contributors that helped in making this website possible :)</p>
   <div class="mogul-christmas-team">

diff --git a/credits/styles.css b/credits/styles.css
@@ -126,4 +126,11 @@ h2 {
   display: inline-block;
   padding: 2px;
   margin-left: 10px;
+}
+
+.back-arrow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 3%;
 }
diff --git a/index.html b/index.html
@@ -397,13 +397,14 @@
 
     <!-- Navbar -->
     <header>
+      <div></div>
     <div id='menu'>
       <svg id='closed-menu-icon' width="35" height="auto" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
         <line id='line-1' x1="1.5" y1="1.5" x2="18.5" y2="1.5" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
         <line id='line-2' x1="1.5" y1="7.5" x2="18.5" y2="7.5" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
         <line id='line-3' x1="1.5" y1="13.5" x2="18.5" y2="13.5" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
         </svg>
-      <svg id='open-menu-icon' width="35" height="auto" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg id='open-menu-icon' width="35" height="50" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
           <line id='line-4' x1="1.88879" y1="15.951" x2="16.6112" y2="2.45096" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
           <line id='line-5' x1="2.38879" y1="2.45096" x2="17.1112" y2="15.951" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
       </svg>                  

diff --git a/styles.css b/styles.css
@@ -1044,6 +1044,7 @@ main section {
 
 #menu {
   z-index: 11;
+  position: fixed;
 }
 
 #menu-display {
@@ -1054,7 +1055,7 @@ main section {
   width: 25vw;
   min-width: fit-content;
   background: var(--bg-color-menu);
-  position: absolute;
+  position: fixed;
   z-index: 10;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
@@ -1065,11 +1066,11 @@ main section {
   font-size: 20px;
   font-weight: 500;
   padding: 1.5% 1%;
-  transition: all 1s;
+  transition: left 1s, opacity 1s;
 }
 
 #menu-display a[href="/lyrics"] {
-  padding-top: 10vh;
+  margin-top: 10vh;
 }
 
 #menu-display a{
@@ -1089,7 +1090,7 @@ main section {
 }
 #open-menu-icon {
   display: none;
-  margin-top: -5px;
+  margin-top: -17.5px;
   cursor: pointer;
 }
 .lud {