Reinhard Müller
86a4ac3aef
All checks were successful
continuous-integration/drone/push Build is passing
1465 lines
27 KiB
Plaintext
1465 lines
27 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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Classes to place a decorative image beside a block element
|
||
// ----------------------------------------------------------------------------
|
||
|
||
// Common styles for images on the left or right side
|
||
.with-image() {
|
||
.make-row();
|
||
|
||
// The image must be the first child of the .with-image-* container, and
|
||
// takes 1/4 of the total width. On XS sized screens, it will go above the
|
||
// text.
|
||
> img:first-child {
|
||
display: block;
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
.make-sm-column(3);
|
||
@media (max-width: @screen-xs-max) {
|
||
width: 180px; // includes grid padding of 30px!
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
// All other children of the .with-image-* container take 3/4 of the total
|
||
// width.
|
||
> :nth-child(n+2) {
|
||
.make-sm-column(9);
|
||
}
|
||
}
|
||
|
||
// Image on the left side of text
|
||
.with-image-left {
|
||
.with-image();
|
||
|
||
// The second child element will go beside the image. All further children
|
||
// (starting with #3) need an explicit offset to go below the second.
|
||
> :nth-child(n+3) {
|
||
.make-sm-column-offset(3);
|
||
}
|
||
}
|
||
|
||
// Image on the right side of text
|
||
.with-image-right {
|
||
.with-image();
|
||
|
||
// The image is pushed to the right side...
|
||
> img:first-child {
|
||
.make-sm-column-push(9);
|
||
}
|
||
|
||
// ...and the text pulled to the left side.
|
||
> :nth-child(2) {
|
||
.make-sm-column-pull(3);
|
||
}
|
||
|
||
// Need an explicit clear below the image
|
||
> :nth-child(3) {
|
||
clear: both;
|
||
}
|
||
}
|
||
|
||
|
||
// ============================================================================
|
||
// Page structure and grids
|
||
// ============================================================================
|
||
|
||
#translations, #top, #notifications, #main, #followup, #page-info {
|
||
.container;
|
||
}
|
||
|
||
div#subpages, {
|
||
.make-row();
|
||
padding-bottom: 1em;
|
||
.half {
|
||
.make-sm-column(6);
|
||
}
|
||
}
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Translation selector
|
||
// ----------------------------------------------------------------------------
|
||
|
||
#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 #translations {
|
||
.collapse.in;
|
||
.fade.in;
|
||
position: relative;
|
||
font-size: 0.8em;
|
||
|
||
a.close {display: none;}
|
||
}
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Page header
|
||
// ----------------------------------------------------------------------------
|
||
|
||
#top {
|
||
@media (max-width: @screen-xs-max) {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
#masthead {
|
||
margin: 19px 16px 29px 16px;
|
||
|
||
@media (max-width: @screen-xs-max) {
|
||
margin: 0;
|
||
background-color: @body-bg;
|
||
padding: 10px;
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
.pull-left;
|
||
}
|
||
}
|
||
|
||
#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;
|
||
}
|
||
}
|
||
|
||
#motto {
|
||
color: @brand-strong;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
padding-left: 52px;
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
br {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: @screen-xs-max) {
|
||
padding-left: 30px;
|
||
}
|
||
}
|
||
|
||
#menu {
|
||
text-align: right;
|
||
|
||
@media (max-width: @screen-xs-max) {
|
||
background-color: @body-bg;
|
||
padding: 5px 10px 10px 10px;
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
.pull-right;
|
||
}
|
||
|
||
p {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
#direct-links {
|
||
.list-inline;
|
||
.clearfix;
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
li {
|
||
display: none;
|
||
padding: .5em;
|
||
|
||
.fa {
|
||
padding-right: .3em;
|
||
}
|
||
}
|
||
|
||
#direct-to-menu-list {
|
||
@media (max-width: @screen-xs-max) {
|
||
display: inline-block;
|
||
.pull-left;
|
||
font-size: 1.3em;
|
||
}
|
||
}
|
||
|
||
#direct-to-translations, #direct-to-login {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.no-js #direct-links {
|
||
#direct-to-translations, #direct-to-menu-list {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
#menu-list {
|
||
.list-no-style;
|
||
.collapse;
|
||
padding-bottom: 1.5em;
|
||
|
||
@media (max-width: @screen-xs-max) {
|
||
display: block;
|
||
margin-top: 10px;
|
||
padding-bottom: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
.collapse.in;
|
||
padding-bottom: 0.5em;
|
||
}
|
||
|
||
li {
|
||
display: inline-block;
|
||
|
||
a {
|
||
.btn;
|
||
font-weight: 400;
|
||
|
||
@media (min-width: @screen-lg-min) {
|
||
.btn-lg;
|
||
}
|
||
}
|
||
a:hover {
|
||
.btn-primary;
|
||
background-color: @brand-strong-semialpha;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-js #menu-list {
|
||
.collapse.in;
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
padding-bottom: 0.5em;
|
||
}
|
||
}
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Page body
|
||
// ----------------------------------------------------------------------------
|
||
|
||
/* grid */
|
||
.article {
|
||
#content {
|
||
.make-xs-column(12);
|
||
.make-md-column(8);
|
||
padding-left: 0;
|
||
}
|
||
#sidebar {
|
||
.make-xs-column(12);
|
||
.make-md-column(4);
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
#main, #followup {
|
||
background: @body-bg;
|
||
margin: 1em auto;
|
||
padding: 1.5em;
|
||
font-size: 1.1em;
|
||
box-shadow: 0 .4em 1em rgb(200,200,200);
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
padding: 3em;
|
||
}
|
||
}
|
||
|
||
#main {
|
||
padding-top: 1em;
|
||
|
||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||
-moz-hypens: manual;
|
||
-webkit-hyphens: manual;
|
||
hyphens: manual;
|
||
}
|
||
|
||
p {
|
||
-moz-hyphens: auto;
|
||
-webkit-hyphens: auto;
|
||
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;
|
||
}
|
||
}
|
||
|
||
#content {
|
||
max-width: 99ex;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
#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;
|
||
margin: -2em 0 0;
|
||
|
||
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: ".";
|
||
}
|
||
}
|
||
|
||
#introduction {
|
||
p {
|
||
font-weight: 300;
|
||
font-size: 1.1em;
|
||
|
||
strong {
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
#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;
|
||
}
|
||
}
|
||
|
||
|
||
blockquote,
|
||
.blockQuote {
|
||
.quote;
|
||
border: 0;
|
||
padding-top: 20px;
|
||
padding-bottom: 20px;
|
||
/* does not work, weird: background-color: lighten(@brand-secondary, 77%);*/
|
||
background-color: rgba(116, 140, 156, 0.23);
|
||
|
||
p {
|
||
line-height: 1.35;
|
||
}
|
||
|
||
footer {
|
||
cite {
|
||
font-style: italic;
|
||
}
|
||
}
|
||
|
||
& + & {
|
||
margin-top: -1.3em;
|
||
}
|
||
}
|
||
|
||
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.2em 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 {
|
||
#content {
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
.article {
|
||
#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" */
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Condensed listing of news and events
|
||
// ----------------------------------------------------------------------------
|
||
|
||
ul.news-list, ul.event-list {
|
||
span.date {
|
||
.text-muted;
|
||
.small;
|
||
}
|
||
}
|
||
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Verbose listing of news and events
|
||
// ----------------------------------------------------------------------------
|
||
|
||
article.news, article.event {
|
||
border-bottom: 1px solid @gray-lighter;
|
||
margin-bottom: 10px;
|
||
|
||
p.meta {
|
||
.text-muted;
|
||
.small;
|
||
|
||
a {
|
||
color: inherit;
|
||
}
|
||
}
|
||
|
||
ul.tags {
|
||
.list-inline;
|
||
.text-muted;
|
||
.small;
|
||
|
||
li {
|
||
white-space: nowrap;
|
||
|
||
a {
|
||
color: inherit;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// In a "related news" section, display all but the first news items in a
|
||
// compressed form.
|
||
section#related-news article.news:nth-of-type(n+2) {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
|
||
h3 {
|
||
font-size: inherit;
|
||
margin-right: .5em;
|
||
display: inline;
|
||
}
|
||
|
||
p {
|
||
display: none;
|
||
}
|
||
|
||
// Make sure that there is no line break within the news date. The p.meta
|
||
// element also is responsible for the margin-bottom of the while item.
|
||
p.meta {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Followup boxes
|
||
// ----------------------------------------------------------------------------
|
||
|
||
#followup {
|
||
.clearfix();
|
||
|
||
h2 {
|
||
padding:0;
|
||
}
|
||
|
||
form {
|
||
display: inline-block;
|
||
}
|
||
|
||
input#email {
|
||
margin:0 1em;
|
||
max-width: 18em;
|
||
}
|
||
|
||
a.btn {
|
||
.btn-primary;
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
padding: 3em 3em 3em 2em;
|
||
}
|
||
}
|
||
|
||
#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);
|
||
}
|
||
}
|
||
|
||
@media (min-width: @screen-md-min) {
|
||
#followup.subscribe-nl {
|
||
h2 {
|
||
margin: 0;
|
||
top: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#followup.join,
|
||
#followup.support,
|
||
#followup.donate {
|
||
h2 {
|
||
.make-sm-column(4);
|
||
text-align: center;
|
||
}
|
||
|
||
p {
|
||
.make-sm-column(8);
|
||
padding: 0;
|
||
padding-top: 1em;
|
||
}
|
||
|
||
a.btn {
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Page footer
|
||
// ----------------------------------------------------------------------------
|
||
|
||
#direct-to-top {
|
||
.container;
|
||
|
||
a {
|
||
.pull-right;
|
||
text-decoration: none !important;
|
||
|
||
&:before {
|
||
content: "▴";
|
||
padding-right: 0.5ex;
|
||
text-decoration: none !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
#bottom {
|
||
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;
|
||
}
|
||
|
||
#page-info {
|
||
// .make-row; can't use .container and .make-row on same element
|
||
|
||
div {
|
||
.make-xs-column(12);
|
||
.make-sm-column(4);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// ============================================================================
|
||
// Other elements
|
||
// ============================================================================
|
||
|
||
/* footnotes */
|
||
|
||
a.fn {
|
||
bottom: 0.5em;
|
||
font-size: 0.7em;
|
||
position: relative;
|
||
}
|
||
|
||
h2#fn {
|
||
display: none;
|
||
}
|
||
|
||
h2#fn + ol {
|
||
border-top: 1px solid @gray-lighter;
|
||
font-size: 0.9em;
|
||
margin: 2em 0;
|
||
padding-top: 1em;
|
||
}
|
||
|
||
/* trivia */
|
||
|
||
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 donors page */
|
||
table#gold {
|
||
.table;
|
||
.table-striped;
|
||
.table-hover;
|
||
}
|
||
|
||
/* 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; }
|
||
}
|
||
}
|
||
|
||
|
||
/* AskYourCandidates - parties colors for their answers */
|
||
|
||
.question {
|
||
margin-bottom: 15px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.answer,
|
||
.question2,
|
||
.answer2 {
|
||
padding: 0.5em 1em;
|
||
text-align: justify;
|
||
}
|
||
|
||
.question2 {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
.answer2 {
|
||
margin-left: 2em;
|
||
}
|
||
|
||
.colorless {
|
||
background-color: rgb(238,238,238);
|
||
border-left: 10px solid rgb(170,170,170);
|
||
}
|
||
|
||
/* Germany */
|
||
|
||
.diegrüne {
|
||
background-color: rgb(200,255,200);
|
||
border-left: 10px solid rgb(0,139,0);
|
||
}
|
||
|
||
.cdu {
|
||
background-color: rgb(180,230,255);
|
||
border-left: 10px solid rgb(0,79,122);
|
||
}
|
||
|
||
.csu {
|
||
background-color: #B4E6FF;
|
||
border-left: 10px solid #00304A;
|
||
}
|
||
|
||
.spd {
|
||
background-color: rgb(255,200,200);
|
||
border-left: 10px solid rgb(255,0,0);
|
||
}
|
||
|
||
.dielinke {
|
||
background-color: rgb(255,198,255);
|
||
border-left: 10px solid rgb(139,28,98);
|
||
}
|
||
|
||
.piraten {
|
||
background-color: rgb(255,233,146);
|
||
border-left: 10px solid rgb(243,125,32);
|
||
}
|
||
|
||
.fdp {
|
||
background-color: rgb(255,255,200);
|
||
border-left: 10px solid rgb(255,255,0);
|
||
}
|
||
|
||
.oedp {
|
||
background-color: rgb(255,233,187);
|
||
border-left: 10px solid rgb(242,134,43);
|
||
}
|
||
|
||
.bayernpartei {
|
||
background-color: rgb(85,144,202);
|
||
border-left: 10px solid rgb(28,38,236);
|
||
}
|
||
|
||
.violetten {
|
||
background-color: rgb(124,62,139);
|
||
border-left: 10px solid rgb(210,0,255);
|
||
}
|
||
|
||
.afd {
|
||
background-color: #009EE0;
|
||
border-left: 10px solid #E40F27;
|
||
}
|
||
|
||
|
||
/* France */
|
||
|
||
.partisocialiste {
|
||
background-color: rgb(255,220,220);
|
||
border-left: 10px solid rgb(255,128,128);
|
||
}
|
||
|
||
.ump {
|
||
background-color: rgb(160,200,255);
|
||
border-left: 10px solid rgb(0,102,204);
|
||
}
|
||
|
||
.pcf {
|
||
background-color: rgb(255,200,200);
|
||
border-left: 10px solid rgb(221,0,0);
|
||
}
|
||
|
||
.prg, .mrc {
|
||
background-color: rgb(255,240,250);
|
||
border-left: 10px solid rgb(255,209,220);
|
||
}
|
||
|
||
.eelv {
|
||
background-color: rgb(200,255,200);
|
||
border-left: 10px solid rgb(0,255,0);
|
||
}
|
||
|
||
.nouveaucentre {
|
||
background-color: rgb(220,255,255);
|
||
border-left: 10px solid rgb(128,255,255);
|
||
}
|
||
|
||
.modem {
|
||
background-color: rgb(255,230,150);
|
||
border-left: 10px solid rgb(255,153,0);
|
||
}
|
||
|
||
.alliancecentriste {
|
||
background-color: rgb(255,235,200);
|
||
border-left: 10px solid rgb(245,222,179);
|
||
}
|
||
|
||
|
||
/* Signature pictures */
|
||
|
||
.signature-logo img {
|
||
height: auto;
|
||
max-height: 130px;
|
||
max-width: 150px !important;
|
||
}
|
||
|
||
.signature-table {
|
||
table {
|
||
.table;
|
||
.table-striped;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
table > tbody > tr > td {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
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;
|
||
}
|