+html {
+ text-rendering: optimizeLegibility !important;
+ -webkit-font-smoothing: antialiased !important;
+}
+
/*Bootstrap overrides*/
.navbar {
margin-bottom: 0;
font-weight: 700;
font-style: normal;
font-family: "Open Sans Bold";
- src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg');
+ src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg');
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-weight: 600;
font-style: normal;
font-family: "Signika Bold";
- src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg');
+ src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg');
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-weight: 100;
font-style: normal;
font-family: "Signika Light";
- src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg');
+ src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg');
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-weight: 400;
font-style: normal;
font-family: "Signika Regular";
- src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg');
+ src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg');
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');
}
-html {
- text-rendering: optimizeLegibility !important;
- -webkit-font-smoothing: antialiased !important;
-}
-
/*Text Styles*/
+
h1 {
- /*margin-top: 10px;*/
margin-bottom: 20px;
color: #4B423B;
font-size: 35px;
padding-bottom: 30px;
}
-/*Colorful Sections*/
-
-.smartphones {
- /*background-color: #80D4C9;*/
-}
-
-
/*Header*/
+
/*Navbar*/
+
.icon-bar {
transition: .3s all ease;
}
.navbar-nav li a {
border-bottom: 0;
}
+
/*Intro*/
+
.intro,
.intro-text {
padding-top: 20px;
padding-bottom: 40px;
background: #fff;
}
+
/*Actions*/
+
.actions {
background: #fffae5;
}
background: #2caf8f;
color: white;
}
+
/*Comparisons*/
+
.title {
margin-top: 40px;
margin-bottom: 30px;
}
.sale {
- position: absolute;
- top: 0;
- left: 0;
/*display: none; */ /* uncomment when needed*/
- width: 0;
- height: 0;
- border-width: 100px 100px 0 0;
- border-style: solid;
- border-color: #0AD778 transparent transparent transparent;
- color: #fff;
-}
-
-.sale-text {
position: absolute;
- top: -81px;
- left: 4px;
+ top: -10%;
+ right: -20%;
+ padding: 1px 10px;
+ border-radius: 100px;
+ background-color: #0AD778;
color: white;
text-transform: uppercase;
- font-weight: bold;
- font-size: 20px;
- transform: rotate(-45deg);
-}
-
-.rfy {
- border-bottom: 0;
- color: #fff;
- text-decoration: underline;
- text-transform: uppercase;
- font-weight: 700;
- font-size: 14px;
+ font-size: 15px;
+ font-family: "Open Sans";
}
-.rfy-line {
- background-image: none !important;
+.sale-info {
+ font-size: 15px;
+ color: gray;
}
.bad,
.get-item:active,
.get-item:focus,
-.get-item:hover,
-.rfy:active,
-.rfy:focus,
-.rfy:hover {
+.get-item:hover {
background: #6eadf5;
color: white;
text-decoration: none;
/*Recommended Lines*/
-.certified {
- display: none;
-}
-
.recommended-img img{
width: 250px;
height: 250px;
padding-bottom: 30px;
background: #F5FFF7;
}
+
/*Charities*/
.charities {
margin-bottom: 0;
box-shadow: 0 0 0 transparent;
}
-.lcs-col {
- position:inherit;
- margin: 0;
-}
-
-.lcs-col:before {
- content:'Expand';
- font-size: 16px;
-}
-
-.lcs-col[aria-expanded="true"]:before {
- content:'Collapse';
-}
-
.fix-margin {
margin: 0;
}
+
/*Footer*/
footer {
padding-top: 30px;
- /*padding-bottom: 30px;*/
background-color: #4B423B;
}
footer p {
- color: white;
+ color: #cdcac8;
color: rgba(255,255,255,0.72);
}
.footer-logo {
margin-bottom: 15px;
- max-height: 220px;
+ max-height: 150px;
}
/* Media Queries */
text-align: left;
}
-
.charities img {
width: 80%;
filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
margin-top: 10px;
width: 70%;
}
+
}
<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.">
+ <!-- Some Colors -->
+ <!-- Chrome, Firefox OS and Opera -->
+ <meta name="theme-color" content="#2caf8f">
+ <!-- Windows Phone -->
+ <meta name="msapplication-navbutton-color" content="#2caf8f">
+
<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">
<h3 class="title text-center">Smartphones</h3>
<div class="row is-table-row">
<div class="good col-md-6 col-sm-6" style="position:relative">
-
- <!-- Begin Sale -->
- <div class="sale">
- <p class=sale-text>
- Sale!
- </p>
- </div>
- <!-- End Sale -->
-
- <!-- Begin RFY -->
- <!-- <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" />
<h5 class="text-center">Tehnoetic S2 with Replicant</h5>
<!-- Buy/Download Button -->
- <a id="get-item" class=" btn get-item" 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
+ <!-- Begin Sale -->
+ <span class="sale" >sale</span>
+ <!-- End Sale -->
</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>
+ <!-- Begin Sale Info -->
+ <div>
+ <p class="sale-info alert">
+ Until December 31st, buy this or this or this or this product, and get this or this free thing. Specify which thing you want in an email to sales@librepotato.biz.ru. Use the code <span class="label label-default">IDONTHAVEANYFRIENDS2016</span> 5% of proceeds will also be
+ donated to the FSF!
+ </p>
+ </div>
+ <!-- End Sale Info -->
</div>
</div>
</p>
<a href="#" class="seller action-button">Seller 1</a>
<a href="#" class="seller action-button">Seller 2</a>
+ <!-- Begin Sale Info -->
+ <div>
+ <p class="sale-info alert">
+ <span class="sale" style="position:inherit">sale</span>
+ Until December 31st, buy this or this or this or this product, and get this or this free thing. Specify which thing you want in an email to sales@librepotato.biz.ru. Use the code <span class="label label-default">IDONTHAVEANYFRIENDS2016</span> 5% of proceeds will also be
+ donated to the FSF!
+ </p>
+ </div>
+ <!-- End Sale Info -->
</div>
</noscript>
<!-- End Buy/Download button -->
<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 Good-->
<!--End Bad-->
</div>
<!--End Row-->
- <div class="alert alert-success ryf center-block">
+ <div class="alert alert-success center-block">
<li class="info">
<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>
</section>
<!--End comparisons-->
- <!--More certified products-->
- <section class="certified">
- <div class="container">
- <h1>More Products Certified to Respect Your Freedom</h1>
- <div class="row">
-
- <!-- Begin Certified -->
- <div class="col-md-4 col-sm-4 col-xs-6">
- <img src="img/products/mini-wifi.jpg" alt="mini-wifi" class="center-block img-responsive" />
- <h5 class="text-center">Tehnoetic Mini Wi-Fi Adapter</h5>
- <p>
- Great for all-free-software installations on laptops with incompatible Wi-Fi hardware.
- </p>
- </div>
-
- <div class="col-md-4 col-sm-4 col-xs-6">
- <img src="img/products/vpn.jpg" alt="vpn" class="center-block img-responsive" />
- <h5 class="text-center">ThinkPenguin VPN Router</h5>
- <p>
- Designed to complement your existing router by providing an easy-to-set up VPN that enhances privacy and security and circumvents network controls.
- </p>
- </div>
-
- <div class="col-md-4 col-sm-4 col-xs-6">
- <img src="img/products/wifi-adapter.jpg" alt="wifi-adapter" class="center-block img-responsive" />
- <h5 class="text-center">ThinkPenguin Long-Range Wi-Fi Adapter</h5>
- <p>
- More powerful than its smaller cousin, and can be further upgraded with a larger antenna.
- </p>
- </div>
- </div>
- <!-- End Row -->
- <div class="row">
- <div class="col-md-12">
- <p class="alert alert-info"> If you have ideas for more gifts that can be given freely, submit your recommendations to our <a class="alert-link" href="http://libreplanet.org/wiki/Group:Giving_Guide_Suggestions">growing page.</a>
- </div>
- <div class="col-md-12">
- <p class="alert alert-success">To learn more about which hardware supports free software and which doesn't, explore the community-run <a href="https://www.h-node.org/" class="alert-link">h-node database.</a></p>
- </div>
- </div>
- </div>
- <!--End Container-->
-
- </section>
- <!-- End Certified -->
-
<!-- Begin Donations -->
<section class="charities" id="charities">
<div class="container">
projects / fsf-giving-guide.git / commitdiff
