/*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-success {
background: #0AD778;
+ color: #E8FBF2;
color: rgba(255,255,255,0.9);
}
.alert-info {
background: #6eadf5;
+ color: #F1F7FE;
color: rgba(255,255,255,0.9);
}
-
/*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');
}
-
/*Text Styles*/
h1 {
margin-top: 10px;
margin-bottom: 20px;
-
color: #4B423B;
-
- font-family: "Signika Light";
font-size: 35px;
-
+ font-family: "Signika Light";
}
h2 {
color: #4B423B;
-
- font-family: "Signika Light";
font-size: 28px;
+ font-family: "Signika Light";
}
h3 {
color: #333;
-
- font-family: "Signika Regular";
font-size: 25px;
+ font-family: "Signika Regular";
}
h4 {
padding-top: 23px;
-
color: #9b9b9b;
-
- font-family: "Signika Light";
font-size: 24px;
+ font-family: "Signika Light";
}
h5 {
-
color: #4a4a4a;
-
- font-family: "Signika Regular";
font-size: 20px;
+ font-family: "Signika Regular";
}
li,
p {
margin-bottom: 20px;
-
- list-style: outside;
-
color: #1c1c1c;
-
- font-family: "Open Sans";
+ list-style: outside;
font-size: 17px;
+ font-family: "Open Sans";
line-height: 30px;
}
li {
margin-bottom: 20px;
-
list-style-type: disc;
}
a {
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
- text-decoration: none;
-
- color: #2caf8f;
border-bottom: 2px solid #ffd429;
-
+ color: #2caf8f;
+ text-decoration: none;
+ -webkit-transition: .3s all ease;
+ transition: .3s all ease;
}
a:hover {
- text-decoration: none;
-
color: #0f4639;
+ text-decoration: none;
}
section {
+ margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
- margin-bottom: 20px;
}
/*Header*/
-
/*Navbar*/
.icon-bar {
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
+ -webkit-transition: .3s all ease;
+ transition: .3s all ease;
}
.bar2 {
.navbar li {
padding-top: 20px;
-
- text-align: center;
-
color: #9b9b9b;
-
- font-family: "Signika Regular";
+ text-align: center;
font-size: 30px;
+ font-family: "Signika Regular";
}
.navbar-brand {
.navbar-nav li a {
border-bottom: 0;
}
-
/*Intro*/
-
.intro,
.intro-text {
padding-top: 20px;
padding-bottom: 0;
-
background: #2caf8f;
}
.intro-text {
padding-bottom: 40px;
-
background: #fff;
}
-
/*Actions*/
.actions {
padding-top: 30px;
- /*padding-bottom: 30px;*/
-
background: #fffae5;
}
.action {
position: relative;
-
margin-bottom: 50px;
}
.action-button {
position: relative;
bottom: 10px;
-
margin-bottom: 30px;
padding: 6px 35px;
-
- color: #4B423B;
border: 0;
border-bottom: 0;
border-radius: 100px;
background: #FFD429;
-
- font-family: "Signika Regular";
+ color: #4B423B;
font-size: 22px;
+ font-family: "Signika Regular";
}
.action-button:hover {
- color: white;
background: #2caf8f;
+ color: white;
}
-
/*Comparisons*/
-
.title {
margin-top: 40px;
padding-bottom: 8px;
-
background-image: url("../img/underline.svg");
- background-repeat: no-repeat;
background-position: center bottom;
+ background-repeat: no-repeat;
}
-/*.sale {
- position: absolute;
- top: 10px;
- left: -67px;
-
- width: 180px;
- padding: 6px 0;
-
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
- text-align: center;
- text-transform: uppercase;
-
- color: #fff;
- background: #0AD778;
-
- 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;
+ color: #fff;
}
.sale-text {
position: absolute;
top: -93px;
left: 4px;
-
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- text-transform: uppercase;
-
color: white;
-
- font-size: 20px;
+ text-transform: uppercase;
font-weight: bold;
-
+ font-size: 20px;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
}
.rfy {
position: absolute;
top: 44px;
left: -71px;
-
- width: 266px;
padding: 10px 0;
-
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
+ width: 266px;
+ border-bottom: 0;
+ background: #2B81E3;
+ color: #fff;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
-
- color: #fff;
- border-bottom: 0;
- background: #2B81E3;
-
- font-size: 14px;
font-weight: 700;
+ font-size: 14px;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ transform: rotate(-45deg);
}
.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-repeat: repeat;
background-size: 40px;
+ background-repeat: repeat;
}
.pros li {
.cons li,
.pros li {
padding-left: 30px;
-
- list-style: none;
-
background-repeat: no-repeat;
+ list-style: none;
}
.bad img,
.good img {
- margin-bottom: 25px;
+ margin-bottom: 20px;
+ width: 250px;
+ height: 250px;
}
.get-item {
- width: 140px;
margin: 0 auto 13px;
padding: 4px 35px;
-
- text-align: center;
- text-decoration: none;
-
- color: white;
+ width: 140px;
border-bottom: 0;
border-radius: 100px;
background: #2B81E3;
-
- font-family: "Signika Regular";
+ color: white;
+ text-align: center;
+ text-decoration: none;
font-size: 24px;
+ font-family: "Signika Regular";
}
.get-item:active,
.rfy:active,
.rfy:focus,
.rfy:hover {
- text-decoration: none;
-
- color: white;
background: #6eadf5;
+ color: white;
+ text-decoration: none;
}
.get-item:active {
.seller-group {
padding: 10px;
-
text-align: center;
}
.seller {
display: inline-block;
-
text-align: center;
}
-
/*Recommended Lines*/
-
.recommended-section {
padding-top: 30px;
padding-bottom: 30px;
}
-
-/*.recommended-img {
- position: relative;
-}
-
-.recommended-img > img {
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}*/
-
/*Charities*/
-
.charities {
- background-color: #E4F5F1;
margin-bottom: 0;
+ background-color: #E4F5F1;
}
.charities img {
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
+ -webkit-filter: brightness(0.5) opacity(0.5) grayscale(1);
+ filter: brightness(0.5) opacity(0.5) grayscale(1);
+ -webkit-transition: .3s all ease;
+ -moz-transition: .3s all ease;
+ transition: .3s all ease;
+
+ -moz-filter: brightness(0.5) opacity(0.5) grayscale(1);
}
.charities img:hover {
+ -webkit-filter: brightness(1) opacity(1) grayscale(0);
+ filter: brightness(1) opacity(1) grayscale(0);
-webkit-transform: scale(1.1);
+ -moz-transform: scale(1.1);
transform: scale(1.1);
}
-
/*Licenses*/
-
.licenses {
- background-color: #fffae5;
margin-bottom: 0;
+ background-color: #fffae5;
}
.licenses .panel-default .panel-heading {
- background-color: #fffae5;
border: 0;
+ background-color: #fffae5;
box-shadow: 0 0 0 transparent;
}
.fix-margin {
margin: 0;
}
-
/*Footer*/
footer {
padding-top: 30px;
padding-bottom: 30px;
-
background-color: #4B423B;
}
.footer-logo {
margin-bottom: 15px;
+ max-height: 220px;
}
-
/* Media Queries */
-
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
/*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;
-
- list-style-type: none;
-
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
-
border-right: 1px #9BD2BF solid;
background-color: white;
-
- font-family: "Signika Regular";
+ 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;
}
.navbar li:first-child {
.navbar li a {
display: block;
-
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
text-decoration: none;
-
+ -webkit-transition: .3s all ease;
+ -moz-transition: .3s all ease;
+ transition: .3s all ease;
}
.navbar li a:hover {
}
.footer-logo img {
- width: 80%;
- }
-
- /*Fixes*/
- /*This sections fixes the inevitable difference in height of the comparison panes with margin-top where a simpler isn't possible*/
- /*.fix-iphone {
- margin-top: 15px;
- }
-
- .fix-macbook {
- margin-top: 90px;
+ width: 85%;
}
-
- .fix-amazon,
- .fix-router {
- margin-top: 100px;
- }
-
- .fix-itunes {
- margin-top: 50px;
- }*/
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
-
/*Navbar*/
.navbar-nav {
margin: 10px 10px 10px 100px;
.navbar-default .navbar-nav > li > a {
padding: 7px;
-
color: #2caf8f;
}
.navbar li {
padding: 0 30px;
-
- list-style-type: none;
-
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
-
border-right: 1px #9BD2BF solid;
background-color: white;
-
- font-family: "Signika Regular";
+ 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;
}
.navbar li:first-child {
.navbar li a {
display: block;
-
- -webkit-transition: 0.3s all ease;
- transition: 0.3s all ease;
text-decoration: none;
-
+ -webkit-transition: .3s all ease;
+ -moz-transition: .3s all ease;
+ transition: .3s all ease;
}
.navbar li:hover a {
}
.join img {
- width: 200px;
margin: 10px;
+ width: 200px;
}
-
/*Intro*/
-
.intro {
margin-bottom: 0;
}
.intro-text h1 {
margin-top: 0;
-
+ color: white;
color: rgba(255, 255, 255, 0.95);
-
}
.intro-text p {
.intro-text h4 {
color: #FFDD55;
-
font-family: "Signika Light";
}
.illustration img {
- width: 90%;
margin-top: 30px;
-
+ width: 90%;
}
/*Footer*/
.footer-logo img {
width: 50%;
}
-
- /*Fixes*/
- /*This sections fixes the inevitable difference in height of the comparison panes with margin-top where a simpler isn't possible*/
- /*.fix-iphone {
- margin-top: 15px;
- }
-
- .fix-macbook {
- margin-top: 90px;
- }
-
- .fix-amazon,
- .fix-router {
- margin-top: 100px;
- }
-
- .fix-itunes {
- margin-top: 50px;
- } */
}
-
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.illustration img {
- width: 70%;
margin-top: 10px;
-
+ width: 70%;
}
}
<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" />
+ <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" />
<h5 class="text-center">Tehnoetic S2 with Replicant</h5>
<!-- Buy/Download Button -->
</div>
- <script>document.getElementById('get-item').style.display='';</script>
+ <script>
+ document.getElementById('get-item').style.display = '';
+ </script>
<noscript>
<div class="center-block seller-group">
<p style="color: #6b6b6b">
<!--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="250" />
+ <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block fix-iphone" />
<h5 class="text-center">iPhone</h5>
<ul class="cons">
<li>Comes with no shortage of <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareIniThings">spyware</a>.</li>
<div class="container recommended-section">
<div class="row">
<div class="col-md-6 col-sm-6 recommended-img">
- <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250" />
+ <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" />
</div>
<div class="col-md-6 col-sm-6">
<h5 class="text-center">Minifree T400 with GNU/Linux</h5>
<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="250" />
+ <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" />
<h5 class="text-center">Minifree T400 with GNU/Linux</h5>
<ul class="pros">
<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>
<!--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="250" />
+ <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block fix-macbook" />
<h5 class="text-center">Apple Macbook Pro with macOS</h5>
<ul class="cons">
<li>Runs on proprietary software that restricts the user's freedoms.</li>
<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="x200" class="center-block" width="250" />
+ <img src="img/products/x200.jpg" alt="x200" class="center-block" />
<h5 class="text-center">Libiquity Taurinus X200 with GNU/Linux</h5>
<ul class="pros">
<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>
<!--End Good-->
<div class="bad col-md-6 col-sm-6">
- <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" height="150" />
+ <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" />
<h5 class="text-center">Lenovo U31 with Windows</h5>
<ul class="cons">
<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
<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="lulzbot" class="center-block" width="250" />
+ <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="lulzbot" class="center-block" />
<h5 class="text-center">Lulzbot Mini</h5>
<ul class="pros">
<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>
<!--End Good-->
<div class="bad col-md-6 col-sm-6">
- <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="212" />
+ <img src="img/products/printer-blocked.png" alt="printer" class="center-block" />
<h5 class="text-center">Makerbot Replicator Mini</h5>
<ul class="cons">
<li>
<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="free-router" class="center-block" width="250" />
+ <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="free-router" class="center-block" />
<h5 class="text-center">ThinkPenguin Router</h5>
<ul class="pros">
<li>
<!--End Good-->
<div class="bad col-md-6 col-sm-6">
- <img src="img/products/router-blocked.png" alt="router" class="center-block fix-router" height="150" />
+ <img src="img/products/router-blocked.png" alt="router" class="center-block fix-router" />
<h5 class="text-center">ISP-provided Routers</h5>
<ul class="cons">
<li>
<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="gutenberg" class="center-block" width="250" />
+ <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="gutenberg" class="center-block" />
<h5 class="text-center">Project Gutenberg</h5>
<ul class="pros">
<li>All of the ebooks are gratis, including classics like Peter Pan and Huck Finn.</li>
<!--End Good-->
<div class="bad col-md-6 col-sm-6">
- <img src="img/products/amazon-blocked.png" alt="amazon" class="center-block fix-amazon" width="230" />
+ <img src="img/products/amazon-blocked.png" alt="amazon" class="center-block fix-amazon" />
<h5 class="text-center">Amazon.com</h5>
<ul class="cons">
<li>
<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="150" />
+ <img src="https://static.fsf.org/nosvn/images/gimp_inkscape.png" alt="GIMP and Inskacape" class="center-block" />
<h5 class="text-center">GIMP and Inkscape</h5>
<ul class="pros">
<li>Free software, with thriving developer communities.</li>
<!--End Good-->
<div class="bad col-md-6 col-sm-6">
- <img src="img/products/adobe-blocked.png" alt="adobe" class="center-block" height="250" />
+ <img src="img/products/adobe-blocked.png" alt="adobe" class="center-block" />
<h5 class="text-center">Photoshop and Illustrator</h5>
<ul class="cons">
<li>Proprietary software controlled by Adobe.</li>
<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="fsf card" class="center-block" height="200" />
+ <img src="https://static.fsf.org/fsforg/img/FSFCardPrepped.png" alt="fsf card" class="center-block" />
<h5 class="text-center">FSF Membership Card</h5>
<ul class="pros">
<li>Join over 3,500 active members working to make a better world built on free software.</li>
<!--End Good-->
<div class="bad col-md-6 col-sm-6">
- <img src="img/products/itunes-blocked.png" alt="itunes" class="center-block fix-itunes" height="150" />
+ <img src="img/products/itunes-blocked.png" alt="itunes" class="center-block fix-itunes" />
<h5 class="text-center">iTunes Cards</h5>
<ul class="cons">
<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.
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 footer-logo">
- <a href="https://fsf.org/"><img src="../img/fsf-footer.png" alt="FSF" class="center-block" width="290"/></a>
+ <a href="https://fsf.org/"><img src="../img/fsf-footer.png" alt="FSF" class="center-block footer-logo img-responsive" /></a>
</div>
<div class="col-md-8 col-sm-8">
<p>The FSF is a nonprofit with a worldwide mission to advance software freedom —
projects / fsf-giving-guide.git / commitdiff