Minor fixes, made navBar fixed, and updated footer

O662 · Dec 27, 2024 · b97a7fe · b97a7fe
1 parent 16d5863
commit b97a7fe
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/footer.html b/footer.html
@@ -0,0 +1,2 @@
+<p>Copyright © 2024 Malcolm Ferguson</p>
+<p>Made with love and tears ❤️</p>
diff --git a/head.html b/head.html
@@ -3,4 +3,5 @@
 <title>Malcolm Ferguson</title>
 <link rel="icon" type="image/x-icon" href="/favicon.ico">
 <link rel="stylesheet" href="stylesNavBar.css">
-<link rel="stylesheet" href="stylesIndex.css">
+<link rel="stylesheet" href="stylesIndex.css">
+<link rel="stylesheet" href="stylesFooter.css">
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
                 console.error('There was a problem with the fetch operation:', error);
             });
     </script>
-    
+
 </head>
 
 <body>
@@ -59,8 +59,18 @@ <h2>Contact</h2>
     </section>
 
     <footer>
-        <p>Copyright © 2024 Malcolm Ferguson</p>
-        <p>Made with love and tears ❤️</p>
+
+        <div id="theFooter"></div> <!--acts as a placeholder in the code where the navbar content will be inserted.-->
+        <script>
+            fetch('footer.html?cache-bust=' + new Date().getTime())
+                .then(response => response.text())
+                .then(data => {
+                    document.getElementById('theFooter').innerHTML = data;
+                })
+                .catch(error => {
+                    console.error('There was a problem with the fetch operation:', error);
+                });
+        </script>
     </footer>
 
 </body>

diff --git a/stylesFooter.css b/stylesFooter.css
diff --git a/stylesIndex.css b/stylesIndex.css
@@ -28,9 +28,9 @@ section {
     display: block;
     /*background: black; ### Colors determined by order below*/
     color: #fff;
-    height: 100%;
+    height: 50vh;
     width: 100%; /*100 vh also works*/
-    padding: 60px;
+    /*padding: 60px;*/ /*This is the padding for the text*/
     box-sizing: border-box;
     /* Ensures padding is included in the 100% width */
     position: relative;

diff --git a/stylesNavBar.css b/stylesNavBar.css
@@ -1,8 +1,7 @@
 .navbar {
-    position: -webkit-sticky;
-    /* For Safari */
     position: fixed;
     top: 0;
+    width: 100%;
     background-color: #333;
     padding: 10px 0;
     z-index: 1000;
@@ -12,14 +11,15 @@
 .navbar ul {
     list-style: none;
     display: flex;
-    justify-content: space-around;
+    justify-content: flex-end;
     padding: 0;
     margin: 0;
     overflow: hidden;
+    width: 100%;
 }
 
 .navbar li {
-    display: right;
+    display: inline;
 }
 
 .navbar a {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<p>Copyright © 2024 Malcolm Ferguson</p>
		<p>Made with love and tears ❤️</p>