Taking the meta to a new level.

1 files changed, 103 insertions, 0 deletions

diff --git a/site/page-header.html b/site/page-header.html
new file mode 100644
index 0000000..ff5670b
--- /dev/null
+++ b/site/page-header.html
@@ -0,0 +1,103 @@
+<section class="usa-banner" aria-label="Accessible website">
+  <div class="usa-accordion">
+
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img class="usa-banner__header-flag" src="assets/uswds-2.10.1/img/us_flag_small.png" alt="U.S. flag">
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto">
+          <p class="usa-banner__header-text">Proudly designed with the U.S. Web Design System.</p>
+          <p class="usa-banner__header-action" aria-hidden="true">Here&#39;s how you know</p>
+        </div>
+        <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner__button-text">Here&#39;s how you know</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+      <div class="grid-row grid-gap-lg">
+	<div class="usa-banner__guidance tablet:grid-col-6">
+	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
+	  <div class="usa-media-block__body">
+            <p>
+              <strong>Design for democracy</strong>
+              <br/>
+              The <a href="https://designsystem.digital.gov/">U.S. Web Design System</a> emphasizes universal accessibility.
+            </p>
+	  </div>
+	</div>
+	<div class="usa-banner__guidance tablet:grid-col-6">
+	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-https.svg" role="img" alt="" aria-hidden="true">
+	  <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong>
+	      <br/>
+              This website will soon feature identical protection features!
+	    </p>
+	  </div>
+	</div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<header class="usa-header usa-header--extended sd-header">
+  <div class="usa-navbar">
+    <div class="usa-logo" id="extended-logo">
+      <em class="usa-logo__text"><a href="index.html" title="Home" aria-label="Home">Smart Documents</a></em>
+    </div>
+    <button class="usa-menu-btn">Menu</button>
+  </div>
+
+  <nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner">
+
+      <button class="usa-nav__close">
+	<img src="assets/img/usa-icons/close.svg" role="img" alt="close">
+      </button>
+
+      <ul class="usa-nav__primary usa-accordion">
+
+	<li class="usa-nav__primary-item">
+	  <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two">
+	    <span>Features</span>
+	  </button>
+	  <ul id="extended-nav-section-two" class="usa-nav__submenu">
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> wan</a></li>
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> tu</a></li>
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> mute</a></li>
+	  </ul>
+	</li>
+	
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="original-paper.html"><span>The original paper</span></a>
+	</li>
+	
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="jobs.html"><span>I am...</span></a>
+	</li>
+
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="about.html"><span>About</span></a>
+	</li>
+
+      </ul>
+
+      <div class="usa-nav__secondary">
+	<ul class="usa-nav__secondary-links">
+	  <li class="usa-nav__secondary-item"><a href="">Contact</a></li>
+	  <li class="usa-nav__secondary-item"><a href="">Contribute</a></li>
+	</ul>
+
+	<form class="usa-search usa-search--small " role="search">
+	  <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
+	  <input class="usa-input" id="extended-search-field-small" type="search" name="search">
+	  <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
+	</form>
+      </div>
+    </div>
+  </nav>
+</header>