pdap-design-system 1.0.6 → 2.0.0

package/system/css/normalize.css

@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
- html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

package/system/demo.html

@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>PDAP design system</title>
-  <meta content="width=device-width, initial-scale=1" name="viewport">
-  <meta name="description" content="Design system for the Police Data Accessibility Project and its services.">
-  <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="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">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,900;1,400;1,600;1,900&display=swap" rel="stylesheet">
-  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-REKS6B95BL"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'G-REKS6B95BL');
-  </script>
-  <!-- Google ads tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11016541790"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'AW-11016541790');
-  </script>
-  <!-- Event snippet for newsletter signup conversion page
-  In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
-  <script>
-  function gtag_report_conversion(url) {
-    var callback = function () {
-      if (typeof(url) != 'undefined') {
-        window.location = url;
-      }
-    };
-    gtag('event', 'conversion', {
-        'send_to': 'AW-11016541790/BTkiCN2cyoEYEN6sjIUp',
-        'event_callback': callback
-    });
-    return false;
-  }
-  </script>
-  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
-  <link href="images/webclip.gif" rel="apple-touch-icon">
-</head>
-<body>
-  <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar nav">
-    <a href="index.html" aria-current="page" class="brand nav-brand current"><img src="images/lockup.svg" loading="lazy" width="250" alt="Police Data Accessibility Project Logo" class="logo"></a>
-    <div class="nav-container-last">
-      <div class="nav-container container">
-        <div class="menu-button nav-button">
-          <div class="nav-menu-icon"><i class="fa fa-bars"></i></div>
-        </div>
-      </div>
-    </div>
-    <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">
-    <div class="container">
-      <h1 class="shout">Shout</h1>
-      <p>For big messages, saying big things.</p>
-      <h1>Heading 1</h1>
-      <p>This is a paragraph. There's a max line length, so that things stay readable at unexpected screen and font sizes. The text is large to encourage brevity and readability.</p>
-      <h2>Heading 2</h2>
-      <p>Another paragraph.</p>
-      <h3>Heading 3</h3>
-      <p>This paragraph has <code>&lt;code&gt;</code> in it.</p>
-      <h4>Heading 4</h4>
-      <div>
-        <pre><code>This is a whole code block!
-It has many lines.</code></pre>
-      </div>
-      <h5>Heading <code>code</code> 5</h5>
-      <p>Another paragraph.</p>
-      <h6>Heading 6</h6>
-      <div class="small">
-        <p>Another paragraph, inside a div with class "small".</p>
-      </div>
-    </div>
-  </div>
-  <div class="section">
-    <div class="container small">
-      <h3>Testimonials</h3>
-      <div class="boxed">
-        <p class="quote">“PDAP's work was invaluable in helping us find and access data we otherwise wouldn't have been able to.”</p> 
-        <p class="citation">&mdash;Dr. Jesse Wozniak, Director of Law & Public Policy at the <a href="https://apa-pgh.org/">Alliance for Police Accountability</a></p>
-      </div>
-    </div>
-  </div>
-  <div class="section">
-    <div class="container">
-      <div class="layout-grid grid-2">
-        <div class="shout-box grid-span-2">
-          <h1 class="shout">This is a grid layout.<br></h1>
-          <p class="bottom-0">The grid is our main tool for layout. The div containing this paragraph and the header above it spans multiple grid columns.</p>
-        </div>
-        <div>
-          <h3>This doesn't span columns.</h3>
-          <p>Here's a button though!</p>
-          <a href="https://airtable.com/shrbFfWk6fjzGnNsk"><div class="button">Normal button.</div></a>
-        </div>
-        <div>
-          <h3>Neither does this.</h3>
-          <p>This is a deprioritized button.</p>
-          <a href="https://airtable.com/shrS4PAZTYVT1zSq8"><div class="button button-outline">Outline button.</div></a>
-        </div>
-      </div>
-      <div class="layout-grid grid-3">
-        <h2 class="grid-span-3 top-45 bottom-0">More grids</h2>
-        <div>
-          <p>For some applications, we will need custom grids.</p>
-        </div>
-        <div>
-          <p>Instead of <code>grid-3</code>, make a new custom grid class with the right column widths.</p>
-        </div>
-        <div>
-          <p>You may want to override the spacing, too!</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="section">
-    <div class="container">
-      <div class="form">
-        <h3>Here's a little form.</h3>
-        <p class="small">We could use more styles for these.</p>
-        <form action="https://buttondown.email/api/emails/embed-subscribe/pdap" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/pdap', 'popupwindow')" style="max-width:500px;">
-          <input type="email" class="input input-text" maxlength="256" name="email" id="bd-email" placeholder="Placeholder..."/>
-          <input type="submit" class="button" value="Get Updates"/>
-        </form>
-      </div>
-    </div>
-  </div>
-  <div class="section">
-    <div class="container">
-      <div class="layout-grid grid-2 top-45">
-        <h2 class="grid-span-2">How do you make nice tiles with icons?</h2>
-        <div>
-          <img class="tile-icon" src="images/icons/automation.svg">
-          <h3>Good question.</h3>
-          <p>Here's how you do it! These are custom SVG icons.</p>
-        </div>
-        <div>
-          <img class="tile-icon" src="images/icons/standard.svg">
-          <h3>This is another tile.</h3>
-          <p><i class="fa fa-info-circle"></i> Here's how to do a <a href="https://fontawesome.com/">fontawesome</a> icon.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="section">
-    <div class="airtable-box">
-      <div class="container">
-        <p><a href="https://airtable.com/shrUAtA8qYasEaepI">Always link to the source</a> of an embed.</p>
-      </div>
-        <iframe class="airtable-embed" src="https://airtable.com/embed/shrUAtA8qYasEaepI?backgroundColor=gray&viewControls=on" frameborder="0" onmousewheel="scroll" width="100%" height="750" style="background: transparent; border: 1px solid #512a4f;"></iframe>
-    </div>
-</div>
-  <div class="footer section">
-    <div class="container">
-      <div class="footer-actions">
-        <a href="https://github.com/orgs/Police-Data-Accessibility-Project" class="button button-footer">GitHub</a>
-        <a href="https://discord.gg/wMqex8nKZJ" class="button button-footer">Discord</a>
-        <a href="https://www.linkedin.com/company/pdap" class="button button-footer">LinkedIn</a>
-      </div>
-      <p class="footer-p">© 2023 Police Data Accessibility Project<br></p>
-      <p class="footer-p">PDAP is a non-profit. EIN: 85-4207132. <a href="https://docs.pdap.io/meta/policy/pdap-privacy-policy" alt="Privacy Policy">Privacy Policy</a>. <a href="mailto:contact@pdap.io">contact@pdap.io</a><br><br></p>
-      <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

@@ -1,12 +0,0 @@
-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";
-        }
-    });
-});