Merge pull request #419 from dwyl/blog-page

Full restyle
dwyl · Nov 1, 2017 · f7e3b25 · f7e3b25
2 parents 8a24fe9 + 37d1527
commit f7e3b25
Show file tree

Hide file tree

Showing 15 changed files with 337 additions and 317 deletions.
diff --git a/404.html b/404.html
@@ -43,34 +43,33 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WSDB8SX"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <nav class="w-100 bg-white tc white relative fixed">
+    <nav class="w-100 bg-white tc dwyl-dark-gray relative fixed shadow-5 z-3">
       <input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
       <label for="burger" class="dn-l pointer absolute top-1 right-1">
         <i class="fa fa-bars dwyl-dark-gray dib f2"></i>
       </label>
       <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
         <li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
-          <a href="/" class="dwyl-dark-gray link topnav">
+          <a href="/" class="dwyl-dark-gray link">
             <img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
             dwyl
           </a>
         </li>
-        <li class="ph4-l ph5-xl ph5 pt5 pb2 tl dn-l"><a href="/" class="dwyl-dark-gray link topnav">Home</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/portfolio" class="dwyl-dark-gray link topnav">Portfolio</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/values" class="dwyl-dark-gray link topnav">Values</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/team" class="dwyl-dark-gray link topnav">Team</a></li>
-        <li class="ph4-l ph5-xl ph5 dib-l pv2 tl pv0-l"><a href="/time-app" class="dwyl-dark-gray link topnav">App
-          <span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link topnav">Blog</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="dwyl-dark-gray link topnav">Contact</a></li>
+        <li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="dwyl-dark-gray link">Home</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/portfolio" class="dwyl-dark-gray link">Portfolio</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/values" class="dwyl-dark-gray link">Values</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/team" class="dwyl-dark-gray link">Team</a></li>
+        <li class="ph4 dib-l pv2 tl pv0-l"><a href="/time-app" class="dwyl-dark-gray link">App
+          <span class="dwyl-bg-yellow fw3 pa1 br2 f7 shadow-6">BETA</span></a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link">Blog</a></li>
+        <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="dwyl-dark-gray link">Contact</a></li>
       </ul>
     </nav>
 
-    <div class="pb6-l pt7-l mb6-l pb6-m pt7-m mb6-m pt6 pb5 w-60-l w-80 center">
-      <img src="/img/broken-heart.png" alt="broken dwyl heart logo" class="center db mt3">
+    <div class="pt6-l pt6 pb6-l pb5 w-60-l w-80 center">
+      <img src="/img/broken-heart.png" alt="broken dwyl heart logo" class="center db pt5-l">
       <h1 class="red tc f1">Oh No!</h1>
       <h2 class="tc lh-copy dwyl-gray">404<br>Sorry, what you're looking for is not here.</h2>
-
     </div>
 
 

diff --git a/blog.html b/blog.html
@@ -43,42 +43,44 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WSDB8SX"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <nav class="w-100 dwyl-bg-dark-gray tc white relative fixed z-1">
+    <nav class="w-100 tc white fixed dwyl-bg-dark-gray z-3 shadow-5">
       <input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
       <label for="burger" class="dn-l pointer absolute top-1 right-1">
-        <span class="sr-only">Show menu</span> <i class="fa fa-bars white dib f2"></i>
+        <i class="fa fa-bars white dib f2"></i>
       </label>
-      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l shadow-3">
+      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
         <li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
-          <a href="/" class="white link topnav">
+          <a href="/" class="white link">
             <img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
             dwyl
           </a>
         </li>
-        <li class="ph4-l ph5-xl ph5 pt5 pb2 tl dn-l"><a href="/" class="white link topnav">Home</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link topnav">Portfolio</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/values" class="white link topnav">Values</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/team" class="white link topnav">Team</a></li>
-        <li class="ph4-l ph5-xl ph5 dib-l pv2 tl pv0-l"><a href="/time-app" class="white link topnav">App
+        <li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="white link">Home</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link">Portfolio</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/values" class="white link">Values</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/team" class="white link">Team</a></li>
+        <li class="ph4 dib-l pv2 tl pv0-l"><a href="/time-app" class="white link">App
           <span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link topnav">Blog</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link topnav">Contact</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link">Blog</a></li>
+        <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link">Contact</a></li>
       </ul>
     </nav>
 
