Initial commit

css/base.css

@@ -0,0 +1,208 @@
+@import url("normalize.css");
+@import url("fonts.css");
+
+/**
+ *  Base
+ */
+html {
+  font-size: 1.125em;
+  }
+
+body {
+  font-family: "Borgia Pro", serif;
+  font-weight: 400;
+  line-height: 1.45;
+  color: #212121;
+  
+  background-color: #eeeeee;
+  }
+
+p {
+  margin-bottom: 1.3em;
+  }
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 1.414em 0 0.5em;
+  line-height: 1.2;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  }
+
+h1 {
+  margin-top: 0;
+  font-size: 2.441em;
+  }
+
+h2 {
+  font-size: 1.953em;
+  font-style: italic;
+  color: #616161;
+  }
+
+h3 {
+  font-size: 1.563em;
+  text-decoration: none;
+  }
+
+h4 {
+  font-size: 1.25em;
+  color: #616161;
+  font-style: italic;
+  }
+
+h5 {
+  font-size: 1.222em;
+  text-transform: uppercase;
+  color: #616161;
+
+  /* TODO: Get rid of this. */
+  padding: 10px 1.333em 10px 46px;
+  }
+
+small {
+  font-size: 0.8em;
+  }
+
+a {
+  color: #9b2621;
+  cursor: pointer;
+  }
+
+  a:hover {
+    color: #e83b3c;
+    }
+
+img,
+iframe {
+  max-width: 100%;
+  }
+
+address {
+  font-style: normal;
+  }
+
+/* Phone links */
+span.gc-cs-link {
+  color: #212121;
+  }
+
+nav dl a {
+  text-decoration: none;
+  display: block;
+  font-weight: 800;
+  color: #212121;
+  padding: 10px 1.333em 10px 46px;
+  }
+
+nav dl a:hover {
+  background-color: #e1dec5;
+  color: #9b2621;
+  }
+
+
+
+/**
+ *  Layout
+ */
+aside {
+  min-height: 100%;
+  padding-top: 2.778em;
+  width: 13.889em;
+  border-left: 3.333em solid #fafafa;
+  position: fixed;
+  text-align: center;
+  background-color: #fefddf;
+  }
+
+header,
+article {
+  max-width: 60ch;
+  }
+
+main {
+  margin: 0 0 0 310px;
+  padding: 1.333em 3.333em;
+  max-width: 43.333em;
+  background-color: #fafafa;
+  min-height: 100%;
+  }
+
+nav h5 {
+  text-align: left;
+  }
+
+dl {
+  text-align: left;
+  }
+
+
+
+/**
+ *  Module
+ */
+#mobile-nav-bar {
+  height: 42px;
+  position: fixed;
+  top: 0;
+  display: none;
+  left: 0;
+  z-index: 10;
+  }
+
+.hamburger-button {
+  display: inline;
+  vertical-align: middle;
+  height: 35px;
+  margin: 4px 6px;
+  z-index: 11;
+  cursor: pointer;
+  }
+
+
+
+
+
+
+/**
+ *  State
+ */
+.is-hidden {
+  display: none;
+  }
+
+.is-shown {
+  display: block;
+  }
+
+.is-current {
+  background-color: #ffecb3;
+  color: #9b2621;
+  }
+
+
+
+/**
+ *  Responsive
+ */
+@media only screen and (max-width: 60em) {
+  aside {
+    border-left: none;
+    padding-top: 92px;
+    box-shadow: 2px 0 3px #cccccc;
+    display: none;
+    }
+
+  #mobile-nav-bar {
+    display: block;
+    }
+
+  main {
+    margin: auto;
+    position: static;
+    padding: 3.333em;
+    }
+  }

css/fonts.css

