Update dependencies, nav offset fix, horizontal scrolling fix for mobile

Updated dependencies and migrated to Bootstrap 4 (no breaking changes - just a plugin update), updated some dev dependencies and made a slight change to gulpfile.js to accommodate the fix, changed the scroll spy and scroll offset in scrolling-nav.js to make up for the larger height of the navbar, and moved the -20px of margin from the charities class to 768+px screen sizes only to fix horizontal scrolling on mobile
PineappleFund · Mar 1, 2018 · dcddafb · dcddafb
1 parent bc6ec05
commit dcddafb
Show file tree

Hide file tree

Showing 18 changed files with 10,171 additions and 3,199 deletions.
diff --git a/css/scrolling-nav.css b/css/scrolling-nav.css
@@ -94,8 +94,13 @@ body {
 
 .charities {
   text-align: center;
-  margin-left: -20px;
-  margin-right: -20px;
+}
+
+@media (min-width: 768px) {
+  .charities {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
 }
 
 .charity {
@@ -171,4 +176,4 @@ blockquote:before {
 #banner a {
   color: #FFF !important;
   font-weight: bold;
-}
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -27,7 +27,7 @@ gulp.task('default', ['copy']);
 gulp.task('browserSync', function() {
   browserSync.init({
     server: {
-      baseDir: ''
+      baseDir: './'
     },
   })
 })

diff --git a/index.html b/index.html
@@ -194,7 +194,7 @@ <h2>About</h2>
               <p>Whoever Pine is, he or she seems to have found a way to convert Bitcoin into something actually useful.</p>
               <small><em><a href="https://www.nytimes.com/2017/12/27/technology/tech-roundup-2017.html">New York Times</a>, Dec 27 2017</em></small>
             </blockquote>
-            
+
             <div class="container metrics">
               <div class="row">
                 <div class="col-sm">
@@ -214,7 +214,7 @@ <h2>About</h2>
 
             <p>View the address: <a href='https://live.blockcypher.com/btc/address/3P3QsMVK89JBNqZQv5zMAKG8FK3kJM4rjt/'>3P3QsMVK89JBNqZQv5zMAKG8FK3kJM4rjt</a></p>
             <p>View the proof of ownership: <a href='https://live.blockcypher.com/btc/tx/c44ad5f83ddc84d08967c7652311f0a23aafa8e54d7db0911a2c7b5bc20ff988/'>Encoded message</a></p>
-            <p>Press coverage: <a href="https://qz.com/1160997/a-bitcoin-millionaire-is-giving-away-a-fortune-to-psychedelic-research-curing-aging-and-clean-water/">Quartz</a> | <a href="https://hackernoon.com/meet-the-founder-who-pledged-5-057-btc-86m-to-charity-688685e922f6">Hacker Noon</a> | <a href="https://www.theguardian.com/technology/2017/dec/24/pineapple-fund-anonymous-bitcoin-millionaire-giving-away-86m-dollars">The Guardian</a> | <a href="https://www.nytimes.com/2017/12/27/technology/tech-roundup-2017.html">New York Times</a> | <a href="http://mashable.com/2017/12/14/bitcoin-charity/">Mashable</a> | <a href="https://www.cnbc.com/2017/12/28/pineapple-fund-gives-5-million-in-bitcoin-to-fight-poverty-with-cash.html">CNBC</a> | <a href="http://www.newsweek.com/pineapple-fund-anonymous-bitcoin-millionaire-giving-away-86m-charity-758196">Newsweek</a> | <a href="https://www.inverse.com/article/39443-pineapple-fund">Inverse</a> | <a href="http://www.bbc.co.uk/programmes/w3csw89s">BBC Radio</a> | <a href="http://www.businessinsider.com/basic-income-experiment-bitcoin-donation-2017-12">Business Insider</a> | <a href="https://www.forbes.com/sites/gregoryferenstein/2017/12/16/mysterious-bitcoin-philanthropist-donated-1m-to-psychedelic-research/#769816bd6f74">Forbes</a> | <a href="https://bitcoinmagazine.com/articles/meet-pine-bitcoin-philanthropist-who-set-85-million-pineapple-fund/">Bitcoin Magazine</a> | <a href="https://thenextweb.com/hardfork/2017/12/14/bitcoin-85m-invest-fund-pineapple/">TNW</a> | <a href="https://www.pcmag.com/news/357999/pineapple-fund-giving-away-86-million-in-bitcoins-to-char">PCMag</a></p> 
+            <p>Press coverage: <a href="https://qz.com/1160997/a-bitcoin-millionaire-is-giving-away-a-fortune-to-psychedelic-research-curing-aging-and-clean-water/">Quartz</a> | <a href="https://hackernoon.com/meet-the-founder-who-pledged-5-057-btc-86m-to-charity-688685e922f6">Hacker Noon</a> | <a href="https://www.theguardian.com/technology/2017/dec/24/pineapple-fund-anonymous-bitcoin-millionaire-giving-away-86m-dollars">The Guardian</a> | <a href="https://www.nytimes.com/2017/12/27/technology/tech-roundup-2017.html">New York Times</a> | <a href="http://mashable.com/2017/12/14/bitcoin-charity/">Mashable</a> | <a href="https://www.cnbc.com/2017/12/28/pineapple-fund-gives-5-million-in-bitcoin-to-fight-poverty-with-cash.html">CNBC</a> | <a href="http://www.newsweek.com/pineapple-fund-anonymous-bitcoin-millionaire-giving-away-86m-charity-758196">Newsweek</a> | <a href="https://www.inverse.com/article/39443-pineapple-fund">Inverse</a> | <a href="http://www.bbc.co.uk/programmes/w3csw89s">BBC Radio</a> | <a href="http://www.businessinsider.com/basic-income-experiment-bitcoin-donation-2017-12">Business Insider</a> | <a href="https://www.forbes.com/sites/gregoryferenstein/2017/12/16/mysterious-bitcoin-philanthropist-donated-1m-to-psychedelic-research/#769816bd6f74">Forbes</a> | <a href="https://bitcoinmagazine.com/articles/meet-pine-bitcoin-philanthropist-who-set-85-million-pineapple-fund/">Bitcoin Magazine</a> | <a href="https://thenextweb.com/hardfork/2017/12/14/bitcoin-85m-invest-fund-pineapple/">TNW</a> | <a href="https://www.pcmag.com/news/357999/pineapple-fund-giving-away-86-million-in-bitcoins-to-char">PCMag</a></p>
 
           </div>
         </div>
@@ -228,13 +228,18 @@ <h2>About</h2>
             <h2>Charities supported</h2>
             <p class="lead">From clinical trials of psychedelics for PTSD to teaching kids to read &amp; write, Pineapple Fund is about making bold and smart bets that hopefully impact everyone in our world.</p>
             <div class="charities">
-              <noscript><h1>You need JavaScript to view the charities we've supported</h1></noscript>
+              <noscript>
+                <h1>You need JavaScript to view the charities we've supported</h1>
+              </noscript>
             </div>
             <p></p>
-            <p><small>The Pineapple Fund is not affiliated with any supported charity. Listed in order of funding.</small></p>
+            <p>
+              <small>The Pineapple Fund is not affiliated with any supported charity. Listed in order of funding.</small>
+            </p>
           </div>
         </div>
-      </div>    </section>
+      </div>
+    </section>
 
     <section id="apply">
       <div class="container">

diff --git a/js/scrolling-nav.js b/js/scrolling-nav.js
@@ -8,7 +8,7 @@
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
       if (target.length) {
         $('html, body').animate({
-          scrollTop: (target.offset().top - 54)
+          scrollTop: (target.offset().top - 90)
         }, 1000, "easeInOutExpo");
         return false;
       }
@@ -23,7 +23,7 @@
   // Activate scrollspy to add active class to navbar items on scroll
   $('body').scrollspy({
     target: '#mainNav',
-    offset: 54
+    offset: 100
   });
 
   // Toggle tooltips