settling on design, adding giraffe, fixing css

2 files changed, 143 insertions, 267 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 86293f5..2531ef2 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,287 +1,57 @@
-/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
-
-/*
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
-
-html {
-    color: #222;
-    font-size: 1em;
-    line-height: 1.4;
-}
-
-/*
- * Remove text-shadow in selection highlight:
- * https://twitter.com/miketaylr/status/12228805301
- *
- * Vendor-prefixed and regular ::selection selectors cannot be combined:
- * https://stackoverflow.com/a/16982510/7133471
- *
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
-    background: #b3d4fc;
-    text-shadow: none;
+body {
+  font-family: 'Arial', 'Helvetica', sans-serif;
+  background-color: #fcfcf9;
 }
 
-::selection {
-    background: #b3d4fc;
-    text-shadow: none;
+header {
+  text-align: center;
 }
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #ccc;
-    margin: 1em 0;
-    padding: 0;
+header img#logo {
+  height: 10rem;
 }
 
-/*
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-    vertical-align: middle;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
-    resize: vertical;
-}
-
-/* ==========================================================================
-   Browser Upgrade Prompt
-   ========================================================================== */
-
-.browserupgrade {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
-}
-
-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/*
- * Hide visually and from screen readers
- */
-
-.hidden {
-    display: none !important;
+header img#logofloat {
+  float: right;
+  height: 5rem;
 }
 
-/*
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.visuallyhidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap; /* 1 */
+main {
+  max-width: 50rem;
+  padding: 1.5rem;
+  margin: auto;
 }
 
