More fixes and improvements

diff --git a/css/master.css b/css/master.css
index fb47bf4e3e5b956b46c1c351b390455e92152822..ca937ec4d442f33283621f35f26eb836358bee5e 100644 (file)
--- a/css/master.css
+++ b/css/master.css
@@ -139,7 +139,6 @@ h5 {
 
   font-family: "Signika Regular";
   font-size: 20px;
-  line-height: 20px;
 }
 
 li,
@@ -162,6 +161,7 @@ li {
 }
 
 a {
+  -webkit-transition: 0.3s all ease;
   transition: 0.3s all ease;
   text-decoration: none;
 
@@ -179,6 +179,28 @@ a:hover {
 /*Header*/
 
 /*Navbar*/
+.icon-bar{
+  -webkit-transition: 0.3s all ease;
+  transition: 0.3s all ease;
+}
+.bar2 {
+  width: 30px !important;
+}
+
+.bar3 {
+  width: 25px !important;
+}
+
+.navbar-toggle:hover .bar1 {
+  width: 42px !important;
+}
+
+.navbar-toggle:hover .bar2 {
+  width: 25px !important;
+}
+.navbar-toggle:hover .bar3 {
+  width: 15px !important;
+}
 
 .navbar li {
   padding-top: 20px;
@@ -198,9 +220,8 @@ a:hover {
 .navbar-nav li a {
   border-bottom: 0;
 }
-/*.intro {
-  min-height: 100%;
-}*/
+
+/*Intro*/
 
 .intro,
 .intro-text {
@@ -223,18 +244,23 @@ a:hover {
 /*Actions*/
 .actions {
   padding-top: 30px;
-  padding-bottom: 30px;
+  /*padding-bottom: 30px;*/
 
   background: #fffae5;
 }
 
 .action {
+  position: relative;
+
   margin-bottom: 50px;
 }
 
 .action-button {
+  position: relative;
+  bottom: 10px;
+
   margin-bottom: 30px;
-  padding: 6px 45px;
+  padding: 6px 35px;
 
   color: #4B423B;
   border: 0;
@@ -261,6 +287,40 @@ a:hover {
   background-position: center bottom;
 }
 
+.sale {
+  position: absolute;
+  z-index: -999;
+  top: 0;
+
+  width: 0;
+  height: 0;
+
+  text-overflow: clip;
+
+  border-width: 100px 100px 0 0;
+  border-style: solid;
+  border-color: #2caf8f transparent transparent transparent;
+
+  line-height: 0px;
+
+}
+
+.sale-text P {
+  position: absolute;
+  top: 18px;
+  left: 23px;
+
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+  text-transform: uppercase;
+
+  color: white;
+
+  font-size: 20px;
+  font-weight: bold;
+
+}
+
 .bad,
 .good {
   margin-top: 30px;
@@ -307,8 +367,8 @@ a:hover {
 }
 
 .get-item {
-  border-bottom: 0;
   color: white;
+  border-bottom: 0;
 }
 /*Charities*/
 
@@ -318,11 +378,13 @@ a:hover {
 }
 
 .charities img {
+  -webkit-transition: 0.3s all ease;
   transition: 0.3s all ease;
 }
 
 .charities img:hover {
-  transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+          transform: scale(1.2);
 }
 
 /*Licenses*/
@@ -369,6 +431,7 @@ footer p {
 
     list-style-type: none;
 
+    -webkit-transition: 0.3s all ease;
     transition: 0.3s all ease;
 
     border-right: 1px #9BD2BF solid;
@@ -395,6 +458,7 @@ footer p {
   .navbar li a {
     display: block;
 
+    -webkit-transition: 0.3s all ease;
     transition: 0.3s all ease;
     text-decoration: none;
 
@@ -435,6 +499,7 @@ footer p {
 
     list-style-type: none;
 
+    -webkit-transition: 0.3s all ease;
     transition: 0.3s all ease;
 
     border-right: 1px #9BD2BF solid;
@@ -461,6 +526,7 @@ footer p {
   .navbar li a {
     display: block;
 
+    -webkit-transition: 0.3s all ease;
     transition: 0.3s all ease;
     text-decoration: none;
 

diff --git a/givingguide.html b/givingguide.html
index 82b4ee9d3373037347bb139678e2fea17c4e60ca..46eb9bdd51f998b0c0ebb67c7748443a535dfcd9 100644 (file)
--- a/givingguide.html
+++ b/givingguide.html
@@ -34,11 +34,11 @@
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-links" aria-expanded="false">
           <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
+          <span class="icon-bar bar1"></span>
+          <span class="icon-bar bar2"></span>
+          <span class="icon-bar bar3"></span>
         </button>
-        <a class="navbar-brand" href="#"><img class="brand" src="img/logo.png" alt="FSF" width="180px" /></a>
+        <a class="navbar-brand" href="#"><img class="brand" src="img/logo.png" alt="FSF" width="180" /></a>
         <!-- <span class="label label-warning"><a href="http://fsf.org/jfb">Join the FSF</a></span> -->
 
       </div>
@@ -100,7 +100,7 @@
         <div class="action col-md-4 col-sm-4 text-center">
           <h2>Organize</h2>
           <p>
-            Like this guide? Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
+            Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
           </p>
           <a class="action-button" href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a>
         </div>
@@ -130,9 +130,20 @@
       <h3 class="title text-center">Smartphones</h3>
       <div class="row">
         <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>
+
+          <!-- Begin Sale -->
+          <div class="sale-text">
+            <p>
+              Sale!
+            </p>
+          </div>
+          <div class="sale">
+          </div>
+          <!-- End Sale -->
+
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80"/>
           <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>
@@ -144,7 +155,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="80px" />
+          <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block fix-iphone" width="80" />
           <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>
@@ -167,7 +178,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="250px" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250" />
           <h5 class="text-center">Minifree T400 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 <a href="https://www.fsf.org/ryf">certified to Respect Your Freedom</a>.</li>
@@ -179,7 +190,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="250px" />
+          <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block fix-macbook" width="250" />
           <h5 class="text-center">Apple Macbook Pro with macOS</h5>
           <ul>
             <li>Runs on proprietary software that restricts the user's freedoms.</li>
@@ -200,7 +211,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="replicant phone" class="center-block" width="250px" />
+          <img src="img/products/x200.jpg" alt="replicant phone" class="center-block" width="250" />
           <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>
@@ -212,7 +223,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="150px" />
+          <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" height="150" />
           <h5 class="text-center">Lenovo U31 with Windows</h5>
           <ul>
             <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
@@ -233,7 +244,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="replicant phone" class="center-block" width="250px" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">Lulzbot Mini</h5>
           <ul>
             <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>
@@ -245,7 +256,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="212px" />
+          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="212" />
           <h5 class="text-center">Makerbot Replicator Mini</h5>
           <ul>
             <li>
@@ -268,7 +279,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="replicant phone" class="center-block" width="250px" />
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">ThinkPenguin Router</h5>
           <ul>
             <li>
@@ -281,7 +292,7 @@
         <!--End Good-->
 
         <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" />
+          <img src="img/products/router-blocked.png" alt="printer" class="center-block fix-router" height="150" />
           <h5 class="text-center">ISP-provided Routers</h5>
           <ul>
             <li>
@@ -303,7 +314,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="replicant phone" class="center-block" width="250px" />
+          <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">Project Gutenberg</h5>
           <ul>
             <li>All of the ebooks are gratis, including classics like Peter Pan and Huck Finn.</li>
@@ -314,7 +325,7 @@
         <!--End Good-->
 
         <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" />
+          <img src="img/products/amazon-blocked.png" alt="printer" class="center-block fix-amazon" width="230" />
           <h5 class="text-center">Amazon.com</h5>
           <ul>
             <li>
@@ -341,7 +352,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="150px" />
+          <img src="https://static.fsf.org/nosvn/images/gimp_inkscape.png" alt="GIMP and Inskacape" class="center-block" height="150" />
           <h5 class="text-center">GIMP and Inkscape</h5>
           <ul>
             <li>Free software, with thriving developer communities.</li>
@@ -354,7 +365,7 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/adobe-blocked.png" alt="printer" class="center-block" height="150px" />
+          <img src="img/products/adobe-blocked.png" alt="printer" class="center-block" height="150" />
           <h5 class="text-center">Photoshop and Illustrator</h5>
           <ul>
             <li>Proprietary software controlled by Adobe.</li>
@@ -373,7 +384,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="replicant phone" class="center-block" height="200px" />
+          <img src="https://static.fsf.org/fsforg/img/FSFCardPrepped.png" alt="replicant phone" class="center-block" height="200" />
           <h5 class="text-center">FSF Membership Card</h5>
           <ul>
             <li>Join over 3,500 active members working to make a better world built on free software.</li>
@@ -385,8 +396,8 @@
         <!--End Good-->
 
         <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>
+          <img src="img/products/itunes-blocked.png" alt="printer" class="center-block fix-itunes" height="150"/>
+          <h5 class="text-center">iTunes Cards</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.
             </li>
@@ -489,7 +500,7 @@
     <div class="container">
       <div class="row">
         <div class="col-md-12">
-          <div class="panel panel-default">
+          <div class="well panel-default">
             <div class="panel-heading">
               <h1 class="fix-margin">Licenses</h1>
             </div>
@@ -528,7 +539,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-md-3 col-sm-3 footer-logo">
-          <img src="../img/FSF_footer.png" alt="FSF" class="center-block" width="30%" />
+          <img src="../img/FSF_footer.png" alt="FSF" class="center-block" width="120" />
         </div>
         <div class="col-md-9 col-sm-9">
           <p>The FSF is a nonprofit with a worldwide mission to advance software freedom —

diff --git a/img/charities/sflc.jpg b/img/charities/sflc.jpg
index fba5b122486cbc9b53ad18ffebca135b3eb6d7a7..b4bb68a27c54309d75b0a02230df9abd607501be 100644 (file)
Binary files a/img/charities/sflc.jpg and b/img/charities/sflc.jpg differ