From d53f98745772d1554fc80df96a9b79658d491efb Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 15:51:15 +0000 Subject: [PATCH] New layout --- 404.html | 131 ++++++++++++++++++++---------------------------- index.html | 131 ++++++++++++++++++++---------------------------- src/build.js | 2 +- src/footer.html | 3 -- src/header.html | 126 ++++++++++++++++++++-------------------------- 5 files changed, 166 insertions(+), 227 deletions(-) diff --git a/404.html b/404.html index 9eb0f93a1..71fec53ee 100644 --- a/404.html +++ b/404.html @@ -50,90 +50,58 @@ color: #999; } .navbar { - background: #EEE; - text-align: center; + font-size: 0.75rem; + line-height: 1rem; + padding: 1.5rem; } .title { font-size: 1rem; font-weight: 600; margin: 0; - padding: 1.5rem 1.5rem 0; + padding: 0; text-transform: uppercase; } - .navbar__text { - font-size: 0.8125rem; - margin: 0; - padding: 0; - } - .donate-form { - margin: 0; - padding: 0 0 1.5rem; + .button { + background-color: #6C6; + border-radius: 0.125rem; + color: #FFF; + display: block; + font-weight: 700; + padding: 0.75rem 1.5rem; text-align: center; + text-decoration: none; } - .donate-button { - -webkit-appearance: none; - background: transparent; - border: 0; - color: #333; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 0.8125rem; - font-weight: 400; - margin: 0; - padding: 0; - text-decoration: underline; - } - .donate-button:focus, .donate-button:hover { - color: #999; - } - @media (min-width: 800px) { - .navbar { - display: flex; - justify-content: space-between; - text-align: left; - } - .title { - padding: 1.5rem; - } - .navbar__text { - display: inline-block; - padding: 1.5rem 0; - } - .donate-form { - margin: 0 1.5rem 0 0; - padding: 0; - } - } - .hero { - margin: 0 auto; - max-width: 18rem; - padding: 3rem 3rem 0; - text-align: center; + .button:focus, .button:hover { + background-color: #5B5; + color: #FFF; } .search-field { -webkit-appearance: none; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTE1LjY4NSAxNC4xODNMMTEuNjIgMTAuMWMuNzUtMS4wNSAxLjE4Mi0yLjMxNyAxLjE4Mi0zLjcgMC0zLjUzMy0yLjg2Ny02LjQtNi40LTYuNC0zLjUzMyAwLTYuNCAyLjg2Ny02LjQgNi40IDAgMy41MzMgMi44NjcgNi40IDYuNCA2LjQgMS4zODMgMCAyLjY1LS40MzMgMy43LTEuMTgzbDQuMDgzIDQuMDY2Yy4yLjIxNy40ODQuMzE3Ljc1LjMxNy4yNjcgMCAuNTUtLjEuNzUtLjMxNy40MTctLjQxNi40MTctMS4wODMgMC0xLjV6bS05LjI4My0yLjc2NmMtMi43NjcgMC01LjAxNy0yLjI1LTUuMDE3LTUuMDE3IDAtMi43NjcgMi4yNS01LjAxNyA1LjAxNy01LjAxNyAyLjc2NyAwIDUuMDE3IDIuMjUgNS4wMTcgNS4wMTcgMCAyLjc2Ny0yLjI1IDUuMDE3LTUuMDE4IDUuMDE3eiIgZmlsbD0iI2QxZDFkMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+); - background-position: left center; + background-position: 0.25rem center; background-repeat: no-repeat; background-size: 1rem 1rem; border: none; border-bottom: 1px solid #EEE; + box-sizing: border-box; color: #999; display: block; font-family: inherit; font-size: 1rem; line-height: 1rem; - margin: 1.5rem auto; + margin: 1.5rem 0; outline: 0; - padding: 0.375rem 0.375rem 0.375rem 1.375rem; - width: 12rem; + padding: 0.375rem 0.375rem 0.375rem 1.5rem; + width: 100%; + } + .site-main { + width: 100%; } .tiles { display: flex; flex-wrap: wrap; list-style: none; - margin: -0.25rem 1.25rem; + margin: 1.25rem 1.25rem; padding: 0; } .tiles li { @@ -179,13 +147,13 @@ opacity: 0.5; text-transform: uppercase; } - @media (min-width: 500px) { .tiles li { width: 50%; } } - @media (min-width: 700px) { .tiles li { width: 33.333%; } } - @media (min-width: 900px) { .tiles li { width: 25% } } - @media (min-width: 1100px) { .tiles li { width: 20% } } - @media (min-width: 1400px) { .tiles li { width: 16.666% } } - @media (min-width: 1700px) { .tiles li { width: 12.5% } } - @media (min-width: 2100px) { .tiles li { width: 10% } } + @media (min-width: 800px) { .tiles li { width: 50%; } } + @media (min-width: 1000px) { .tiles li { width: 33.333%; } } + @media (min-width: 1200px) { .tiles li { width: 25% } } + @media (min-width: 1500px) { .tiles li { width: 20% } } + @media (min-width: 1800px) { .tiles li { width: 16.666% } } + @media (min-width: 2000px) { .tiles li { width: 12.5% } } + @media (min-width: 2400px) { .tiles li { width: 10% } } .footer { margin: 3rem; } @@ -195,22 +163,36 @@ max-width: 25.5rem; text-align: center; } + .block { + background-color: #EEE; + padding: 1.5rem; + } + @media (min-width: 600px) { + body { + display: flex; + } + .navbar { + padding: 1.5rem 0 1.5rem 1.5rem; + width: 18.5rem; + } + .site-main { + width: calc(100% - 20rem); + } + } -
-

187 SVG icons for popular brands Download them from GitHub

- +
  • Podcasts
    #9933CC
  • JustGiving
    #AD29B6
    • @@ -401,9 +383,6 @@
  • Stitcher
    #000000
-
-

Contributions, corrections & requests can be left on GitHub. Company logos in icons are copyright of their respective owners. Distributed for free by Dan Leech under the Free Art License.

-
+ -
-

187 SVG icons for popular brands Download them from GitHub

- +
  • Podcasts
    #9933CC
  • JustGiving
    #AD29B6
    • @@ -401,9 +383,6 @@
  • Stitcher
    #000000
-
-

Contributions, corrections & requests can be left on GitHub. Company logos in icons are copyright of their respective owners. Distributed for free by Dan Leech under the Free Art License.

-
+ -
+