@@ -0,0 +1,45 @@
+/* Fonts */
+
+@font-face {
+  font-family: "Borgia Pro";
+  src: url("../fonts/BorgiaPro-Italic-webfont.eot");
+  src: url("../fonts/BorgiaPro-Italic-webfont.eot?#iefix") format("embedded-opentype"),
+       url("../fonts/BorgiaPro-Italic-webfont.woff") format("woff"),
+       url("../fonts/BorgiaPro-Italic-webfont.ttf") format("truetype"),
+       url("../fonts/BorgiaPro-Italic-webfont.svg#borgia_proitalic") format("svg");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Borgia Pro";
+  src: url("../fonts/BorgiaPro-Regular-webfont.eot");
+  src: url("../fonts/BorgiaPro-Regular-webfont.eot?#iefix") format("embedded-opentype"),
+       url("../fonts/BorgiaPro-Regular-webfont.woff") format("woff"),
+       url("../fonts/BorgiaPro-Regular-webfont.ttf") format("truetype"),
+       url("../fonts/BorgiaPro-Regular-webfont.svg#borgia_proregular") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Borgia Pro";
+  src: url("../fonts/BorgiaPro-BoldItalic-webfont.eot");
+  src: url("../fonts/BorgiaPro-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"),
+       url("../fonts/BorgiaPro-BoldItalic-webfont.woff") format("woff"),
+       url("../fonts/BorgiaPro-BoldItalic-webfont.ttf") format("truetype"),
+       url("../fonts/BorgiaPro-BoldItalic-webfont.svg#borgia_probold_italic") format("svg");
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Borgia Pro";
+  src: url("../fonts/BorgiaPro-Bold-webfont.eot");
+  src: url("../fonts/BorgiaPro-Bold-webfont.eot?#iefix") format("embedded-opentype"),
+       url("../fonts/BorgiaPro-Bold-webfont.woff") format("woff"),
+       url("../fonts/BorgiaPro-Bold-webfont.ttf") format("truetype"),
+       url("../fonts/BorgiaPro-Bold-webfont.svg#borgia_probold") format("svg");
+  font-weight: bold;
+  font-style: normal;
+}

css/normalize.css

@@ -0,0 +1,425 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

img/hamburger.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<g display="none" opacity="0.5">
+			<defs>
+				<rect id="SVGID_1_" opacity="0.5" width="24" height="24"/>
+			</defs>
+			<clipPath id="SVGID_2_" display="inline">
+				<use xlink:href="#SVGID_1_"  overflow="visible"/>
+			</clipPath>
+			<g display="inline" clip-path="url(#SVGID_2_)">
+				<g>
+					<defs>
+						<rect id="SVGID_3_" width="24" height="24"/>
+					</defs>
+					<clipPath id="SVGID_4_">
+						<use xlink:href="#SVGID_3_"  overflow="visible"/>
+					</clipPath>
+					<path clip-path="url(#SVGID_4_)" fill="#010101" d="M15.502,14h-0.794l-0.274-0.273c0.976-1.138,1.565-2.61,1.565-4.227
+						C15.999,5.91,13.09,3,9.5,3S3,5.91,3,9.5S5.91,16,9.5,16c1.615,0,3.088-0.592,4.225-1.566l0.276,0.274V15.5l4.998,4.991
+						L20.49,19L15.502,14z M9.5,14C7.015,14,5,11.985,5,9.5S7.015,5,9.5,5S14,7.015,14,9.5S11.985,14,9.5,14"/>
+				</g>
+			</g>
+		</g>
+		<g>
+			<g>
+				<g opacity="0.5">
+					<defs>
+						<rect id="SVGID_5_" opacity="0.5" width="24" height="24"/>
+					</defs>
+					<clipPath id="SVGID_6_">
+						<use xlink:href="#SVGID_5_"  overflow="visible"/>
+					</clipPath>
+					<g clip-path="url(#SVGID_6_)">
+						<g>
+							<defs>
+								<rect id="SVGID_7_" width="24" height="24"/>
+							</defs>
+							<clipPath id="SVGID_8_">
+								<use xlink:href="#SVGID_7_"  overflow="visible"/>
+							</clipPath>
+							<path clip-path="url(#SVGID_8_)" fill="#010101" d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,8h18V6H3V8z"/>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Public Defenders</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
+    <link rel="stylesheet" href="css/base.css">
+  </head>
+  <body>
+    <div id="mobile-nav-bar" class="is-mobile">
+      <img id="show-nav" src="img/hamburger.svg" class="hamburger-button">
+    </div>
+
+    <aside>
+      <nav>
+        <a href="index.html">
+          <img id="logo" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="img/logo.png">
+        </a>
+
+        <dl>
+          <dt>
+            <a href="index.html" class="is-current">Home</a>
+          </dt>
+          <dt>
+            <a href="pages/about.html">About Us</a>
+          </dt>
+          <dt>
+            <a href="pages/resources.html">Resources</a>
+          </dt>
+          <dt>
+            <a href="pages/contact.html">Contact Us</a>
+          </dt>
+        </dl>
+
+        <h5>Jefferson<br>
+          Associated<br>
+          Counsel
+        </h5>
+      </nav>
+    </aside>
+
+
+    <main role="content">
+      <header>
+        <hgroup>
+          <h1>Jefferson Associated Counsel</h1>
+          <h2>Public Defense Office for Jefferson County, Washington</h2>
+        </hgroup>
+        <p><img src="data:image/jpg;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="img/office.jpg"></p>
+      </header>
+
+      <article>
+        <section>
+          <h3><a href="pages/about.html">About Us</a></h3>
+          <p>We organized in 2005 to improve the delivery of criminal defense services to low income people in Jefferson County Courts. Be it felony, misdemeanor, juvenile, or dependency cases, we are a public interest non-profit firm ready to serve community members in need. <a href="pages/about.html">Read more…</a></p>
+        </section>
+
+        <section>
+          <h3><a href="pages/resources.html">FAQ & Resources</a></h3>
+          <p>Here are FAQ’s and useful resources. <a href="pages/resources.html">Read more…</a></p>
+        </section>
+
+        <section>
+          <h3><a href="pages/contact.html">Contact Us</a></h3>
+          <address>624 Polk St<br>Port Townsend, WA<br>98368<br>(360) 385-5613</address>
+          <p>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2663.6663756358375!2d-122.76141409999998!3d48.116671200000006!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548fedc79b044371%3A0xd553d478b255fcdb!2s624+Polk+St%2C+Port+Townsend%2C+WA+98368!5e0!3m2!1sen!2sus!4v1409801191837" width="400" height="300" frameborder="0" style="border:0"></iframe>
+          </p>
+        </section>
+      </article>
+    </main>
+
+    <script src="src/index.js"></script>
+  </body>
+</html>

