From d3785a9510686acab2c71c0139fab6c67536a1fb Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Sun, 9 Feb 2025 16:35:15 -0700
Subject: [PATCH 1/4] Fix navigation

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/site/_includes/nav.liquid |  78 ++++++++----------
 app/site/_layouts/base.liquid |   1 -
 app/src/css/style.css         | 149 +++++++++++-----------------------
 app/src/js/nav.js             |  38 +++------
 4 files changed, 92 insertions(+), 174 deletions(-)

diff --git a/app/site/_includes/nav.liquid b/app/site/_includes/nav.liquid
index 38b956b1e8..04eb8bde45 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -6,57 +6,43 @@
         <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo" alt="CMS Logo">
         <div class="usa-logo">
           <em class="usa-logo__text">
-            <a href="{{ "/" | url}}" title="{{site.title}}">Open Source Respository Metrics Website</a>
+            <a href="{{ "/" | url}}" title="{{site.title}}">Open Source Repository Metrics Website</a>
           </em>
         </div>
+        <!-- <button class="usa-menu-btn">BUTTON</button> -->
+        <button class="usa-menu-btn menu-btn-styling">
+          <svg
+            class="usa-icon--size-5 toggle-icon"
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+          >
+            <use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
+          </svg>
+        </button>
       </div>
     </div>
-    <nav aria-label="Primary navigation" class="usa-nav nav-styling">
-      <ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
+    <nav aria-label="Primary navigation" class="usa-nav">
+      <button class="usa-nav__close">
+        <svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
+          <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
+        </svg>
+      </button>
+      <ul class="usa-nav__primary usa-accordion">
         <li class="usa-nav__primary-item">
-          <button
-            type="button"
-            class="usa-accordion__button usa-nav__link button-styling"
-            aria-expanded="false"
-            aria-controls="basic-nav-section-one"
-          >
-            <svg
-              class="usa-icon--size-7 toggle-icon"
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-            >
-              <use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
-            </svg>
-          </button>
-          <ul id="basic-nav-section-one" class="usa-nav__submenu">
-            <li class="close-icon">
-                <svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
-                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
-                </svg>
-            </li>
-            <li class="usa-nav__primary-item">
-              <a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
-                <span>Home</span>
-              </a>
-            </li>
-            <li class="usa-nav__primary-item">
-              <a
-                href="{{ "/organizations/" | url}}"
-                class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
-              >
-                <span>Organizations</span>
-              </a>
-            </li>
-            <li class="usa-nav__primary-item">
-              <a
-                href="{{ "/projects/" | url}}"
-                class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
-              >
-                <span>Projects</span>
-              </a>
-            </li>
-          </ul>
+          <a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
+            <span>Home</span>
+          </a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a href="{{ "/organizations/" | url}}" class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}">
+            <span>Organizations</span>
+          </a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a href="{{ "/projects/" | url}}" class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}">
+            <span>Projects</span>
+          </a>
         </li>
       </ul>
     </nav>
diff --git a/app/site/_layouts/base.liquid b/app/site/_layouts/base.liquid
index 9e97cacb6e..79e5ede758 100644
--- a/app/site/_layouts/base.liquid
+++ b/app/site/_layouts/base.liquid
@@ -16,5 +16,4 @@
       {% include 'footer.liquid' %}
     </footer>
   </body>
-  <!-- <script type="module" src="{{ "/src/js/nav.js" | url}}"></script> -->
 </html>
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 3cc2d31271..b144451fe4 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -57,104 +57,7 @@ h1 {
   font-size: 1.1em;
 }
 
