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