pdap-design-system 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdap-design-system",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Global styles for PDAP apps",
   "main": "system/css/global-styles.css",
   "directories": {

package/system/css/global-styles.css

@@ -296,7 +296,7 @@ p {
   margin-bottom: 15px;
 }
 
-p {
+p, li {
   max-width: 43ch;
 }
 
@@ -479,7 +479,7 @@ strong {
   align-items: center;
 }
 
-.small p, p.small {
+.small p, p.small, .small li {
   font-size:20px;
 }
 

package/system/demo.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="design, system, design system">
   <link href="css/normalize.css" rel="stylesheet" type="text/css">
   <link href="css/global-styles.css" rel="stylesheet" type="text/css">
-  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
   <script type="text/javascript">WebFont.load({  google: {    families: ["Libre Franklin:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic"]  }});</script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -56,14 +56,14 @@
     <div class="nav-container-last">
       <div class="nav-container container">
         <div class="menu-button nav-button">
-          <div class="nav-menu-icon"></div>
+          <div class="nav-menu-icon"><i class="fa fa-bars"></i></div>
         </div>
       </div>
     </div>
-    <nav role="navigation" class="nav-menu nav-menu">
-      <a href="index.html" aria-current="page" class="nav-link nav-link">Home</a>
-      <a href="data-sources.html" aria-current="page" class="nav-link nav-link current">Current page</a>
-      <a href="donate.html" class="nav-link nav-link">Page</a>
+    <nav role="navigation" class="nav-menu">
+    <a href="index.html" class="nav-link">Home</a>
+      <a href="demo.html" aria-current="page" class="nav-link current">Current page</a>
+      <a href="donate.html" class="nav-link">Page</a>
     </nav>
   </div>
   <div class="section">
@@ -179,6 +179,7 @@ It has many lines.</code></pre>
       <p class="footer-p"><a href="https://www.guidestar.org/profile/85-4207132" target="_blank"><img src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4" /></a><img src="images/acronym.svg" loading="lazy" width="150" alt="" class="footer-logo"></p>
     </div>
   </div>
+  <script src="js/nav.js" type="text/javascript"></script>
   <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
 </body>
 </html>

package/system/js/nav.js

@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var menuButton = document.querySelector(".menu-button");
+    var navMenu = document.querySelector(".nav-menu");
+
+    menuButton.addEventListener("click", function() {
+        if (navMenu.style.display === "none" || navMenu.style.display === "") {
+            navMenu.style.display = "block";
+        } else {
+            navMenu.style.display = "none";
+        }
+    });
+});