-.usa-nav__primary-item {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.usa-nav {
-  display: none;
-  position: relative;
-  top: 4%;
-  right: -10%;
-  background: #fff;
-  z-index: 1000;
-  height: fit-content;
-}
-
-.usa-nav.is-visible {
-  display: block;
-}
-
-.nav-styling {
-  width: 5% !important;
-}
-
-.nav-styling.usa-nav.is-visible {
-  height: 35%;
-}
-
-.close-icon {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1%;
-}
-
-.usa-nav__submenu {
-  padding: 1rem;
-  border-radius: 10px;
-  width: fit-content;
-  background-color: #fff;
-  list-style: none;
-  margin: 0;
-  font-size: 1.5rem;
-  padding: 10% 15%;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-}
-
-.usa-nav__submenu li {
-  margin-bottom: .6rem;
-}
-
-.usa-nav__submenu a {
-  text-decoration: none;
-  font-size: 1.125rem;
-  color: #000;
-}
-
-.usa-nav__submenu a.usa-current {
-  color: #043884;
-  font-weight: bold;
-}
-
-.usa-nav__submenu a:hover {
-  color: #E7C000;
-}
-
-.usa-icon {
-  fill: #000;
-}
-
-.button-styling:hover {
-  cursor: pointer;
-}
-
-.usa-header--basic .usa-nav__primary-item > .usa-current::after, 
-.usa-header--basic .usa-nav__link:hover::after {
-  background-color: #fff
-}
-
-.usa-nav__primary-navigation button {
-  text-decoration: none;
-}
-
-.usa-nav__primary-navigation button:hover {
-  text-decoration: none !important;
-}
-
-.usa-nav__primary-navigation button:active {
-  text-decoration: none;
-}
-
-.usa-nav__primary-navigation button:focus {
-  outline: none;
-}
-
-.usa-accordion__button.usa-nav__link.button-styling::after {
-  background-color: #fff;
-}
-
-.usa-nav__primary button[aria-expanded="true"] {
+.menu-btn-styling {
   background-color: #fff;
 }
 
@@ -691,7 +594,34 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   outline-offset: 0rem;
 }
 
-@media screen and (min-width: 768px) {
+@media (max-width: 767px) {
+  .usa-nav {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    background: #fff;
+    padding: 1rem;
+  }
+  
+  .usa-nav.is-visible {
+    display: block;
+  }
+  
+  .usa-menu-btn {
+    display: block;
+  }
+  
+  .usa-nav__close {
+    display: block;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+}
+
+@media (min-width: 768px) {
   .logo {
     height: 50px;
     width: auto;
@@ -740,8 +670,27 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media (min-width: 1024px) {
   .usa-logo a{
     font-size: 1.5em;
   }
+
+  .usa-menu-btn,
+  .usa-nav__close {
+    display: none;
+  }
+
+  .usa-nav {
+    display: flex;
+    justify-content: flex-end;
+    width: 30% !important;
+  }
+
+  .usa-nav__primary-item {
+    display: inline-block;
+  }
+
+  .usa-nav-link {
+    text-decoration: none;
+  }
 }
\ No newline at end of file
diff --git a/app/src/js/nav.js b/app/src/js/nav.js
index afd1d4bf3d..faced794fa 100644
--- a/app/src/js/nav.js
+++ b/app/src/js/nav.js
@@ -1,43 +1,27 @@
 export function createNavigation() {
-    const toggleButton = document.querySelector(".usa-accordion__button");
+    const menuButton = document.querySelector(".usa-menu-btn");
     const closeButton = document.querySelector(".usa-nav__close");
     const menu = document.querySelector(".usa-nav");
-    const menuIcon = document.querySelector(".usa-accordion__button svg use");
 
-    function toggleMenu(e) {
-        e.preventDefault();
+    function toggleMenu() {
         const isOpen = menu.classList.toggle("is-visible");
-
-        toggleButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
-        menuIcon.setAttribute(
-            "href",
-            isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
-        );
+        menuButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
     }
 
     function closeMenu() {
-        if(menu.classList.contains("is-visible")) {
-            menu.classList.remove("is-visible");
-            toggleButton.setAttribute("aria-expanded", "false");
-            menuIcon.setAttribute("href", "/assets/img/sprite.svg#menu");
-        }
+        menu.classList.remove("is-visible");
+        menuButton.setAttribute("aria-expanded", "false");
     }
 
-    if(toggleButton && closeButton && menu) {
-        toggleButton.addEventListener("click", toggleMenu);
-
-        closeButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            closeMenu();
-        })
+    if(menuButton && closeButton && menu) {
+        menuButton.addEventListener("click", toggleMenu);
+        closeButton.addEventListener("click", closeMenu);
 
-        document.addEventListener("click", (e) => {
-            if(!menu.contains(e.target) && !toggleButton.contains(e.target)) {
-                closeMenu();
+        document.activeElement("click", (e) => {
+            if(!menu.contains(e.target) && !menuButton.contains(e.target)) {
+                closeMenu
             }
         });
-    } else {
-        console.error("Some elements are not found");
     }
 }
 

From a07ca9a330ed1690e645c8d240675535aad64124 Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Sun, 9 Feb 2025 16:36:37 -0700
Subject: [PATCH 2/4] Delete extra line

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/site/_includes/nav.liquid | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/site/_includes/nav.liquid b/app/site/_includes/nav.liquid
index 04eb8bde45..06cc0a0156 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -9,7 +9,6 @@
             <a href="{{ "/" | url}}" title="{{site.title}}">Open Source Repository Metrics Website</a>
           </em>
         </div>
-        <!-- <button class="usa-menu-btn">BUTTON</button> -->
         <button class="usa-menu-btn menu-btn-styling">
           <svg
             class="usa-icon--size-5 toggle-icon"

From 78225828cf667216b1cbe4982c1f9835dcc9f85d Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Sun, 9 Feb 2025 17:10:10 -0700
Subject: [PATCH 3/4] Refactor main page

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/site/index.liquid | 10 ++--------
 app/src/css/style.css |  4 ++++
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/site/index.liquid b/app/site/index.liquid
index 94b8f6b365..3dce015712 100644
--- a/app/site/index.liquid
+++ b/app/site/index.liquid
@@ -4,21 +4,15 @@ layout: base
 <div class="grid-container">
   <section class="home-page-description">
     <div class="description-styling">
-      <h2>Metrics & Code.JSON</h2>
+      <h2>Metrics</h2>
     </div>
-    <p>
+    <p class="home-paragraph">
       <strong>Metrics</strong> provides meaningful insights into project performance and code quality,
       empowering teams to make informed decisions. By analyzing key data points such as contributor activity,
       issue resolution times, code complexity and dependency health, Metrics transforms raw data into actionable visualizations.
       With a focus on clarity and accessibility, Metrics enables organizations to monitor progress,
       identify improvement opportunities and measure the impact of work.
     </p>
-    <p>
-      <strong>Code.JSON</strong> serves as a powerful tool for open-source project transparency and compliance.
-      Code.JSON provides a standerdized metadata format that enables dicoverability, reuse and collaboration on governemnt open-source
-      projects. Using the <a href="https://github.com/DSACMS/codejson-generator" target="_blank" rel"noopener noreferrer">code.json generator,</a> organizations can effortlessly create and validate their code.json files,
-      ensuring alignment with federal guidelines while showcasing open-source contributions to the broader community. 
-    </p>
     <p>
       {{ site.description }}
     </p>
diff --git a/app/src/css/style.css b/app/src/css/style.css
index b144451fe4..3bedd6c344 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -83,6 +83,10 @@ h2 {
   margin-bottom: 0;
 }
 
+.home-paragraph {
+  font-size: 1.3rem;
+}
+
 /* Cards */
 .usa-card-group-home {
   display: flex;

From bc90986a75ed3ea7e1665875e16faf49b9a85b68 Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Sun, 9 Feb 2025 18:37:58 -0700
Subject: [PATCH 4/4] Fix responsiveness on home cards

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/site/index.liquid |  4 ++--
 app/src/css/style.css | 43 ++++++++++++++++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/site/index.liquid b/app/site/index.liquid
index 3dce015712..989d356cb0 100644
--- a/app/site/index.liquid
+++ b/app/site/index.liquid
@@ -18,7 +18,7 @@ layout: base
     </p>
   </section>
   <ul class="usa-card-group-home">
-    <li class="usa-card tablet:grid-col-6">
+    <li class="usa-card tablet:grid-col-9">
       <div class="usa-card-outer">
         <div class="usa-card-middle">
           <a href="{{ "/organizations/" | url}}" class="href-home">
@@ -41,7 +41,7 @@ layout: base
         </div>
       </div>
     </li>
-    <li class="usa-card tablet:grid-col-6">
+    <li class="usa-card tablet:grid-col-9">
       <div class="usa-card-outer">
         <div class="usa-card-middle">
           <a href="{{ "/projects/" | url}}" class="href-home">
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 3bedd6c344..38d46449f7 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -90,18 +90,19 @@ h2 {
 /* Cards */
 .usa-card-group-home {
   display: flex;
-  flex-direction: row;
-  list-style-type: none;
-  margin-left: -80px;
+  flex-direction: column;
+  width: 95vw;
+  align-items: center;
+  margin-left: -8%;
 }
 
 .usa-card-outer {
   display: flex;
   background-color: #043884;
   border: none;
-  border-radius: 70px;
-  height: 20vh;
-  width: 25vw;
+  border-radius: 100px;
+  height: 15vh;
+  width: 100%;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
@@ -109,7 +110,7 @@ h2 {
   display: flex;
   background-color: #5C85C1;
   border: none;
-  border-radius: 70px;
+  border-radius: 100px;
   height: 100%;
   margin-left: -5px;
   width: 98%;
@@ -137,7 +138,7 @@ h2 {
   align-items: center;
   background-color: #E0EAF8;
   border: none;
-  border-radius: 70px;
+  border-radius: 100px;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -152,7 +153,7 @@ h2 {
   background-color: #fff;
   border-radius: 50%;
   display: flex;
-  height: 100px;
+  height: 75px;
   justify-content: center;
   margin-left: 6%;
   width: 100px;
@@ -672,6 +673,10 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .graph-box {
     height: 600px;
   }
+
+  .home-icon-container {
+    height: 90px;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -697,4 +702,24 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .usa-nav-link {
     text-decoration: none;
   }
+
+  .usa-card-group-home {
+    display: flex;
+    flex-direction: row;
+    margin-left: 0;
+  }
+
+  .usa-card-outer {
+    height: 20vh;
+  }
+
+  .usa-card-outer,
+  .usa-card-middle,
+  .usa-card__container {
+    border-radius: 80px;
+  }
+
+  .home-icon-container {
+    height: 100px;
+  }
 }
\ No newline at end of file