-    <section class="dwyl-bg-dark-gray pt5 pb3-ns center">
-      <h1 class="dwyl-mint f2 tc">The dwyl Blog</h1>
-      <div class="mw8 center ph0 ph3-ns">
-      <div class="w-50-ns w-25-l w-90 pt3 ph3 ph3-ns pb3 dib-ns dtc-ns v-top center white">
-        <a href="/blog/2017/september/welcome" class="white f4">
+
+    <section class="dwyl-bg-dark-gray pt6-ns pt5 pb6 center">
+      <h1 class="dwyl-mint f1 tc pt5 mv0 pb5-ns pb4 ph3">The dwyl blog</h1>
+      <div class="mw8 center ph2">
+
+      <a href="/blog/2017/september/welcome" class="link w-50-ns db w-25-l w-90 pt3 ph0 ph3-ns pb3 dib-ns dtc-ns v-top center white">
+        <h2 class="white f3 b lh-copy">
           Welcome to Our New Site
-        </a>
-        <p class="f6">
+        </h2>
+        <p class="f5 lh-copy">
           We've given our site a fresh design. Find out what inspired us and
           how we implement our best practices internally.
         </p>
         <p class="f7">29th September 2017 <span class="pl3 dwyl-mint">Mark Firth</span></p>
-      </div>
+      </a>
       <div class="w-50-ns w-25-l w-90 pt3 ph3 ph3-ns pb3 dib-ns dtc-ns v-top center white">
         <!-- <a href="#" class="link white">
           <h3 class="f4">The Fifth Ever Blog Post</h3>
@@ -130,7 +132,7 @@ <h3 class="f4">The First Ever Blog Post</h3>
       <div class="tc">
         <a href="#" class="dib link mt4 mb6 pa2 pv2-ns dwyl-dark-gray bg-white br2 f5 w-50 w4-ns ws-normal">Load More</a>
       </div> -->
-      </div>
+      </a>
     </section>
 
     <section class="dwyl-bg-mint center pv5-ns pb5-ns relative z-0">

diff --git a/blog/2017/september/welcome.html b/blog/2017/september/welcome.html
@@ -44,26 +44,26 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WSDB8SX"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <nav class="w-100 dwyl-bg-dark-gray tc white relative fixed z-1">
+    <nav class="w-100 bg-white tc dwyl-dark-gray relative fixed shadow-5 z-3">
       <input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
       <label for="burger" class="dn-l pointer absolute top-1 right-1">
-        <span class="sr-only">Show menu</span> <i class="fa fa-bars white dib f2"></i>
+        <i class="fa fa-bars dwyl-dark-gray dib f2"></i>
       </label>
-      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l shadow-3">
+      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
         <li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
-          <a href="/" class="white link topnav">
+          <a href="/" class="dwyl-dark-gray link">
             <img src="/img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
             dwyl
           </a>
         </li>
-        <li class="ph4-l ph5-xl ph5 pt5 pb2 tl dn-l"><a href="/" class="white link topnav">Home</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link topnav">Portfolio</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/values" class="white link topnav">Values</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/team" class="white link topnav">Team</a></li>
-        <li class="ph4-l ph5-xl ph5 dib-l pv2 tl pv0-l"><a href="/time-app" class="white link topnav">App
-          <span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link topnav">Blog</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link topnav">Contact</a></li>
+        <li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="dwyl-dark-gray link">Home</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/portfolio" class="dwyl-dark-gray link">Portfolio</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/values" class="dwyl-dark-gray link">Values</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/team" class="dwyl-dark-gray link">Team</a></li>
+        <li class="ph4 dib-l pv2 tl pv0-l"><a href="/time-app" class="dwyl-dark-gray link">App
+          <span class="dwyl-bg-yellow fw3 pa1 br2 f7 shadow-6">BETA</span></a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link">Blog</a></li>
+        <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="dwyl-dark-gray link">Contact</a></li>
       </ul>
     </nav>
 
@@ -202,6 +202,15 @@ <h2>We will get back to you soon!</h2>
         <img src="/img/common/dwyl-grey-heart.png" alt="dwyl heart logo" class="pv4">
     </footer>
 
+    <section id="cookie-notification" class="w-100 dwyl-bg-dark-gray bottom-0 fixed h-auto tc-ns tl ph4-ns pt3-ns pb2-ns pt3 ph3 ">
+    <p class="white di f4-ns">This site uses cookies to improve your experience, your
+    continued use is considered to be consent. <span class="yes-script">Click this button to not see
+    this message again</span><noscript>This message will continue to show, as you have Javascript disabled.</noscript></p>
+    <span class="yes-script">
+    <button class="f6 link dim br3 ph3 pv2 mb2 di-ns white dwyl-bg-mint bn b mb2-ns mh1 mt2 mt0-ns mh1-ns db center" id="cookie-ok">Ok</button>
+    </span>
+    </section>
+
     <script src="/js/script.js"></script>
 </body>
 </html>
