/*Bootstrap overrides*/
.navbar {
margin-bottom: 0;
+
border: 0;
border-radius: 0;
background: #2caf8f;
.navbar-default .navbar-toggle .icon-bar {
width: 40px;
height: 5px;
+
border-radius: 6px;
background-color: #ffd429;
}
}
.alert-link {
- border-bottom: 0;
+
}
.alert {
border: 0;
+ margin-top: 20px;
+ max-width: 700px;
}
.alert-success {
- background: #0AD778;
color: #E8FBF2;
color: rgba(255,255,255,0.9);
+ background: #dff0d9;
}
.alert-info {
- background: #6eadf5;
color: #F1F7FE;
color: rgba(255,255,255,0.9);
+ background: #6eadf5;
}
+
+/*.label-info {
+ background: #2B81E3;
+}*/
+
/*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');
}
h1 {
/*margin-top: 10px;*/
margin-bottom: 20px;
+
color: #4B423B;
- font-size: 35px;
+
font-family: "Signika Light";
+ font-size: 35px;
}
h2 {
color: #4B423B;
- font-size: 28px;
+
font-family: "Signika Light";
+ font-size: 28px;
}
h3 {
color: #333;
- font-size: 25px;
+
font-family: "Signika Regular";
+ font-size: 25px;
}
h4 {
color: #9b9b9b;
- font-size: 24px;
+
font-family: "Signika Light";
+ font-size: 24px;
}
h5 {
color: #4a4a4a;
- font-size: 20px;
+
font-family: "Signika Regular";
+ font-size: 20px;
}
li,
p {
margin-bottom: 20px;
- color: #1c1c1c;
+
list-style: outside;
- font-size: 17px;
+
+ color: #1c1c1c;
+
font-family: "Open Sans";
+ font-size: 17px;
line-height: 30px;
}
li {
margin-bottom: 20px;
+
list-style-type: disc;
}
a {
- border-bottom: 2px solid #ffd429;
- color: #2caf8f;
- text-decoration: none;
-webkit-transition: .3s all ease;
- -moz-transition: .3s all ease;
transition: .3s all ease;
+ text-decoration: none;
+
+ color: #2caf8f;
+ border-bottom: 2px solid #ffd429;
}
a:hover {
- color: #0f4639;
text-decoration: none;
+
+ color: #0f4639;
}
section {
padding-top: 30px;
padding-bottom: 30px;
}
+
+/*Colorful Sections*/
+
+.smartphones {
+ /*background-color: #80D4C9;*/
+}
+
+
/*Header*/
/*Navbar*/
.icon-bar {
.navbar li {
padding-top: 20px;
- color: #9b9b9b;
+
text-align: center;
- font-size: 30px;
+
+ color: #9b9b9b;
+
font-family: "Signika Regular";
+ font-size: 30px;
}
.navbar-brand {
.intro-text {
padding-top: 20px;
padding-bottom: 0;
+
background: #2caf8f;
}
.intro-text {
padding-bottom: 40px;
+
background: #fff;
}
/*Actions*/
.action-button {
position: relative;
bottom: 10px;
+
margin-bottom: 30px;
padding: 6px 35px;
+
+ color: #4B423B;
border: 0;
border-bottom: 0;
border-radius: 100px;
background: #FFD429;
- color: #4B423B;
- font-size: 22px;
+
font-family: "Signika Regular";
+ font-size: 22px;
}
.action-button:hover {
- background: #2caf8f;
color: white;
+ background: #2caf8f;
}
/*Comparisons*/
.title {
margin-top: 40px;
padding-bottom: 8px;
+
background-image: url("../img/underline.svg");
- background-position: center bottom;
background-repeat: no-repeat;
+ background-position: center bottom;
}
.sale {
+
+ display: none; /* Remove when using*/
position: absolute;
top: 0;
left: 0;
+
width: 0;
height: 0;
- border-width: 113px 113px 0 0;
+
+ color: #fff;
+ border-width: 100px 100px 0 0;
border-style: solid;
border-color: #0AD778 transparent transparent transparent;
- color: #fff;
}
.sale-text {
position: absolute;
- top: -93px;
+ top: -81px;
left: 4px;
- color: white;
- text-transform: uppercase;
- font-weight: bold;
- font-size: 20px;
+
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
+ text-transform: uppercase;
+
+ color: white;
+
+ font-size: 20px;
+ font-weight: bold;
}
.rfy {
- position: absolute;
- top: 44px;
- left: -71px;
- padding: 10px 0;
- width: 266px;
- border-bottom: 0;
- background: #2B81E3;
- color: #fff;
- text-align: center;
+ /*text-align: center;*/
text-decoration: underline;
text-transform: uppercase;
- font-weight: 700;
+ /*background: #2B81E3;*/
+
+ color: #fff;
+ /*position: absolute;*/
+ /*top: 44px;*/
+ /*left: -71px;*/
+ /*padding: 10px 0;*/
+ /*width: 266px;*/
+ border-bottom: 0;
+
font-size: 14px;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- transform: rotate(-45deg);
+ font-weight: 700;
+ /*-webkit-transform: rotate(-45deg);*/
+ /*-moz-transform: rotate(-45deg);*/
+ /*transform: rotate(-45deg);*/
+}
+
+.rfy-line {
+ background-image: none !important;
}
.bad,
.good {
overflow: hidden;
+
margin-top: 30px;
padding-top: 30px;
padding-bottom: 30px;
.bad {
background-color: transparent;
background-image: url("../img/bad-pattern.png");
- background-size: 40px;
background-repeat: repeat;
+ background-size: 40px;
}
.pros li {
.cons li,
.pros li {
padding-left: 30px;
- background-repeat: no-repeat;
+
list-style: none;
+
+ background-repeat: no-repeat;
}
.bad img,
.good img {
- margin-bottom: 20px;
width: 250px;
height: 250px;
+ margin-bottom: 20px;
}
.get-item {
- margin: 0 auto 13px;
- padding: 4px 35px;
- width: 140px;
- border-bottom: 0;
- border-radius: 100px;
- background: #2B81E3;
- color: white;
+ position: absolute;
+ right: 20px;
+ bottom: 6px;
+
+ width: 60px;
+ height: 60px;
+ /*margin: 0 auto 5px;*/
+ padding: 15px 11px;
+
text-align: center;
+ vertical-align: middle;
text-decoration: none;
- font-size: 24px;
+
+ color: white;
+ border-bottom: 0;
+ border-radius: 50%;
+ background: #2B81E3;
+ box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
+
font-family: "Signika Regular";
+ font-size: 21px;
}
.get-item:active,
.rfy:active,
.rfy:focus,
.rfy:hover {
- background: #6eadf5;
- color: white;
text-decoration: none;
+
+ color: white;
+ background: #6eadf5;
}
.get-item:active {
}
.seller-group {
- padding: 10px;
+ position: absolute;
+ right: 20px;
+ bottom: 70px;
+
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+ /*padding: 10px;*/
text-align: center;
}
.seller {
- display: inline-block;
+ display: block;
+
+ /*width: 50px;*/
+ /*height: 50px;*/
+
text-align: center;
}
/*Recommended Lines*/
.recommended-section {
padding-top: 30px;
padding-bottom: 30px;
+
background: #fffae5;
}
/*Charities*/
.charities {
margin-bottom: 0;
- background-color: #FFD429;
+
+ background-color: #F5FFF7;
}
.charities img {
- -webkit-filter: brightness(0.4) opacity(0.8) sepia(1);
- filter: brightness(0.4) opacity(0.8) sepia(1);
-webkit-transition: .3s all ease;
- -moz-transition: .3s all ease;
transition: .3s all ease;
- -moz-filter: brightness(0.4) opacity(0.8) sepia(1);
+ -webkit-filter: brightness(0.8) opacity(0.8) grayscale(1);
+ filter: brightness(0.8) opacity(0.8) grayscale(1);
+ -moz-filter: brightness(0.8) opacity(0.8) grayscale(1);
}
.charities img:hover {
- -webkit-filter: brightness(1) opacity(1) sepia(0);
- filter: brightness(1) opacity(1) sepia(0);
-webkit-transform: scale(1.1);
- -moz-transform: scale(1.1);
transform: scale(1.1);
- -moz-filter: brightness(1) opacity(1) sepia(0);
+ -webkit-filter: brightness(1) opacity(1) grayscale(0);
+ filter: brightness(1) opacity(1) grayscale(0);
+ -moz-filter: brightness(1) opacity(1) grayscale(0);
}
/*Licenses*/
.licenses {
margin-bottom: 0;
+
background-color: #fffae5;
}
footer {
padding-top: 30px;
/*padding-bottom: 30px;*/
+
background-color: #4B423B;
}
footer a {
color: #FFD429;
+
font-weight: 700;
}
}
.footer-logo {
- margin-bottom: 15px;
max-height: 220px;
+ margin-bottom: 15px;
}
.ornament {
- margin-top: 20px;
height: 5px;
+ margin-top: 20px;
+
+ background: -webkit-linear-gradient(left, #FFD429 15%, #2B81E3 15%, #2B81E3 30%,#2CAF8F 30%, #2CAF8F 45%, #F3FAFF 45%, #F3FAFF 60%, #0AD778 60%, #0AD778 75%, #D70A0A 75%, #D70A0A 85%);
background: linear-gradient(90deg, #FFD429 15%, #2B81E3 15%, #2B81E3 30%,#2CAF8F 30%, #2CAF8F 45%, #F3FAFF 45%, #F3FAFF 60%, #0AD778 60%, #0AD778 75%, #D70A0A 75%, #D70A0A 85%);
}
/* Media Queries */
/*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;
- border-right: 1px #9BD2BF solid;
- background-color: white;
+
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;
+
+ border-right: 1px #9BD2BF solid;
+ background-color: white;
+
+ font-family: "Signika Regular";
+ font-size: 1.1em;
}
.navbar li:first-child {
.navbar li a {
display: block;
- text-decoration: none;
+
-webkit-transition: .3s all ease;
- -moz-transition: .3s all ease;
transition: .3s all ease;
+ text-decoration: none;
}
.navbar li a:hover {
display: table;
}
.is-table-row [class*="col-"] {
- float: none;
display: table-cell;
+ float: none;
+
vertical-align: top;
}
.recommended-section h5 {
padding-left: 46px;
+
text-align: left;
}
/*Footer*/
.navbar-default .navbar-nav > li > a {
padding: 7px;
+
color: #2caf8f;
}
.navbar li {
padding: 0 30px;
- border-right: 1px #9BD2BF solid;
- background-color: white;
+
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;
+
+ border-right: 1px #9BD2BF solid;
+ background-color: white;
+
+ font-family: "Signika Regular";
+ font-size: 1.2em;
}
.navbar li:first-child {
.navbar li a {
display: block;
- text-decoration: none;
+
-webkit-transition: .3s all ease;
- -moz-transition: .3s all ease;
transition: .3s all ease;
+ text-decoration: none;
}
.navbar li:hover a {
}
.join img {
- margin: 10px;
width: 200px;
+ margin: 10px;
}
/*Intro*/
.intro {
.intro-text h1 {
margin-top: 0;
+
color: white;
color: rgba(255, 255, 255, 0.95);
}
.intro-text h4 {
color: #FFDD55;
+
font-family: "Signika Light";
}
.illustration img {
- margin-top: 30px;
width: 90%;
+ margin-top: 30px;
}
/*Footer*/
.footer-logo img {
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.illustration img {
- margin-top: 10px;
width: 70%;
+ margin-top: 10px;
}
}
<title>Ethical Tech | Giving Guide</title>
<meta name="description" content="This is the Free Software Foundation (FSF) guide to smarter gifts, compared with their restrictive counterparts.">
+ <link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-icon-57x57.png">
+ <link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-icon-76x76.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
+ <link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
+ <link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
+ <link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
+ <link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
+ <meta name="msapplication-TileColor" content="#2caf8f">
+ <meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
+ <meta name="theme-color" content="#2caf8f">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Our CSS -->
<link rel="stylesheet" href="css/master.css">
+
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<section class="comparisons">
<!--Smartphones-->
- <div class="container">
+ <div class="container smartphones">
<h3 class="title text-center">Smartphones</h3>
<div class="row is-table-row">
- <div class="good col-md-6 col-sm-6">
+ <div class="good col-md-6 col-sm-6" style="display:relative">
<!-- Begin Sale -->
<div class="sale">
<!-- End Sale -->
<!-- Begin RFY -->
- <a class="rfy" href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">RFY-Certified</a>
+ <!-- <a class="rfy" href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">RFY-Certified</a> -->
<!-- End RFY -->
<img src="img/products/replicant.png" alt="replicant phone" class="center-block" />
<!-- Buy/Download Button -->
- <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">
+ <a id="get-item" class=" btn get-item" role="button" data-toggle="collapse" href="#sellers" aria-expanded="false" aria-controls="sellers" style="display:none">
BUY
</a>
<div class="collapse" id="sellers">
<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>
+ <!-- <li class="rfy-line"><span class="label label-default"><a class="rfy" href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">RFY-Certified</a></span>
+ </li> -->
</ul>
</div>
<!--End Bad-->
</div>
<!--End Row-->
+ <div class="alert alert-success ryf center-block">
+ <p>
+ All the items recommended by the Free Software Foundation are <a href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom" class="alert-link">RYF-Certified</a>
+ </p>
+ </div>
</div>
<!--End Container-->
</section>
<!--Begin Actions-->
<section class="actions">
<div class="container">
- <div class="row">
+ <div class="row is-table-row">
<!-- Begin Share -->
<div class="action col-md-4 col-sm-4 text-center">
<h2>Share</h2>