fsfe-website/fsfe.org/look/style.less

1221 lines
22 KiB
Plaintext
Raw Permalink 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 "bootstrap/bootstrap.less";
// ============================================================================
// very generic elements
// ============================================================================
body {
@media (min-width: @screen-lg-min) {
font-size: ceil(@font-size-base * 1.1428); // ~16px
}
}
hr {
clear: both;
}
.list-no-style {
list-style-type: none;
margin: 0;
padding: 0;
}
.quote {
font-family: @font-family-serif;
}
.fr q, .el q {
quotes: "« " " »" "“" "”";
}
.de q {
quotes: "„" "“" "," "";
}
q, .en q {
.quote;
quotes: "“" "”" "" "";
}
.action a, .action a:hover{
.btn;
.btn-lg;
.btn-primary;
}
.n {
.hide;
}
/* Typography */
h1, .h1 {
.page-header;
color: @brand-strong;
@media (max-width: @screen-xs-max) {
margin-top: 20px;
}
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
font-weight: 400;
}
// Inherit the non-standard font settings into form controls.
.form-control, .btn {
font-weight: inherit;
font-size: inherit;
height: auto;
}
// Override Bootstrap's default of having all table cells top-aligned
.table {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
vertical-align: middle;
}
}
}
}
// ============================================================================
// Page structure and grids
// ============================================================================
// ----------------------------------------------------------------------------
// Translation selector
// ----------------------------------------------------------------------------
nav#translations {
.collapse;
.fade;
background: @body-bg;
border-bottom: 1px solid @gray-light;
position: absolute;
width: 100%;
z-index: 1000;
transition: display 0.15s linear 0s, opacity 0.15s linear 0s;
a.close {.pull-right;.make-md-column(1);}
a.contribute-translation {
.make-xs-column(12);
.make-md-column(2);
}
ul {
.list-no-style;
.make-xs-column(12);
.make-md-column(9);
}
li {
display: inline-block;
margin-right: .5em;
}
li:before {
content: " ";
}
}
.no-js nav#translations {
.collapse.in;
.fade.in;
position: relative;
font-size: 0.8em;
a.close {display: none;}
}
// ----------------------------------------------------------------------------
// Page header
// ----------------------------------------------------------------------------
header#top {
.container;
@media (max-width: @screen-xs-max) {
padding: 0;
}
}
div#masthead {
.pull-left;
padding: 10px;
width: 100%;
background-color: @body-bg;
margin-right: -100%; // Leave as much space for the menu as it needs.
@media (min-width: @screen-sm-min) {
background-color: inherit;
margin-top: 9px;
margin-bottom: 19px;
margin-left: 6px;
}
#logo {
display: block;
height: 85px;
width: 158px;
background: url(/graphics/logo_transparent.svg) top left no-repeat;
@media (max-width: @screen-xs-max) {
height: 50px;
width: 93px;
background-size: contain;
}
span {
display: none;
}
}
}
nav#menu {
text-align: right;
@media (max-width: @screen-xs-max) {
background-color: @body-bg;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
@media (min-width: @screen-sm-min) {
position: relative;
top: 2px;
}
p {
display: none;
}
ul#direct-links {
margin-bottom: 0;
li {
display: none;
}
}
// Invisible checkbox to show/hide the burger menu
input {
display: none;
}
// Burger menu button
label {
.btn;
&:hover {
.btn-primary;
}
@media (min-width: @screen-sm-min) {
display: none;
}
}
div#menu-list {
@media (max-width: @screen-xs-max) {
background-color: @gray-lighter;
border: 1px solid @gray-light;
border-radius: @border-radius-base;
box-shadow: 4px 4px 10px 0 @gray-light;
display: none;
}
ul {
@media (max-width: @screen-xs-max) {
.list-unstyled;
text-align: center;
&:last-child {
margin-bottom: 0;
}
}
@media (min-width: @screen-sm-min) {
.list-inline;
.pull-right;
margin-left: 1em;
}
li {
padding: 0;
a {
.btn;
@media (max-width: @screen-xs-max) {
border-radius: 0;
display: block;
width: 100%;
}
}
a:hover {
.btn-primary;
}
}
li#menu-donate {
a {
.btn-success;
background-color: @brand-donation;
border-color: @brand-donation-border;
}
a:hover, a:active, a:focus {
.btn-success;
background-color: darken(@brand-donation, 5%)!important;
border-color: @brand-donation-border!important;
}
}
}
ul#menu-sections {
@media (min-width: @screen-sm-min) {
position: absolute;
top: 60px;
right: 0;
}
li a {
@media (min-width: @screen-lg-min) {
.btn-lg;
}
}
}
}
input:checked ~ div#menu-list {
display: block;
}
}
.no-js nav#menu {
ul {
li#menu-translations {
display: none;
}
}
}
// ----------------------------------------------------------------------------
// Translations notifications
// ----------------------------------------------------------------------------
div#notifications {
.container;
}
// ----------------------------------------------------------------------------
// Page body
// ----------------------------------------------------------------------------
/* grid */
.article {
div#content {
.make-xs-column(12);
.make-md-column(8);
padding-left: 0;
}
aside#sidebar {
.make-xs-column(12);
.make-md-column(4);
padding-right: 0;
}
}
main, aside#followup {
.container;
background: @body-bg;
margin: 1em auto;
padding: 1.5em;
font-size: 1.1em;
@media (min-width: @screen-sm-min) {
padding: 3em;
box-shadow: 0 .4em 1em rgb(200,200,200);
}
}
main {
padding-top: 0;
@media (min-width: @screen-sm-min) {
padding-top: 1em;
}
p {
.hyphens(auto);
}
footer#tags {
.small;
margin: 3em 0 -2em 0;
clear: both;
h2 {
.text-muted;
font-weight: normal;
font-size: inherit;
margin-right: 5px;
display: inline;
&::after {
content: ":";
}
}
ul.tags {
.list-inline;
display: inline;
li {
white-space: nowrap;
a {
padding: 4px;
border-radius: 4px;
background: lighten(@brand-primary,40%);
margin-bottom: .3em; /* in case there are 2 lines of tags */
display: inline-block;
}
}
}
}
form.share-buttons {
// Modify spacing originally set in upstream CSS.
margin-top: 4em;
margin-bottom: -2em;
}
footer.notice {
.clearfix;
clear: both;
margin: 3em -1.5em -3em;
background: @gray-lighter;
color: @gray;
padding: 1em;
a {color: @gray-dark;}
@media (min-width: @screen-sm-min) {
margin: 3em -3em -3em;
}
}
footer.copyright.notice {
min-height: 30px;
a {color: @gray;}
}
footer.creativecommons {
background: url(/graphics/cc-logo.png) 2em 50% no-repeat @gray-lighter;
padding-left: 150px;
}
}
aside#sidebar {
color: @gray-light;
padding: 2em 0;
ul {
.list-no-style;
margin-bottom: 1em;
li {
border-bottom: 1px solid @gray-lighter;
padding: .3em 0;
}
}
}
/* elements inside content */
#category {
background: lighten(@brand-primary,40%);
display: block;
width:42%;
padding: .5em;
@media (min-width: @screen-sm-min) {
margin-top: -2em;
}
a:before {
content: " ";
}
}
#article-metadata {
font-weight: 300;
margin-bottom: 1.5em;
img {
height: 24px;
margin: -0.2em 0.2em -0.2em;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
time.dt-updated:after {
content: ", ";
}
time.dt-updated:last-child:after {
content: ".";
}
}
.highlight-text {
font-weight: 300;
font-size: 1.1em;
strong {
font-weight: 500;
}
}
#introduction {
p {
.highlight-text;
}
}
div#content {
aside {
@media (min-width: @screen-md-min) {
float: right;
margin-left: 100%;
position: absolute;
p {
width: 100%;
min-width: 320px;
max-width: 340px;
}
}
p {
border-left: 1px solid @brand-primary;
padding-left: 1em;
font-size: 0.9em;
}
}
pre, pre code {
white-space: pre;
}
pre {
font-size: 1em;
padding-left: 3em;
border-style: dotted;
border-width: 1px 1px 1px 0px;
border-radius: 0;
overflow-x: auto;
code {
font-size: 0.95em;
}
}
pre.term {
background: #0C141F;
color: #E6FFFF;
code:before {
content: "$ ";
}
}
img {
max-width: 100%;
}
.captioned {
text-align: center;
img {
margin: 0 auto;
display: block;
box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.3)
}
header, footer, img + p {
padding: 10px 15px;
}
header, footer {
text-align: left;
display: block;
p {
margin: 5px;
}
}
footer, img + p {
background: @gray-lighter;
font-weight: 300;
}
img + p {
display: inline-block;
}
}
.captioned.center-block, .captioned.center {
margin-left: auto;
margin-right: auto;
}
.captioned.right {
margin-left: 1.5em;
margin-right: 0;
}
.captioned.left {
margin-right: 1.5em;
margin-left: 0;
}
.p-summary {
font-size: 1.2em;
font-weight: 300;
}
.blockHighlight {
.blockQuote;
padding-right: 20px;
}
}
.fsfe-form {
label.required {
.star {
font-weight: 400;
}
}
label + input, label + textarea {
.form-control;
margin-bottom: 1.25em;
& + .help-block {
margin-top: -1em;
margin-bottom: 1.25em;
}
}
textarea {
min-height: 150px;
}
button, input[type="submit"] {
.btn-lg;
display: block;
margin: 1em 0;
}
}
/* style specific to certain pages */
.toplevel {
#category {
display: none;
}
h1 {
background: lighten(@brand-primary,20%);
color: #FFF;
text-shadow: 0px 1px 2px @brand-strong;
display: block;
min-width: 200px;
padding: .5em;
margin: 0 -.5em 0.5em;
border: 0;
@media (min-width: @screen-sm-min) {
width: 50%;
margin: -1em 0 1em 0;
}
}
}
.full-width {
/* For very particular pages where you need as wide as possible */
main {
width: 100%;
}
}
.frontpage, .subsite, .full-width {
div#content {
max-width: none;
}
}
.article {
div#content {
display: inline-block;
.p-name {
color: @brand-strong;
}
}
/* blocks that stand out */
.standout {
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-left: -1.5em;
@media (min-width: @screen-sm-min) {
margin-left: -3em;
}
}
.standout-text {
.standout;
padding-left: 1.5em;
@media (min-width: @screen-sm-min) {
padding-left: 3em;
}
}
blockquote, .blockQuote, .blockHighlight,pre {
.standout-text;
}
.captioned {
.standout;
}
.captioned.center-block, .captioned.center {
margin-left: auto;
margin-right: auto;
}
.captioned.right {
margin-left: 1.5em;
margin-right: 0;
}
.captioned.left {
margin-right: 1.5em;
margin-left: 0;
}
}
/* subpages "backward compatibility" */
div#subpages {
.make-row();
padding-bottom: 1em;
.half {
.make-sm-column(6);
}
}
h2#subpages, h3#subpage, h4#subpages {
display: none;
}
h2#subpages.show-heading,
h3#subpages.show-heading,
h4#subpages.show-heading {
display: block;
}
ul#subpages, h2#subpages + ul, h3#subpages + ul, h4#subpages + ul, ul.subheadings, ul.overview {
clear: both;
.subsite #content .subheadings;
li {
.make-sm-column(6);
}
@media (min-width: @screen-sm-min) {
li {
display: inline-block;
}
}
}
.subsite {
.toplevel;
#content {
.make-row;
#introduction {
.make-xs-column(12);
.make-sm-column(4);
}
#introduction + .subheadings {
.make-xs-column(12);
.make-sm-column(8);
}
.subheadings, .subheadings + .subheadings {
clear: none;
.make-row;
.list-no-style;
padding: 0 0 2em 0;
li {
.make-xs-column(12);
.make-sm-column(6);
}
@media (min-width: @screen-xs-min) {
li:nth-child(odd) {
clear: both;
}
}
li ul {
padding: 0;
}
li ul li {
float: none;
width: 100%;
display: block;
padding: 0;
a:before {
content: " ";
}
}
}
.subheadings + .subheadings {
clear: both;
li {
.make-xs-column(6);
.make-sm-column(4);
}
@media (min-width: @screen-xs-min) {
li:nth-child(odd) {
clear: none;
}
li:nth-child(3n+4) {
clear: both;
}
}
}
}
#introduction {
padding-top: 1.5em;
.image {
.pull-left;
max-width: 30%;
margin-right: .5em;
}
}
}
// ----------------------------------------------------------------------------
// Followup boxes
// ----------------------------------------------------------------------------
aside#followup {
.clearfix();
h2 {
padding:0;
}
form {
display: inline-block;
}
input#yourname,
input#email {
margin: 3pt 1em 3pt 0;
max-width: 18em;
}
a.btn {
.btn-primary;
}
@media (min-width: @screen-sm-min) {
padding: 3em 3em 3em 2em;
}
}
aside#followup.subscribe-nl {
h2 {
.make-md-column(6);
.make-lg-column(5);
margin: 0 0 10px;
}
form {
.make-md-column(6);
.make-lg-column(7);
}
input#yourname,
input#email {
max-width: 18em;
}
}
@media (min-width: @screen-md-min) {
aside#followup.subscribe-nl {
h2 {
margin: 0;
top: 5px;
}
}
}
aside#followup.join,
aside#followup.support,
aside#followup.donate {
h2 {
.make-sm-column(4);
text-align: center;
}
p {
/*.make-sm-column(8);*/
padding: 0;
padding-top: 1em;
font-size: 2.3rem;
font-weight: bold;
}
a.btn {
margin-top: 8px;
}
}
aside#followup.donate {
p {
text-align: center;
}
}
aside#followup.join {
p {
display: table-cell;
}
}
// ----------------------------------------------------------------------------
// Page footer
// ----------------------------------------------------------------------------
nav#direct-to-top {
.container;
a {
.pull-right;
text-decoration: none !important;
&:before {
content: "▴";
padding-right: 0.5ex;
text-decoration: none !important;
}
}
}
body > footer {
background: @body-bg;
box-shadow: 1em 0 1em 1em @body-bg;
margin: 40px 0 0 0;
padding: 20px 0;
width: 100%;
@media (max-width: @screen-xs-max) {
padding: 10px;
}
div#page-info {
.container;
// .make-row; can't use .container and .make-row on same element
div {
.make-xs-column(12);
.make-sm-column(4);
}
}
}
// ============================================================================
// Other elements
// ============================================================================
/* Localmenus / nav-tabs */
ul.nav + p {
margin-top: 1em;
}
/* trivia */
form input#yourname,
form input#email {
.form-control;
max-width: 25em;
display: inline-block;
}
button, input[type="submit"] {
.btn;
.btn-default;
.btn-primary;
}
a.learn-more {
font-size: 1.2em;
font-weight: 300;
line-height: 1;
border-bottom: 1px dotted @brand-primary;
font-variant: small-caps;
text-transform: lowercase;
padding-right: 1em;
position: relative;
&:hover {
text-decoration: none;
border-bottom-style: solid;
}
&:after {
position: absolute;
right: .3em;
top: .1em;
content: " ▸";
opacity: 0.8;
transition: all 150ms linear;
}
&:hover:after {
right: 0;
content: " ▸";
opacity: 1;
}
}
.big-donate, .big.donate {
.btn;
.btn-lg;
.btn-block;
.btn-success;
font-size: 1.4em;
}
.supporter-text {
margin-top: 5px;
}
.small-donate, .small.donate {
.btn;
.btn-sm;
.btn-success;
}
.alert.red {
.alert-danger;
}
.alert.green {
.alert-success;
}
.alert.yellow {
.alert-warning;
}
.warning {
.alert;
.fade.in;
}
/* People's personal pages */
.bio {
.article;
}
/* backward compatibility with old fsfe.org's generic.css */
.left { .pull-left; margin-right: 1em; margin-left: 0; }
.right { .pull-right; margin-left: 1em; margin-right: 0; }
.center { text-align: center; }
#introduction .image img { float: left; margin-right: 1em;}
.grid-50-50 {
.make-row;
.box {
.make-sm-column(6);
}
}
/* in spreadtheword */
.margin-vertical {
.make-row;
margin: 1em 0;
.grid-30 {
.make-sm-column(4);
}
.grid-70 {
.make-sm-column(6);
}
.grid-60 {
.make-sm-column(5);
}
}
#orderpromo {
background: rgb(223, 240, 216);
padding: 0.1em 1em 1em;
.formlabel {
display: block;
}
}
.compare {
.clear {
.make-row;
.left, .right {
margin-right: 0;
margin-left: 0;
float: none;
}
.grid-20 {
.make-xs-column(2);
}
.grid-40 {
.make-xs-column(4);
}
.grid-50 {
.make-xs-column(6);
}
.grid-60 {
.make-xs-column(8);
}
.grid-80 {
.make-xs-column(10);
}
}
}
/* in EIFv2 analysis */
#eifv2-track {
.clear {
font-size: 0.9em;
.make-row;
}
.grid-50 {
.make-md-column(6);
}
blockquote {
margin-left: 0;
p { font-size: 0.9em; }
}
}
/* Signature pictures */
.signature-logo img {
height: auto;
max-height: 130px;
max-width: 150px !important;
}
.signature-table {
version {
display: none;
}
table {
.table;
.table-striped;
margin-top: 40px;
}
img {
height: auto;
max-height: 65px;
max-width: 120px !important;
}
}
.signature-table-orgs {
ul {
display: block;
position: relative;
list-style: none;
text-align: center;
padding: 0;
}
ul li {
display: inline-block;
position: relative;
list-style: none;
vertical-align: middle;
}
ul li a {
display: block;
position: relative;
max-width: 120px;
max-height: 80px;
min-width: 120px;
min-height: 80px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transform: scale(0.8);
opacity: 1;
transition: opacity .5s, transform .5s, background-color .5s, filter .5s;
}
ul li a:hover {
opacity: 1;
transform: scale(0.9);
z-index: 5;
}
#larger {
max-width: 150px;
max-height: 100px;
min-width: 150px;
min-height: 100px;
}
}
/* statement block with lighter background and normal font */
blockquote#statement {
background-color: rgba(116, 140, 156, 0.1);
}
blockquote#statement p {
font-family: "Roboto",sans-serif;
font-weight: unset;
}
/* -------------------------------------------------------------------- */
/* Interviews */
/* -------------------------------------------------------------------- */
.interview-question {
font-style:italic;
font-weight:bold;
}
/* HIDE SOMETHING */
.special {
display: none;
}