pages/about.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Public Defenders</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="../img/favicon.ico" rel="shortcut icon" type="image/x-icon">
+    <link rel="stylesheet" href="../css/base.css">
+  </head>
+  <body>
+    <div id="mobile-nav-bar" class="is-mobile">
+      <img id="show-nav" src="../img/hamburger.svg" class="hamburger-button">
+    </div>
+    
+    <aside>
+      <nav>
+        <a href="../index.html">
+          <img id="logo" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="../img/logo.png">
+        </a>
+        
+        <dl>
+          <dt>
+            <a href="../index.html">Home</a>
+          </dt>
+          <dt>
+            <a href="about.html" class="is-current">About Us</a>
+          </dt>
+          <dt>
+            <a href="resources.html">Resources</a>
+          </dt>
+          <dt>
+            <a href="contact.html">Contact Us</a>
+          </dt>
+        </dl>
+        
+        <h5>Jefferson<br>
+          Associated<br>
+          Counsel
+        </h5>
+      </nav>
+    </aside>
+
+    <main role="content">
+      <article>
+        <header>
+          <h1>About Us</h1>
+          <p>We organized in 2005 to improve the delivery of criminal defense services to low income people in Jefferson County Courts. Be it felony, misdemeanor, juvenile, or dependency cases, we are a public interest non-profit firm ready to serve community members in need.</p>
+        </header>
+        
+        <section>
+          <h3>Jennifer Dempsey</h3>
+          <h4>Office Manager</h4>
+          <p>Jennifer runs the office and provides invaluable para-legal support for our attorneys. She maintains and updates thousands of client files and legal correspondence, directs attorneys to appointments, drafts legal documents, answers the phones, and assists clients daily with non-legal issues. Her work keeps the Jefferson Associated Counsel team organized and running smoothly as a cohesive unit.</p>
+        </section>
+        
+        <section>
+          <h3>Bret Roberts</h3>
+          <h4>District Court Attorney</h4>
+          <p>Bret's drive to deliver results for his clients is unparalleled in the local legal community. Ever since he started working at JAC in 2010, pre-dawn walkers and those delivering newspapers see a light reflecting on Polk Street from his upstairs office.</p>
+        </section>
+        
+        <section>
+          <h3>Nat Jacob</h3>
+          <h4>District Court Attorney</h4>
+          <p>Fresh from Kalispell Montana, Nat began working at JAC in 2014. He enjoys connecting with his clients, who remind him of the community members he grew up with back home, and navigating their cases through trial if necessary.</p>
+        </section>
+        
+        <section>
+          <h3>Ben Critchlow</h3>
+          <h4>Superior Court Attorney</h4>
+          <p>Founder of JAC and former director. Replaced in a brilliantly engineered coup by current director, Richard Davies. Grew up in Kennewick, Wa. and as a result identifies with clients who have desperate needs.</p>
+        </section>
+        
+        <section>
+          <h3>Scott Charlton</h3>
+          <h4>Superior Court, Juvenile, and Dependency Attorney</h4>
+          <p>Scott uses his 20 years of experience as both a local prosecutor and defense attorney to the advantage of his clients. His drive for out door adventure brought him to this part of the country, which he balances with the meaningful work he finds in the courtroom.</p>
+        </section>
+        
+        <section>
+          <h3>Richard Davies</h3>
+          <h4>Director and Superior Court Attorney</h4>
+          <p>Richard Davies has been defending the rights of people charged with crimes in Port Townsend and Jefferson County for over 20 years, as both a public defender and private attorney. His breadth of criminal defense experience includes dozens of felony and misdemeanor jury trials, and appeals before the Court of Appeals and the State Supreme Court.</p>
+        </section>
+        
+        <section>
+          <h3>Jack Range</h3>
+          <h4>Investigator</h4>
+          <p>Jack works in both the office and in the community, combing the streets looking for evidence, canvassing for witnesses, doing interviews, and helping clients in times of need. He becomes involved with a client’s case from arraignment and serves as an instrumental part of the legal team all the way through trial.</p>
+        </section>
+      </article>
+    </main>
+    
+    <script src="../src/index.js"></script>
+  </body>
+</html>

