From a4280bed91adc0af0501299067191093b0919a76 Mon Sep 17 00:00:00 2001
From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Thu, 1 Sep 2016 16:39:37 +0100
Subject: [PATCH] Fixed the 'BUY' button and the ribbon/triangle...fixes

---
 css/master.css   | 95 ++++++++++++++++++++++++++++--------------------
 givingguide.html | 50 ++++++++++---------------
 2 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/css/master.css b/css/master.css
index 26dd894..7bb2eaf 100644
--- a/css/master.css
+++ b/css/master.css
@@ -284,6 +284,7 @@ section {
 }
 
 /*Comparisons*/
+
 .title {
   margin-top: 40px;
   padding-bottom: 8px;
@@ -293,7 +294,7 @@ section {
   background-position: center bottom;
 }
 
-.sale {
+/*.sale {
   position: absolute;
   top: 10px;
   left: -67px;
@@ -313,15 +314,29 @@ section {
 
   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;
 }
 
-/*.sale-text P {
+.sale-text {
   position: absolute;
-  top: 18px;
-  left: 23px;
+  top: -93px;
+  left: 4px;
 
   -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  transform: rotate(-45deg);
   text-transform: uppercase;
 
   color: white;
@@ -329,29 +344,30 @@ section {
   font-size: 20px;
   font-weight: bold;
 
-}*/
+}
 
 .rfy {
   position: absolute;
-  top: 30px;
-  left: -42px;
+  top: 44px;
+  left: -71px;
 
-  width: 180px;
-  padding: 6px 0;
+  width: 266px;
+  padding: 10px 0;
 
   -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
   text-align: center;
+  text-decoration: underline;
   text-transform: uppercase;
 
   color: #fff;
-  background: #1e33f6;
+  border-bottom: 0;
+  background: #2B81E3;
 
   font-size: 14px;
   font-weight: 700;
 }
+
 .bad,
 .good {
   overflow: hidden;
@@ -376,17 +392,17 @@ section {
   background-image: url("../img/bad.svg");
 }
 
-.neutral {
+li.neutral {
   background-image: url("../img/neutral.svg");
 }
 
-.pros,
-.cons {
+.cons,
+.pros {
   padding-left: 15px;
 }
 
-.pros li,
-.cons li {
+.cons li,
+.pros li {
   padding-left: 30px;
 
   list-style: none;
@@ -400,49 +416,50 @@ section {
 }
 
 .get-item {
-  /*width: 40%;*/
-  margin: 0 auto;
-  width: 120px;
+  width: 140px;
+  margin: 0 auto 13px;
+  padding: 4px 35px;
 
   text-align: center;
+  text-decoration: none;
 
   color: white;
+  border-bottom: 0;
   border-radius: 100px;
   background: #2B81E3;
-  border-color: #135299;
 
   font-family: "Signika Regular";
   font-size: 24px;
 }
 
-.get-item a {
+.get-item:active,
+.get-item:focus,
+.get-item:hover,
+.rfy:active,
+.rfy:focus,
+.rfy:hover {
   text-decoration: none;
 
   color: white;
-  border-bottom: 0;
+  background: #6eadf5;
 }
 
-.dropdown-toggle {
-  padding: 13px 55px;
+.get-item:active {
   background: #2B81E3;
-  border-color: #135299;
-  border-radius: 100px;
-  width: 40px;
-
 }
 
-.dropdown-menu {
-  margin: 0;
-}
-.dropdown-menu li {
-  list-style: none;
-  margin-bottom: 12px;
+.seller-group {
+  padding: 10px;
+
+  text-align: center;
 }
 
-.dropdown-menu a {
-  border-bottom: 0;
-  padding: 3px 20px;
+.seller {
+  display: inline-block;
+
+  text-align: center;
 }
+
 /*Charities*/
 
 .charities {
diff --git a/givingguide.html b/givingguide.html
index 1aa4cd3..44ab55e 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -132,51 +132,41 @@
         <div class="good col-md-6 col-sm-6">
 
           <!-- Begin Sale -->
-          <div class="sale">Sale!</div>
+          <div class="sale">
+            <p class=sale-text>
+              Sale!
+            </p>
+          </div>
           <!-- End Sale -->
 
           <!-- Begin RFY -->
-          <div class="rfy">RYF-certified</div>
+          <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" />
           <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
 
           <!-- Buy/Download Button   -->
-          <div class="btn-container center-block" id="get-item" style="display:none">
-            <script>document.getElementById('get-item').style.display='';</script>
-
-            <div class="btn-group">
-              <button type="button" class="btn btn-primary get-item">BUY</button>
-              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="caret"></span>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li role="separator" class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
+
+          <a id="get-item" class="get-item center-block" role="button" data-toggle="collapse" href="#sellers" aria-expanded="false" aria-controls="sellers" style="display:none">
+          BUY
+          </a>
+          <div class="collapse" id="sellers">
+            <div class="center-block seller-group">
+              <a href="#" class="seller action-button">Seller 1</a>
+              <a href="#" class="seller action-button">Seller 2</a>
             </div>
           </div>
 
-          <!-- End Buy/Download button -->
-
 
+          <script>document.getElementById('get-item').style.display='';</script>
           <noscript>
-            <div class="list-group">
-              <a href="#" class="list-group-item active">
-              Cras justo odio
-              </a>
-              <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
-              <a href="#" class="list-group-item">Morbi leo risus</a>
-              <a href="#" class="list-group-item">Porta ac consectetur ac</a>
-              <a href="#" class="list-group-item">Vestibulum at eros</a>
-            </div>
+              <div class="center-block seller-group">
+                <a href="#" class="seller action-button">Seller 1</a>
+                <a href="#" class="seller action-button">Seller 2</a>
+              </div>
           </noscript>
-
+          <!-- End Buy/Download button -->
 
           <ul class="pros">
             <li>Fully free software, based on Android.</li>
-- 
2.25.1