From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Sun, 21 Aug 2016 20:19:21 +0000 (+0100)
Subject: Optimizations and more fixes everywhere.
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=f299a19ca6a67327105ddc2459ddfd76778597ff;p=fsf-giving-guide.git

Optimizations and more fixes everywhere.
---

diff --git a/css/master.css b/css/master.css
index a74332d..fb47bf4 100644
--- a/css/master.css
+++ b/css/master.css
@@ -144,7 +144,7 @@ h5 {
 
 li,
 p {
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 
   list-style: outside;
 
@@ -299,7 +299,6 @@ a:hover {
   list-style: none;
 
   background-repeat: no-repeat;
-
 }
 
 .bad img,
@@ -307,21 +306,10 @@ a:hover {
   margin-bottom: 25px;
 }
 
-.buy {
-  padding: 4px 50px;
-
-  text-transform: uppercase;
-
-  color: #fff;
-  border: 0;
-  border-radius: 100px;
-  background: #2b81e3;
-  /*box-shadow: 0 4px 0 0 #1D65B7;*/
-
-  font-family: "Signika Regular";
-  font-size: 24px;
+.get-item {
+  border-bottom: 0;
+  color: white;
 }
-
 /*Charities*/
 
 .charities {
@@ -525,3 +513,22 @@ footer p {
 
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {}
+
+/*Fixes*/
+/*This sections fixes the inevitable difference in height of the comparison panes with margin-top where a simpler isn't possible*/
+.fix-iphone {
+  margin-top: 15px;
+}
+
+.fix-macbook {
+  margin-top: 90px;
+}
+
+.fix-router,
+.fix-amazon {
+  margin-top: 100px;
+}
+
+.fix-itunes {
+  margin-top: 50px;
+}
diff --git a/givingguide.html b/givingguide.html
index b9893dc..82b4ee9 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -59,7 +59,7 @@
   </nav>
 
   <!--Begin Intro-->
-  <div class="intro">
+  <section class="intro">
     <div class="container">
       <div class="row">
         <div class="illustration col-md-6">
@@ -79,7 +79,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </section>
   <!--End Intro-->
 
   <!--Begin Actions-->
@@ -129,20 +129,22 @@
     <div class="container">
       <h3 class="title text-center">Smartphones</h3>
       <div class="row">
-        <div class="good col-md-6">
+        <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80px" />
+          <span class="label label-success ">Sale</span>
           <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
+          <a class="get-item" href="#">BUY</a>
           <ul>
             <li>Fully free software, based on Android.</li>
             <li><a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantStatus#Replicant-42">Supported devices</a> include both phones and tablets.</li>
             <li>Works on used devices, so your dollars won't go to proprietary OS companies. (All commercially available Android devices ship with some proprietary software.)</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Buy</button>
+
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
-          <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block" width="80px" />
+        <div class="bad col-md-6 col-sm-6">
+          <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block fix-iphone" width="80px" />
           <h5 class="text-center">iPhone</h5>
           <ul>
             <li>Comes with no shortage of <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareIniThings">spyware</a>.</li>
@@ -164,7 +166,7 @@
     <div class="container">
       <h3 class="title text-center">Full-sized Laptops</h3>
       <div class="row">
-        <div class="good col-md-6">
+        <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250px" />
           <h5 class="text-center">Minifree T400 with GNU/Linux</h5>
           <ul>
@@ -172,12 +174,12 @@
             <li>Durable hardware is meant to last and easy to repair.</li>
             <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Buy</button>
+
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
-          <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block" width="250px" />
+        <div class="bad col-md-6 col-sm-6">
+          <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block fix-macbook" width="250px" />
           <h5 class="text-center">Apple Macbook Pro with macOS</h5>
           <ul>
             <li>Runs on proprietary software that restricts the user's freedoms.</li>
@@ -197,19 +199,19 @@
     <div class="container">
       <h3 class="title text-center">Compact Laptops</h3>
       <div class="row">
-        <div class="good col-md-6">
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/libiquity-x200.png" alt="replicant phone" class="center-block" width="250px" />
+        <div class="good col-md-6 col-sm-6">
+          <img src="img/products/x200.jpg" alt="replicant phone" class="center-block" width="250px" />
           <h5 class="text-center">Libiquity Taurinus X200 with GNU/Linux</h5>
           <ul>
             <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system and libreboot firmware on hardware that is certified to Respect Your Freedom.</li>
             <li>Durable hardware is meant to last and easy to repair.</li>
             <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Buy</button>
+
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
+        <div class="bad col-md-6 col-sm-6">
           <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" height="150px" />
           <h5 class="text-center">Lenovo U31 with Windows</h5>
           <ul>
@@ -230,7 +232,7 @@
     <div class="container">
       <h3 class="title text-center">3D Printers</h3>
       <div class="row">
-        <div class="good col-md-6">
+        <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="replicant phone" class="center-block" width="250px" />
           <h5 class="text-center">Lulzbot Mini</h5>
           <ul>
@@ -238,12 +240,12 @@
             <li>Ease of use features like self-leveling and self-cleaning.</li>
             <li>Hardware designs available to make modification and improvement easy. Standardized material format allows 3D printing with plastics, wood-, stone-, bamboo-, rubber-, and metal-like materials.</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Buy</button>
+
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
-          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="250px" />
+        <div class="bad col-md-6 col-sm-6">
+          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="212px" />
           <h5 class="text-center">Makerbot Replicator Mini</h5>
           <ul>
             <li>
@@ -265,7 +267,7 @@
     <div class="container">
       <h3 class="title text-center">Wi-Fi Routers</h3>
       <div class="row">
-        <div class="good col-md-6">
+        <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="replicant phone" class="center-block" width="250px" />
           <h5 class="text-center">ThinkPenguin Router</h5>
           <ul>
@@ -274,12 +276,12 @@
             </li>
             <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> LibreCMC operating system on hardware that is certified to Respect Your Freedom.</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Buy</button>
+
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
-          <img src="img/products/router-blocked.png" alt="printer" class="center-block" height="150px" />
+        <div class="bad col-md-6 col-sm-6">
+          <img src="img/products/router-blocked.png" alt="printer" class="center-block fix-router" height="150px" />
           <h5 class="text-center">ISP-provided Routers</h5>
           <ul>
             <li>
@@ -300,7 +302,7 @@
     <div class="container">
       <h3 class="title text-center">eBooks</h3>
       <div class="row">
-        <div class="good col-md-6">
+        <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="replicant phone" class="center-block" width="250px" />
           <h5 class="text-center">Project Gutenberg</h5>
           <ul>
@@ -308,12 +310,11 @@
             <li>The original purveyor of eBooks free of <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> (Digital Restrictions Management), <a href="https://www.defectivebydesign.org/guide/ebooks">inspiring many others</a>.</li>
             <li>Enjoy the freedom to read your ebooks on any device.</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Download</button>
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
-          <img src="img/products/amazon-blocked.png" alt="printer" class="center-block" height="70px" />
+        <div class="bad col-md-6 col-sm-6">
+          <img src="img/products/amazon-blocked.png" alt="printer" class="center-block fix-amazon" width="230px" />
           <h5 class="text-center">Amazon.com</h5>
           <ul>
             <li>
@@ -339,8 +340,8 @@
     <div class="container">
       <h3 class="title text-center">Graphic Design</h3>
       <div class="row">
-        <div class="good col-md-6">
-          <img src="https://static.fsf.org/nosvn/images/gimp_inkscape.png" alt="replicant phone" class="center-block" height="150px" />
+        <div class="good col-md-6 col-sm-6">
+          <img src="https://static.fsf.org/nosvn/images/gimp_inkscape.png" alt="GIMP and Inskacape" class="center-block" height="150px" />
           <h5 class="text-center">GIMP and Inkscape</h5>
           <ul>
             <li>Free software, with thriving developer communities.</li>
@@ -352,7 +353,7 @@
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
+        <div class="bad col-md-6 col-sm-6">
           <img src="img/products/adobe-blocked.png" alt="printer" class="center-block" height="150px" />
           <h5 class="text-center">Photoshop and Illustrator</h5>
           <ul>
@@ -371,7 +372,7 @@
     <div class="container">
       <h3 class="title text-center">Gift Cards</h3>
       <div class="row">
-        <div class="good col-md-6">
+        <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/fsforg/img/FSFCardPrepped.png" alt="replicant phone" class="center-block" height="200px" />
           <h5 class="text-center">FSF Membership Card</h5>
           <ul>
@@ -379,12 +380,12 @@
             <li>Enjoy a host of <a href="https://www.fsf.org/associate/benefits">member benefits</a>, including admission to the <a href="https://www.libreplanet.org/conference">yearly LibrePlanet conference</a>.</li>
             <li>Membership donations are tax-deductible in the US. For a smaller gift, <a href="https://www.fsf.org/donate">donate in a friend's name</a>.</li>
           </ul>
-          <button type="button" name="buy" class="buy center-block">Buy</button>
+
         </div>
         <!--End Good-->
 
-        <div class="bad col-md-6">
-          <img src="img/products/itunes-blocked.png" alt="printer" class="center-block" height="150px" />
+        <div class="bad col-md-6 col-sm-6">
+          <img src="img/products/itunes-blocked.png" alt="printer" class="center-block fix-itunes" height="150px" />
           <h5 class="text-center">iTunes Cards</h5></h5>
           <ul>
             <li> <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> on everything (except music) controls what you can do with your purchases.
@@ -411,7 +412,7 @@
 
         <!-- Begin Certified -->
         <div class="col-md-4 col-sm-4 col-xs-6">
-          <img src="img/products/tehnoetic-wifi.png" alt="" class="center-block" />
+          <img src="img/products/mini-wifi.jpg" alt="" class="center-block img-responsive" />
           <h5 class="text-center">Tehnoetic Mini Wi-Fi Adapter</h5>
           <p>
             Great for all-free-software installations on laptops with incompatible Wi-Fi hardware.
@@ -419,7 +420,7 @@
         </div>
 
         <div class="col-md-4 col-sm-4 col-xs-6">
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/thinkpenguin-mini-router.png" alt="" class="center-block" />
+          <img src="img/products/vpn.jpg" alt="" class="center-block img-responsive" />
           <h5 class="text-center">ThinkPenguin VPN Router</h5>
           <p>
             Designed to complement your existing router by providing an easy-to-set up VPN that enhances privacy and security and circumvents network controls.
@@ -427,7 +428,7 @@
         </div>
 
         <div class="col-md-4 col-sm-4 col-xs-6">
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/thinkpenguin-long-range-adapter.png" alt="" class="center-block img-responsive" />
+          <img src="img/products/wifi-adapter.jpg" alt="" class="center-block img-responsive" />
           <h5 class="text-center">ThinkPenguin Long-Range Wi-Fi Adapter</h5>
           <p>
             More powerful than its smaller cousin, and can be further upgraded with a larger antenna.
@@ -455,28 +456,28 @@
       <h1>Recommended organizations for holiday donations</h1>
       <div class="row">
         <div class="col-md-3 col-xs-4">
-          <a href="http://www.fsf.org/"><img src="img/charities/fsf.jpg" alt="fsf" class="center-block img-responsive"/></a>
+          <a href="http://www.fsf.org/"><img src="img/charities/fsf.jpg" alt="fsf" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="http://www.sfconservancy.org/"><img src="img/charities/sfc.jpg" alt="sfc" class="center-block img-responsive"/></a>
+          <a href="http://www.sfconservancy.org/"><img src="img/charities/sfc.jpg" alt="sfc" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="http://www.eff.org/"><img src="img/charities/eff.jpg" alt="eff" class="center-block img-responsive"/></a>
+          <a href="http://www.eff.org/"><img src="img/charities/eff.jpg" alt="eff" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="http://www.creativecommons.org/"><img src="img/charities/cc.jpg" alt="cc" class="center-block img-responsive"/></a>
+          <a href="http://www.creativecommons.org/"><img src="img/charities/cc.jpg" alt="cc" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="http://wikimedia.org/"><img src="img/charities/wikimedia.jpg" alt="wikimedia" class="center-block img-responsive"/></a>
+          <a href="http://wikimedia.org/"><img src="img/charities/wikimedia.jpg" alt="wikimedia" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="http://www.softwarefreedom.org/"><img src="img/charities/sflc.jpg" alt="sflc" class="center-block img-responsive"/></a>
+          <a href="http://www.softwarefreedom.org/"><img src="img/charities/sflc.jpg" alt="sflc" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="http://www.gnome.org/"><img src="img/charities/gnome.jpg" alt="gnome" class="center-block img-responsive"/></a>
+          <a href="http://www.gnome.org/"><img src="img/charities/gnome.jpg" alt="gnome" class="center-block img-responsive" /></a>
         </div>
         <div class="col-md-3 col-xs-4">
-          <a href="https://ceata.org/"><img src="img/charities/ceata.jpg" alt="ceata" class="center-block img-responsive"/></a>
+          <a href="https://ceata.org/"><img src="img/charities/ceata.jpg" alt="ceata" class="center-block img-responsive" /></a>
         </div>
       </div>
     </div>
diff --git a/img/products/adobe-blocked.png b/img/products/adobe-blocked.png
index 6a7e80e..77e1562 100644
Binary files a/img/products/adobe-blocked.png and b/img/products/adobe-blocked.png differ
diff --git a/img/products/amazon-blocked.png b/img/products/amazon-blocked.png
index c060940..9353e36 100644
Binary files a/img/products/amazon-blocked.png and b/img/products/amazon-blocked.png differ
diff --git a/img/products/iphone-blocked.png b/img/products/iphone-blocked.png
index 7b6f878..1214acc 100644
Binary files a/img/products/iphone-blocked.png and b/img/products/iphone-blocked.png differ
diff --git a/img/products/itunes-blocked.png b/img/products/itunes-blocked.png
index 3906353..c0b364d 100644
Binary files a/img/products/itunes-blocked.png and b/img/products/itunes-blocked.png differ
diff --git a/img/products/lenovo-blocked.png b/img/products/lenovo-blocked.png
index 76f6916..8337d5e 100644
Binary files a/img/products/lenovo-blocked.png and b/img/products/lenovo-blocked.png differ
diff --git a/img/products/macbook-blocked.png b/img/products/macbook-blocked.png
index 8b7ae46..ce1001f 100644
Binary files a/img/products/macbook-blocked.png and b/img/products/macbook-blocked.png differ
diff --git a/img/products/mini-wifi.jpg b/img/products/mini-wifi.jpg
new file mode 100644
index 0000000..3d31ae9
Binary files /dev/null and b/img/products/mini-wifi.jpg differ
diff --git a/img/products/printer-blocked.png b/img/products/printer-blocked.png
index 1611b09..af32d1c 100644
Binary files a/img/products/printer-blocked.png and b/img/products/printer-blocked.png differ
diff --git a/img/products/router-blocked.png b/img/products/router-blocked.png
index 50d0da0..bffd0d5 100644
Binary files a/img/products/router-blocked.png and b/img/products/router-blocked.png differ
diff --git a/img/products/tehnoetic-wifi.png b/img/products/tehnoetic-wifi.png
deleted file mode 100644
index ed02427..0000000
Binary files a/img/products/tehnoetic-wifi.png and /dev/null differ
diff --git a/img/products/vpn.jpg b/img/products/vpn.jpg
new file mode 100644
index 0000000..f2f727e
Binary files /dev/null and b/img/products/vpn.jpg differ
diff --git a/img/products/wifi-adapter.jpg b/img/products/wifi-adapter.jpg
new file mode 100644
index 0000000..ed82c42
Binary files /dev/null and b/img/products/wifi-adapter.jpg differ
diff --git a/img/products/x200.jpg b/img/products/x200.jpg
new file mode 100644
index 0000000..617b8e6
Binary files /dev/null and b/img/products/x200.jpg differ