pages/contact.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Public Defenders</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="../img/favicon.ico" rel="shortcut icon" type="image/x-icon">
+    <link rel="stylesheet" href="../css/base.css">
+  </head>
+  <body>
+    <div id="mobile-nav-bar" class="is-mobile">
+      <img id="show-nav" src="../img/hamburger.svg" class="hamburger-button">
+    </div>
+    
+    <aside>
+      <nav>
+        <a href="../index.html">
+          <img id="logo" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="../img/logo.png">
+        </a>
+        
+        <dl>
+          <dt>
+            <a href="../index.html">Home</a>
+          </dt>
+          <dt>
+            <a href="about.html">About Us</a>
+          </dt>
+          <dt>
+            <a href="resources.html">Resources</a>
+          </dt>
+          <dt>
+            <a href="contact.html" class="is-current">Contact Us</a>
+          </dt>
+        </dl>
+        
+        <h5>Jefferson<br>
+          Associated<br>
+          Counsel
+        </h5>
+      </nav>
+    </aside>
+  
+    <main role="content">
+      <article>
+        <header>
+          <h1>Contact Us</h1>
+        </header>
+        <section>
+          <h3>Our Law Office</h3>
+          <p>Email: <strong><a href="mailto:jac@olympus.net">jac@olympus.net</a></strong><br>
+            Phone: <strong>(360) 385-5613</strong><br>
+            Fax: <strong>(360) 385-4012</strong>
+          </p>
+          <address>624 Polk Street<br>
+            Port Townsend, WA 98368<br>
+            <a href="//www.google.com/maps/search/624+Polk+St,+Port+Townsend,+WA+98368/">get directions →</a>
+          </address>
+        </section>
+        
+        <section>
+          <h3>Jefferson County Courthouse</h3>
+          <p>District Court: <strong>(360) 385-9135</strong><br>
+            Superior Court: <strong>(360) 385-9125</strong>
+          </p>
+          <address>1820 Jefferson Street<br>
+            Port Townsend, WA 98368<br>
+            <a href="//www.google.com/maps/place/1820+Jefferson+St,+Port+Townsend,+WA+98368/">get directions →</a>
+          </address>
+        </section>
+      </article>
+    </main>
+
+    <script src="../src/index.js"></script>
+  </body>
+</html>

