add up to 7 column (#1305)

add up to 7 column (#1305)

* add up to 7 column

* Fix screen > 2700

* use variable and fix comment

.list {
  width:100%;
  padding: 1% 2% 50px 2%;
  .flex();
  justify-content: space-around;
  flex-flow: wrap row;

  .list-item {
    min-height: initial;
  }

  & + .no-results {
    display: none;
  }
}

.list-item {
  position: relative;
  cursor: pointer;
  background-color: white;
  margin-top: 10px;
  outline: none;
  border-radius: 7px;
  min-height: 80px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: .2s ease-in-out;
  border: 2px solid rgba(88, 150, 165, 0.2);

  &:active {
    -webkit-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -moz-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -webkit-transition: .2s ease-in-out;
    transition: 0.2s ease-in-out;
    outline: none;
  }
  &:hover, &.highlight {
    background-color: #EFEFEF;
    transition: 0.1s ease-in-out;
    cursor: pointer;
  }

  @media @tablet {
    border-width: 1px;
  }
  @media @phone {
    border-width: 1px;
  }

  a {
    display: block;
    transition: 0.2s;
    font-weight: normal;
    height: 100%;
    word-wrap: break-word;
    color: #767676;
    padding: 10px;

    @media @phone {
      font-size: 1.1em;
      padding: 7px;
    }

    &:hover .list-item-title {
      color: teal;
      transition: 0.1s ease-in-out;
    }

    &:focus, &:hover {
      text-decoration: none;
      outline: none;
    }
  } /*list-item a*/

  .list-item-lang {
    opacity: 0.9;
    color: graytext;
    white-space: nowrap;
    font-weight: normal;
  }
  .activities {
    margin-top: 5px;
  }
  .list-item-title {
    font-weight: bold;
    color: graytext;
    margin-right: 5px;
    p {
      line-height: normal;
      display: block;
      margin: 0;
    }
  }

  .location {
    line-height: normal;
    margin-right: 5px;
  }

  .list-item-title-lang {
    .flex();
    align-items: center;
    margin-bottom: 5px;
  }
  .elevation, .waypoint-elevation .glyphicon {
    margin-top: -1px;
  }
  .list-item-info {
    margin: auto;
    height: 100%;
    width: 100%;
    font-size: 90%;
    text-decoration: none;
    color: #919191;
    font-weight: normal;
    .flex();
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-between;

    .quality, .orientations, .date,  .height-diff, .height-diff-difficulties, .elevation, .waypoint-elevation {
      white-space: nowrap;
      .glyphicon {
        margin-right: 3px;
      }
    }
    .elevation, .height-diff, .height-diff-difficulties, .orientations, .icon-rating, .rating {
      margin-right: 5px;
    }
    .icon-rating {
      font-size: 1.4em;
      margin-bottom: 5px;
    }
    .orientations, .height-diff, .height-diff-difficulties, .elevation {
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .global-rating {
      @media (min-width: @phone-max) {
        display: none;
      }
    }
    .full-rating {
      flex-wrap: wrap;
      .glyphicon {
        font-size: 1.3em;
        margin-left: -3px;
        margin-right: 3px !important;
      }
      .value {
        transition: .2s;
        &:hover {
          color: gold;
        }
      }
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .glyphicon, [class*="icon-"]:not(.activity):not(.waypoint-type) {
      color: @bright-green;
    }
  }/*list-item-info*/
  .show-more-activities:hover {
    color: teal;
  }
  .activities .activity {
    font-size: 3em;
    color: @C2C-orange;
    @media @phone {
      font-size: 2.5em;
    }
  }
  .set-main-waypoint {
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 3px 10px;
    max-height: 26px;
  }

  // .list-item.waypoints
  &.waypoints {

    .waypoint-type {
      font-size: 3em;
      color: @C2C-orange;
      margin-right: 0;
      @media @phone {
        font-size: 2.5em;
        margin-left: 10px;
      }
    }
    .list-item-info {
      flex-basis: 75%;

    }
    .waypoint-infos {
      .calc(width, "100% - 20px");
      .flex();
      align-items: baseline;
      flex-wrap: wrap;
    }
  }
  // .list-item.routes
  &.routes {
    .activities {
      margin-bottom: -5px;
    }
  }
  // .list-item.books
  &.books {
    .author {
      line-height: normal;
      font-size: 13px;
      .calc(width, "100% - 30px");
    }
    .glyphicon-pencil {
      color: #a9a9a9 !important;
    }
    .book-type {
      color: @bright-green;
    }
  }
  // .list-item.main-waypoint
  &.main-waypoint {
    border: 2px solid @bright-green;
  }
  // .list-item.images
  &.images  {
    min-height: 170px;
    a {
      .flex();
      flex-flow: wrap;
    }
    .list-item-info {
      align-self: flex-start;
    }
    .image {
      width: 100%;
      height: 150px;
      background-position: 50% 40%;
      background-repeat: no-repeat;
    }
  }
  // .list-item.outings
  &.outings {
    max-height: inherit !important;

    .icon-user {
      font-size: 3em;
      padding-right: 5px;
      float: left;
      font-size: 25px;
      color: #b2bcc4 !important;
    }
    .activities {
      margin-right: 5px;
    }
    .activity-author {
      .calc(width, "100% - 25px");
      .flex();
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .author-name {
      font-weight: bold;
    }
    .glyphicon-time {
      font-size: 14px;
    }
    .list-item-info {
      margin: inherit;
    }
    .outing-author {
      color: gray;
      align-items: flex-end;
      .flex();
    }
    .glyphicon-trash {
      .calc(top, "100% - 60px");
    }

  } // end outing cards

  // .list-item.highlight
  &.highlight a .list-item-title {
    color: teal;
    transition: 0.1s ease-in-out;
  }
  // .list-item.users
  &.users {
    margin-left: 3px;
    margin-right: 3px;
    @media @big {
      flex-basis: 24%;
    }
    @media @desktop {
      flex-basis: 32%;
    }
    @media @tablet {
      flex-basis: 49%;
    }
    .list-item-info {
      justify-content: center;
    }
    .icon-user {
      font-size: 2.5em;
      color: gray !important;
    }
    button {
      float: right;
      margin: 5px;
    }
  }
} /* list-item*/

.documents-list-section-container {
  .flex();

  &.no-map {
    .page-main-title, .documents-list-section {
      flex-basis: 100%;
    }
    .list-item {
      flex-basis: 24%;
      @media (max-width: 1200px){
        flex-basis:  32%;
      }
      @media (max-width: 730px) {
        flex-basis: 48%;
      }
    }
  }
  &.no-list  .documents-list-section {
    flex-basis: 0;
  }
  .no-list-btn {
    padding: 7px 5px 6px 5px;
  }
  .no-map-btn {
    position: absolute;
    .calc(top, "100% - 80px");
    z-index: 2;
    margin-left: 10px;
    .glyphicon {
      color: white;
    }
  }
}
.documents-list-section, .not-found-section, .map-right .map {
  margin-top: @page-main-title-height;
  .calc(height, "100vh - @{page-header-height} - @{page-main-title-height}");
}

.documents-list-section, .not-found-section {
  background-color: @lightgrey;
  overflow: auto;
  flex-basis: @list-width;
  transition: .3s;

  @media @phone {
    flex-basis: 100%;
    padding-top: 35px;
    .calc(height, "100vh - 92px");
  }
  .show-documents-filters-phone {
    display: none;
    height: 33px;
    margin-right: 5px;
    float: right;

    @media @phone {
      display: block;
    }
  }
}

.section.associations, .view-details-associations, .list {
  .list-item {
    flex-basis: 48%;
    @media (min-width: @large-width){
      flex-basis: 32%;
    }
    @media (min-width: 2100px) {
      flex-basis: 24%;
    }
    @media (max-width: 900px) {
      flex-basis: 100% !important;
    }
  }
}

// card up to 7 column
.documents-list-section-container, .section.associations, .view-details-associations {
  &.no-map .list-item{
    @media (min-width: 2400px) {
      flex-basis: 14% !important;
    }
    @media (max-width: 2400px) {
      flex-basis: 16% !important;
    }
    @media (max-width: 2100px) {
      flex-basis: 19% !important;
    }
    @media (max-width: @large-width) {
      flex-basis: 24% !important;
    }
    @media (max-width: @tablet-max) {
      flex-basis: 32% !important;
    }
    @media (max-width: 900px) {
      flex-basis: 48% !important;
    }
    @media (max-width: @phone-max) {
      flex-basis: 100% !important;
    }
  }
}

.section.associations .list-item, .view-details-section .list-item {

  &.new-outing a, &.new-route a {
    .flex();
    align-items: center;
  }
  &.waypoints  {
    &.to-route {
      min-height: 115px;
      flex-wrap: wrap;
      .flex();
      app-card {
        flex-basis: 100%;
      }
    }
    a {
      height: auto;
    }
  }
}

#feed .list-item {
  .list-item-info {
    min-height: 60px;
  }
  &.waypoints .waypoint-type {
    flex-basis: 25%;
    @media @phone {
      flex-basis: 0;
    }
  }
  &.outings {
    .list-item-info {
      padding-left: 30%;
    }
    .activities {
      margin-bottom: 0;
    }
    .icon-user {
      margin-bottom: 5px;
      width: 100%;
      font-size: 30px;
      text-align: center;
    }
    .outing-author, .date {
      left: 10px;
      width: 25%;
      position: absolute;
      justify-content: center;
      .flex();
    }
    .outing-author {
      top: 33%;
      flex-flow: wrap;
      align-content: flex-start;
      justify-content: center;
    }
    .author-name {
      line-height: normal;
      word-break: break-all;
      word-break: break-word; // non-standard for webkit
      text-align: center;
    }
    .date {
      top: 13%;
      .glyphicon {
        display: none;
      }
    }
  }
}

.list {
  width:100%;
  padding: 1% 2% 50px 2%;
  .flex();
  justify-content: space-around;
  flex-flow: wrap row;

  .list-item {
    min-height: initial;
  }

  & + .no-results {
    display: none;
  }
}

.list-item {
  position: relative;
  cursor: pointer;
  background-color: white;
  margin-top: 10px;
  outline: none;
  border-radius: 7px;
  min-height: 80px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: .2s ease-in-out;
  border: 2px solid rgba(88, 150, 165, 0.2);

  &:active {
    -webkit-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -moz-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -webkit-transition: .2s ease-in-out;
    transition: 0.2s ease-in-out;
    outline: none;
  }
  &:hover, &.highlight {
    background-color: #EFEFEF;
    transition: 0.1s ease-in-out;
    cursor: pointer;
  }

  @media @tablet {
    border-width: 1px;
  }
  @media @phone {
    border-width: 1px;
  }

  a {
    display: block;
    transition: 0.2s;
    font-weight: normal;
    height: 100%;
    word-wrap: break-word;
    color: #767676;
    padding: 10px;

    @media @phone {
      font-size: 1.1em;
      padding: 7px;
    }

    &:hover .list-item-title {
      color: teal;
      transition: 0.1s ease-in-out;
    }

    &:focus, &:hover {
      text-decoration: none;
      outline: none;
    }
  } /*list-item a*/

  .list-item-lang {
    opacity: 0.9;
    color: graytext;
    white-space: nowrap;
    font-weight: normal;
  }
  .activities {
    margin-top: 5px;
  }
  .list-item-title {
    font-weight: bold;
    color: graytext;
    margin-right: 5px;
    p {
      line-height: normal;
      display: block;
      margin: 0;
    }
  }

  .location {
    line-height: normal;
    margin-right: 5px;
  }

  .list-item-title-lang {
    .flex();
    align-items: center;
    margin-bottom: 5px;
  }
  .elevation, .waypoint-elevation .glyphicon {
    margin-top: -1px;
  }
  .list-item-info {
    margin: auto;
    height: 100%;
    width: 100%;
    font-size: 90%;
    text-decoration: none;
    color: #919191;
    font-weight: normal;
    .flex();
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-between;

    .quality, .orientations, .date,  .height-diff, .height-diff-difficulties, .elevation, .waypoint-elevation {
      white-space: nowrap;
      .glyphicon {
        margin-right: 3px;
      }
    }
    .elevation, .height-diff, .height-diff-difficulties, .orientations, .icon-rating, .rating {
      margin-right: 5px;
    }
    .icon-rating {
      font-size: 1.4em;
      margin-bottom: 5px;
    }
    .orientations, .height-diff, .height-diff-difficulties, .elevation {
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .global-rating {
      @media (min-width: @phone-max) {
        display: none;
      }
    }
    .full-rating {
      flex-wrap: wrap;
      .glyphicon {
        font-size: 1.3em;
        margin-left: -3px;
        margin-right: 3px !important;
      }
      .value {
        transition: .2s;
        &:hover {
          color: gold;
        }
      }
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .glyphicon, [class*="icon-"]:not(.activity):not(.waypoint-type) {
      color: @bright-green;
    }
  }/*list-item-info*/
  .show-more-activities:hover {
    color: teal;
  }
  .activities .activity {
    font-size: 3em;
    color: @C2C-orange;
    @media @phone {
      font-size: 2.5em;
    }
  }
  .set-main-waypoint {
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 3px 10px;
    max-height: 26px;
  }

  // .list-item.waypoints
  &.waypoints {

    .waypoint-type {
      font-size: 3em;
      color: @C2C-orange;
      margin-right: 0;
      @media @phone {
        font-size: 2.5em;
        margin-left: 10px;
      }
    }
    .list-item-info {
      flex-basis: 75%;

    }
    .waypoint-infos {
      .calc(width, "100% - 20px");
      .flex();
      align-items: baseline;
      flex-wrap: wrap;
    }
  }
  // .list-item.routes
  &.routes {
    .activities {
      margin-bottom: -5px;
    }
  }
  // .list-item.books
  &.books {
    .author {
      line-height: normal;
      font-size: 13px;
      .calc(width, "100% - 30px");
    }
    .glyphicon-pencil {
      color: #a9a9a9 !important;
    }
    .book-type {
      color: @bright-green;
    }
  }
  // .list-item.main-waypoint
  &.main-waypoint {
    border: 2px solid @bright-green;
  }
  // .list-item.images
  &.images  {
    min-height: 170px;
    a {
      .flex();
      flex-flow: wrap;
    }
    .list-item-info {
      align-self: flex-start;
    }
    .image {
      width: 100%;
      height: 150px;
      background-position: 50% 40%;
      background-repeat: no-repeat;
    }
  }
  // .list-item.outings
  &.outings {
    max-height: inherit !important;

    .icon-user {
      font-size: 3em;
      padding-right: 5px;
      float: left;
      font-size: 25px;
      color: #b2bcc4 !important;
    }
    .activities {
      margin-right: 5px;
    }
    .activity-author {
      .calc(width, "100% - 25px");
      .flex();
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .author-name {
      font-weight: bold;
    }
    .glyphicon-time {
      font-size: 14px;
    }
    .list-item-info {
      margin: inherit;
    }
    .outing-author {
      color: gray;
      align-items: flex-end;
      .flex();
    }
    .glyphicon-trash {
      .calc(top, "100% - 60px");
    }

  } // end outing cards

  // .list-item.highlight
  &.highlight a .list-item-title {
    color: teal;
    transition: 0.1s ease-in-out;
  }
  // .list-item.users
  &.users {
    margin-left: 3px;
    margin-right: 3px;
    @media @big {
      flex-basis: 24%;
    }
    @media @desktop {
      flex-basis: 32%;
    }
    @media @tablet {
      flex-basis: 49%;
    }
    .list-item-info {
      justify-content: center;
    }
    .icon-user {
      font-size: 2.5em;
      color: gray !important;
    }
    button {
      float: right;
      margin: 5px;
    }
  }
} /* list-item*/

.documents-list-section-container {
  .flex();

  &.no-map {
    .page-main-title, .documents-list-section {
      flex-basis: 100%;
    }
    .list-item {
      flex-basis: 24%;
      @media (max-width: 1200px){
        flex-basis:  32%;
      }
      @media (max-width: 730px) {
        flex-basis: 48%;
      }
    }
  }
  &.no-list  .documents-list-section {
    flex-basis: 0;
  }
  .no-list-btn {
    padding: 7px 5px 6px 5px;
  }
  .no-map-btn {
    position: absolute;
    .calc(top, "100% - 80px");
    z-index: 2;
    margin-left: 10px;
    .glyphicon {
      color: white;
    }
  }
}
.documents-list-section, .not-found-section, .map-right .map {
  margin-top: @page-main-title-height;
  .calc(height, "100vh - @{page-header-height} - @{page-main-title-height}");
}

.documents-list-section, .not-found-section {
  background-color: @lightgrey;
  overflow: auto;
  flex-basis: @list-width;
  transition: .3s;

  @media @phone {
    flex-basis: 100%;
    padding-top: 35px;
    .calc(height, "100vh - 92px");
  }
  .show-documents-filters-phone {
    display: none;
    height: 33px;
    margin-right: 5px;
    float: right;

    @media @phone {
      display: block;
    }
  }
}

.section.associations, .view-details-associations, .list {
  .list-item {
    flex-basis: 48%;
    @media (min-width: @large-width){
      flex-basis: 32%;
    }
    @media (min-width: 2100px) {
      flex-basis: 24%;
    }
    @media (max-width: 900px) {
      flex-basis: 100% !important;
    }
  }
}

// + 1 more card per row than usual, max 4
.documents-list-section-container, .section.associations, .view-details-associations {
  &.no-map .list-item{
    @media (min-width: 1200px) and (max-width: @large-width) {
      flex-basis: 32% !important;
    }
    @media (min-width: @large-width) {
      flex-basis: 24% !important;
    }
    @media (max-width: 900px) {
      flex-basis: 48% !important;
    }
    @media (max-width: 620px) {
      flex-basis: 100% !important;
    }
  }
}

.section.associations .list-item, .view-details-section .list-item {

  &.new-outing a, &.new-route a {
    .flex();
    align-items: center;
  }
  &.waypoints  {
    &.to-route {
      min-height: 115px;
      flex-wrap: wrap;
      .flex();
      app-card {
        flex-basis: 100%;
      }
    }
    a {
      height: auto;
    }
  }
}

#feed .list-item {
  .list-item-info {
    min-height: 60px;
  }
  &.waypoints .waypoint-type {
    flex-basis: 25%;
    @media @phone {
      flex-basis: 0;
    }
  }
  &.outings {
    .list-item-info {
      padding-left: 30%;
    }
    .activities {
      margin-bottom: 0;
    }
    .icon-user {
      margin-bottom: 5px;
      width: 100%;
      font-size: 30px;
      text-align: center;
    }
    .outing-author, .date {
      left: 10px;
      width: 25%;
      position: absolute;
      justify-content: center;
      .flex();
    }
    .outing-author {
      top: 33%;
      flex-flow: wrap;
      align-content: flex-start;
      justify-content: center;
    }
    .author-name {
      line-height: normal;
      word-break: break-all;
      word-break: break-word; // non-standard for webkit
      text-align: center;
    }
    .date {
      top: 13%;
      .glyphicon {
        display: none;
      }
    }
  }
}


fix(style): reset header text align for justified text

// Global variables
@base-font-size: 2vw;
@base-line-height: (20 / 14); // ~ 1.428571429
@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@code-color: spin(@link-color, 180);
@sans-serif: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
@serif: Georgia, "Hiragino Mincho ProN", serif;
@monospace: Menlo, monospace;

// Invert color switcher for images and videos
// :root { filter: invert(100%); }

// http://nicolasgallagher.com/micro-clearfix-hack/
.cf {

  &:before, &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

// Basic reset
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 0 16%;
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;

  // A semitranslucent bar at the top of the page
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 1vmax;
    pointer-events: none;
    background: @link-color;
    content: "";
    opacity: .2;
  }
}

// Essential mixins
.heading {
  font-family: @sans-serif;
  font-size: 330%;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-family: @sans-serif;
  font-size: 72%;
  font-weight: normal;
  letter-spacing: .08em;
  opacity: .5;
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Reset common elements
a, button {
  color: @text-color;
  text-decoration: none;
  transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease;

  &:hover,
  &:focus {
    border-bottom: .1em solid;
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  color: @link-color;
  background: fade(@text-color, 2%);
}

// Site logo
.logo {
  display: block;
  width: 100%;
  height: 1vmax;
  margin: 0 0 1.4vmax;
  background: @link-color;
  opacity: 0;

  &:hover,
  &:focus {
    border-bottom: none !important;
    background: @text-color;
  }

  h1 {
    height: 0;
    text-indent: -99999em;
  }
}

body:hover .logo {
  opacity: 1 !important;
}

// Main navigation
.navigation {
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 50%;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

  li {
    display: inline-block;
    line-height: 2;
    list-style: none;

    a {
      padding: .5em 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        border: none;
      }
    }
  }
}

// Currently activated page or category class
.current {

  a {
    color: @link-color;
  }
}

// Latest work link
body:hover .latest {
  color: @link-color !important;
}

// Pserson status
.content .status {
  margin: 1vmin 0 0;
  font-size: 75%;
  font-weight: bold;

  &:before {
    @size: .8em;
    display: inline-block;
    width: @size;
    height: @size;
    margin-right: .8vw;
    background: fade(@text-color, 20%);
    border-radius: 50%;
    content: "";
  }

  &.available {

    &:before {
      background: #0cf;
    }

    a {
      color: #0cf;
    }
  }

  &.unavailable {

    &:before {
      background: #f30;
    }

    a {
      color: #f30;
    }
  }
}

// Main content
.content {
  margin-bottom: 16vmin;
  hyphens: auto;
  // For some specified posts in work category
  .cf;

  // Remove extra space for the last paragraph in the container
  article {

    // article > p
    > *:last-child {
      margin-bottom: 0 !important;

      // article > ul > li, article > .footnotes > ol
      > *:last-child {
        margin-bottom: 0 !important;

        // article > ul > li > p, article > .footnotes > ol > li
        > *:last-child {
          margin-bottom: 0 !important;

          // article > .footnotes > ol > li > p
          > *:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

  a {
    font-weight: bold;
  }

  p {
    margin: 0 0 1.1em;
    line-height: (@base-line-height * 1.2);
  }

  header {
    padding-bottom: 16vmin;

    h2 {
      margin: 0 0 .1em;
      .heading;
      hyphens: none;
      line-height: 1.1;

      svg {
        display: block;
        max-width: 100%;
      }

      // Override margin from article img
      svg,
      img {
        margin-bottom: .3em;
      }
    }

    .latest-post {
      margin-top: 16vmin;
      font-size: 80%;
      font-weight: normal;
      line-height: 1.2;

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin: 2vmin 0 0;
      letter-spacing: .1em;
    }

    // Used on work page
    & + * {
      margin-top: 0 !important;
    }
  }

  h3, h4, h5, h6 {
    margin: 10vmin 0 1rem;
    .sub-heading;
  }

  ul, ol {
    margin: 0 0 1em 1.5em;

    li {
      line-height: (@base-line-height * 1.2);

      > ul, ol {
        margin-bottom: 0;
      }
    }
  }

  ol {
    margin-left: 1.75em;
  }

  img, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 0 4vmin;
  }

  blockquote {
    position: relative;
    margin-bottom: 2em;

    > p {
      padding-left: .8em;
      border-left: 2px solid;
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-size: 90%;
      font-style: normal;

      &:before {
        // http://www.fileformat.info/info/unicode/char/2500/index.htm
        content: "\2500\2500\00a0"
      }
    }
  }

  sup {
    font-size: 75%;
  }

  abbr:after {
    content: " (" attr(title) ")";
  }

  code, pre {
    font-family: @monospace;
    color: @code-color;
  }

  pre {
    padding: 1em;
    margin: 0 0 1em;
    overflow-x: scroll;
    font-size: 90%;
    line-height: (@base-line-height * 1.2);
    background: fade(#08f, 4%);
  }

  // Newsletter subscription form in page "store"
  form {

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1vmin;
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      // Remove border-radius for iOS devices
      border-radius: 0;
      outline: none;
      transition: padding .2s ease;
      // Remove iOS pre-defined style
      -webkit-appearance: none;

      &:focus {
        padding: 1vmin;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        // Override Firefox default styles
        box-shadow: none;
      }
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    width: 100%;
    margin: 0 0 1em;

    th,
    td {
      padding: .6em;
    }

    th {
      border-bottom: 2px solid fade(@text-color, 6%);
      text-align: left;
    }

    td {
      border-top: 1px solid fade(@text-color, 4%);
    }
  }
}

// Posts with Asian characters
[lang=zh],
[lang=ja] {
  text-align: justify;

  header {
    text-align: left;
  }
}

// Fix empty space when a paragraph starts with some asian punctuation marks
.margin-fix:first-letter {
  margin-left: -.6em;
}

// Tweet button margin fix
.tweet {
  margin-top: 10vmin;
}

// Largetype styles (replaces button styles)
.largetype {
  .heading;
  font-size: 200%;
  margin-bottom: .5em !important;
}

// Broser frame for images in category "work"
.browser {
  position: relative;
  padding-top: 24px;
  margin: 0 0 4vmin !important;
  background: rgba(255, 255, 255, .1);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);

  &:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: lighten(#f24e59, 30%);
    border-radius: 50%;
    content: "";
    box-shadow:
        16px 0 0 0   fade(lighten(#fac536, 30%), 96%)
      , 32px 0 0 0   fade(lighten(#26e93d, 30%), 96%)
      ,  0px 0 0 1px fade(darken(#f24e59, 30%), 30%)
      , 16px 0 0 1px fade(darken(#fac536, 30%), 30%)
      , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%)
    ;
  }

  img {
    margin: 0;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);
  }
}

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: .8em;
  border-left: 2px solid @link-color;
}

// Reference notes and links in post
.footnotes {
  font-size: 90%;
  font-style: italic;
}

:target {

  [rev=footnote],
  [rel=footnote] {
    color: @link-color;
  }
}

// Post list in "work" and "note"
article .list {
  list-style: none;
  margin: 0;

  > li {
    margin: 0 0 1.4vmin;

    h2 {
      .heading;
      font-size: 200%;
      line-height: 1.2;
    }
  }

  .external {

    &:hover,
    &:focus {
      border: none;
    }
  }
}

.external {
  line-height: 1;

  span {
    display: inline-block;
    width: .2em;
    height: .2em;
    margin: 0 .1em;
    vertical-align: middle;
    background: @text-color;
    border-radius: 50%;
    transition: transform .4s ease;
  }

  &:hover,
  &:focus {

    span {
      transform: scale(1.4);
    }
  }
}

.footer {
  padding: 0 0 16vmin;
  font-size: 72%;
  text-transform: lowercase;

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 .6vw;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

        &:after {
          content: none;
        }
      }
    }
  }
}

// Plugn-Ins
.loaded {

  .intense-wrap {

    article p > img:not(.nointense) {
      cursor: zoom-in;
    }
  }

  &.intense-open {
    cursor: zoom-out;
  }
}

// GitHub Gist reset
.gist {

  code, pre {
    padding: 0;
    color: inherit;
    background-color: transparent;
  }

  .gist-file {
    font-family: @monospace !important;
    font-size: 80% !important;
  }

  .markdown-body {
    padding: 1em;
  }
}

// Media query stack
@media (max-width: 1000px) {

  body {
    padding-left: 8%;
    padding-right: 8%;
    font-size: (@base-font-size * 1.4);
  }
}

@media (max-width: 640px) {

  body {
    padding-left: 4%;
    padding-right: 4%;
    font-size: (@base-font-size * 2);
  }

  // Override viewport units defined in post.html
  article h2 svg,
  article h2 img {
    width: 100% !important;
    height: 100% !important;
  }

  // Hide external link for post list
  .list li h2 .external {
    display: none;
  }
}

@media (max-width: 400px) {

  body {
    font-size: (@base-font-size * 2.8);
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {

  // Avoid font-size smart alec
  body {
    -webkit-text-size-adjust: none;
  }
}

// Import custom styles
@import "custom";

// Global variables
@base-font-size: 2vw;
@base-line-height: (20 / 14); // ~ 1.428571429
@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@code-color: spin(@link-color, 180);
@sans-serif: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
@serif: Georgia, "Hiragino Mincho ProN", serif;
@monospace: Menlo, monospace;

// Invert color switcher for images and videos
// :root { filter: invert(100%); }

// http://nicolasgallagher.com/micro-clearfix-hack/
.cf {

  &:before, &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

// Basic reset
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 0 16%;
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;

  // A semitranslucent bar at the top of the page
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 1vmax;
    pointer-events: none;
    background: @link-color;
    content: "";
    opacity: .2;
  }
}

// Essential mixins
.heading {
  font-family: @sans-serif;
  font-size: 330%;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-family: @sans-serif;
  font-size: 72%;
  font-weight: normal;
  letter-spacing: .08em;
  opacity: .5;
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Reset common elements
a, button {
  color: @text-color;
  text-decoration: none;
  transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease;

  &:hover,
  &:focus {
    border-bottom: .1em solid;
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  color: @link-color;
  background: fade(@text-color, 2%);
}

// Site logo
.logo {
  display: block;
  width: 100%;
  height: 1vmax;
  margin: 0 0 1.4vmax;
  background: @link-color;
  opacity: 0;

  &:hover,
  &:focus {
    border-bottom: none !important;
    background: @text-color;
  }

  h1 {
    height: 0;
    text-indent: -99999em;
  }
}

body:hover .logo {
  opacity: 1 !important;
}

// Main navigation
.navigation {
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 50%;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

  li {
    display: inline-block;
    line-height: 2;
    list-style: none;

    a {
      padding: .5em 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        border: none;
      }
    }
  }
}

// Currently activated page or category class
.current {

  a {
    color: @link-color;
  }
}

// Latest work link
body:hover .latest {
  color: @link-color !important;
}

// Pserson status
.content .status {
  margin: 1vmin 0 0;
  font-size: 75%;
  font-weight: bold;

  &:before {
    @size: .8em;
    display: inline-block;
    width: @size;
    height: @size;
    margin-right: .8vw;
    background: fade(@text-color, 20%);
    border-radius: 50%;
    content: "";
  }

  &.available {

    &:before {
      background: #0cf;
    }

    a {
      color: #0cf;
    }
  }

  &.unavailable {

    &:before {
      background: #f30;
    }

    a {
      color: #f30;
    }
  }
}

// Main content
.content {
  margin-bottom: 16vmin;
  hyphens: auto;
  // For some specified posts in work category
  .cf;

  // Remove extra space for the last paragraph in the container
  article {

    // article > p
    > *:last-child {
      margin-bottom: 0 !important;

      // article > ul > li, article > .footnotes > ol
      > *:last-child {
        margin-bottom: 0 !important;

        // article > ul > li > p, article > .footnotes > ol > li
        > *:last-child {
          margin-bottom: 0 !important;

          // article > .footnotes > ol > li > p
          > *:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

  a {
    font-weight: bold;
  }

  p {
    margin: 0 0 1.1em;
    line-height: (@base-line-height * 1.2);
  }

  header {
    padding-bottom: 16vmin;

    h2 {
      margin: 0 0 .1em;
      .heading;
      hyphens: none;
      line-height: 1.1;

      svg {
        display: block;
        max-width: 100%;
      }

      // Override margin from article img
      svg,
      img {
        margin-bottom: .3em;
      }
    }

    .latest-post {
      margin-top: 16vmin;
      font-size: 80%;
      font-weight: normal;
      line-height: 1.2;

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin: 2vmin 0 0;
      letter-spacing: .1em;
    }

    // Used on work page
    & + * {
      margin-top: 0 !important;
    }
  }

  h3, h4, h5, h6 {
    margin: 10vmin 0 1rem;
    .sub-heading;
  }

  ul, ol {
    margin: 0 0 1em 1.5em;

    li {
      line-height: (@base-line-height * 1.2);

      > ul, ol {
        margin-bottom: 0;
      }
    }
  }

  ol {
    margin-left: 1.75em;
  }

  img, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 0 4vmin;
  }

  blockquote {
    position: relative;
    margin-bottom: 2em;

    > p {
      padding-left: .8em;
      border-left: 2px solid;
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-size: 90%;
      font-style: normal;

      &:before {
        // http://www.fileformat.info/info/unicode/char/2500/index.htm
        content: "\2500\2500\00a0"
      }
    }
  }

  sup {
    font-size: 75%;
  }

  abbr:after {
    content: " (" attr(title) ")";
  }

  code, pre {
    font-family: @monospace;
    color: @code-color;
  }

  pre {
    padding: 1em;
    margin: 0 0 1em;
    overflow-x: scroll;
    font-size: 90%;
    line-height: (@base-line-height * 1.2);
    background: fade(#08f, 4%);
  }

  // Newsletter subscription form in page "store"
  form {

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1vmin;
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      // Remove border-radius for iOS devices
      border-radius: 0;
      outline: none;
      transition: padding .2s ease;
      // Remove iOS pre-defined style
      -webkit-appearance: none;

      &:focus {
        padding: 1vmin;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        // Override Firefox default styles
        box-shadow: none;
      }
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    width: 100%;
    margin: 0 0 1em;

    th,
    td {
      padding: .6em;
    }

    th {
      border-bottom: 2px solid fade(@text-color, 6%);
      text-align: left;
    }

    td {
      border-top: 1px solid fade(@text-color, 4%);
    }
  }
}

// Posts with Asian characters
[lang=zh],
[lang=ja] {
  text-align: justify;
}

// Fix empty space when a paragraph starts with some asian punctuation marks
.margin-fix:first-letter {
  margin-left: -.6em;
}

// Tweet button margin fix
.tweet {
  margin-top: 10vmin;
}

// Largetype styles (replaces button styles)
.largetype {
  .heading;
  font-size: 200%;
  margin-bottom: .5em !important;
}

// Broser frame for images in category "work"
.browser {
  position: relative;
  padding-top: 24px;
  margin: 0 0 4vmin !important;
  background: rgba(255, 255, 255, .1);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);

  &:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: lighten(#f24e59, 30%);
    border-radius: 50%;
    content: "";
    box-shadow:
        16px 0 0 0   fade(lighten(#fac536, 30%), 96%)
      , 32px 0 0 0   fade(lighten(#26e93d, 30%), 96%)
      ,  0px 0 0 1px fade(darken(#f24e59, 30%), 30%)
      , 16px 0 0 1px fade(darken(#fac536, 30%), 30%)
      , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%)
    ;
  }

  img {
    margin: 0;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);
  }
}

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: .8em;
  border-left: 2px solid @link-color;
}

// Reference notes and links in post
.footnotes {
  font-size: 90%;
  font-style: italic;
}

:target {

  [rev=footnote],
  [rel=footnote] {
    color: @link-color;
  }
}

// Post list in "work" and "note"
article .list {
  list-style: none;
  margin: 0;

  > li {
    margin: 0 0 1.4vmin;

    h2 {
      .heading;
      font-size: 200%;
      line-height: 1.2;
    }
  }

  .external {

    &:hover,
    &:focus {
      border: none;
    }
  }
}

.external {
  line-height: 1;

  span {
    display: inline-block;
    width: .2em;
    height: .2em;
    margin: 0 .1em;
    vertical-align: middle;
    background: @text-color;
    border-radius: 50%;
    transition: transform .4s ease;
  }

  &:hover,
  &:focus {

    span {
      transform: scale(1.4);
    }
  }
}

.footer {
  padding: 0 0 16vmin;
  font-size: 72%;
  text-transform: lowercase;

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 .6vw;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

        &:after {
          content: none;
        }
      }
    }
  }
}

// Plugn-Ins
.loaded {

  .intense-wrap {

    article p > img:not(.nointense) {
      cursor: zoom-in;
    }
  }

  &.intense-open {
    cursor: zoom-out;
  }
}

// GitHub Gist reset
.gist {

  code, pre {
    padding: 0;
    color: inherit;
    background-color: transparent;
  }

  .gist-file {
    font-family: @monospace !important;
    font-size: 80% !important;
  }

  .markdown-body {
    padding: 1em;
  }
}

// Media query stack
@media (max-width: 1000px) {

  body {
    padding-left: 8%;
    padding-right: 8%;
    font-size: (@base-font-size * 1.4);
  }
}

@media (max-width: 640px) {

  body {
    padding-left: 4%;
    padding-right: 4%;
    font-size: (@base-font-size * 2);
  }

  // Override viewport units defined in post.html
  article h2 svg,
  article h2 img {
    width: 100% !important;
    height: 100% !important;
  }

  // Hide external link for post list
  .list li h2 .external {
    display: none;
  }
}

@media (max-width: 400px) {

  body {
    font-size: (@base-font-size * 2.8);
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {

  // Avoid font-size smart alec
  body {
    -webkit-text-size-adjust: none;
  }
}

// Import custom styles
@import "custom";


all <pre> must be scrollable

all <pre> must be scrollable

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/MatTheCat/clean.git/'


fixes to main stylesheet

fixes to main stylesheet

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/amazingBastard/damir.io.git/'


Align table head text to left

Align table head text to left

@import (reference) "../../styles/fonts.less";

.Body {
  font-family: @font-text;
  color: rgba(0, 0, 0, .8);
  line-height: 1.6em;
  word-wrap: break-word;

  &--full {
    font-size: 21px;

    h1, h2, h3, h4, h5, h6 {
      margin: 8px 0;
      font-weight: 700;
      line-height: 1.3em;
    }

    *:not(:empty):not(li):not(.pull-left):not(.pull-right) {
      margin: 1.5rem 0;
    }
  }

  h1 {
    font-size: 140%;
  }

  p {
    margin: 0.4rem 0;
  }

  blockquote {
    padding-left: 1rem;
    margin: 0.4rem 0;
    border-left: 1px solid rgba(0, 0, 0, .6);
    color: rgba(0, 0, 0, .6);
  }

  :not(pre) > code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
  }

  pre {
    overflow-y: auto;
    padding: 10px 20px;
    margin-bottom: 14px;
    line-height: 1em;
    background-color: #f7f7f9;

    code {
      font-size: 16px;
    }
  }

  table {
    width: 100%;
    display: table;
    table-layout: fixed;

    tr > th {
      text-align: left;
      background-color: #f2f2f2;
    }

    tr > th, td {
      padding: 4px 8px;
      word-wrap: break-word;
      vertical-align: middle;
    }

    tr:nth-child(even) {
      td {
        background-color: #f2f2f2;
      }
    }
  }

  ol {
    list-style: decimal inside;
  }

  ul {
    margin: 1rem 0;
    margin-left: 2rem !important;
    list-style: disc outside;
  }

  div.pull-left {
    float: left;
    padding-right: 1rem;
    max-width: 50%;
  }

  div.pull-right {
    float: right;
    padding-left: 1rem;
    max-width: 50%;
  }

  img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: inline-block;
    vertical-align: middle;
  }
}

@import (reference) "../../styles/fonts.less";

.Body {
  font-family: @font-text;
  color: rgba(0, 0, 0, .8);
  line-height: 1.6em;
  word-wrap: break-word;

  &--full {
    font-size: 21px;

    h1, h2, h3, h4, h5, h6 {
      margin: 8px 0;
      font-weight: 700;
      line-height: 1.3em;
    }

    *:not(:empty):not(li):not(.pull-left):not(.pull-right) {
      margin: 1.5rem 0;
    }
  }

  h1 {
    font-size: 140%;
  }

  p {
    margin: 0.4rem 0;
  }

  blockquote {
    padding-left: 1rem;
    margin: 0.4rem 0;
    border-left: 1px solid rgba(0, 0, 0, .6);
    color: rgba(0, 0, 0, .6);
  }

  :not(pre) > code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
  }

  pre {
    overflow-y: auto;
    padding: 10px 20px;
    margin-bottom: 14px;
    line-height: 1em;
    background-color: #f7f7f9;

    code {
      font-size: 16px;
    }
  }

  table {
    width: 100%;
    display: table;
    table-layout: fixed;

    tr > th {
      background-color: #f2f2f2;
    }

    tr > th, td {
      padding: 4px 8px;
      word-wrap: break-word;
      vertical-align: middle;
    }

    tr:nth-child(even) {
      td {
        background-color: #f2f2f2;
      }
    }
  }

  ol {
    list-style: decimal inside;
  }

  ul {
    margin: 1rem 0;
    margin-left: 2rem !important;
    list-style: disc outside;
  }

  div.pull-left {
    float: left;
    padding-right: 1rem;
    max-width: 50%;
  }

  div.pull-right {
    float: right;
    padding-left: 1rem;
    max-width: 50%;
  }

  img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: inline-block;
    vertical-align: middle;
  }
}


Remove crufty code

Remove crufty code

//
// Layout
// ==============================

// Setup
// ------------------------------

#app,
html,
body {
	.square(100%);
	background: @body-bg;
	overflow: hidden;
	position: fixed;
}

// make it play nice with mobile
.app-wrapper {
	.fill-space();
	background-color: black; // exagerate opacity changes on views
	overflow: hidden;
	position: fixed; // fill-space positions absolutely by default
}

// desktop wrapper
@media only screen and (min-width: 480px) {
	.app-wrapper {
		// .size(320px,480px); // iPhone 4
		// .size(320px,568px); // iPhone 5
		.size(376px,668px); // iPhone 6, actually "365,667" but that causes subpixel blur from transforms
		.translate(-50%,-50%);
		box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
		left: 50%;
		top: 50%;
	}
}

//
// Layout
// ==============================

// Handle DOM changes
// ------------------------------

// Be careful when applying this class. ReactCSSTransitionGroup, which we use for
// view transitions, becomes janky when a transition/animation is fired whilst
// a view transition is running.

.node-inserted {
	// .animation( fadeIn 150ms );
}

// Feedback
// ------------------------------

@feedback-button-size: 48px;

// blockout the current view
.feedback-blockout {
	.fill-space();
}

// big, round, aqua button bottom right of each view
.feedback-button {
	.square(@feedback-button-size);
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 50%;
	box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
	color: white;
	font-size: @feedback-button-size / 2;
	line-height: @feedback-button-size;
	display: block;
	text-align: center;

	position: fixed;
	bottom: @gutter-base;
	right: @gutter-base;
	z-index: @zindex-dropdown;

	&:hover {
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
	}
	&:active,
	&:focus {
		background-color: rgba(0, 0, 0, 0.9);
		color: white;
		text-decoration: none;
	}
}

// main button
.feedback-button--main {
	.transition( all 300ms cubic-bezier(0.680, -0.550, 0.265, 1.550) );

	&.is-hidden {
		.scale(.25);
		opacity: 0;
		visibility: hidden;
	}
}

// secondary buttons
.feedback-button--secondary {
	.square(@feedback-button-size);
	.transition( all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 100ms );
	font-size: @feedback-button-size / 2;
	line-height: @feedback-button-size;

	// begin hidden
	opacity: 0;

	&.is-visible {
		.translate3d(0,0,0);
		opacity: 1;
	}
}

.feedback-button--comment {
	.translate3d(80px, 140px, 0);
	bottom: @feedback-button-size + 5;
}
.feedback-button--bug {
	.translate3d(140px, 80px, 0);
	right: @feedback-button-size + 5;
}

// Setup
// ------------------------------

#app,
html,
body {
	.square(100%);
	background: @body-bg;
	overflow: hidden;
	position: fixed;
}

// make it play nice with mobile
.app-wrapper {
	.fill-space();
	background-color: black; // exagerate opacity changes on views
	overflow: hidden;
	position: fixed; // fill-space positions absolutely by default
}

// desktop wrapper
@media only screen and (min-width: 480px) {
	.app-wrapper {
		// .size(320px,480px); // iPhone 4
		// .size(320px,568px); // iPhone 5
		.size(376px,668px); // iPhone 6, actually "365,667" but that causes subpixel blur from transforms
		.translate(-50%,-50%);
		box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
		left: 50%;
		top: 50%;
	}
}

// QR code with logo overlay

.qr-code-wrapper {
	line-height: 1;
	margin-bottom: @gutter-base * 4;
	position: relative;
	text-align: center;
	top: 20px;

	> .svg-icon {
		.square(64px);
		background-color: white;
		// border: 5px solid black;
		border-radius: 50%;
		left: 50%;
		margin-left: -32px;
		margin-top: -33px;
		padding: 5px;
		position: absolute;
		top: 50%;
	}
}


fixed share buttons

fixed share buttons

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Imaflora/atlasagropecuario.git/'


Create panels.less

Create panels.less

//
// Panels
// --------------------------------------------------

// Base class
.panel {
  margin-bottom: @line-height-computed;
  background-color: @panel-bg;
  border: 1px solid transparent;
  border-radius: @panel-border-radius;
  .box-shadow(0 1px 1px rgba(0,0,0,.05));
}

// Panel contents
.panel-body {
  padding: @panel-body-padding;
  &:extend(.clearfix all);
}

// Optional heading
.panel-heading {
  padding: @panel-heading-padding;
  border-bottom: 1px solid transparent;
  .border-top-radius((@panel-border-radius - 1));

  > .dropdown .dropdown-toggle {
    color: inherit;
  }
}

// Within heading, strip any `h*` tag of its default margins for spacing.
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: ceil((@font-size-base * 1.125));
  color: inherit;

  > a {
    color: inherit;
  }
}

// Optional footer (stays gray in every modifier class)
.panel-footer {
  padding: @panel-footer-padding;
  background-color: @panel-footer-bg;
  border-top: 1px solid @panel-inner-border;
  .border-bottom-radius((@panel-border-radius - 1));
}

// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.

.panel {
  > .list-group {
    margin-bottom: 0;

    .list-group-item {
      border-width: 1px 0;
      border-radius: 0;
    }

    // Add border top radius for first one
    &:first-child {
      .list-group-item:first-child {
        border-top: 0;
        .border-top-radius((@panel-border-radius - 1));
      }
    }
    // Add border bottom radius for last one
    &:last-child {
      .list-group-item:last-child {
        border-bottom: 0;
        .border-bottom-radius((@panel-border-radius - 1));
      }
    }
  }
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
  .list-group-item:first-child {
    border-top-width: 0;
  }
}
.list-group + .panel-footer {
  border-top-width: 0;
}

// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.

.panel {
  > .table,
  > .table-responsive > .table,
  > .panel-collapse > .table {
    margin-bottom: 0;
  }
  // Add border top radius for first one
  > .table:first-child,
  > .table-responsive:first-child > .table:first-child {
    .border-top-radius((@panel-border-radius - 1));

    > thead:first-child,
    > tbody:first-child {
      > tr:first-child {
        td:first-child,
        th:first-child {
          border-top-left-radius: (@panel-border-radius - 1);
        }
        td:last-child,
        th:last-child {
          border-top-right-radius: (@panel-border-radius - 1);
        }
      }
    }
  }
  // Add border bottom radius for last one
  > .table:last-child,
  > .table-responsive:last-child > .table:last-child {
    .border-bottom-radius((@panel-border-radius - 1));

    > tbody:last-child,
    > tfoot:last-child {
      > tr:last-child {
        td:first-child,
        th:first-child {
          border-bottom-left-radius: (@panel-border-radius - 1);
        }
        td:last-child,
        th:last-child {
          border-bottom-right-radius: (@panel-border-radius - 1);
        }
      }
    }
  }
  > .panel-body + .table,
  > .panel-body + .table-responsive {
    border-top: 1px solid @table-border-color;
  }
  > .table > tbody:first-child > tr:first-child th,
  > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }
  > .table-bordered,
  > .table-responsive > .table-bordered {
    border: 0;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th:first-child,
        > td:first-child {
          border-left: 0;
        }
        > th:last-child,
        > td:last-child {
          border-right: 0;
        }
      }
    }
    > thead,
    > tbody {
      > tr:first-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
    > tbody,
    > tfoot {
      > tr:last-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
  }
  > .table-responsive {
    border: 0;
    margin-bottom: 0;
  }
}

// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.

.panel-group {
  margin-bottom: @line-height-computed;

  // Tighten up margin so it's only between panels
  .panel {
    margin-bottom: 0;
    border-radius: @panel-border-radius;
    + .panel {
      margin-top: 5px;
    }
  }

  .panel-heading {
    border-bottom: 0;
    + .panel-collapse > .panel-body {
      border-top: 1px solid @panel-inner-border;
    }
  }
  .panel-footer {
    border-top: 0;
    + .panel-collapse .panel-body {
      border-bottom: 1px solid @panel-inner-border;
    }
  }
}

// Contextual variations
.panel-default {
  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success {
  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-info {
  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
.panel-warning {
  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}

error: pathspec 'static/app/components/bootstrap/css/less/panels.less' did not match any file(s) known to git


OR-848 Remove comments

OR-848 Remove comments

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


Create tables.less

Create tables.less

//
// Tables
// --------------------------------------------------

table {
  background-color: @table-bg;
}
th {
  text-align: left;
}

// Baseline styles

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: @line-height-computed;
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: @table-cell-padding;
        line-height: @line-height-base;
        vertical-align: top;
        border-top: 1px solid @table-border-color;
      }
    }
  }
  // Bottom align for column headings
  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid @table-border-color;
  }
  // Remove top border from thead by default
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 2px solid @table-border-color;
  }

  // Nesting
  .table {
    background-color: @body-bg;
  }
}

// Condensed table w/ half padding

.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: @table-condensed-cell-padding;
      }
    }
  }
}

// Bordered version
//
// Add borders all around the table and between all the columns.

.table-bordered {
  border: 1px solid @table-border-color;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid @table-border-color;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}

// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
  > tbody > tr:nth-child(odd) {
    > td,
    > th {
      background-color: @table-bg-accent;
    }
  }
}

// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
  > tbody > tr:hover {
    > td,
    > th {
      background-color: @table-bg-hover;
    }
  }
}

// Table cell sizing
//
// Reset default table behavior

table col[class*="col-"] {
  position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
  float: none;
  display: table-column;
}
table {
  td,
  th {
    &[class*="col-"] {
      position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
      float: none;
      display: table-cell;
    }
  }
}

// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.

// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(info; @state-info-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);

// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

.table-responsive {
  @media screen and (max-width: @screen-xs-max) {
    width: 100%;
    margin-bottom: (@line-height-computed * 0.75);
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid @table-border-color;
    -webkit-overflow-scrolling: touch;

    // Tighten up spacing
    > .table {
      margin-bottom: 0;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      }

      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
      // chances are there will be only one `tr` in a `thead` and that would
      // remove the border altogether.
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }

    }
  }
}

error: pathspec 'static/app/components/bootstrap/css/less/tables.less' did not match any file(s) known to git


add footer support

add footer support

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/JobsUnited/bootstrap.git/'


commit

commit

commit

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/vimalmenon/code-easy.net-new.git/'