fsfe-website/look/fsfe.less

1069 lines
21 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "style.less";
@import "elements/figure";
@import "pages/interview";
/* fsfe.org pages */
body {
background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
font-family: "Roboto", sans-serif;
}
#followup {
background: url(/graphics/ribbon.svg) no-repeat 100% -40px @body-bg;
text-shadow: rgb(255, 255, 255) 0 0 .5em;
@media (min-width: @screen-sm-min) {
background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg;
}
}
#followup.join {
background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg;
@media (min-width: @screen-sm-min) {
background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg;
}
}
#full-menu {
background: url(/graphics/logo_bw_transparent_small.png) no-repeat top left @body-bg;
}
a.the-fellowship {
padding: 8px 20px 0 0;
background: url(/graphics/plussy-bright-20.png) no-repeat top right transparent;
}
img.signatory-logo {
padding: 10px;
}
/* fsfe.org front page */
.frontpage {
/* motto not displayed */
#campaigns-boxes {
background: url('/graphics/ribbon.png') top right no-repeat transparent;
height: 400px;
@media (min-width: @screen-xs-min) {
height: 300px;
}
.campaign-box {
height: 400px;
@media (min-width: @screen-xs-min) {
height: 300px;
}
width: 100%;
img {
max-width: 33%;
}
}
.campaign-box-center {
text-align: center;
font-size: 1.3em;
}
#freesociety {
.campaign-box-center;
font-family: 'GNUTypewriter', @font-family-monospace;
background: url('/graphics/motto.jpg') top center no-repeat #666;
background-size: cover;
font-size: 2em;
@media (min-width: @screen-xs-min) {
font-size: 2.7em;
padding-top: 1.8em;
}
p.text {
/*background: url('/graphics/fsfs.png') top center no-repeat transparent;
background-size: contain; */
-moz-hyphens: manual;
-webkit-hyphens: manual;
hyphens: manual;
}
}
#slidbria {
background: url('/graphics/slider-banner-FrancescaBria.png') left 33% no-repeat #666;
background-size: cover;
text-shadow: 0px 1px 8px rgb(0, 0, 0);
.author:before {
content: " ";
}
.author, .text {
display: block;
}
.author {
font-size: 0.8em;
}
.text {
.quote;
padding: 40% 0 4%;
font-size: 1em;
}
@media (min-width: 480px) {
.text {
margin-left: 48%;
padding: 0 0 4%;
}
}
@media (min-width:525px) {
.text {
padding: 0 0 8%;
}
}
@media (min-width:550px) {
.author {
margin-left: 40%;
}
.author, .text {
padding: 0.5em;
}
.text {
margin-left: 50%;
}
}
@media (min-width: @screen-md-min) {
.author {
font-size: 1em;
padding-top: 0;
}
.author, .text {
margin-left: 48%;
}
.text {
font-size: 1.25em;
}
}
.copyright {
font-size: 0.6em;
position: absolute;
bottom: 4px;
right: 4px;
}
}
#amaelle {
background: url('/graphics/amaelle.jpg') center 33% no-repeat #666;
background-size: cover;
text-shadow: 0px 1px 8px rgb(0, 0, 0);
.author:before {
content: " ";
}
.text {
.quote;
}
.author, .text {
display: block;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5em;
}
@media (min-width: @screen-sm-min) {
.author, .text {
margin-left: 45%;
}
}
.copyright {
font-size: 0.6em;
position: absolute;
bottom: 0;
right: 0;
}
@media (min-width: @screen-md-min) {
.text {
font-size: 1.25em;
}
}
}
#zacchiroli {
background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
text-shadow: 0px 1px 2px rgb(0, 0, 0);
img {
float: right;
margin-left: 1em;
}
.author:before {
content: " ";
}
.text {
.quote;
}
@media (min-width: @screen-md-min) {
img {
margin-left: 3em;
}
.text {
font-size: 1.3em;
}
.text, .author {
max-width: 80ex;
margin: 1em auto;
display: block;
}
}
}
#boxpmpc {
background: url('/graphics/pmpc_slider.jpg') left 33% no-repeat #666;
background-size: cover;
text-shadow: 0px 1px 8px rgb(0, 0, 0);
.text, .text2 {
.quote;
}
.text, .text2 {
display: block;
padding: 1.25em;
min-width: 120px;
font-size: 1.25em;
hyphens: none;
text-align: center;
}
@media (min-width: @screen-sm-min) {
.text {
float: left;
width: 30%;
}
.text2 {
float: right;
width: 30%;
}
background-position: center;
}
}
#ilovefs {
.campaign-box-center;
background: url('/graphics/ilovefs-hashtag-campaignbox.png') center 33% no-repeat transparent;
}
}
}
#news {
padding-bottom: 1.5em;
.dt-published {
color: @gray-light;
font-size: .9em;
display: block;
@media (min-width: @screen-sm-min) {
display: inline-block;
padding: 0;
}
}
.entry {
h3 {
display: inline-block;
padding-right: 0.5em;
}
p.date {
display: inline-block;
#news .dt-published;
font-weight: 300;
margin-bottom: 0;
}
}
.entry:nth-child(1n+3) {
h3 {
font-size: 1em;
margin: 0.7em 0 0 0;
}
.text, p {
display: none;
}
p.date {
display: inline-block;
}
}
}
#latest-news-list, #more-news-list {
list-style-type: none;
font-size: 1.2em;
font-weight: 300;
padding: 0;
}
.newsdate {
font-size: .875em;
color: #888;
margin-right: 1ex;
}
[newsteaser="yes"] {
font-weight: bold;
font-size: 1.2em;
}
[newsteaser="yes"] {
font-weight: bold;
font-size: 1.2em;
}
#events {
clear: both;
padding-top: 1.5em;
.entry {
h3 {
display: inline-block;
}
p.date {
#news .dt-published;
display: block;
margin-bottom: 0;
@media (min-width: @screen-sm-min) {
display: block;
}
}
}
a.learn-more {
line-height: 2;
}
}
@media (min-width: @screen-sm-min) {
#news, #events {
display: inline-block;
float: left;
width: 69%;
}
#team {
display: inline-block;
float: left;
}
#newsletter, #shop-promo, .country.frontpage #teams {
display: inline-block;
float: right;
width: 30%;
padding-left: 2%;
clear: none;
padding-top: 0;
}
}
#newsletter, .newsletter #sidebar {
input {
display: block;
margin: .5em 0;
}
}
#feeds {
a.ical, a.rss-feed {
.small;
color: @gray-light;
i.fa {
}
}
}
// ----------------------------------------------------------------------------
// List of quotes
// ----------------------------------------------------------------------------
ul.quote-list {
.list-unstyled();
.quote();
margin-top: 30px;
margin-bottom: 30px;
> li {
// Add thin lines between the quotes
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid @hr-border;
border-bottom: 1px solid @hr-border;
p:last-child {
margin-bottom: 0;
}
// Special formatting for the source of the quote
p.source {
font-weight: bold;
margin-left: 3em;
&:before {
content: '\2014 \00A0'; // EM DASH, NBSP
}
}
// Special formatting for complementary information
p.complementary {
font-family: "Roboto", sans-serif;
margin-left: 1.5em;
}
}
}
// ----------------------------------------------------------------------------
// Overview pages (like "about", "contribute", ...
// ----------------------------------------------------------------------------
body.overview #content {
.toplevel;
h2 {
text-align: center;
margin-top: (@line-height-computed * 3);
margin-bottom: @line-height-computed;
}
ul {
.list-no-style;
.make-row;
li {
.make-md-column(6);
display: grid;
grid-template-columns: 1fr 4fr;
grid-column-gap: 10px;
margin-top: 20px;
@media (min-width: @screen-md-min) {
&:nth-child(odd) {
clear: both;
}
}
img {
padding: 5px;
}
h3 {
margin-top: 0;
}
}
}
}
// ----------------------------------------------------------------------------
/* Testimonials divs */
.testimonial {
overflow: auto;
clear: both;
}
.testimonial img {
float: left;
margin-right: 10px;
}
/* news archive */
.events .entry,
.archivenews {
margin-bottom: 56px;
h3 {
line-height: 1.2;
margin-bottom: 4px;
margin-top: 0;
}
p {
font-size: 0.9em;
}
}
.events .date,
.archivemeta {
margin-bottom: 10px;
}
#id-add-an-event + p {
margin-bottom: 56px;
}
.events .date,
ul.archivemeta,
ul.archivetaglist {
color: #999;
font-size: 0.9em;
padding-left: 0;
}
ul.archivemeta li {
display: inline-block;
padding: 0 0.15em;
}
ul.archivemeta li:first-child {padding-left: 0; }
ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
.archiveauthor { margin: 0 0.25em; }
ul.archivetaglist {
margin-bottom: 0;
li {
display: inline-block;
margin-right: .75em;
padding: 0;
}
}
/* donate */
#donate-fsfe {
table {
.table;
.table-hover;
}
form {
.form-group input {
.form-control;
max-width: 25em;
}
#donate-validate {
.btn;
.btn-lg;
.btn-success;
margin-bottom: 1em;
}
}
}
/* thank donors */
.thank-donors {
table {
.table;
.table-striped;
}
}
/* Android campaign style */
#hello-free-droid {
background: url('/campaigns/android/robot.png') no-repeat top left transparent;
height: 200px;
width: 230px;
float: left;
margin-left: -6em;
margin-right: 1.5em;
@media (min-width: @screen-md-min) {
position: absolute;
margin-left: -200px;
margin-top:-10em;
}
img {display: none;}
}
/* Valentine for ILOVEFS style */
.valentine-ilovefs {
#logo {
background: url(/graphics/logov.svg) top left no-repeat;
}
#followup {
background: url(/graphics/ribbonv.svg) no-repeat 100% -40px @body-bg;
@media (min-width: @screen-sm-min) {
background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
}
}
}
/* Planet style */
.planet #motto {
clear: none;
font-size: 1em;
text-align: left;
position: absolute;
}
#planet-sources a {
display: inline-block;
width: 90%;
}
#planet-sources a:before {
content: "→ ";
}
#planet-posts {
.daygroup {
h2:first-child {
color: @brand-strong;
}
.blogitem {
padding-bottom: 3em;
margin-bottom: 3em;
}
}
}
/* wiki */
.wiki #motto {
.planet #motto;
}
.wiki #direct-links {
visibility: visible;
a {
display:inline-block;
}
}
.wiki #text h1 {
color: @brand-strong;
}
@import "fonts.less";
@import "font-icon-no-js.less";
/* PDFreaders buglist */
tr.highlighted {
background-color: rgb(208,244,0);
}
/* FSFE Shop (/order) */
table.merchandise {
tr {
border-bottom: 1px solid #ddd;
&:last-child {
border-bottom: medium none;
}
}
td {
padding: 10px 0;
&.image {
width: 25%;
min-width: 250px;
img {
max-height: 120px;
margin: 5px;
}
}
&.description {
width: 60%;
}
&.quantity {
text-align: right;
width: 15%;
min-width: 100px
}
@media (max-width: @screen-xs-max) {
&.image, &.description, &.quantity {
display: block;
width: auto;
}
&.image {
padding-bottom: 0;
}
&.description {
padding: 0;
}
&.quantity {
padding-top: 0;
}
}
}
.tooltip-anchor {
color: #236892;
position: relative;
}
.tooltip-content {
color: black;
text-align: center;
width: 7em;
padding: .5em;
background-color: #85bfe2;
border: 1px solid black;
position: absolute;
right: 0;
bottom: 2em;
z-index: 1;
visibility: hidden;
img {
width: 100%;
}
}
.tooltip-anchor:hover .tooltip-content {
visibility: visible;
}
}
form.thankyou {
margin-bottom: 10px;
}
/* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
.share-buttons.bottom {
margin: 4em 0 -2em 0;
}
.share-buttons-top {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.share-buttons-sidebar {
padding-left: 2rem;
}
.share-button-top,
.share-button-sidebar,
.share-buttons.bottom a.button,
.share-buttons.bottom button.button,
.share-buttons.bottom label.button {
background-position: left 5px center;
background-repeat: no-repeat;
background-size: 20px auto;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: normal;
line-height: normal;
margin: 2.5px 5px 2.5px 0;
min-width: 100px;
opacity: 0.9;
padding: 7px 7px 7px 30px;
text-align: center;
text-decoration: none;
vertical-align: top;
}
.share-button-top,
.share-buttons.bottom,
.share-buttons-sidebar {
font-size: .7em;
}
.share-buttons-top,
.share-buttons-sidebar,
.share-buttons.bottom {
a:hover {
text-decoration: none;
}
.share-rss {
background-color: #f4a000;
background-image: url("/graphics/services/rss_white.png");
}
.share-rss:hover {
background-color: #f78200 !important;
}
.share-mail {
background-color: #6e6e6e;
background-image: url("/graphics/services/mail_white.png");
}
.share-mail:hover {
background-color: #272727 !important;
}
.share-mastodon {
background-color: #2b90d9;
background-image: url("/graphics/services/mastodon_white.png");
}
.share-mastodon:hover {
background-color: #1060a9 !important;
}
.share-diaspora {
background-color: #404040;
background-image: url("/graphics/services/diaspora_white.png");
}
.share-diaspora:hover {
background-color: #101010 !important;
}
.share-facebook {
background-color: #3b5998;
background-image: url("/graphics/services/facebook_white.png");
}
.share-facebook:hover {
background-color: #143271 !important;
}
.share-twitter {
background-color: #55acee;
background-image: url("/graphics/services/twitter_white.png");
}
.share-twitter:hover {
background-color: #338acc !important;
}
.share-support {
background-color: #202d79;
background-image: url("/graphics/services/fsfe_white.png");
padding-left: 25px;
&:hover {
background-color: #0a1763 !important;
}
}
}
.share-buttons.bottom .share-gplus {
background-color: #d34836;
background-image: url("/graphics/services/gplus_white.png");
}
.share-buttons.bottom .share-gplus:hover {
background-color: #b12614 !important;
}
.share-buttons.bottom .share-flattr {
background-color: #7ea352;
background-image: url("/graphics/services/flattr_white.png");
}
.share-buttons.bottom .share-flattr:hover {
background-color: #5a7f2e !important;
}
.share-buttons.bottom .share-reddit {
background-color: #ff5700;
background-image: url("/graphics/services/reddit_white.png");
}
.share-buttons.bottom .share-reddit:hover {
background-color: #dd3500 !important;
}
.share-buttons.bottom .share-gnusocial {
background-color: #a22430;
background-image: url("/graphics/services/gnusocial_white.png");
}
.share-buttons.bottom .share-gnusocial:hover {
background-color: #850713 !important;
}
.share-buttons.bottom .share-hnews {
background-color: #ff6600;
background-image: url("/graphics/services/hackernews_white.png");
}
.share-buttons.bottom .share-hnews:hover {
background-color: #dd3500 !important;
}
/* Share buttons form layout and behaviour hacks */
.share-buttons input[type="radio"],
.share-buttons input[type="radio"] + span,
.share-buttons input[type="checkbox"],
.share-buttons input[type="checkbox"] + span {
display: none;
}
.share-buttons input[type="radio"]:checked + span,
.share-buttons input[type="checkbox"]:checked + span {
position: absolute;
margin-top: 3.5em;
margin-left: -10em;
padding: .5em;
z-index: 3;
background-color: #333;
border-radius: .5em;
display: inline-block;
}
.share-buttons input[type="radio"]:checked + span:before,
.share-buttons input[type="checkbox"]:checked + span:before {
content: '';
position: absolute;
top: -1em;
height: 0em;
width: 0em;
border-bottom: 1em solid #333;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
z-index: 3;
}
.share-buttons input[type="radio"] + span > * {
vertical-align: middle;
}
.share-buttons input[type="radio"] + span > button {
margin: 2.5px 0 2.5px 5px;
min-width: 4em;
padding: .25em;
font-weight: normal;
font-size: 1em;
line-height: normal;
}
.share-buttons input[type="radio"] + span > label {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: rgba(0, 0, 0, .5);
}
/* Separate share buttons form from possibly floating content */
form.share-buttons {
clear: both;
}
/* Free Your Andoid pages */
video#freeyourandroid {
max-width: 500px;
}
.news-sidebar {
// there is no sidebar on mobile
display: none;
}
@media (min-width: @screen-md-min) {
.news-sidebar {
display: block;
padding-top: 5.1rem;
}
.news-follow-us {
display: none;
}
}
.more-news {
display: flex;
flex-direction: column;
gap: .75em;
margin-top: 2rem;
a.learn-more {
font-size: 1.3em;
font-weight: bold;
line-height: 1.5;
white-space: nowrap;
}
@media (min-width: @screen-sm-min) {
flex-direction: row;
gap: 0;
justify-content: space-between;
a.learn-more {
line-height: 1;
}
}
}
#formnl {
select {
display: inline-block;
height: 45px;
line-height: 45px;
margin-right: 10px;
width: auto;
}
#submit {
.btn;
.btn-block;
.btn-primary;
display: inline-block;
font-size: 21px;
line-height: 31px;
padding: 6px 12px;
width: auto;
}
}
.home-order-image-container {
display: block;
margin-bottom: 10px;
text-align: center;
.home-order-image {
width: 80%;
}
}
.home-shop-block {
margin-bottom: 50px;
}
.home-newsletter-label {
margin-top: 30px;
}
@import "pages/spreadtheword";