-/*
- * Extends the .visuallyhidden class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
-
-.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-    white-space: inherit;
+span.single-date {
+  color: grey;
 }
 
-/*
- * Hide visually and from screen readers, but maintain layout
- */
-
-.invisible {
-    visibility: hidden;
+pre {
+  background: #eeebee;
+  padding: 1rem;
+  overflow: scroll;
 }
-
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.clearfix:before,
-.clearfix:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
+pre code {
+  color: inherit;
+  background-color: inherit;
 }
+code {
+  color: #911;
+  background-color: #eee;
+  }
 
-.clearfix:after {
-    clear: both;
-}
 
-/* ==========================================================================
-   EXAMPLE Media Queries for Responsive Design.
-   These examples override the primary ('mobile first') styles.
-   Modify as content requires.
-   ========================================================================== */
+/**/
 
-@media only screen and (min-width: 35em) {
-    /* Style adjustments for viewports that meet the condition */
+article.list-item {
+  margin: 1rem;
 }
-
-@media print,
-       (-webkit-min-device-pixel-ratio: 1.25),
-       (min-resolution: 1.25dppx),
-       (min-resolution: 120dpi) {
-    /* Style adjustments for high resolution devices */
+span.list-item-date {
+  text-align: right;
+  float: right;
+  color: grey;
 }
 
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-    *,
-    *:before,
-    *:after {
-        background: transparent !important;
-        color: #000 !important; /* Black prints faster */
-        -webkit-box-shadow: none !important;
-        box-shadow: none !important;
-        text-shadow: none !important;
-    }
-
-    a,
-    a:visited {
-        text-decoration: underline;
-    }
-
-    a[href]:after {
-        content: " (" attr(href) ")";
-    }
-
-    abbr[title]:after {
-        content: " (" attr(title) ")";
-    }
-
-    /*
-     * Don't show links that are fragment identifiers,
-     * or use the `javascript:` pseudo protocol
-     */
-
-    a[href^="#"]:after,
-    a[href^="javascript:"]:after {
-        content: "";
-    }
-
-    pre {
-        white-space: pre-wrap !important;
-    }
-    pre,
-    blockquote {
-        border: 1px solid #999;
-        page-break-inside: avoid;
-    }
-
-    /*
-     * Printing Tables:
-     * http://css-discuss.incutio.com/wiki/Printing_Tables
-     */
-
-    thead {
-        display: table-header-group;
-    }
-
-    tr,
-    img {
-        page-break-inside: avoid;
-    }
-
-    p,
-    h2,
-    h3 {
-        orphans: 3;
-        widows: 3;
-    }
-
-    h2,
-    h3 {
-        page-break-after: avoid;
-    }
+footer {
+  margin: 2rem 0 1rem;
+  text-align: center;
 }
diff --git a/static/img/giraffe.svg b/static/img/giraffe.svg
new file mode 100644
index 0000000..9f5afba
--- /dev/null
+++ b/static/img/giraffe.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="300.000000pt" height="200.000000pt" viewBox="0 0 300.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#2053AB" stroke="none">
+<path d="M1834 1779 c-3 -5 -14 -9 -25 -9 -11 0 -17 -4 -14 -10 3 -5 0 -10 -7
+-10 -22 0 -39 -38 -44 -102 -4 -51 -2 -59 11 -55 8 4 15 2 15 -3 0 -6 -5 -10
+-11 -10 -5 0 -8 -4 -4 -9 3 -5 -3 -11 -12 -14 -15 -3 -14 -6 7 -15 l25 -11
+-25 -1 c-17 0 -21 -3 -12 -8 9 -6 5 -12 -14 -22 -21 -12 -23 -15 -9 -20 15 -5
+16 -8 3 -21 -8 -8 -17 -22 -21 -31 -3 -10 -17 -18 -29 -19 -13 0 -17 -3 -10
+-6 17 -7 15 -30 -4 -37 -8 -3 -12 -11 -9 -16 4 -6 -8 -24 -25 -40 -23 -21 -27
+-30 -16 -30 9 0 16 -4 16 -10 0 -5 -9 -10 -19 -10 -11 0 -22 -4 -25 -9 -3 -4
+5 -6 18 -4 13 3 27 0 30 -6 6 -10 -6 -15 -26 -12 -4 0 -5 -6 -2 -14 4 -8 16
+-15 28 -15 17 0 18 2 6 10 -8 5 -10 10 -5 10 19 -1 40 -25 42 -50 1 -14 0 -19
+-3 -12 -3 6 -10 12 -15 12 -6 0 -5 -8 1 -20 9 -16 8 -20 -7 -21 -10 0 -29 -3
+-43 -5 -14 -2 -37 -4 -52 -4 -16 0 -28 -4 -28 -10 0 -5 -12 -10 -26 -10 -16 0
+-23 -4 -18 -12 5 -8 0 -9 -16 -5 -15 4 -33 -1 -52 -14 -15 -11 -28 -18 -28
+-14 0 3 -11 -2 -25 -11 -15 -9 -25 -13 -24 -8 4 21 -2 35 -12 29 -6 -4 -9 0
+-7 11 2 15 -2 18 -20 17 -13 -2 -21 1 -17 7 5 9 -36 6 -72 -6 -7 -2 -13 0 -13
+5 0 5 9 11 21 14 12 3 18 10 14 16 -3 7 0 8 9 5 11 -4 16 0 16 13 0 12 8 19
+21 20 12 1 29 9 38 17 21 19 35 21 25 4 -5 -7 -3 -8 5 -4 7 5 10 15 6 24 -3 9
+-3 13 1 9 4 -4 13 -2 20 4 9 7 19 7 31 0 18 -9 19 -6 19 35 1 30 -4 44 -13 44
+-7 0 -13 -4 -13 -10 0 -5 -7 -10 -15 -10 -8 0 -15 -4 -15 -9 0 -5 -11 -11 -26
+-14 l-25 -4 21 22 c20 22 18 35 -6 35 -8 0 -36 -23 -64 -52 -27 -28 -50 -48
+-50 -43 0 4 -8 1 -17 -6 -11 -10 -14 -10 -9 -1 4 6 5 12 2 12 -7 0 -39 -60
+-42 -78 -2 -9 3 -11 14 -7 14 5 15 4 5 -6 -18 -18 -16 -40 2 -33 27 11 16 -3
+-27 -32 -24 -16 -51 -37 -60 -48 -10 -10 -18 -16 -18 -13 0 4 -8 -1 -18 -10
+-11 -10 -17 -22 -14 -27 3 -5 -3 -15 -12 -22 -11 -8 -13 -14 -7 -19 6 -3 14 1
+17 9 9 22 24 20 24 -4 0 -19 0 -19 45 0 35 15 45 16 45 6 0 -13 -31 -32 -38
+-24 -2 2 -8 -5 -13 -14 -6 -10 -16 -18 -23 -18 -28 0 -77 -32 -72 -47 3 -8 -6
+-25 -22 -39 l-27 -25 44 7 c31 4 42 3 37 -5 -5 -7 1 -11 15 -11 30 0 16 -13
+-29 -26 -20 -6 -36 -16 -35 -22 2 -8 -13 -12 -43 -12 -40 0 -45 -2 -34 -15 10
+-13 9 -15 -11 -15 -13 0 -35 -3 -48 -7 -21 -5 -23 -4 -17 13 5 15 4 16 -5 7
+-6 -6 -18 -9 -27 -6 -10 4 -13 2 -8 -5 4 -7 13 -12 20 -12 17 0 27 -33 16 -51
+-6 -9 -16 -4 -37 20 -25 27 -33 30 -54 23 -13 -5 -29 -7 -35 -5 -6 2 -14 -4
+-18 -13 -5 -14 -4 -15 9 -4 19 16 19 1 0 -24 -8 -11 -15 -37 -15 -59 l0 -39
+36 27 c20 16 35 22 32 14 -2 -8 -22 -24 -44 -36 -21 -12 -43 -25 -49 -30 -5
+-5 -19 -13 -30 -18 -18 -7 -18 -9 -3 -12 10 -3 35 5 55 16 21 11 56 25 78 32
+24 7 57 30 80 55 30 32 45 40 55 34 13 -8 13 -10 -1 -10 -10 0 -16 -7 -15 -17
+0 -10 -5 -17 -11 -16 -7 2 -13 -4 -13 -12 0 -8 -5 -15 -11 -15 -6 0 -8 -7 -5
+-16 5 -13 2 -15 -14 -11 -18 4 -19 3 -9 -9 6 -8 9 -17 5 -21 -3 -3 -6 -1 -6 5
+0 7 -14 12 -31 12 -20 0 -29 -4 -27 -12 3 -7 10 -13 15 -13 6 0 15 -4 20 -9 5
+-5 3 -6 -4 -2 -8 4 -13 1 -13 -8 0 -9 -6 -13 -14 -10 -8 3 -17 1 -21 -5 -4 -8
+-11 -6 -22 4 -13 13 -13 18 -1 32 15 18 12 17 -54 -16 -25 -13 -51 -35 -57
+-48 -6 -12 -15 -23 -21 -23 -19 0 -10 -40 13 -55 19 -12 30 -13 56 -4 22 8 44
+8 70 2 28 -8 44 -7 62 3 13 7 32 13 42 14 10 0 46 27 81 59 66 62 128 89 170
+76 43 -13 193 -34 246 -35 55 0 110 12 203 46 47 16 48 16 71 -5 12 -11 31
+-21 41 -21 50 0 123 -80 168 -185 15 -36 51 -170 64 -238 l5 -27 379 0 378 0
+-48 98 c-27 53 -60 130 -75 170 -14 40 -48 117 -76 171 -27 54 -50 103 -50
+110 0 6 -8 37 -19 69 -10 31 -21 68 -24 82 -4 14 -26 60 -51 103 -39 67 -42
+79 -28 84 101 36 187 81 204 107 8 12 -37 34 -150 72 -71 24 -74 24 -105 8
+-43 -23 -201 -29 -193 -7 3 8 6 24 6 34 0 11 5 17 10 14 6 -3 15 -3 21 1 8 4
+7 9 -2 15 -11 7 -10 9 4 9 16 0 15 2 -2 19 -11 11 -22 39 -26 63 -10 62 -37
+93 -83 90 -28 -2 -33 0 -22 8 12 7 8 10 -17 10 -40 0 -59 26 -67 90 -6 44 9
+98 76 274 22 56 11 91 -30 93 -18 1 -34 -3 -38 -8z m-71 -369 c-3 -11 -9 -17
+-14 -15 -18 12 -28 -31 -13 -59 12 -25 12 -27 -1 -22 -8 3 -21 -2 -30 -10 -10
+-10 -22 -13 -33 -8 -16 7 -16 7 1 11 9 3 15 9 12 14 -4 5 5 24 19 42 15 19 26
+38 26 43 0 14 22 34 31 29 4 -3 5 -14 2 -25z m-403 -170 c0 -5 -8 -10 -17 -10
+-15 0 -16 2 -3 10 19 12 20 12 20 0z m327 -67 c-4 -3 -7 0 -7 7 0 7 3 10 7 7
+3 -4 3 -10 0 -14z m233 -12 c0 -5 -7 -14 -15 -21 -13 -11 -14 -10 -9 4 8 20 0
+21 -21 0 -15 -15 -14 -18 5 -31 25 -18 27 -37 3 -25 -10 5 -24 7 -30 5 -9 -3
+-13 8 -13 36 l0 41 40 0 c22 0 40 -4 40 -9z m31 -14 c-6 -8 -9 -16 -6 -19 3
+-2 -2 -5 -10 -5 -21 0 -19 25 3 30 9 3 19 5 21 6 2 0 -2 -5 -8 -12z m34 -29
+c-19 -11 -30 -5 -21 11 4 6 14 7 22 4 15 -5 14 -7 -1 -15z m-212 -39 c-3 -11
+-13 -23 -22 -26 -9 -2 -23 -8 -32 -13 -13 -7 -16 -4 -16 16 0 14 5 24 13 24 8
+0 14 5 14 10 0 6 11 10 24 10 20 0 23 -4 19 -21z m42 11 c3 -6 -1 -7 -9 -4
+-18 7 -21 14 -7 14 6 0 13 -4 16 -10z m98 -80 c3 -11 1 -20 -4 -20 -5 0 -9 9
+-9 20 0 11 2 20 4 20 2 0 6 -9 9 -20z m40 -15 c-3 -9 -8 -14 -10 -11 -3 3 -2
+9 2 15 9 16 15 13 8 -4z m-748 -14 c-8 -14 -25 -14 -25 0 0 5 5 7 10 4 6 -3
+10 -1 10 6 0 7 3 10 6 6 3 -3 3 -10 -1 -16z m95 4 l25 -14 -25 -9 -25 -9 24
+-8 24 -7 -24 -19 c-23 -18 -23 -19 -3 -19 11 0 29 -7 40 -16 18 -15 18 -15 -6
+-10 -68 16 -100 18 -100 7 0 -6 8 -11 18 -11 9 0 24 -5 32 -11 11 -7 5 -8 -22
+-3 -28 4 -46 1 -70 -13 -43 -25 -98 -44 -98 -34 0 5 7 11 15 15 8 3 15 10 15
+17 0 6 -7 9 -15 5 -21 -8 -19 6 5 32 12 12 30 22 41 22 19 0 59 35 89 79 17
+24 26 25 60 6z m-205 -255 c-3 -5 -12 -10 -18 -10 -7 0 -6 4 3 10 19 12 23 12
+15 0z m-162 -167 c-23 -9 -14 -20 12 -15 35 6 31 -2 -11 -27 -37 -22 -64 -27
+-64 -12 0 14 26 31 36 23 5 -4 6 -3 2 2 -9 11 10 36 26 35 7 0 6 -2 -1 -6z
+m1377 -88 c0 -8 -2 -15 -4 -15 -2 0 -6 7 -10 15 -3 8 -1 15 4 15 6 0 10 -7 10
+-15z m-1615 -64 c3 -6 -3 -9 -14 -8 -11 0 -17 5 -15 9 7 11 22 10 29 -1z"/>
+<path d="M883 513 c4 -3 10 -3 14 0 3 4 0 7 -7 7 -7 0 -10 -3 -7 -7z"/>
+<path d="M1606 1733 c-4 -4 -14 -24 -22 -43 -14 -33 -14 -36 7 -53 18 -15 20
+-19 8 -34 -13 -15 -12 -15 8 -5 30 16 35 15 24 -6 -7 -13 -6 -23 2 -31 9 -10
+6 -11 -14 -6 -15 4 -30 2 -33 -4 -4 -5 2 -10 11 -10 55 -2 58 -3 36 -21 -16
+-12 -17 -18 -8 -27 16 -15 26 -6 18 15 -4 9 -2 13 4 9 16 -10 85 134 85 177 0
+46 -3 49 -35 37 -17 -7 -28 -7 -32 -1 -10 16 -25 11 -25 -7 0 -16 -1 -15 -13
+1 -7 9 -16 13 -21 9z m34 -53 c0 -5 -2 -10 -4 -10 -3 0 -8 5 -11 10 -3 6 -1
+10 4 10 6 0 11 -4 11 -10z m37 -97 c-4 -3 -10 -3 -14 0 -3 4 0 7 7 7 7 0 10
+-3 7 -7z"/>
+<path d="M1372 1338 c6 -16 67 -23 81 -9 7 7 4 10 -9 9 -10 -1 -32 2 -47 6
+-22 5 -28 4 -25 -6z"/>
+<path d="M1340 1155 c-7 -8 -28 -15 -46 -15 -19 0 -34 -5 -34 -11 0 -5 5 -7
+10 -4 6 3 10 1 10 -4 0 -6 4 -11 10 -11 11 0 79 59 69 60 -4 0 -12 -7 -19 -15z"/>
+<path d="M1334 1108 c-4 -7 -3 -8 4 -4 12 7 16 16 8 16 -3 0 -8 -5 -12 -12z"/>
+<path d="M1106 1092 c-3 -5 1 -9 9 -9 8 0 12 4 9 9 -3 4 -7 8 -9 8 -2 0 -6 -4
+-9 -8z"/>
+<path d="M765 709 c-36 -37 -37 -41 -15 -35 14 4 32 9 40 10 8 2 22 6 30 9 8
+3 22 8 30 10 12 4 11 6 -2 6 -10 1 -18 6 -18 12 0 5 -4 8 -9 4 -5 -3 -11 2
+-13 10 -2 12 -14 5 -43 -26z"/>
+<path d="M928 743 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
+<path d="M650 590 c0 -7 3 -10 7 -7 3 4 3 10 0 14 -4 3 -7 0 -7 -7z"/>
+<path d="M641 554 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+</g>
+</svg>