Tobias Diekershoff
2d08de09e7
All checks were successful
continuous-integration/drone/push Build is passing
1221 lines
22 KiB
Plaintext
1221 lines
22 KiB
Plaintext
@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;
|
||
}
|