From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Mon, 5 Sep 2016 17:36:10 +0000 (+0100)
Subject: More tweaks
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=30d7c40082547824ec6b0bbe76cc7def819544e4;p=fsf-giving-guide.git

More tweaks
---

diff --git a/css/master.css b/css/master.css
index 1870252..e1a3615 100644
--- a/css/master.css
+++ b/css/master.css
@@ -1,8 +1,6 @@
 /*Bootstrap overrides*/
-
 .navbar {
   margin-bottom: 0;
-
   border: 0;
   border-radius: 0;
   background: #2caf8f;
@@ -25,7 +23,6 @@
 .navbar-default .navbar-toggle .icon-bar {
   width: 40px;
   height: 5px;
-
   border-radius: 6px;
   background-color: #ffd429;
 }
@@ -58,145 +55,123 @@
 
 .alert-success {
   background: #0AD778;
+  color: #E8FBF2;
   color: rgba(255,255,255,0.9);
 }
 
 .alert-info {
   background: #6eadf5;
+  color: #F1F7FE;
   color: rgba(255,255,255,0.9);
 }
-
 /*Typography*/
 @font-face {
-  font-family: "Open Sans";
   font-weight: 400;
   font-style: normal;
-
+  font-family: "Open Sans";
   src: url("../fonts/opensans-regular-webfont.eot");
   src: url("../fonts/opensans-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-regular-webfont.woff2") format('woff2'), url("../fonts/opensans-regular-webfont.woff") format('woff'), url("../fonts/opensans-regular-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Open Sans Bold";
   font-weight: 700;
   font-style: normal;
-
+  font-family: "Open Sans Bold";
   src: url("../fonts/opensans-bold-webfont.eot");
   src: url("../fonts/opensans-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-bold-webfont.woff2") format('woff2'), url("../fonts/opensans-bold-webfont.woff") format('woff'), url("../fonts/opensans-bold-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Signika Bold";
   font-weight: 600;
   font-style: normal;
-
+  font-family: "Signika Bold";
   src: url("../fonts/signika-bold-webfont.eot");
   src: url("../fonts/signika-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-bold-webfont.woff2") format('woff2'), url("../fonts/signika-bold-webfont.woff") format('woff'), url("../fonts/signika-bold-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Signika Light";
   font-weight: 100;
   font-style: normal;
-
+  font-family: "Signika Light";
   src: url("../fonts/signika-light-webfont.eot");
   src: url("../fonts/signika-light-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-light-webfont.woff2") format('woff2'), url("../fonts/signika-light-webfont.woff") format('woff'), url("../fonts/signika-light-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Signika Regular";
   font-weight: 400;
   font-style: normal;
-
+  font-family: "Signika Regular";
   src: url("../fonts/signika-regular-webfont.eot");
   src: url("../fonts/signika-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-regular-webfont.woff2") format('woff2'), url("../fonts/signika-regular-webfont.woff") format('woff'), url("../fonts/signika-regular-webfont.ttf") format('truetype');
 }
-
 /*Text Styles*/
 h1 {
   margin-top: 10px;
   margin-bottom: 20px;
-
   color: #4B423B;
-
-  font-family: "Signika Light";
   font-size: 35px;
-
+  font-family: "Signika Light";
 }
 
 h2 {
   color: #4B423B;
-
-  font-family: "Signika Light";
   font-size: 28px;
+  font-family: "Signika Light";
 }
 
 h3 {
   color: #333;
-
-  font-family: "Signika Regular";
   font-size: 25px;
+  font-family: "Signika Regular";
 }
 
 h4 {
   padding-top: 23px;
-
   color: #9b9b9b;
-
-  font-family: "Signika Light";
   font-size: 24px;
+  font-family: "Signika Light";
 }
 
 h5 {
-
   color: #4a4a4a;
-
-  font-family: "Signika Regular";
   font-size: 20px;
+  font-family: "Signika Regular";
 }
 
 li,
 p {
   margin-bottom: 20px;
-
-  list-style: outside;
-
   color: #1c1c1c;
-
-  font-family: "Open Sans";
+  list-style: outside;
   font-size: 17px;
+  font-family: "Open Sans";
   line-height: 30px;
 }
 
 li {
   margin-bottom: 20px;
-
   list-style-type: disc;
 }
 
 a {
-  -webkit-transition: 0.3s all ease;
-  transition: 0.3s all ease;
-  text-decoration: none;
-
-  color: #2caf8f;
   border-bottom: 2px solid #ffd429;
-
+  color: #2caf8f;
+  text-decoration: none;
+  -webkit-transition: .3s all ease;
+  transition: .3s all ease;
 }
 
 a:hover {
-  text-decoration: none;
-
   color: #0f4639;
+  text-decoration: none;
 }
 
 section {
+  margin-bottom: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
-  margin-bottom: 20px;
 }
 /*Header*/
-
 /*Navbar*/
 .icon-bar {
-  -webkit-transition: 0.3s all ease;
-  transition: 0.3s all ease;
+  -webkit-transition: .3s all ease;
+  transition: .3s all ease;
 }
 
 .bar2 {
@@ -221,13 +196,10 @@ section {
 
 .navbar li {
   padding-top: 20px;
-
-  text-align: center;
-
   color: #9b9b9b;
-
-  font-family: "Signika Regular";
+  text-align: center;
   font-size: 30px;
+  font-family: "Signika Regular";
 }
 
 .navbar-brand {
@@ -237,14 +209,11 @@ section {
 .navbar-nav li a {
   border-bottom: 0;
 }
-
 /*Intro*/
-
 .intro,
 .intro-text {
   padding-top: 20px;
   padding-bottom: 0;
-
   background: #2caf8f;
 }
 
@@ -254,135 +223,92 @@ section {
 
 .intro-text {
   padding-bottom: 40px;
-
   background: #fff;
 }
-
 /*Actions*/
 .actions {
   padding-top: 30px;
-  /*padding-bottom: 30px;*/
-
   background: #fffae5;
 }
 
 .action {
   position: relative;
-
   margin-bottom: 50px;
 }
 
 .action-button {
   position: relative;
   bottom: 10px;
-
   margin-bottom: 30px;
   padding: 6px 35px;
-
-  color: #4B423B;
   border: 0;
   border-bottom: 0;
   border-radius: 100px;
   background: #FFD429;
-
-  font-family: "Signika Regular";
+  color: #4B423B;
   font-size: 22px;
+  font-family: "Signika Regular";
 }
 
 .action-button:hover {
-  color: white;
   background: #2caf8f;
+  color: white;
 }
-
 /*Comparisons*/
-
 .title {
   margin-top: 40px;
   padding-bottom: 8px;
-
   background-image: url("../img/underline.svg");
-  background-repeat: no-repeat;
   background-position: center bottom;
+  background-repeat: no-repeat;
 }
 
-/*.sale {
-  position: absolute;
-  top: 10px;
-  left: -67px;
-
-  width: 180px;
-  padding: 6px 0;
-
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  text-align: center;
-  text-transform: uppercase;
-
-  color: #fff;
-  background: #0AD778;
-
-  font-size: 14px;
-  font-weight: 700;
-}*/
-
 .sale {
   position: absolute;
   top: 0;
   left: 0;
-
   width: 0;
   height: 0;
-
-  color: #fff;
   border-width: 113px 113px 0 0;
   border-style: solid;
   border-color: #0AD778 transparent transparent transparent;
+  color: #fff;
 }
 
 .sale-text {
   position: absolute;
   top: -93px;
   left: 4px;
-
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  text-transform: uppercase;
-
   color: white;
-
-  font-size: 20px;
+  text-transform: uppercase;
   font-weight: bold;
-
+  font-size: 20px;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .rfy {
   position: absolute;
   top: 44px;
   left: -71px;
-
-  width: 266px;
   padding: 10px 0;
-
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
+  width: 266px;
+  border-bottom: 0;
+  background: #2B81E3;
+  color: #fff;
   text-align: center;
   text-decoration: underline;
   text-transform: uppercase;
-
-  color: #fff;
-  border-bottom: 0;
-  background: #2B81E3;
-
-  font-size: 14px;
   font-weight: 700;
+  font-size: 14px;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .bad,
 .good {
   overflow: hidden;
-
   margin-top: 30px;
   padding-top: 30px;
   padding-bottom: 30px;
@@ -391,8 +317,8 @@ section {
 .bad {
   background-color: transparent;
   background-image: url("../img/bad-pattern.png");
-  background-repeat: repeat;
   background-size: 40px;
+  background-repeat: repeat;
 }
 
 .pros li {
@@ -415,32 +341,29 @@ li.neutral {
 .cons li,
 .pros li {
   padding-left: 30px;
-
-  list-style: none;
-
   background-repeat: no-repeat;
+  list-style: none;
 }
 
 .bad img,
 .good img {
-  margin-bottom: 25px;
+  margin-bottom: 20px;
+  width: 250px;
+  height: 250px;
 }
 
 .get-item {
-  width: 140px;
   margin: 0 auto 13px;
   padding: 4px 35px;
-
-  text-align: center;
-  text-decoration: none;
-
-  color: white;
+  width: 140px;
   border-bottom: 0;
   border-radius: 100px;
   background: #2B81E3;
-
-  font-family: "Signika Regular";
+  color: white;
+  text-align: center;
+  text-decoration: none;
   font-size: 24px;
+  font-family: "Signika Regular";
 }
 
 .get-item:active,
@@ -449,10 +372,9 @@ li.neutral {
 .rfy:active,
 .rfy:focus,
 .rfy:hover {
-  text-decoration: none;
-
-  color: white;
   background: #6eadf5;
+  color: white;
+  text-decoration: none;
 }
 
 .get-item:active {
@@ -461,74 +383,60 @@ li.neutral {
 
 .seller-group {
   padding: 10px;
-
   text-align: center;
 }
 
 .seller {
   display: inline-block;
-
   text-align: center;
 }
-
 /*Recommended Lines*/
-
 .recommended-section {
   padding-top: 30px;
   padding-bottom: 30px;
 }
-
-/*.recommended-img {
-  position: relative;
-}
-
-.recommended-img > img {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}*/
-
 /*Charities*/
-
 .charities {
-  background-color: #E4F5F1;
   margin-bottom: 0;
+  background-color: #E4F5F1;
 }
 
 .charities img {
-  -webkit-transition: 0.3s all ease;
-  transition: 0.3s all ease;
+  -webkit-filter: brightness(0.5) opacity(0.5) grayscale(1);
+  filter: brightness(0.5) opacity(0.5) grayscale(1);
+  -webkit-transition: .3s all ease;
+  -moz-transition: .3s all ease;
+  transition: .3s all ease;
+
+  -moz-filter: brightness(0.5) opacity(0.5) grayscale(1);
 }
 
 .charities img:hover {
+  -webkit-filter: brightness(1) opacity(1) grayscale(0);
+  filter: brightness(1) opacity(1) grayscale(0);
   -webkit-transform: scale(1.1);
+  -moz-transform: scale(1.1);
   transform: scale(1.1);
 }
-
 /*Licenses*/
-
 .licenses {
-  background-color: #fffae5;
   margin-bottom: 0;
+  background-color: #fffae5;
 }
 
 .licenses .panel-default .panel-heading {
-  background-color: #fffae5;
   border: 0;
+  background-color: #fffae5;
   box-shadow: 0 0 0 transparent;
 }
 
 .fix-margin {
   margin: 0;
 }
-
 /*Footer*/
 footer {
   padding-top: 30px;
   padding-bottom: 30px;
-
   background-color: #4B423B;
 }
 
@@ -548,40 +456,33 @@ footer a:hover {
 
 .footer-logo {
   margin-bottom: 15px;
+  max-height: 220px;
 }
-
 /* Media Queries */
-
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   /*Navbar*/
   .navbar-nav {
     float: right;
-
     margin: 10px;
     /*margin-left: 100px;*/
   }
 
   .navbar-default .navbar-nav > li > a {
     padding: 7px;
-
     color: #2caf8f;
   }
 
   .navbar li {
     padding: 0 25px;
-
-    list-style-type: none;
-
-    -webkit-transition: 0.3s all ease;
-    transition: 0.3s all ease;
-
     border-right: 1px #9BD2BF solid;
     background-color: white;
-
-    font-family: "Signika Regular";
+    list-style-type: none;
     font-size: 1.1em;
-
+    font-family: "Signika Regular";
+    -webkit-transition: .3s all ease;
+    -moz-transition: .3s all ease;
+    transition: .3s all ease;
   }
 
   .navbar li:first-child {
@@ -599,11 +500,10 @@ footer a:hover {
 
   .navbar li a {
     display: block;
-
-    -webkit-transition: 0.3s all ease;
-    transition: 0.3s all ease;
     text-decoration: none;
-
+    -webkit-transition: .3s all ease;
+    -moz-transition: .3s all ease;
+    transition: .3s all ease;
   }
 
   .navbar li a:hover {
@@ -623,31 +523,11 @@ footer a:hover {
   }
 
   .footer-logo img {
-    width: 80%;
-  }
-
-  /*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;
+    width: 85%;
   }
-
-  .fix-amazon,
-  .fix-router {
-    margin-top: 100px;
-  }
-
-  .fix-itunes {
-    margin-top: 50px;
-  }*/
 }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
-
   /*Navbar*/
   .navbar-nav {
     margin: 10px 10px 10px 100px;
@@ -655,24 +535,19 @@ footer a:hover {
 
   .navbar-default .navbar-nav > li > a {
     padding: 7px;
-
     color: #2caf8f;
   }
 
   .navbar li {
     padding: 0 30px;
-
-    list-style-type: none;
-
-    -webkit-transition: 0.3s all ease;
-    transition: 0.3s all ease;
-
     border-right: 1px #9BD2BF solid;
     background-color: white;
-
-    font-family: "Signika Regular";
+    list-style-type: none;
     font-size: 1em;
-
+    font-family: "Signika Regular";
+    -webkit-transition: .3s all ease;
+    -moz-transition: .3s all ease;
+    transition: .3s all ease;
   }
 
   .navbar li:first-child {
@@ -690,11 +565,10 @@ footer a:hover {
 
   .navbar li a {
     display: block;
-
-    -webkit-transition: 0.3s all ease;
-    transition: 0.3s all ease;
     text-decoration: none;
-
+    -webkit-transition: .3s all ease;
+    -moz-transition: .3s all ease;
+    transition: .3s all ease;
   }
 
   .navbar li:hover a {
@@ -706,12 +580,10 @@ footer a:hover {
   }
 
   .join img {
-    width: 200px;
     margin: 10px;
+    width: 200px;
   }
-
   /*Intro*/
-
   .intro {
     margin-bottom: 0;
   }
@@ -722,9 +594,8 @@ footer a:hover {
 
   .intro-text h1 {
     margin-top: 0;
-
+    color: white;
     color: rgba(255, 255, 255, 0.95);
-
   }
 
   .intro-text p {
@@ -733,45 +604,22 @@ footer a:hover {
 
   .intro-text h4 {
     color: #FFDD55;
-
     font-family: "Signika Light";
   }
 
   .illustration img {
-    width: 90%;
     margin-top: 30px;
-
+    width: 90%;
   }
   /*Footer*/
   .footer-logo img {
     width: 50%;
   }
-
-  /*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-amazon,
-  .fix-router {
-    margin-top: 100px;
-  }
-
-  .fix-itunes {
-    margin-top: 50px;
-  } */
 }
-
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .illustration img {
-    width: 70%;
     margin-top: 10px;
-
+    width: 70%;
   }
 }
diff --git a/givingguide.html b/givingguide.html
index 28a715e..fa7b7f4 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -143,7 +143,7 @@
           <a class="rfy" href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">RFY-Certified</a>
           <!-- End RFY -->
 
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" />
           <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
 
           <!-- Buy/Download Button   -->
@@ -159,7 +159,9 @@
           </div>
 
 
-          <script>document.getElementById('get-item').style.display='';</script>
+          <script>
+            document.getElementById('get-item').style.display = '';
+          </script>
           <noscript>
               <div class="center-block seller-group">
                 <p style="color: #6b6b6b">
@@ -181,7 +183,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block fix-iphone" width="250" />
+          <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block fix-iphone" />
           <h5 class="text-center">iPhone</h5>
           <ul class="cons">
             <li>Comes with no shortage of <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareIniThings">spyware</a>.</li>
@@ -203,7 +205,7 @@
     <div class="container recommended-section">
       <div class="row">
         <div class="col-md-6 col-sm-6 recommended-img">
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" />
         </div>
         <div class="col-md-6 col-sm-6">
           <h5 class="text-center">Minifree T400 with GNU/Linux</h5>
@@ -224,7 +226,7 @@
       <h3 class="title text-center">Full-sized Laptops</h3>
       <div class="row">
         <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="250" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" />
           <h5 class="text-center">Minifree T400 with GNU/Linux</h5>
           <ul class="pros">
             <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 <a href="https://www.fsf.org/ryf">certified to Respect Your Freedom</a>.</li>
@@ -236,7 +238,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block fix-macbook" width="250" />
+          <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block fix-macbook" />
           <h5 class="text-center">Apple Macbook Pro with macOS</h5>
           <ul class="cons">
             <li>Runs on proprietary software that restricts the user's freedoms.</li>
@@ -257,7 +259,7 @@
       <h3 class="title text-center">Compact Laptops</h3>
       <div class="row">
         <div class="good col-md-6 col-sm-6">
-          <img src="img/products/x200.jpg" alt="x200" class="center-block" width="250" />
+          <img src="img/products/x200.jpg" alt="x200" class="center-block" />
           <h5 class="text-center">Libiquity Taurinus X200 with GNU/Linux</h5>
           <ul class="pros">
             <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>
@@ -269,7 +271,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" height="150" />
+          <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" />
           <h5 class="text-center">Lenovo U31 with Windows</h5>
           <ul class="cons">
             <li>Runs on proprietary software that profits from treating the user as a product -- <a href="https://edri.org/microsofts-new-small-print-how-your-personal-data-abused/">each account is assigned an advertising ID</a> to help Microsoft sell user
@@ -290,7 +292,7 @@
       <h3 class="title text-center">3D Printers</h3>
       <div class="row">
         <div class="good col-md-6 col-sm-6">
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="lulzbot" class="center-block" width="250" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="lulzbot" class="center-block" />
           <h5 class="text-center">Lulzbot Mini</h5>
           <ul class="pros">
             <li><a href="https://www.fsf.org/ryf">Respects Your Freedom-certified</a> by the FSF to run with all free software, making 3D printing more accessible and encouraging innovation.</li>
@@ -302,7 +304,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="212" />
+          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" />
           <h5 class="text-center">Makerbot Replicator Mini</h5>
           <ul class="cons">
             <li>
@@ -325,7 +327,7 @@
       <h3 class="title text-center">Wi-Fi Routers</h3>
       <div class="row">
         <div class="good col-md-6 col-sm-6">
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="free-router" class="center-block" width="250" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="free-router" class="center-block" />
           <h5 class="text-center">ThinkPenguin Router</h5>
           <ul class="pros">
             <li>
@@ -338,7 +340,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/router-blocked.png" alt="router" class="center-block fix-router" height="150" />
+          <img src="img/products/router-blocked.png" alt="router" class="center-block fix-router" />
           <h5 class="text-center">ISP-provided Routers</h5>
           <ul class="cons">
             <li>
@@ -360,7 +362,7 @@
       <h3 class="title text-center">eBooks</h3>
       <div class="row">
         <div class="good col-md-6 col-sm-6">
-          <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="gutenberg" class="center-block" width="250" />
+          <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="gutenberg" class="center-block" />
           <h5 class="text-center">Project Gutenberg</h5>
           <ul class="pros">
             <li>All of the ebooks are gratis, including classics like Peter Pan and Huck Finn.</li>
@@ -371,7 +373,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/amazon-blocked.png" alt="amazon" class="center-block fix-amazon" width="230" />
+          <img src="img/products/amazon-blocked.png" alt="amazon" class="center-block fix-amazon" />
           <h5 class="text-center">Amazon.com</h5>
           <ul class="cons">
             <li>
@@ -398,7 +400,7 @@
       <h3 class="title text-center">Graphic Design</h3>
       <div class="row">
         <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="150" />
+          <img src="https://static.fsf.org/nosvn/images/gimp_inkscape.png" alt="GIMP and Inskacape" class="center-block" />
           <h5 class="text-center">GIMP and Inkscape</h5>
           <ul class="pros">
             <li>Free software, with thriving developer communities.</li>
@@ -410,7 +412,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/adobe-blocked.png" alt="adobe" class="center-block" height="250" />
+          <img src="img/products/adobe-blocked.png" alt="adobe" class="center-block" />
           <h5 class="text-center">Photoshop and Illustrator</h5>
           <ul class="cons">
             <li>Proprietary software controlled by Adobe.</li>
@@ -429,7 +431,7 @@
       <h3 class="title text-center">Gift Cards</h3>
       <div class="row">
         <div class="good col-md-6 col-sm-6">
-          <img src="https://static.fsf.org/fsforg/img/FSFCardPrepped.png" alt="fsf card" class="center-block" height="200" />
+          <img src="https://static.fsf.org/fsforg/img/FSFCardPrepped.png" alt="fsf card" class="center-block" />
           <h5 class="text-center">FSF Membership Card</h5>
           <ul class="pros">
             <li>Join over 3,500 active members working to make a better world built on free software.</li>
@@ -441,7 +443,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/itunes-blocked.png" alt="itunes" class="center-block fix-itunes" height="150" />
+          <img src="img/products/itunes-blocked.png" alt="itunes" class="center-block fix-itunes" />
           <h5 class="text-center">iTunes Cards</h5>
           <ul class="cons">
             <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.
@@ -584,7 +586,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-md-4 col-sm-4 footer-logo">
-          <a href="https://fsf.org/"><img src="../img/fsf-footer.png" alt="FSF" class="center-block" width="290"/></a>
+          <a href="https://fsf.org/"><img src="../img/fsf-footer.png" alt="FSF" class="center-block footer-logo img-responsive" /></a>
         </div>
         <div class="col-md-8 col-sm-8">
           <p>The FSF is a nonprofit with a worldwide mission to advance software freedom —