fsfe-website/look/fsfe.less

@import "style";
@import "elements/figure";
@import "elements/podcast";
@import "elements/sharebuttons";
@import "elements/people";
@import "pages/frontpage";
@import "pages/news";
@import "pages/interview";
@import "pages/spreadtheword";
@import "pages/freesoftware";

/* 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;
    }
}

img.signatory-logo {
    padding: 10px;
}

.newsdate {
  font-size: .875em;
  color: #888;
  margin-right: 1ex;
}


// ----------------------------------------------------------------------------
// 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;
    }

    .icon-grid;

}


/* Icon grid used for overview pages, but can also be used stand-alone in a div */

.icon-grid {
      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;
            }
        }
    }
}

/* make the icons smaller */
.icon-grid.icons-sm {
    li {
        @media (min-width: @screen-xs-min) {
            img {
                max-width: 50% !important;
                margin: 0 auto;
            }
        }
    }
}

/* move all icons in the middle */
/* not used currently but perhaps a nice option */
.icon-grid.icons-middle {
    li {
      @media (min-width: @screen-md-min) {
          &:nth-child(odd) {
              grid-template-columns: 4fr 1fr;

              div {
                order: 1;
                text-align: right;
              }
              img {
                order: 2;
              }
          }
      }
    }
}

// ----------------------------------------------------------------------------


/* Testimonials divs */

.testimonial {
    overflow: auto;
    clear: both;
}

.testimonial img {
    float: left;
    margin-right: 10px;
}


/* 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;
        }
    }
}

@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;
}


/* 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;
    }
}

#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;
    }

}