pages/resources.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Public Defenders</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="../img/favicon.ico" rel="shortcut icon" type="image/x-icon">
+    <link rel="stylesheet" href="../css/base.css">
+  </head>
+  <body>
+    <div id="mobile-nav-bar" class="is-mobile">
+      <img id="show-nav" src="../img/hamburger.svg" class="hamburger-button">
+    </div>
+    
+    <aside>
+      <nav>
+        <a href="../index.html">
+          <img id="logo" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="../img/logo.png">
+        </a>
+        
+        <dl>
+          <dt>
+            <a href="../index.html">Home</a>
+          </dt>
+          <dt>
+            <a href="about.html">About Us</a>
+          </dt>
+          <dt>
+            <a href="resources.html" class="is-current">Resources</a>
+          </dt>
+          <dt>
+            <a href="contact.html">Contact Us</a>
+          </dt>
+        </dl>
+        
+        <h5>Jefferson<br>
+          Associated<br>
+          Counsel
+        </h5>
+      </nav>
+    </aside>
+
+    <main role="content">
+      <article>
+        <header>
+          <h1>FAQ’s</h1>
+          <p>These are the most common questions we get.</p>
+        </header>
+        
+        <section>
+          <h3>How do I get a Public Defender?</h3>
+          <p>Fill out a <a href="../downloads/requestforindigency.pdf">Indigency Screening Form</a> and turn it in to the Superior Court Clerk's office if you are charged with a felony crime, or the District Court Clerk's office if you are charged with a misdemeanor crime. If you qualify, they will contact Jennifer, our office manager, and she will assign a lawyer to your case.</p>
+        </section>
+        
+        <section>
+          <h3>I have a warrant out for my arrest, so how do I quash (terminate) it?</h3>
+          
+          <p><strong>For a felony warrant out of <em>Superior Court</em></strong>:</p>
+          <p>You can post the bail in person, or through a bail bondsman, at the Jefferson County Superior Court Clerk's Office. Alternatively, turn yourself in at the jail by 8AM and you will likely have a hearing the same day.</p>
+          <p><em>*The Judge may decide to set a higher bail at your hearing, so you may remain in jail if you cannot post the new amount.</em></p>
+          
+          <p><strong>For a misdemeanor warrant out of <em>District Court</em></strong>:</p>
+          <ol>
+            <li>Show up to the Friday "Warrant Quash" Calendar at District Court before 10 AM with $100 and a photo ID. Pay the District Court Clerk's Office and they will put you on the calendar. You can only do this one time per criminal charge.</li>
+            <li>Alternatively you can pay the full amount of bail to the District Court Clerk, at any time, in person or through a bail bond company.</li>
+          </ol>
+          <p><em>*Remember, although the Judge sometimes offers cash bail (10% of the bail bond amount), this is not the rule, so you may be arrested on the spot for not having the entire bail bond amount. Call our office to find out your bail amount.</em></p>
+        </section>
+        
+        <section>
+          <h3>When is my next court date?</h3>
+          <p><a href="//dw.courts.wa.gov/?fa=home.fmcdTerms">Find My Court Date</a></p>
+          <p>To verify, call our office, or the correct Clerk’s Office.</p>
+        </section>
+      </article>
+      
+      <article>
+        <header>
+          <h1>Resources</h1>
+        </header>
+        
+        <section>
+          <h3>Jefferson County District Court Clerk’s Office</h3>
+          <p>(360) 385-9135</p>
+        </section>
+        
+        <section>
+          <h3>Jefferson County Superior Court Clerk’s Office</h3>
+          <p>(360) 385-9125</p>
+        </section>
+        
+        <section>
+          <h3>Diversion</h3>
+          <p><a href="//www.friendshipdiversion.org/">Friendship Diversion</a></p>
+          <address>2011 Water Street<br>Port Townsend, WA 98368<br>(360) 379-9482</address>
+        </section>
+        
+        <section>
+          <h3>Bail Bonds</h3>
+          <p>Signature Bail Bonds</p>
+          <p>(888) 694-6008</p>
+          <p>All-Pro Bail Bonds</p>
+          <p>(866) 966-2245</p>
+        </section>
+        
+        <section>
+          <h3>Civil Legal Aid (Divorce, Child Custody, Tenant Rights, Foreclosure, etc.)</h3>
+          <p>Northwest Justice Project</p>
+          <p>(888) 201-1014</p>
+        </section>
+      </article>
+    </main>
+    
+    <script type="text/javascript" src="../src/index.js"></script>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,48 @@
+(function () {
+    var html = document.querySelector('html');
+
+    // Defer image loading till last.
+    function init() {
+        var imgDefer = document.getElementsByTagName('img');
+        for (var i = 0; i < imgDefer.length; i++) {
+            if (imgDefer[i].getAttribute('data-src')) {
+                imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
+            }
+        }
+    }
+
+    // When the DOM is ready it'll execute fn().
+    function ready(fn) {
+        if (document.readyState != 'loading'){
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+
+    window.onload = init;
+
+    ready(function () {
+        var showNavButton = document.getElementById('show-nav');
+        var nav = document.querySelector('aside');
+        var className = 'is-shown';
+
+        showNavButton.addEventListener('click', function (e) {
+            
+            // Toggle class: "is-shown".
+            if (nav.classList) {
+              nav.classList.toggle(className);
+            } else {
+              var classes = nav.className.split(' ');
+              var existingIndex = classes.indexOf(className);
+
+              if (existingIndex >= 0)
+                classes.splice(existingIndex, 1);
+              else
+                classes.push(className);
+
+              nav.className = classes.join(' ');
+            }
+        });
+    });
+})();