diff --git a/careers.html b/careers.html
@@ -43,26 +43,26 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WSDB8SX"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <nav class="w-100 dwyl-bg-dark-gray tc white relative fixed z-1">
+    <nav class="w-100 tc white fixed dwyl-bg-dark-gray z-3 shadow-5">
       <input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
       <label for="burger" class="dn-l pointer absolute top-1 right-1">
-        <span class="sr-only">Show menu</span> <i class="fa fa-bars white dib f2"></i>
+        <i class="fa fa-bars white dib f2"></i>
       </label>
-      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l shadow-3">
+      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
         <li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
-          <a href="/" class="white link topnav">
+          <a href="/" class="white link">
             <img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
             dwyl
           </a>
         </li>
-        <li class="ph4-l ph5-xl ph5 pt5 pb2 tl dn-l"><a href="/" class="white link topnav">Home</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link topnav">Portfolio</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/values" class="white link topnav">Values</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/team" class="white link topnav">Team</a></li>
-        <li class="ph4-l ph5-xl ph5 dib-l pv2 tl pv0-l"><a href="/time-app" class="white link topnav">App
+        <li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="white link">Home</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link">Portfolio</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/values" class="white link">Values</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/team" class="white link">Team</a></li>
+        <li class="ph4 dib-l pv2 tl pv0-l"><a href="/time-app" class="white link">App
           <span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link topnav">Blog</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link topnav">Contact</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link">Blog</a></li>
+        <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link">Contact</a></li>
       </ul>
     </nav>
 

diff --git a/case-studies/ellen-macarthur-foundation/CE100.html b/case-studies/ellen-macarthur-foundation/CE100.html
@@ -43,30 +43,30 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WSDB8SX"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <nav class="w-100 dwyl-bg-dark-gray tc white relative fixed z-1">
+    <nav class="w-100 bg-white tc dwyl-dark-gray relative fixed shadow-5 z-3">
       <input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
       <label for="burger" class="dn-l pointer absolute top-1 right-1">
-        <span class="sr-only">Show menu</span> <i class="fa fa-bars white dib f2"></i>
+        <i class="fa fa-bars dwyl-dark-gray dib f2"></i>
       </label>
-      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l shadow-3">
+      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
         <li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
-          <a href="/" class="white link topnav">
-            <img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
+          <a href="/" class="dwyl-dark-gray link">
+            <img src="/img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
             dwyl
           </a>
         </li>
-        <li class="ph4-l ph5-xl ph5 pt5 pb2 tl dn-l"><a href="/" class="white link topnav">Home</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link topnav">Portfolio</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/values" class="white link topnav">Values</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/team" class="white link topnav">Team</a></li>
-        <li class="ph4-l ph5-xl ph5 dib-l pv2 tl pv0-l"><a href="/time-app" class="white link topnav">App
-          <span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link topnav">Blog</a></li>
-        <li class="ph4-l ph5-xl ph5 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link topnav">Contact</a></li>
+        <li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="dwyl-dark-gray link">Home</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/portfolio" class="dwyl-dark-gray link">Portfolio</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/values" class="dwyl-dark-gray link">Values</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/team" class="dwyl-dark-gray link">Team</a></li>
+        <li class="ph4 dib-l pv2 tl pv0-l"><a href="/time-app" class="dwyl-dark-gray link">App
+          <span class="dwyl-bg-yellow fw3 pa1 br2 f7 shadow-6">BETA</span></a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog" class="dwyl-mint link">Blog</a></li>
+        <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="dwyl-dark-gray link">Contact</a></li>
       </ul>
     </nav>
 
-    <section class="pt5 pb3 pb3-ns ph6-ns center tc shadow-3">
+    <section class="pt4 pb3 pb3-ns ph6-ns center tc shadow-3">
       <img src="../../img/common/ellen-macarthur-foundation-logo.png" alt="Ellen MacArthur Foundation logo" class="w5 pt4 mt4"/>
       <h2 class="dwyl-light-gray f4">The Ellen MacArthur Foundation (EMF)</h2>
       <h1 class="dwyl-dark-gray f3-plus w-90 tc center">Online Membership Platform</h1>