Final 2.0 Release State

helpers/Bootstrap.css

@@ -71,35 +71,35 @@
 
     @font-face {
         font-family: 'MonoLisa';
-        src: url('MonoLisa-Bold.woff2') format('woff2'),
-        url('MonoLisa-Bold.woff') format('woff');
+        src: url('fonts/MonoLisa-Bold.woff2') format('woff2'),
+        url('fonts/MonoLisa-Bold.woff') format('woff');
         font-weight: bold;
         font-style: normal;
         font-display: swap;
     }
 
     @font-face {
         font-family: 'MonoLisa';
-        src: url('MonoLisa-Regular.woff2') format('woff2'),
-        url('MonoLisa-Regular.woff') format('woff');
+        src: url('fonts/MonoLisa-Regular.woff2') format('woff2'),
+        url('fonts/MonoLisa-Regular.woff') format('woff');
         font-weight: normal;
         font-style: normal;
         font-display: swap;
     }
 
     @font-face {
         font-family: 'MonoLisa';
-        src: url('MonoLisa-BoldItalic.woff2') format('woff2'),
-        url('MonoLisa-BoldItalic.woff') format('woff');
+        src: url('fonts/MonoLisa-BoldItalic.woff2') format('woff2'),
+        url('fonts/MonoLisa-BoldItalic.woff') format('woff');
         font-weight: bold;
         font-style: italic;
         font-display: swap;
     }
 
     @font-face {
         font-family: 'MonoLisa';
-        src: url('MonoLisa-RegularItalic.woff2') format('woff2'),
-        url('MonoLisa-RegularItalic.woff') format('woff');
+        src: url('fonts/MonoLisa-RegularItalic.woff2') format('woff2'),
+        url('fonts/MonoLisa-RegularItalic.woff') format('woff');
         font-weight: normal;
         font-style: italic;
         font-display: swap;
@@ -4194,6 +4194,9 @@
           text-decoration: none;
           white-space: nowrap;
         }
+        .navbar-brand img {
+            display: none;
+        }
         .navbar-nav {
           display: flex;
           flex-direction: column;
@@ -4224,7 +4227,8 @@
           padding: 0.25rem 0.75rem;
           font-size: 1.25rem;
           line-height: 1;
-          background-color: transparent;
+          color: #000000;
+          background-color: #FAA300;
           border: 1px solid transparent;
           border-radius: 0.25rem;
           transition: box-shadow 0.15s ease-in-out;
@@ -9585,7 +9589,7 @@
         .flex-lg-shrink-1 {
             flex-shrink: 1 !important;
           }
-  
+
         .flex-lg-wrap {
             flex-wrap: wrap !important;
           }
@@ -11523,7 +11527,7 @@
           #mainNav .navbar-toggler {
           font-size: 80%;
           padding: 0.75rem;
-          color: #FAA300;
+          color: #000000;
           border: 1px solid #000000;
         }
           #mainNav .navbar-toggler:focus {
@@ -11569,6 +11573,9 @@
           }
           #mainNav.navbar-shrink .navbar-brand {
             color: #000000;
+          }
+          #mainNav.navbar-shrink img {
+              display: block;
           }
             #mainNav.navbar-shrink {
                 background-color: #ffffff;
@@ -11768,4 +11775,5 @@
 
         .footer {
             padding: 5rem 0;
+            color: #FAA300;7
         }

pages/home/home.js

@@ -28,7 +28,9 @@ async function Home () {
                 <!-- Navigation-->
                 <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
                     <div class="container px-4 px-lg-5">
-                        <a class="navbar-brand" href="#page-top">Js.Land</a>
+                        <a class="navbar-brand" href="#page-top">
+                            <img width="14%" src="assets/img/home/logo-solid.png" alt="Js.Land" class="img-fluid pb-3" />
+                        </a>
                         <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                             Menu
                             <i class="fas fa-bars"></i>
@@ -47,7 +49,7 @@ async function Home () {
                     <div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
                         <div class="d-flex justify-content-center">
                             <div class="text-center">
-                                <h1 class="mx-auto">Js.Land</h1>
+                                <img width="65%" src="assets/img/home/logo-transparent.png" alt="Js.Land" class="img-fluid pb-3" />
                                 <h2 class="mx-auto mt-2 mb-5">Your source for everything code</h2>
                                 <a class="btn btn-primary" href="#about">Learn more..</a>
 
@@ -86,7 +88,7 @@ async function Home () {
                         <!-- Featured Project Row-->
                         <div class="div gx-0 mb-4 mb-lg-5 align-items-center">
                             <div class="row">
-                                <div class="row justify-content-center mb-3"><img class="img-fluid mb-3 mb-lg-0 border-0 w-50" src="assets/img//home/cloud-code-one.png" alt="..." /></div>
+                                <div class="row justify-content-center mb-3"><img class="img-fluid mb-3 mb-lg-0 border-0 w-50" src="assets/img//home/cloud-code.png" alt="..." /></div>
                                 <div class="row featured-text text-center text-lg-left pt-1">
                                     <h4 id="js-land-mission-statement-header" class="mt-3">Js.Land () {</h4>
                                     <p id="js-land-mission-statement" class="text-black mb-5">
@@ -215,7 +217,7 @@ async function Home () {
                     </div>
                 </section>
                 <!-- Footer-->
-                <footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; Js.Land 2022</div></footer>
+                <footer class="footer bg-black small text-center"><div class="container px-4 px-lg-5">Copyright &copy; Js.Land 2022</div></footer>
                 <!-- Bootstrap core JS-->
                 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
             </body>