/*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 {
- border: 0;
margin-top: 20px;
max-width: 700px;
+ border: 0;
}
.alert-success {
+ background: #dff0d9;
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;
}*/
+.panel-body {
+ padding: 0;
+}
+
/*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-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 {
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 {
+ border-bottom: 2px solid #ffd429;
+ color: #2caf8f;
+ text-decoration: none;
-webkit-transition: .3s all ease;
transition: .3s all ease;
- text-decoration: none;
-
- color: #2caf8f;
- border-bottom: 2px solid #ffd429;
}
a:hover {
- text-decoration: none;
-
color: #0f4639;
+ text-decoration: none;
}
section {
.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 {
.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;
-
- 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 {
-
- display: none; /* Remove when using*/
position: absolute;
top: 0;
left: 0;
-
+ display: none; /* Remove when using*/
width: 0;
height: 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: -81px;
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 {
- /*text-align: center;*/
- text-decoration: underline;
- text-transform: uppercase;
- /*background: #2B81E3;*/
-
- color: #fff;
/*position: absolute;*/
/*top: 44px;*/
/*left: -71px;*/
/*padding: 10px 0;*/
/*width: 266px;*/
border-bottom: 0;
-
- font-size: 14px;
+ /*background: #2B81E3;*/
+ color: #fff;
+ /*text-align: center;*/
+ text-decoration: underline;
+ text-transform: uppercase;
font-weight: 700;
+ font-size: 14px;
/*-webkit-transform: rotate(-45deg);*/
/*-moz-transform: rotate(-45deg);*/
/*transform: rotate(-45deg);*/
}
.bad,
-.good {
+.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 {
+.pros li,
+.info {
padding-left: 30px;
-
- list-style: none;
-
+ background-position: top center left;
background-repeat: no-repeat;
+ list-style: none;
}
.bad img,
.good img {
+ margin-bottom: 20px;
width: 250px;
height: 250px;
- margin-bottom: 20px;
}
.get-item {
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;
-
- color: white;
+ width: 60px;
+ height: 60px;
border-bottom: 0;
border-radius: 50%;
background: #2B81E3;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
-
- font-family: "Signika Regular";
+ color: white;
+ vertical-align: middle;
+ text-align: center;
+ text-decoration: none;
font-size: 21px;
+ 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 {
position: absolute;
right: 20px;
bottom: 70px;
-
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease;
/*padding: 10px;*/
text-align: center;
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease;
}
.seller {
display: block;
-
/*width: 50px;*/
/*height: 50px;*/
-
text-align: center;
}
+
+.info {
+ margin-bottom: 0;
+ background-image: url("../img/info.svg");
+ background-position: center left;
+
+}
+
+.info p {
+ margin-bottom: 0;
+}
+
/*Recommended Lines*/
.certified {
.recommended-section {
padding-top: 30px;
padding-bottom: 30px;
-
background: #fffae5;
}
/*Charities*/
.charities {
margin-bottom: 0;
-
background-color: #F5FFF7;
}
.charities img {
+ -webkit-filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
+ filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
-webkit-transition: .3s all ease;
transition: .3s all ease;
- -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);
+ -moz-filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
}
.charities img:hover {
+ -webkit-filter: brightness(1) contrast(100%) opacity(1) saturate(1);
+ filter: brightness(1) contrast(100%) opacity(1) saturate(1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
- -webkit-filter: brightness(1) opacity(1) grayscale(0);
- filter: brightness(1) opacity(1) grayscale(0);
- -moz-filter: brightness(1) opacity(1) grayscale(0);
+ -moz-filter: brightness(1) contrast(100%) opacity(1) saturate(1);
}
/*Licenses*/
.licenses {
margin-bottom: 0;
-
background-color: #fffae5;
}
box-shadow: 0 0 0 transparent;
}
+.lcs-col {
+ margin: 0;
+ position:inherit;
+}
+
+.lcs-col:before {
+ content:'Expand';
+ font-size: 16px;
+}
+
+.lcs-col[aria-expanded="true"]:before {
+ content:'Collapse';
+}
+
.fix-margin {
margin: 0;
}
footer {
padding-top: 30px;
/*padding-bottom: 30px;*/
-
background-color: #4B423B;
}
footer a {
color: #FFD429;
-
font-weight: 700;
}
}
.footer-logo {
- max-height: 220px;
margin-bottom: 15px;
+ max-height: 220px;
}
.ornament {
- height: 5px;
margin-top: 20px;
-
+ height: 5px;
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%);
}
/*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: .3s all ease;
- transition: .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;
+ transition: .3s all ease;
}
.navbar li:first-child {
.navbar li a {
display: block;
-
+ text-decoration: none;
-webkit-transition: .3s all ease;
transition: .3s all ease;
- text-decoration: none;
}
.navbar li a:hover {
.is-table-row [class*="col-"] {
display: table-cell;
float: none;
-
vertical-align: top;
}
.recommended-section h5 {
padding-left: 46px;
-
text-align: left;
}
+
+ .charities img {
+ width: 80%;
+ }
/*Footer*/
.footer-logo {
margin-bottom: 0;
.navbar-default .navbar-nav > li > a {
padding: 7px;
-
color: #2caf8f;
}
.navbar li {
padding: 0 30px;
-
- list-style-type: none;
-
- -webkit-transition: .3s all ease;
- transition: .3s all ease;
-
border-right: 1px #9BD2BF solid;
background-color: white;
-
- font-family: "Signika Regular";
+ list-style-type: none;
font-size: 1.2em;
+ font-family: "Signika Regular";
+ -webkit-transition: .3s all ease;
+ transition: .3s all ease;
}
.navbar li:first-child {
.navbar li a {
display: block;
-
+ text-decoration: none;
-webkit-transition: .3s all ease;
transition: .3s all ease;
- text-decoration: none;
}
.navbar li:hover a {
}
.join img {
- width: 200px;
margin: 10px;
+ width: 200px;
}
/*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 {
- width: 90%;
margin-top: 30px;
+ width: 90%;
}
/*Footer*/
.footer-logo img {
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.illustration img {
- width: 70%;
margin-top: 10px;
+ width: 70%;
}
}
</section>
<!--End Intro-->
+ <!--Begin Actions-->
+ <section class="actions">
+ <div class="container">
+ <div class="row is-table-row">
+ <!-- Begin Share -->
+ <div class="action col-md-4 col-sm-4 text-center">
+ <h2>Share</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+ </p>
+ <a class="action-button" href="https://www.fsf.org/share?u=https://www.fsf.org/givingguide/&t=Check out the Free Software Foundation Ethical Tech Giving Guide">#givefreely</a>
+ </div>
+ <!-- End Share -->
+
+ <!-- Begin Share -->
+ <div class="action col-md-4 col-sm-4 text-center">
+ <h2>Organize</h2>
+ <p>
+ Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
+ </p>
+ <a class="action-button" href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a>
+ </div>
+ <!-- End Share -->
+
+ <!-- Begin Share -->
+ <div class="action col-md-4 col-sm-4 text-center">
+ <h2>Non-profit</h2>
+ <p>
+ Donating to a <a href="#charities">nonprofit</a> in someone's name is at least as meaningful as buying them an electronic device.
+ </p>
+ <a class="action-button" href="#charities">Donate</a>
+ </div>
+ <!-- End Share -->
+ </div>
+ <!-- End Row -->
+ </div>
+ <!-- End Container -->
+ </section>
+ <!--End Actions-->
+
<!--Begin Comparisons-->
<section class="comparisons">
</div>
<!--End Row-->
<div class="alert alert-success ryf 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>
</p>
+ </li>
</div>
</div>
<!--End Container-->
</section>
<!-- End Certified -->
-
- <!--Begin Actions-->
- <section class="actions">
- <div class="container">
- <div class="row is-table-row">
- <!-- Begin Share -->
- <div class="action col-md-4 col-sm-4 text-center">
- <h2>Share</h2>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
- </p>
- <a class="action-button" href="https://www.fsf.org/share?u=https://www.fsf.org/givingguide/&t=Check out the Free Software Foundation Ethical Tech Giving Guide">#givefreely</a>
- </div>
- <!-- End Share -->
-
- <!-- Begin Share -->
- <div class="action col-md-4 col-sm-4 text-center">
- <h2>Organize</h2>
- <p>
- Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
- </p>
- <a class="action-button" href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a>
- </div>
- <!-- End Share -->
-
- <!-- Begin Share -->
- <div class="action col-md-4 col-sm-4 text-center">
- <h2>Non-profit</h2>
- <p>
- Donating to a <a href="#charities">nonprofit</a> in someone's name is at least as meaningful as buying them an electronic device.
- </p>
- <a class="action-button" href="#charities">Donate</a>
- </div>
- <!-- End Share -->
- </div>
- <!-- End Row -->
- </div>
- <!-- End Container -->
- </section>
- <!--End Actions-->
-
<!-- Begin Donations -->
<section class="charities" id="charities">
<div class="container">
- <h1>Recommended organizations for holiday donations</h1>
+ <h1 class="text-center">Recommended organizations for holiday donations</h1>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="http://www.fsf.org/"><img src="img/charities/fsf.png" alt="fsf" class="center-block img-responsive" /></a>
<div class="col-md-12">
<div class="panel-default">
<div class="panel-heading">
- <h1 class="fix-margin">Licenses</h1>
+ <h1 class="fix-margin">Licenses <span><button data-toggle="collapse" data-target="#licenses" class="btn action-button pull-right lcs-col"></button></span></h1>
+
</div>
- <div class="panel-body">
+ <div class="panel-body collapsing" id="licenses">
<p>This page by the Free Software Foundation is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 Unported.</a>
</p>
<p>The graphics and photos used on this page have been modified by the Free Software Foundation and are licensed separately under the following terms: </p>
projects / fsf-giving-guide.git / commitdiff
