From d53f98745772d1554fc80df96a9b79658d491efb Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 15:51:15 +0000 Subject: [PATCH 1/8] 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 9eb0f93a..71fec53e 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.

-
+ -
+
From 3cf9ecbbd3cd568aa7d8d068023671c6c8bd8bc5 Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 15:52:45 +0000 Subject: [PATCH 2/8] Fixed ad block --- 404.html | 6 ++++++ index.html | 6 ++++++ src/header.html | 6 ++++++ 3 files changed, 18 insertions(+) diff --git a/404.html b/404.html index 71fec53e..5d9730c8 100644 --- a/404.html +++ b/404.html @@ -165,8 +165,12 @@ } .block { background-color: #EEE; + margin: 0 0 0.75rem; padding: 1.5rem; } + .block--ad { + padding: 0.75rem; + } @media (min-width: 600px) { body { display: flex; @@ -189,6 +193,8 @@

SVG icons for popular brands. 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.

Download

+ +
diff --git a/index.html b/index.html index 71fec53e..5d9730c8 100644 --- a/index.html +++ b/index.html @@ -165,8 +165,12 @@ } .block { background-color: #EEE; + margin: 0 0 0.75rem; padding: 1.5rem; } + .block--ad { + padding: 0.75rem; + } @media (min-width: 600px) { body { display: flex; @@ -189,6 +193,8 @@

SVG icons for popular brands. 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.

Download

+ +
diff --git a/src/header.html b/src/header.html index b5a3fac1..0d619a4e 100644 --- a/src/header.html +++ b/src/header.html @@ -165,8 +165,12 @@ } .block { background-color: #EEE; + margin: 0 0 0.75rem; padding: 1.5rem; } + .block--ad { + padding: 0.75rem; + } @media (min-width: 600px) { body { display: flex; @@ -189,6 +193,8 @@

SVG icons for popular brands. 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.

Download

+ +
From df8b29b728e80c7b3ae9a17e43644fc9c0758f6f Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 15:54:25 +0000 Subject: [PATCH 3/8] Tweaking ad area --- 404.html | 8 ++++++++ index.html | 8 ++++++++ src/header.html | 8 ++++++++ 3 files changed, 24 insertions(+) diff --git a/404.html b/404.html index 5d9730c8..7fc6aa60 100644 --- a/404.html +++ b/404.html @@ -171,6 +171,14 @@ .block--ad { padding: 0.75rem; } + .carbon-wrap { + display: flex; + } + .carbon-poweredby { + color: #AAA; + font-weight: 700; + text-align: right; + } @media (min-width: 600px) { body { display: flex; diff --git a/index.html b/index.html index 5d9730c8..7fc6aa60 100644 --- a/index.html +++ b/index.html @@ -171,6 +171,14 @@ .block--ad { padding: 0.75rem; } + .carbon-wrap { + display: flex; + } + .carbon-poweredby { + color: #AAA; + font-weight: 700; + text-align: right; + } @media (min-width: 600px) { body { display: flex; diff --git a/src/header.html b/src/header.html index 0d619a4e..9de7868e 100644 --- a/src/header.html +++ b/src/header.html @@ -171,6 +171,14 @@ .block--ad { padding: 0.75rem; } + .carbon-wrap { + display: flex; + } + .carbon-poweredby { + color: #AAA; + font-weight: 700; + text-align: right; + } @media (min-width: 600px) { body { display: flex; From 01574b1c45eed8f37a615327fa57af063329caff Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 15:56:22 +0000 Subject: [PATCH 4/8] . --- 404.html | 3 ++- index.html | 3 ++- src/header.html | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/404.html b/404.html index 7fc6aa60..448d480c 100644 --- a/404.html +++ b/404.html @@ -176,8 +176,9 @@ } .carbon-poweredby { color: #AAA; - font-weight: 700; + display: block; text-align: right; + text-decoration: none; } @media (min-width: 600px) { body { diff --git a/index.html b/index.html index 7fc6aa60..448d480c 100644 --- a/index.html +++ b/index.html @@ -176,8 +176,9 @@ } .carbon-poweredby { color: #AAA; - font-weight: 700; + display: block; text-align: right; + text-decoration: none; } @media (min-width: 600px) { body { diff --git a/src/header.html b/src/header.html index 9de7868e..1b786f0e 100644 --- a/src/header.html +++ b/src/header.html @@ -176,8 +176,9 @@ } .carbon-poweredby { color: #AAA; - font-weight: 700; + display: block; text-align: right; + text-decoration: none; } @media (min-width: 600px) { body { From ead109e33851e261b4d53e5d6cc414b479c11371 Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 15:57:49 +0000 Subject: [PATCH 5/8] Updated ad layout --- 404.html | 13 +++++++++++-- index.html | 13 +++++++++++-- src/header.html | 13 +++++++++++-- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/404.html b/404.html index 448d480c..aba7ffb4 100644 --- a/404.html +++ b/404.html @@ -171,8 +171,17 @@ .block--ad { padding: 0.75rem; } - .carbon-wrap { - display: flex; + .carbon-wrap:after { + clear: both; + content: " "; + display: table; + } + .carbon-img { + float: left; + } + .carbon-text { + float: right; + width: calc(100% - 130px); } .carbon-poweredby { color: #AAA; diff --git a/index.html b/index.html index 448d480c..aba7ffb4 100644 --- a/index.html +++ b/index.html @@ -171,8 +171,17 @@ .block--ad { padding: 0.75rem; } - .carbon-wrap { - display: flex; + .carbon-wrap:after { + clear: both; + content: " "; + display: table; + } + .carbon-img { + float: left; + } + .carbon-text { + float: right; + width: calc(100% - 130px); } .carbon-poweredby { color: #AAA; diff --git a/src/header.html b/src/header.html index 1b786f0e..5c778319 100644 --- a/src/header.html +++ b/src/header.html @@ -171,8 +171,17 @@ .block--ad { padding: 0.75rem; } - .carbon-wrap { - display: flex; + .carbon-wrap:after { + clear: both; + content: " "; + display: table; + } + .carbon-img { + float: left; + } + .carbon-text { + float: right; + width: calc(100% - 130px); } .carbon-poweredby { color: #AAA; From a4f5600766e3d0d9dcfe85c2f59dc2d7b0bc6715 Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 16:00:00 +0000 Subject: [PATCH 6/8] Changed ads again --- 404.html | 4 ++-- index.html | 4 ++-- src/header.html | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/404.html b/404.html index aba7ffb4..13c459e6 100644 --- a/404.html +++ b/404.html @@ -181,12 +181,12 @@ } .carbon-text { float: right; - width: calc(100% - 130px); + width: calc(100% - 130px - -0.75rem); } .carbon-poweredby { color: #AAA; display: block; - text-align: right; + text-align: center; text-decoration: none; } @media (min-width: 600px) { diff --git a/index.html b/index.html index aba7ffb4..13c459e6 100644 --- a/index.html +++ b/index.html @@ -181,12 +181,12 @@ } .carbon-text { float: right; - width: calc(100% - 130px); + width: calc(100% - 130px - -0.75rem); } .carbon-poweredby { color: #AAA; display: block; - text-align: right; + text-align: center; text-decoration: none; } @media (min-width: 600px) { diff --git a/src/header.html b/src/header.html index 5c778319..7b546d3e 100644 --- a/src/header.html +++ b/src/header.html @@ -181,12 +181,12 @@ } .carbon-text { float: right; - width: calc(100% - 130px); + width: calc(100% - 130px - -0.75rem); } .carbon-poweredby { color: #AAA; display: block; - text-align: right; + text-align: center; text-decoration: none; } @media (min-width: 600px) { From bd6b97fb428410c89347967bb2990fc352cdcb0e Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 16:00:41 +0000 Subject: [PATCH 7/8] Fixed silly maths --- 404.html | 2 +- index.html | 2 +- src/header.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/404.html b/404.html index 13c459e6..a0ec65fe 100644 --- a/404.html +++ b/404.html @@ -181,7 +181,7 @@ } .carbon-text { float: right; - width: calc(100% - 130px - -0.75rem); + width: calc(100% - 130px - 0.75rem); } .carbon-poweredby { color: #AAA; diff --git a/index.html b/index.html index 13c459e6..a0ec65fe 100644 --- a/index.html +++ b/index.html @@ -181,7 +181,7 @@ } .carbon-text { float: right; - width: calc(100% - 130px - -0.75rem); + width: calc(100% - 130px - 0.75rem); } .carbon-poweredby { color: #AAA; diff --git a/src/header.html b/src/header.html index 7b546d3e..c49d2de7 100644 --- a/src/header.html +++ b/src/header.html @@ -181,7 +181,7 @@ } .carbon-text { float: right; - width: calc(100% - 130px - -0.75rem); + width: calc(100% - 130px - 0.75rem); } .carbon-poweredby { color: #AAA; From b6dc54d79454762e701b24cd0b6180fa6c080894 Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 10 Dec 2015 16:02:01 +0000 Subject: [PATCH 8/8] Finalised ad layout --- 404.html | 1 + index.html | 1 + src/header.html | 1 + 3 files changed, 3 insertions(+) diff --git a/404.html b/404.html index a0ec65fe..218fd131 100644 --- a/404.html +++ b/404.html @@ -186,6 +186,7 @@ .carbon-poweredby { color: #AAA; display: block; + margin: 0.25rem 0 0; text-align: center; text-decoration: none; } diff --git a/index.html b/index.html index a0ec65fe..218fd131 100644 --- a/index.html +++ b/index.html @@ -186,6 +186,7 @@ .carbon-poweredby { color: #AAA; display: block; + margin: 0.25rem 0 0; text-align: center; text-decoration: none; } diff --git a/src/header.html b/src/header.html index c49d2de7..054727b6 100644 --- a/src/header.html +++ b/src/header.html @@ -186,6 +186,7 @@ .carbon-poweredby { color: #AAA; display: block; + margin: 0.25rem 0 0; text-align: center; text-decoration: none; }