adding more classes to table of content

adding more classes to table of content

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/pradeepmurugesan/incubator-freemarker-docgen.git/'


Darkly @panel-default-heading-bg override

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/mikegerwitz/agagh.git/'


Delete animated.less

Delete animated.less

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/hackersvsharassment/hackersvsharassment.github.io.git/'


The RTL css file

The RTL css file

.bootstrap .navbar-header, .bootstrap .navbar-brand, .bootstrap .nav-sidebar, .bootstrap .navbar-left{
    float: right !important;
}
.bootstrap .navbar-right {
    float: left !important;
    margin-left: 20px !important;
}

error: pathspec 'scania-bootstrap-rtl.less' did not match any file(s) known to git


remove CodePrinter.less file

remove CodePrinter.less file

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/tsapeta/CodePrinter.git/'


Add fixed widths to some icons (issue on android)

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/Quinten/supernapietheme.git/'


Adjusts footer top margin.

Adjusts footer top margin.

@import "variables.less";
@import "mixins.less";

code, pre {
  color: @brand-primary;
  background-color: @gray-light;
}

.header_image_link_container {
  position: relative;

  a {
    text-decoration: none;

    i {
      position: absolute;
      bottom: 0;
      right: 0;
      color: rgba(255,255,255,0.5);
      padding-right: 20px;
      padding-bottom: 20px;
    }
  }
}

.container .pager li > a {
  margin-top: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}

#page_footer {
  margin-top: 20px;
}

.intro-header {
  @media (max-width: 768px) {
    margin-bottom: 0px;
  }
}

.container li a {
  text-decoration: underline;
}

.container li {
	padding-top: 5px;
	padding-bottom: 5px;
}

.under-header {
	padding-top: 20px;
}

@media only screen and (max-width: 768px) {
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
    font-size: 40px;
  }

  .intro-header .site-heading .subheading, .intro-header .page-heading .subheading {
    font-size: 20px;
  }
}

.meta {
  color: #808080;
  font-size: 12px;
  font-style: italic;
  margin-top: 0;
}

img {
    margin-left: auto;
    margin-right: auto;
}

iframe.twitter-tweet {
    margin-left: auto !important;
    margin-right: auto !important;
}

blockquote {
  padding: 0px 30px;
  line-height: 30px
}

blockquote > p:first-child {
	margin-top: 0;
}

.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    background:  no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.image-bg-fixed-height {
  background-color: #808080;
  height: 250px;
}
@media only screen and (min-width: 768px) {
  .image-bg-fixed-height {
    height: 450px;
  }
}

.container img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

/* Let's make those little links a little prettier. */

.header-link {
  content: "#";
  color: rgba(189,189,189,0.25);
  font-weight: 400;
  &:hover,
  &:focus {
    text-decoration: none;
    color: @brand-primary;
  }
}

.container {
  .header-link {
    position: absolute;
    left:-0.25em;
    /* The links don't fit on spall screens, so let's high them. */
    @media only screen and (max-width: 768px) {
      display:none;
    }
  }

  .cntl-content {
    .header-link {
      position: relative;
      left: 0.3em;
      display: inline;
    }
  }
}

.custom {
  .header-link {
    left: -0.75em !important;
  }
}

/* Portfolio & Speaking Page */

.speaking {
  .row {
    padding-bottom: 0px;
  }

  h3 {
    margin-bottom: 5px;
    margin-top: 28px;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      font-size: 28px;
    }
  }

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    h3 {
      font-size: 20pt;
    }
  }

  ul {
    padding: 0px;

    li {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      margin-top: 20px;
      text-align: left;

      i {
        width: 30px;
        text-align: center;
        position: relative;
        left: 10px;
      }

      h3 {
        margin-top: 0px;
        padding-bottom: 5px;
      }

      p, div {
        margin: 0px;
      }

      p {
        padding-left: 30px;
        text-indent: -30px;
      }

      a {
        text-decoration: none;
      }

      .details {
        float: right;
        width: 70%;
        padding-left: 10px;
      }

      img {
        width: 100%;
      }

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        margin-top: 30px;

        .details {
          padding-left: 20px;
          padding-bottom: 10px;
        }
      }

      .image-container {
        position: relative;

        float: left;
        padding: 0px;
        padding-right: 10px;
        height: 100%;
        width: 30%;

        a.mouseover-link {
          display: none;

          i {
            position: absolute;
            bottom: 0;
            right: 0;
            color: white;
            padding-bottom: 10px;
            padding-right: 40px;
            color: white;
          }
        }

        &:hover {
          a.mouseover-link {
            display: inline;
          }
        }
      }
    }
  }

  aside {
    background: no-repeat center center;
    background-attachment: scroll;
    .background-cover;
    color: white;
    font-weight: 800;
    padding: 80px 0;
    margin-bottom: 20px;
    margin-top: 80px;
    text-align: center;

    @media only screen and (min-width: 768px) {
      padding: 120px 0;
      margin-bottom: 30px;
      margin-top: 130px;
    }

    h2 {
      font-size: 30px;
      font-weight: 800;
      margin: 0px;

      @media only screen and (min-width: 768px) {
        font-size: 55px;
      }
    }

    /* TODO: Cusotmize heights for different devices. */
    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      padding-top: auto;
      padding-bottom: auto;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      padding-top: auto;
      padding-bottom: auto;
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      padding-top: auto;
      padding-bottom: auto;
    }
  }
}

.portfolio {

  h2 {
    margin-top: 0px;
    color: white;

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      font-size: 45px;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      font-size: 55px;
    }

    .portfolio-header-link {
      color: transparent;
      padding-left: 15px;
      font-weight: 400;
      text-decoration: none;
    }

    &:hover {
      .portfolio-header-link {
        color: white;
      }
    }
  }

  h3 {
    .serif;
    font-weight: 400;
    color: @gray-dark;
    font-size: 35px;
    text-align: left;
    line-height: 35px;
  }

  .container {
    &:last-child {
      padding-bottom: 50px;

      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        padding-bottom: 80px;
      }

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: 992px) {
        padding-bottom: 120px;
      }
    }
  }

  /* Software, Education */

  #education_list {
    li {
      &:first-child {
        margin-top: 20px !important;
      }
    }
  }

  #software_list, #education_list {
    li {
      vertical-align: top;
      display: inline-block;
      margin-top: 30px;
      text-align: left;

      &:first-child {
        margin-top: 0px;
      }

      h3 {
        margin-top: 0px;
        text-align: center;
      }

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        h3 {
          max-width: 60%;
          text-align: left;
          margin-bottom: 15px;
        }

        div {
          max-width: 50%;
          margin-top: 30px;
        }
      }

      img {
        padding: 15px 0px;
        max-width: 100%;
        @media (min-width: 768px) {
          max-width: 40%;
          float: right;
        }
      }

      div {
        margin-top: 15px;
      }

      p {
        margin-top: 15px;
      }
    }
  }

  /* Community */

  #community_list {
    padding: 30px 0px;
    li {
      margin: 0px 10px;

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        margin: 0px 30px;
      }

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: 992px) {
        margin: 0px 50px;
      }
    }
  }

  /* Photography */

  #photography_list {
    li {
      background: 0 0 no-repeat fixed;
      vertical-align: middle;
      position: relative;

      svg {
        fill: @gray-dark;
        &:hover {
          fill: @brand-primary;

          .dark-stroke {
            stroke: @brand-primary;
          }
        }

        .dark-stroke {
          stroke: @gray-dark;
        }

        .white-stroke {
          stroke: white;
        }
      }

      min-width: 70px;
    }

    li {
      -webkit-transform: scale(0.7);
      -moz-transform:    scale(0.7);
      -ms-transform:     scale(0.7);
      -o-transform:      scale(0.7);
      transform:         scale(0.7);

      margin: 10px 10px;
      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        margin: 10px 50px;
      }
    }
  }

  /* Section Headers */

  aside {
    display: block;
    color: white;
    position: relative;
    background: no-repeat center center scroll;
    background-size: cover;
    margin-top: 100px;
    margin-bottom: 30px;
    padding-top: 50px;
    padding-bottom: 50px;

    p {
      margin: 0px 0px;
    }

    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      height: 250px;
      padding-top: auto;
      padding-bottom: auto;
      margin-top: 200px;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      height: 350px;
      margin-top: 180px;
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      height: 450px;
    }

    figcaption {
      display: block;
      padding: 0px;
      text-align: center;

      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */
      width: 70%;
      margin-left: auto;
      margin-right: auto;

      a {
        &:hover,
        &:focus {
          color: white;
        }
      }

      @media (min-width: 768px) {
        position: absolute;
        text-align: left;
      }

      &:before {
        content:"";
        color: white;
        position: relative;
        @media (min-width: 768px) {
          position: absolute;
        }
      }

      /* Section Header Callouts */

      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        right: 2em;
        bottom: 2em;
        width: 325px;
        &:before {
          width: 205px;
          height: 94px;
          top: 0em;
          right: 105%;
          background-image: url(/img/portfolio/callout_small.svg);
        }
      }

     /* Medium devices (desktops, 992px and up) */
      @media (min-width: 992px) {
        right: 5em;
        &:before {
          width: 357px;
          height:164px;
          top: -3.6em;
          background-image: url(/img/portfolio/callout.svg);
        }
      }

      /* Large devices (large desktops, 1200px and up) */
      @media (min-width: 1200px) {
        right: 7em;
        bottom: 5em;
      }
    }
  }
}

@import "variables.less";
@import "mixins.less";

code, pre {
  color: @brand-primary;
  background-color: @gray-light;
}

.header_image_link_container {
  position: relative;

  a {
    text-decoration: none;

    i {
      position: absolute;
      bottom: 0;
      right: 0;
      color: rgba(255,255,255,0.5);
      padding-right: 20px;
      padding-bottom: 20px;
    }
  }
}

.container .pager li > a {
  margin-top: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}

#page_footer {
  margin-top: 40px;
}

.intro-header {
  @media (max-width: 768px) {
    margin-bottom: 0px;
  }
}

.container li a {
  text-decoration: underline;
}

.container li {
	padding-top: 5px;
	padding-bottom: 5px;
}

.under-header {
	padding-top: 20px;
}

@media only screen and (max-width: 768px) {
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
    font-size: 40px;
  }

  .intro-header .site-heading .subheading, .intro-header .page-heading .subheading {
    font-size: 20px;
  }
}

.meta {
  color: #808080;
  font-size: 12px;
  font-style: italic;
  margin-top: 0;
}

img {
    margin-left: auto;
    margin-right: auto;
}

iframe.twitter-tweet {
    margin-left: auto !important;
    margin-right: auto !important;
}

blockquote {
  padding: 0px 30px;
  line-height: 30px
}

blockquote > p:first-child {
	margin-top: 0;
}

.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    background:  no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.image-bg-fixed-height {
  background-color: #808080;
  height: 250px;
}
@media only screen and (min-width: 768px) {
  .image-bg-fixed-height {
    height: 450px;
  }
}

.container img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

/* Let's make those little links a little prettier. */

.header-link {
  content: "#";
  color: rgba(189,189,189,0.25);
  font-weight: 400;
  &:hover,
  &:focus {
    text-decoration: none;
    color: @brand-primary;
  }
}

.container {
  .header-link {
    position: absolute;
    left:-0.25em;
    /* The links don't fit on spall screens, so let's high them. */
    @media only screen and (max-width: 768px) {
      display:none;
    }
  }

  .cntl-content {
    .header-link {
      position: relative;
      left: 0.3em;
      display: inline;
    }
  }
}

.custom {
  .header-link {
    left: -0.75em !important;
  }
}

/* Portfolio & Speaking Page */

.speaking {
  .row {
    padding-bottom: 0px;
  }

  h3 {
    margin-bottom: 5px;
    margin-top: 28px;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      font-size: 28px;
    }
  }

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    h3 {
      font-size: 20pt;
    }
  }

  ul {
    padding: 0px;

    li {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      margin-top: 20px;
      text-align: left;

      i {
        width: 30px;
        text-align: center;
        position: relative;
        left: 10px;
      }

      h3 {
        margin-top: 0px;
        padding-bottom: 5px;
      }

      p, div {
        margin: 0px;
      }

      p {
        padding-left: 30px;
        text-indent: -30px;
      }

      a {
        text-decoration: none;
      }

      .details {
        float: right;
        width: 70%;
        padding-left: 10px;
      }

      img {
        width: 100%;
      }

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        margin-top: 30px;

        .details {
          padding-left: 20px;
          padding-bottom: 10px;
        }
      }

      .image-container {
        position: relative;

        float: left;
        padding: 0px;
        padding-right: 10px;
        height: 100%;
        width: 30%;

        a.mouseover-link {
          display: none;

          i {
            position: absolute;
            bottom: 0;
            right: 0;
            color: white;
            padding-bottom: 10px;
            padding-right: 40px;
            color: white;
          }
        }

        &:hover {
          a.mouseover-link {
            display: inline;
          }
        }
      }
    }
  }

  aside {
    background: no-repeat center center;
    background-attachment: scroll;
    .background-cover;
    color: white;
    font-weight: 800;
    padding: 80px 0;
    margin-bottom: 20px;
    margin-top: 80px;
    text-align: center;

    @media only screen and (min-width: 768px) {
      padding: 120px 0;
      margin-bottom: 30px;
      margin-top: 130px;
    }

    h2 {
      font-size: 30px;
      font-weight: 800;
      margin: 0px;

      @media only screen and (min-width: 768px) {
        font-size: 55px;
      }
    }

    /* TODO: Cusotmize heights for different devices. */
    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      padding-top: auto;
      padding-bottom: auto;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      padding-top: auto;
      padding-bottom: auto;
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      padding-top: auto;
      padding-bottom: auto;
    }
  }
}

.portfolio {

  h2 {
    margin-top: 0px;
    color: white;

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      font-size: 45px;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      font-size: 55px;
    }

    .portfolio-header-link {
      color: transparent;
      padding-left: 15px;
      font-weight: 400;
      text-decoration: none;
    }

    &:hover {
      .portfolio-header-link {
        color: white;
      }
    }
  }

  h3 {
    .serif;
    font-weight: 400;
    color: @gray-dark;
    font-size: 35px;
    text-align: left;
    line-height: 35px;
  }

  .container {
    &:last-child {
      padding-bottom: 50px;

      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        padding-bottom: 80px;
      }

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: 992px) {
        padding-bottom: 120px;
      }
    }
  }

  /* Software, Education */

  #education_list {
    li {
      &:first-child {
        margin-top: 20px !important;
      }
    }
  }

  #software_list, #education_list {
    li {
      vertical-align: top;
      display: inline-block;
      margin-top: 30px;
      text-align: left;

      &:first-child {
        margin-top: 0px;
      }

      h3 {
        margin-top: 0px;
        text-align: center;
      }

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        h3 {
          max-width: 60%;
          text-align: left;
          margin-bottom: 15px;
        }

        div {
          max-width: 50%;
          margin-top: 30px;
        }
      }

      img {
        padding: 15px 0px;
        max-width: 100%;
        @media (min-width: 768px) {
          max-width: 40%;
          float: right;
        }
      }

      div {
        margin-top: 15px;
      }

      p {
        margin-top: 15px;
      }
    }
  }

  /* Community */

  #community_list {
    padding: 30px 0px;
    li {
      margin: 0px 10px;

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        margin: 0px 30px;
      }

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: 992px) {
        margin: 0px 50px;
      }
    }
  }

  /* Photography */

  #photography_list {
    li {
      background: 0 0 no-repeat fixed;
      vertical-align: middle;
      position: relative;

      svg {
        fill: @gray-dark;
        &:hover {
          fill: @brand-primary;

          .dark-stroke {
            stroke: @brand-primary;
          }
        }

        .dark-stroke {
          stroke: @gray-dark;
        }

        .white-stroke {
          stroke: white;
        }
      }

      min-width: 70px;
    }

    li {
      -webkit-transform: scale(0.7);
      -moz-transform:    scale(0.7);
      -ms-transform:     scale(0.7);
      -o-transform:      scale(0.7);
      transform:         scale(0.7);

      margin: 10px 10px;
      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        margin: 10px 50px;
      }
    }
  }

  /* Section Headers */

  aside {
    display: block;
    color: white;
    position: relative;
    background: no-repeat center center scroll;
    background-size: cover;
    margin-top: 100px;
    margin-bottom: 30px;
    padding-top: 50px;
    padding-bottom: 50px;

    p {
      margin: 0px 0px;
    }

    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      height: 250px;
      padding-top: auto;
      padding-bottom: auto;
      margin-top: 200px;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      height: 350px;
      margin-top: 180px;
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      height: 450px;
    }

    figcaption {
      display: block;
      padding: 0px;
      text-align: center;

      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */
      width: 70%;
      margin-left: auto;
      margin-right: auto;

      a {
        &:hover,
        &:focus {
          color: white;
        }
      }

      @media (min-width: 768px) {
        position: absolute;
        text-align: left;
      }

      &:before {
        content:"";
        color: white;
        position: relative;
        @media (min-width: 768px) {
          position: absolute;
        }
      }

      /* Section Header Callouts */

      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
        right: 2em;
        bottom: 2em;
        width: 325px;
        &:before {
          width: 205px;
          height: 94px;
          top: 0em;
          right: 105%;
          background-image: url(/img/portfolio/callout_small.svg);
        }
      }

     /* Medium devices (desktops, 992px and up) */
      @media (min-width: 992px) {
        right: 5em;
        &:before {
          width: 357px;
          height:164px;
          top: -3.6em;
          background-image: url(/img/portfolio/callout.svg);
        }
      }

      /* Large devices (large desktops, 1200px and up) */
      @media (min-width: 1200px) {
        right: 7em;
        bottom: 5em;
      }
    }
  }
}


Add overflow wrap

Add overflow wrap

/* temp. workaround for .block-link border-color issue */
 a.jump-link,
 a.list_link {
   border-color: @link-underline;

   &:visited {
     border-color: @link-underline-visited;
   }

   &:hover {
     border-color: @link-underline-hover;
     z-index: 10;
   }

   &:active{
     border-color: @link-underline-active;
   }
 }

/* Borrowed from flapjack.*/

.list__links {
  .list__unstyled();

  .list_item {
    margin-bottom: unit(10x / @base-font-size-px, em);

    .respond-to-max(@mobile-max, {
      margin-bottom: -1px;
    });
  }

  &.list__spaced .list_item + .list_item {
    margin-top: 0;
  }

  .list_link {
    .respond-to-max(@mobile-max, {
      .block-link();
      border-color: @link-underline;

       &:visited {
         border-color: @link-underline-visited;
       }

       &:hover {
         border-color: @link-underline-hover;
         z-index: 10;
       }

       &:active{
         border-color: @link-underline-active;
       }

      &.icon-link:after {
        position: absolute;
        margin-bottom: -0.625em;
        right: 0;
        bottom: 50%;
        text-align: right;
      }

      .icon-link_text {
        border-bottom-width: 0;
      }
    });
  }

  &.list__icons {
    .list_link {
      position: relative;
      left: -0.125em; // adjust for optical alignment of icons
    }

    .icon-link:before,
    .icon-link:after {
      width: 1.125em;
      text-align: center;
    }
  }
}

/* temp. workaround for .block-link border-color issue */
a.jump-link,
a.list_link {
 border-color: @link-underline;

 &:visited {
   border-color: @link-underline-visited;
 }

 &:hover {
   border-color: @link-underline-hover;
   z-index: 10;
 }

 &:active{
   border-color: @link-underline-active;
 }
}

.icon-round {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1.5em;
  line-height: 1.5;
  text-align: center;
  background-color: @green-tint;
}

.char-icon {
  position: relative;
  padding-left: 1.5em;

 &:before {
   position: absolute;
   left: 0;
   top: 1px;
   font-size: .7em;
   .icon-round;
   .webfont-medium();
 }
}

.char-icon__checked {
 &:before {
   .cf-icon();
   content: "\e100";
   line-height: 1.6;
 }
}

.phase_ordinal {
  .icon-round;
  color: @black;
  .webfont-demi();
  float: left;
  margin-right: 5px;
}

.content-l_col + .content-l_col.phase_image {
  .respond-to-min(801px, {
    margin-top: 0;
  });
}
.phase {
  margin: 1em;
}
/* Process-specific styles */

.process-nav {

  li {
    br {
      display: none;
    }

    &.process-nav_header {
      background-color: @gray-5;
      border-color: @gray-5;
    }

    .process-nav_step-number {
      font-size: .85em;
      .phase_ordinal;
      background-color: @gray-10;

      .respond-to-min(@tablet-min, {
        float: none;
        display: block;
        margin: 0 auto .5em;
      });
    }

    &.current-step .process-nav_step-number {
      background-color: @green-tint;
    }
  }

  .respond-to-max(@mobile-max, {
    .jump-link {
      border-top: 1px solid @gray-50;
      border-bottom: 1px solid @gray-50;
      margin-bottom: -1px;

      &:after {
        content: "\e002";
      }
    }

    li {
      .process-nav_step-contents {
        padding-left: @grid_gutter-width/2;
      }

      &.process-nav_header {
        .process-nav_step-contents {
          .h6;
          display: block;
          padding: @grid_gutter-width/3 @grid_gutter-width/2;
          margin-bottom: 0;
        }
      }

      &.current-step {
        border-left: 5px solid @green;

        .process-nav_step-contents {
          padding-left: @grid_gutter-width/3;
        }
      }
    }

  });

  a.process-nav_step-contents {
    &:visited {
      border-color: @link-underline;
      color: @link-text;
    }
    &:hover {
      .process-nav_step-number {
        background-color: @gray-50;
      }
      color: @black;
      &:after {
        color: @black;
      }
    }
  }

  .respond-to-min(@tablet-min, {
    width: 100%;
    position: relative;
    text-align: center;
    display: table;
    span {
      display: block;
    }

    li {
      .webfont-medium();
      display: table-cell;
      padding: @grid_gutter-width/2;
      text-align: center;
      border-top: 1px solid @gray-50;
      border-bottom: 1px solid @gray-50;

      .process-nav_step-contents {
        display: block;
        position: static;
        .grid_column__left-divider;
        border-width: 0;
        padding: @grid_gutter-width/2 0;

        &:before {
          margin-left: -@grid_gutter-width/2;
          margin-top: @grid_gutter-width/3;
          margin-bottom: @grid_gutter-width/3;
        }
      }

      &.step-1 .process-nav_step-contents:before {
        width: 0;
      }

      br {
        display: block;
      }
    }

    &.process-nav__top {
      li {
        &.current-step {
          border-bottom-color: white;
          border-top-color: @green;
          border-top-width: 3px;
          position: relative;
          top: -1px;
        }

        &.process-nav_header,
        &.step-1 {
          padding-top: @grid_gutter-width * 2/3;
          padding-bottom: @grid_gutter-width * 2/3;
          position: relative;

          .process-nav_step-contents {
            padding: 0;

            &:before {
              width: 5px;
              background-color: white;
              margin-top: 0;
              margin-bottom: 0;
            }
          }
        }

        &.process-nav_header {
          border-width: 0;
          text-align: left;
          vertical-align: bottom;

          .process-nav_step-contents {
            padding-bottom: @grid_gutter-width/3;
            &:before {
              right: 0;
            }
          }
        }
      }
    }
  });

  &__top {
    li {
      .respond-to-min(@tablet-min, {
        width: 16.666%;
      });
    }
  }

  &__bottom {
    .respond-to-min(@tablet-min, {
      li {
        width: 20%;
      }
    });
  }

}

.know-the-process {

  .intro {
    .webfont-medium();
  }

  .tools-col {
    .respond-to-max(799px, {
      margin-right: -(@grid_gutter-width / 2);
      margin-left: -(@grid_gutter-width / 2)
    });
    .respond-to-min(800px, {
      .grid_column(1,3);
      .grid_push(8);
    });
    .tool + .tool {
      margin-top: @grid_gutter-width;
    }
  }

  .tools {
    background-color: @green-tint;
    .respond-to-max(799px, {
      margin-top: 0px;
    });
  }

  .steps-col {
    .respond-to-min(800px, {
      .grid_column(2,3);
      .grid_pull(4);
      margin-top: 0;
    });
  }

  .step {
    h2 {
      .h4;
      margin-bottom: @grid_gutter-width / 3;
      margin-top: @grid_gutter-width;
    }

    .content-l_col h2:first-child {
      margin-top: 0px;
    }

    ul {
      padding-left: 20px;
    }

    li {
      @font-size: 22px;
      @offset: unit(19px / @font-size, em);
      @size: unit(22px / @base-font-size-px, em);
      .custom-bullet(@text:"\25AA", @color: @list__branded-bullet, @offset: @offset, @size: @size);
      .list_item__spaced;
    }

    li.alert {
      &:before {
        top: 2px;
      }
    }

    li.action {
      .checked;
      &:before {
        top: 2px;
      }
    }
  }

  .expandable-group {
      border-top: 1px solid @gray-80;
      .content-l__main {
        .content-l_col-1-3 {
          .respond-to-min(@tablet-min, {
            .grid_column(1,3);
          });
        }
        .content-l_col-2-3 {
          .respond-to-min(@tablet-min, {
            .grid_column(2,3);
          });
        }
        .content-l_col-2-3 + .content-l_col-1-3  {
            margin-top: 0;
        }
        .content-l_col-1-4 + .content-l_col-3-4  {
            margin-top: 0;
        }
      }
      .list__branded li {
        .serif;
      }
      .content-l__main {
        .u-mb30;
        .respond-to-min(@tablet-min, {
          .u-mb30;
        });
        .respond-to-min(800px, {
          .u-mb45;
        });
      }

  }

  .expandable_label {
    width: 90%;
  }

  .expandable_cue_text {
    border-bottom: 1px dotted @link-underline;
  }

  .expandable_content {
    p {
      .short-desc;
    }
    p + .h4 {
      .respond-to-min(@tablet-min, {
        .u-mt20;
      });
      .respond-to-min(800px, {
        .u-mt45;
      });
    }
  }

  .phase_number {
    font-size: .6em;
    .phase_ordinal;
    position: relative;
    top: .25em;
  }

  .milestones {
    &_header {
      padding-left: 1.25em;
    }
    .respond-to-min(800px, {
      border-bottom: 1px solid @gray-50;
    });

    ul {
      padding-left: 20px;
      list-style-type: none;
      .respond-to-max(@mobile-max, {
        li {
          @font-size: 22px;
          @offset: unit(19px / @font-size, em);
          @size: unit(22px / @base-font-size-px, em);
          .custom-bullet(@text:"\25AA", @color: @list__branded-bullet, @offset: @offset, @size: @size);
        }
      });

      .respond-to-min(800px, {
        padding-left: 0;
      });
    }
  }

  .phase_data {
    .respond-to-min(800px, {
      .block;
    });
  }

  &.wrapper {
    margin: 0 auto !important;
    max-width: 1100px;

    .respond-to-min(800px, {
      padding-top: @grid_gutter-width;
    });
  }

}

.sources-step {
  .u-mb60;
  h4 {
    .u-mb15;
  }
  p {
    .short-desc;
    .u-mb30;
    a {
      overflow-wrap: break-word;
    }
  }
}

/* temp. workaround for .block-link border-color issue */
 a.jump-link,
 a.list_link {
   border-color: @link-underline;

   &:visited {
     border-color: @link-underline-visited;
   }

   &:hover {
     border-color: @link-underline-hover;
     z-index: 10;
   }

   &:active{
     border-color: @link-underline-active;
   }
 }

/* Borrowed from flapjack.*/

.list__links {
  .list__unstyled();

  .list_item {
    margin-bottom: unit(10x / @base-font-size-px, em);

    .respond-to-max(@mobile-max, {
      margin-bottom: -1px;
    });
  }

  &.list__spaced .list_item + .list_item {
    margin-top: 0;
  }

  .list_link {
    .respond-to-max(@mobile-max, {
      .block-link();
      border-color: @link-underline;

       &:visited {
         border-color: @link-underline-visited;
       }

       &:hover {
         border-color: @link-underline-hover;
         z-index: 10;
       }

       &:active{
         border-color: @link-underline-active;
       }

      &.icon-link:after {
        position: absolute;
        margin-bottom: -0.625em;
        right: 0;
        bottom: 50%;
        text-align: right;
      }

      .icon-link_text {
        border-bottom-width: 0;
      }
    });
  }

  &.list__icons {
    .list_link {
      position: relative;
      left: -0.125em; // adjust for optical alignment of icons
    }

    .icon-link:before,
    .icon-link:after {
      width: 1.125em;
      text-align: center;
    }
  }
}

/* temp. workaround for .block-link border-color issue */
a.jump-link,
a.list_link {
 border-color: @link-underline;

 &:visited {
   border-color: @link-underline-visited;
 }

 &:hover {
   border-color: @link-underline-hover;
   z-index: 10;
 }

 &:active{
   border-color: @link-underline-active;
 }
}

.icon-round {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1.5em;
  line-height: 1.5;
  text-align: center;
  background-color: @green-tint;
}

.char-icon {
  position: relative;
  padding-left: 1.5em;

 &:before {
   position: absolute;
   left: 0;
   top: 1px;
   font-size: .7em;
   .icon-round;
   .webfont-medium();
 }
}

.char-icon__checked {
 &:before {
   .cf-icon();
   content: "\e100";
   line-height: 1.6;
 }
}

.phase_ordinal {
  .icon-round;
  color: @black;
  .webfont-demi();
  float: left;
  margin-right: 5px;
}

.content-l_col + .content-l_col.phase_image {
  .respond-to-min(801px, {
    margin-top: 0;
  });
}
.phase {
  margin: 1em;
}
/* Process-specific styles */

.process-nav {

  li {
    br {
      display: none;
    }

    &.process-nav_header {
      background-color: @gray-5;
      border-color: @gray-5;
    }

    .process-nav_step-number {
      font-size: .85em;
      .phase_ordinal;
      background-color: @gray-10;

      .respond-to-min(@tablet-min, {
        float: none;
        display: block;
        margin: 0 auto .5em;
      });
    }

    &.current-step .process-nav_step-number {
      background-color: @green-tint;
    }
  }

  .respond-to-max(@mobile-max, {
    .jump-link {
      border-top: 1px solid @gray-50;
      border-bottom: 1px solid @gray-50;
      margin-bottom: -1px;

      &:after {
        content: "\e002";
      }
    }

    li {
      .process-nav_step-contents {
        padding-left: @grid_gutter-width/2;
      }

      &.process-nav_header {
        .process-nav_step-contents {
          .h6;
          display: block;
          padding: @grid_gutter-width/3 @grid_gutter-width/2;
          margin-bottom: 0;
        }
      }

      &.current-step {
        border-left: 5px solid @green;

        .process-nav_step-contents {
          padding-left: @grid_gutter-width/3;
        }
      }
    }

  });

  a.process-nav_step-contents {
    &:visited {
      border-color: @link-underline;
      color: @link-text;
    }
    &:hover {
      .process-nav_step-number {
        background-color: @gray-50;
      }
      color: @black;
      &:after {
        color: @black;
      }
    }
  }

  .respond-to-min(@tablet-min, {
    width: 100%;
    position: relative;
    text-align: center;
    display: table;
    span {
      display: block;
    }

    li {
      .webfont-medium();
      display: table-cell;
      padding: @grid_gutter-width/2;
      text-align: center;
      border-top: 1px solid @gray-50;
      border-bottom: 1px solid @gray-50;

      .process-nav_step-contents {
        display: block;
        position: static;
        .grid_column__left-divider;
        border-width: 0;
        padding: @grid_gutter-width/2 0;

        &:before {
          margin-left: -@grid_gutter-width/2;
          margin-top: @grid_gutter-width/3;
          margin-bottom: @grid_gutter-width/3;
        }
      }

      &.step-1 .process-nav_step-contents:before {
        width: 0;
      }

      br {
        display: block;
      }
    }

    &.process-nav__top {
      li {
        &.current-step {
          border-bottom-color: white;
          border-top-color: @green;
          border-top-width: 3px;
          position: relative;
          top: -1px;
        }

        &.process-nav_header,
        &.step-1 {
          padding-top: @grid_gutter-width * 2/3;
          padding-bottom: @grid_gutter-width * 2/3;
          position: relative;

          .process-nav_step-contents {
            padding: 0;

            &:before {
              width: 5px;
              background-color: white;
              margin-top: 0;
              margin-bottom: 0;
            }
          }
        }

        &.process-nav_header {
          border-width: 0;
          text-align: left;
          vertical-align: bottom;

          .process-nav_step-contents {
            padding-bottom: @grid_gutter-width/3;
            &:before {
              right: 0;
            }
          }
        }
      }
    }
  });

  &__top {
    li {
      .respond-to-min(@tablet-min, {
        width: 16.666%;
      });
    }
  }

  &__bottom {
    .respond-to-min(@tablet-min, {
      li {
        width: 20%;
      }
    });
  }

}

.know-the-process {

  .intro {
    .webfont-medium();
  }

  .tools-col {
    .respond-to-max(799px, {
      margin-right: -(@grid_gutter-width / 2);
      margin-left: -(@grid_gutter-width / 2)
    });
    .respond-to-min(800px, {
      .grid_column(1,3);
      .grid_push(8);
    });
    .tool + .tool {
      margin-top: @grid_gutter-width;
    }
  }

  .tools {
    background-color: @green-tint;
    .respond-to-max(799px, {
      margin-top: 0px;
    });
  }

  .steps-col {
    .respond-to-min(800px, {
      .grid_column(2,3);
      .grid_pull(4);
      margin-top: 0;
    });
  }

  .step {
    h2 {
      .h4;
      margin-bottom: @grid_gutter-width / 3;
      margin-top: @grid_gutter-width;
    }

    .content-l_col h2:first-child {
      margin-top: 0px;
    }

    ul {
      padding-left: 20px;
    }

    li {
      @font-size: 22px;
      @offset: unit(19px / @font-size, em);
      @size: unit(22px / @base-font-size-px, em);
      .custom-bullet(@text:"\25AA", @color: @list__branded-bullet, @offset: @offset, @size: @size);
      .list_item__spaced;
    }

    li.alert {
      &:before {
        top: 2px;
      }
    }

    li.action {
      .checked;
      &:before {
        top: 2px;
      }
    }
  }

  .expandable-group {
      border-top: 1px solid @gray-80;
      .content-l__main {
        .content-l_col-1-3 {
          .respond-to-min(@tablet-min, {
            .grid_column(1,3);
          });
        }
        .content-l_col-2-3 {
          .respond-to-min(@tablet-min, {
            .grid_column(2,3);
          });
        }
        .content-l_col-2-3 + .content-l_col-1-3  {
            margin-top: 0;
        }
        .content-l_col-1-4 + .content-l_col-3-4  {
            margin-top: 0;
        }
      }
      .list__branded li {
        .serif;
      }
      .content-l__main {
        .u-mb30;
        .respond-to-min(@tablet-min, {
          .u-mb30;
        });
        .respond-to-min(800px, {
          .u-mb45;
        });
      }

  }

  .expandable_label {
    width: 90%;
  }

  .expandable_cue_text {
    border-bottom: 1px dotted @link-underline;
  }

  .expandable_content {
    p {
      .short-desc;
    }
    p + .h4 {
      .respond-to-min(@tablet-min, {
        .u-mt20;
      });
      .respond-to-min(800px, {
        .u-mt45;
      });
    }
  }

  .phase_number {
    font-size: .6em;
    .phase_ordinal;
    position: relative;
    top: .25em;
  }

  .milestones {
    &_header {
      padding-left: 1.25em;
    }
    .respond-to-min(800px, {
      border-bottom: 1px solid @gray-50;
    });

    ul {
      padding-left: 20px;
      list-style-type: none;
      .respond-to-max(@mobile-max, {
        li {
          @font-size: 22px;
          @offset: unit(19px / @font-size, em);
          @size: unit(22px / @base-font-size-px, em);
          .custom-bullet(@text:"\25AA", @color: @list__branded-bullet, @offset: @offset, @size: @size);
        }
      });

      .respond-to-min(800px, {
        padding-left: 0;
      });
    }
  }

  .phase_data {
    .respond-to-min(800px, {
      .block;
    });
  }

  &.wrapper {
    margin: 0 auto !important;
    max-width: 1100px;

    .respond-to-min(800px, {
      padding-top: @grid_gutter-width;
    });
  }

}

.sources-step {
  .u-mb60;
  h4 {
    .u-mb15;
  }
  p {
    .short-desc;
    .u-mb30;
  }
}


Updates base deprecation erros

Updates base deprecation erros

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/JesseLeite/earthsung-by-jackson-syntax-atom.git/'


Added stylesheet

Added stylesheet

@import '../../lib/stylesheets/common.less';
@import '../../lib/stylesheets/demo.less';

error: pathspec 'src/stylesheets/demo.less' did not match any file(s) known to git


! Fix alignment issue on slide toggle

! Fix alignment issue on slide toggle

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/Coveo/styleguide.git/'


- renomeando arquivo

- renomeando arquivo

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/Dhales-Ribeiro/NoClass.git/'


Better header background gradient

Better header background gradient

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// Global variables
@space: 70px;
@wrapperWidth: 750px;
@baseFontSize: 24px;
@baseLineHeight: 1.7;
@linkColor: #e34; // #2ed for invert color
@backgroundColor: #fff;
@textColor: #000;

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

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url(font.woff) format('woff');
}

.font-face {
  font-family: PFDTCP-M, "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
  -webkit-font-smoothing: antialiased;
}

.helvetica {
  color: fade(@textColor, 40%);
  font-family: "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  font-size: @baseFontSize / 2;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
  line-height: @baseLineHeight * .9;
}

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The original space content hack is removed here. No need to support Opera on my personal site.
// 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.

.cf {
  &:before,
  &:after {
    content: ""; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// Basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @textColor;
  background: @backgroundColor;
  font-size: @baseFontSize;
  font-family: Palatino, "Hiragino Mincho ProN", serif;
  line-height: @baseLineHeight;
  margin: 0 auto 0;
  padding: 0 0  @space * 1.5;
  text-align: center;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

.wrapper {
  max-width: @thumbSize * 5 + @thumbPadding * 8; // Defined at work-list
  margin: 0 auto;
  padding: 0 @space * 1.2;
}

a, button {
  color: @textColor;
  .transition(~"color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease");
  &:hover {
    color: @linkColor;
    .transition(~"color .1s ease, border-color .1s ease, background-color .1s ease, opacity .1s ease");
  }
}

ins {
  color: fade(@textColor, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@textColor, 6%);
}

// Core styles begin
body:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  content: "";
  background: fade(@textColor, 2%);
  border-bottom: 1px solid fade(@textColor, 2%);
  z-index: 9999;
  pointer-events: none;
}

a[role=logo] {
  display: block;
  width: 0;
  height: 0;
  margin: -29px auto @space / 5;
  border-style: solid;
  border-width: 0 26px 45px 26px;
  border-color: transparent;
  border-bottom-color: @textColor;
  text-indent: -9999em;
  &:hover {
    border-bottom-color: @linkColor;
  }
}

// Borrowed from Bootstrap
.vertical(@startColor: #444, @endColor: #333) {
  background-color: mix(@startColor, @endColor, 60%);
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image:   linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
}

header.index {
  margin: 0 0 @space / 5;
  height: 200px;
  .vertical(#9475d1, #b67fd6);
  a[role=logo] {
    margin: 37px auto 0;
    border-bottom-color: @backgroundColor;
    &:hover {
      border-bottom-color: fade(@backgroundColor, 70%);
    }
  }
  h2 {
    padding: 0 5%;
    a {
      color: @backgroundColor;
      .font-face;
      font-size: @baseFontSize * 1.25;
      border-bottom: transparent 1px solid; // We have to define this in order to make transition work
      &:hover {
        border-bottom-color: @backgroundColor;
      }
    }
  }
  h3 {
    .helvetica;
    padding-top: 70px;
    color: @backgroundColor;
    opacity: .6;
  }
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.5;
  .cf;
  ul {
    li {
      display: inline-block;
      list-style: none;
      line-height: 2;
      a {
        padding: 3px 1em;
        font-weight: bold;
      }
      &[role=current] {
        a {
          color: @linkColor;
        }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 282px;
    display: block;
    padding: 7px 10px;
    font-size: @baseFontSize / 2 - 2px;
    letter-spacing: .2em;
    background: fade(@textColor, 5%);
    z-index: 9999;
    .transition(~"padding .1s ease");
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@linkColor, 95%);
      pointer-events: none;
      .transition(~"opacity .1s ease, padding .1s ease");
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.35;
  > * {
    font-weight: normal;
  }
  h1 {
    margin: 0 0 .1em;
  }
  h2 {
    .helvetica;
  }
  .status {
    a {
      &:hover {
        color: fade(green, 80%);
      }
    }
    & > *:first-child:before {
      @s: 9px;
      display: inline-block;
      content: "";
      width: @s;
      height: @s;
      border-radius: 50%;
      background: fade(@textColor, 20%);
      margin-right: @s;
    }
    &.available > *:first-child:before {
      background: fade(green, 60%);
    }
    &.unavailable > *:first-child:before {
      background: fade(red, 20%);
    }
  }
  & + .txt :first-child { // For example, hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

article:not(.width-fix) {
  max-width: @wrapperWidth; // Width fix for work-list in posts
}

article {
  margin: 0 auto @space * 1.35;
  // For some specified posts in work category
  .cf;
  img, video, iframe {
    display: block;
    margin: 0 auto 40px;
    max-width: 100%;
  }
  .txt {
    clear: both; // For sibling, following elements (ie. .browser class) with float: left;
    overflow: hidden;
    text-align: left;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@textColor, 30%); // Set larger value for invert color
    }
    p {
      margin: 0 0 1.1em;
      line-height: @baseLineHeight;
    }
    h3 {
      .helvetica;
      margin: @space 0 1.6em;
    }
    ul, ol {
      margin: 0 0 1em 1em;
      li {
        line-height: @baseLineHeight;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      .cf;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
        font-size: 120px;
        color: fade(@textColor, 70%);
        font-family: "Helvetica Neue", sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
      cite {
        float: right;
        margin: 0 0 2em;
        font-size: 85%;
        color: fade(@textColor, 80%);
        &:before {
          content: "\2500\2500\00a0" // http://www.fileformat.info/info/unicode/char/2500/index.htm
        }
      }
    }
    sup {
      font-size: 75%;
    }
    hr {
      .helvetica;
      margin: @space 0 1.6em;
      &:before {
        content: attr(data-placeholder);
      }
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
    form {
      label {
        .helvetica;
        display: block;
        margin-bottom: @space * .3;
      }
      input {
        .helvetica;
        display: block;
        border: 1px solid fade(@textColor, 20%);
        padding: 7px;
        margin: 0 auto @space * .3;
        width: 100%;
        outline: none;
        box-sizing: border-box;
        border-radius: 0; // Remove border-radius for ios devices
        -webkit-appearance: none; // Remove ios pre-defined style
        &:focus {
          border-color: @textColor;
        }
      }
      button.btn {
        display: block;
        margin: 0 auto;
      }
    }
  }
  .browser {
    float: left;
    margin: 0 0 40px;
    padding-top: 16px;
    border-radius: 4px 4px 0 0;
    background: #e8e8e8;
    box-shadow: rgba(0, 0, 0, .15) 0 10px 50px 0, rgba(0, 0, 0, .4) 0 0 0 1px, inset rgba(255, 255, 255, .6) 0 1px 0 0;
    img {
      box-shadow: rgba(0, 0, 0, .4) 0 -1px 0 0;
      margin: 0;
    }
  }
  .note, .store, .download {
    @iconSize: 40px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: @iconSize @iconSize;
    padding-left: @iconSize * 1.25;
  }
  .note {
    background-image: url("data:image/svg+xml,<svg id='note' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>");
  }
  .store {
    background-image: url("data:image/svg+xml,<svg id='store' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M20,0C8.954,0,0,8.954,0,20s8.954,20,20,20s20-8.954,20-20S31.046,0,20,0z M5,20c0-7.806,5.964-14.214,13.583-14.929 v3.574c-3.852,0.757-6.083,3.24-6.083,6.407c0,3.492,2.627,5.292,6.479,6.588c2.664,0.899,3.816,1.764,3.816,3.131 c0,1.44-1.404,2.232-3.456,2.232c-2.34,0-4.463-0.756-5.975-1.584l-1.08,4.211c1.368,0.792,3.708,1.44,6.119,1.548v3.734 C10.87,34.115,5,27.744,5,20z M21.931,34.862v-3.936c4.14-0.72,6.407-3.455,6.407-6.659c0-3.239-1.729-5.219-6.012-6.73 c-3.059-1.152-4.319-1.908-4.319-3.096c0-1.008,0.756-2.016,3.095-2.016c2.592,0,4.247,0.827,5.184,1.224l1.044-4.067 c-1.188-0.576-2.808-1.08-5.22-1.188V5.166C29.393,6.194,35,12.434,35,20C35,27.629,29.301,33.912,21.931,34.862z'/></svg>");
  }
  .download {
    background-image: url("data:image/svg+xml,<svg id='download' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M29.982,5.825c-0.469,0-0.922,0.074-1.375,0.142C26.867,2.87,23.65,0.808,20,0.808c-3.729,0-6.948,2.093-8.661,5.14 c-0.439-0.059-0.875-0.122-1.321-0.122C4.513,5.825,0,10.468,0,16c0,5.533,4.495,10,10,10h7v6h-5l8,8l8-8h-5v-6h7 c5.508,0,10-4.467,10-10C40,10.469,35.489,5.825,29.982,5.825z M30,21H10c-2.751,0-5-2.398-5-5.167c0-2.749,2.124-5.09,5.051-5.09 c1.73-0.001,2.464,0.587,3.394,1.203c0-1.807,2.229-6.122,6.555-6.122c2.496,0,3.952,2.242,4.441,2.735 c-1.945,1.957-2.845,4.457-2.412,7.752h0.691c0.573-2.291,2.455-5.557,7.279-5.557c2.749,0,5,2.311,5,5.078 C35,18.602,32.749,21,30,21z'/></svg>");
  }
}

[lang=zh] {
  text-align: justify; // Workaround solution for post with chinese
}

[role=tweet] {
  margin-top: @space;
}

.txt[role=announcement] {
  text-align: center;
}

// Image list in "work"
@thumbSize: 190px;
@thumbPadding: 15px;
@thumbFontSize: @baseFontSize * .7;

ul[role^=work-list] {
  margin: -@thumbPadding;
  text-align: left;
  .cf;
  li {
    position: relative;
    list-style: none;
    float: left;
    margin: @thumbPadding;
    a {
      display: block;
      width: @thumbSize;
      height: @thumbSize + @thumbFontSize * 2 + @thumbPadding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: @thumbFontSize;
      overflow: hidden; // For text
    }
    &:hover a {
      opacity: 1;
    }
    p {
      margin: @thumbPadding * 1.4 0 0;
    }
    time {
      color: fade(@textColor, 30%);
    }
    img {
      width: @thumbSize;
      height: @thumbSize;
      margin: 0; // Override: article img
      background: @linkColor;
    }
  }
  & ~ div.txt {
    margin: @space * .5 0 0; // Better margin between to work lists
  }
}

// Image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  margin: 0 0 20px;
}

// Post list in "note"
div[role^=note-list] {
  section {
    margin: 0 0 @space * .2;
    overflow: hidden;
    h2 {
      .font-face;
      font-size: @baseFontSize * 2;
      margin: 0 0 .1em;
      font-weight: normal;
      time {
        color: fade(@textColor, 30%);
      }
      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }
    }
  }
  section:last-child {
    margin-bottom: 0;
  }
}

aside {
  margin: 0 0 @space * 1.35;
}

aside[role=sponsor] {
  max-width: @wrapperWidth;
  clear: both;
  .bsap {
    .bsa_it_i { // Letter i = image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // Letter t = text
      display: block;
      font-size: .5em;
      line-height: @baseLineHeight;
    }
    .bsa_it_d { // Letter d = description
      display: block;
      font-size: .9em;
      line-height: @baseLineHeight;
    }
    .bsa_it_p {
      display: block;
      margin-top: 5px;
      .helvetica;
      a {
        color: fade(@textColor, 40%);
        &:hover {
          color: @textColor;
        }
      }
    }
  }
}

.btn {
  .helvetica;
  display: inline-block;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
  &:hover, &:focus {
    background: @linkColor;
  }
}

footer {
  .helvetica;
  font-size: @baseFontSize / 2 - 1px;
}

// Four thumbnails in a row
@media (max-width: 1238px) {
  .wrapper {
    max-width: @thumbSize * 4 + @thumbPadding * 6; // Defined at work-list
  }
}

// Three thumbnails in a row
@media (max-width: 1018px) {
  .wrapper {
    max-width: @thumbSize * 3 + @thumbPadding * 4; // Defined at work-list
  }
}

// Small screen
@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  .wrapper {
    -webkit-text-size-adjust: none;
  }
}

// iPad and iPhone portrait {
@media (max-device-width: 1024px) and (orientation: portrait) {
  .wrapper {
    @padding: 69px;
    padding-left: @padding;
    padding-right: @padding;
  }
}

// iPhone
@media (max-device-width: 480px) {
  .wrapper {
    @padding: 32px;
    padding-left: @padding;
    padding-right: @padding;
  }

  ul[role^=work-list] {
    li {
      float: none; // Make sure smaller images are stretched to 100% in iOS and Safari, Firefox (only Chrome works without this hack at the moment)
      margin-bottom: @thumbPadding * 2;
      img {
        width: 100%;
        height: auto; // Should be 100%, but Safari for iOS has stupid bug for it.
      }
      a {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// iPhone portrait
@media (max-device-width: 480px) and (orientation: portrait) {
  .wrapper {
    @padding: 15px;
    padding-left: @padding;
    padding-right: @padding;
  }
}

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// Global variables
@space: 70px;
@wrapperWidth: 750px;
@baseFontSize: 24px;
@baseLineHeight: 1.7;
@linkColor: #e34; // #2ed for invert color
@backgroundColor: #fff;
@textColor: #000;

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

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url(font.woff) format('woff');
}

.font-face {
  font-family: PFDTCP-M, "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
  -webkit-font-smoothing: antialiased;
}

.helvetica {
  color: fade(@textColor, 40%);
  font-family: "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  font-size: @baseFontSize / 2;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
  line-height: @baseLineHeight * .9;
}

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The original space content hack is removed here. No need to support Opera on my personal site.
// 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.

.cf {
  &:before,
  &:after {
    content: ""; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// Basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @textColor;
  background: @backgroundColor;
  font-size: @baseFontSize;
  font-family: Palatino, "Hiragino Mincho ProN", serif;
  line-height: @baseLineHeight;
  margin: 0 auto 0;
  padding: 0 0  @space * 1.5;
  text-align: center;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

.wrapper {
  max-width: @thumbSize * 5 + @thumbPadding * 8; // Defined at work-list
  margin: 0 auto;
  padding: 0 @space * 1.2;
}

a, button {
  color: @textColor;
  .transition(~"color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease");
  &:hover {
    color: @linkColor;
    .transition(~"color .1s ease, border-color .1s ease, background-color .1s ease, opacity .1s ease");
  }
}

ins {
  color: fade(@textColor, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@textColor, 6%);
}

// Core styles begin
body:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  content: "";
  background: fade(@textColor, 2%);
  border-bottom: 1px solid fade(@textColor, 2%);
  z-index: 9999;
  pointer-events: none;
}

a[role=logo] {
  display: block;
  width: 0;
  height: 0;
  margin: -29px auto @space / 5;
  border-style: solid;
  border-width: 0 26px 45px 26px;
  border-color: transparent;
  border-bottom-color: @textColor;
  text-indent: -9999em;
  &:hover {
    border-bottom-color: @linkColor;
  }
}

// Borrowed from Bootstrap
.vertical(@startColor: #444, @endColor: #333) {
  background-color: mix(@startColor, @endColor, 60%);
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image:    -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  background-image:      -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  background-image:   linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
}

header.index {
  margin: 0 0 @space / 5;
  height: 200px;
  .vertical(#9475d1, #bd7fd6);
  a[role=logo] {
    margin: 37px auto 0;
    border-bottom-color: @backgroundColor;
    &:hover {
      border-bottom-color: fade(@backgroundColor, 70%);
    }
  }
  h2 {
    padding: 0 5%;
    a {
      color: @backgroundColor;
      .font-face;
      font-size: @baseFontSize * 1.25;
      border-bottom: transparent 1px solid; // We have to define this in order to make transition work
      &:hover {
        border-bottom-color: @backgroundColor;
      }
    }
  }
  h3 {
    .helvetica;
    padding-top: 70px;
    color: @backgroundColor;
    opacity: .6;
  }
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.5;
  .cf;
  ul {
    li {
      display: inline-block;
      list-style: none;
      line-height: 2;
      a {
        padding: 3px 1em;
        font-weight: bold;
      }
      &[role=current] {
        a {
          color: @linkColor;
        }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 282px;
    display: block;
    padding: 7px 10px;
    font-size: @baseFontSize / 2 - 2px;
    letter-spacing: .2em;
    background: fade(@textColor, 5%);
    z-index: 9999;
    .transition(~"padding .1s ease");
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@linkColor, 95%);
      pointer-events: none;
      .transition(~"opacity .1s ease, padding .1s ease");
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.35;
  > * {
    font-weight: normal;
  }
  h1 {
    margin: 0 0 .1em;
  }
  h2 {
    .helvetica;
  }
  .status {
    a {
      &:hover {
        color: fade(green, 80%);
      }
    }
    & > *:first-child:before {
      @s: 9px;
      display: inline-block;
      content: "";
      width: @s;
      height: @s;
      border-radius: 50%;
      background: fade(@textColor, 20%);
      margin-right: @s;
    }
    &.available > *:first-child:before {
      background: fade(green, 60%);
    }
    &.unavailable > *:first-child:before {
      background: fade(red, 20%);
    }
  }
  & + .txt :first-child { // For example, hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

article:not(.width-fix) {
  max-width: @wrapperWidth; // Width fix for work-list in posts
}

article {
  margin: 0 auto @space * 1.35;
  // For some specified posts in work category
  .cf;
  img, video, iframe {
    display: block;
    margin: 0 auto 40px;
    max-width: 100%;
  }
  .txt {
    clear: both; // For sibling, following elements (ie. .browser class) with float: left;
    overflow: hidden;
    text-align: left;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@textColor, 30%); // Set larger value for invert color
    }
    p {
      margin: 0 0 1.1em;
      line-height: @baseLineHeight;
    }
    h3 {
      .helvetica;
      margin: @space 0 1.6em;
    }
    ul, ol {
      margin: 0 0 1em 1em;
      li {
        line-height: @baseLineHeight;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      .cf;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
        font-size: 120px;
        color: fade(@textColor, 70%);
        font-family: "Helvetica Neue", sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
      cite {
        float: right;
        margin: 0 0 2em;
        font-size: 85%;
        color: fade(@textColor, 80%);
        &:before {
          content: "\2500\2500\00a0" // http://www.fileformat.info/info/unicode/char/2500/index.htm
        }
      }
    }
    sup {
      font-size: 75%;
    }
    hr {
      .helvetica;
      margin: @space 0 1.6em;
      &:before {
        content: attr(data-placeholder);
      }
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
    form {
      label {
        .helvetica;
        display: block;
        margin-bottom: @space * .3;
      }
      input {
        .helvetica;
        display: block;
        border: 1px solid fade(@textColor, 20%);
        padding: 7px;
        margin: 0 auto @space * .3;
        width: 100%;
        outline: none;
        box-sizing: border-box;
        border-radius: 0; // Remove border-radius for ios devices
        -webkit-appearance: none; // Remove ios pre-defined style
        &:focus {
          border-color: @textColor;
        }
      }
      button.btn {
        display: block;
        margin: 0 auto;
      }
    }
  }
  .browser {
    float: left;
    margin: 0 0 40px;
    padding-top: 16px;
    border-radius: 4px 4px 0 0;
    background: #e8e8e8;
    box-shadow: rgba(0, 0, 0, .15) 0 10px 50px 0, rgba(0, 0, 0, .4) 0 0 0 1px, inset rgba(255, 255, 255, .6) 0 1px 0 0;
    img {
      box-shadow: rgba(0, 0, 0, .4) 0 -1px 0 0;
      margin: 0;
    }
  }
  .note, .store, .download {
    @iconSize: 40px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: @iconSize @iconSize;
    padding-left: @iconSize * 1.25;
  }
  .note {
    background-image: url("data:image/svg+xml,<svg id='note' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>");
  }
  .store {
    background-image: url("data:image/svg+xml,<svg id='store' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M20,0C8.954,0,0,8.954,0,20s8.954,20,20,20s20-8.954,20-20S31.046,0,20,0z M5,20c0-7.806,5.964-14.214,13.583-14.929 v3.574c-3.852,0.757-6.083,3.24-6.083,6.407c0,3.492,2.627,5.292,6.479,6.588c2.664,0.899,3.816,1.764,3.816,3.131 c0,1.44-1.404,2.232-3.456,2.232c-2.34,0-4.463-0.756-5.975-1.584l-1.08,4.211c1.368,0.792,3.708,1.44,6.119,1.548v3.734 C10.87,34.115,5,27.744,5,20z M21.931,34.862v-3.936c4.14-0.72,6.407-3.455,6.407-6.659c0-3.239-1.729-5.219-6.012-6.73 c-3.059-1.152-4.319-1.908-4.319-3.096c0-1.008,0.756-2.016,3.095-2.016c2.592,0,4.247,0.827,5.184,1.224l1.044-4.067 c-1.188-0.576-2.808-1.08-5.22-1.188V5.166C29.393,6.194,35,12.434,35,20C35,27.629,29.301,33.912,21.931,34.862z'/></svg>");
  }
  .download {
    background-image: url("data:image/svg+xml,<svg id='download' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M29.982,5.825c-0.469,0-0.922,0.074-1.375,0.142C26.867,2.87,23.65,0.808,20,0.808c-3.729,0-6.948,2.093-8.661,5.14 c-0.439-0.059-0.875-0.122-1.321-0.122C4.513,5.825,0,10.468,0,16c0,5.533,4.495,10,10,10h7v6h-5l8,8l8-8h-5v-6h7 c5.508,0,10-4.467,10-10C40,10.469,35.489,5.825,29.982,5.825z M30,21H10c-2.751,0-5-2.398-5-5.167c0-2.749,2.124-5.09,5.051-5.09 c1.73-0.001,2.464,0.587,3.394,1.203c0-1.807,2.229-6.122,6.555-6.122c2.496,0,3.952,2.242,4.441,2.735 c-1.945,1.957-2.845,4.457-2.412,7.752h0.691c0.573-2.291,2.455-5.557,7.279-5.557c2.749,0,5,2.311,5,5.078 C35,18.602,32.749,21,30,21z'/></svg>");
  }
}

[lang=zh] {
  text-align: justify; // Workaround solution for post with chinese
}

[role=tweet] {
  margin-top: @space;
}

.txt[role=announcement] {
  text-align: center;
}

// Image list in "work"
@thumbSize: 190px;
@thumbPadding: 15px;
@thumbFontSize: @baseFontSize * .7;

ul[role^=work-list] {
  margin: -@thumbPadding;
  text-align: left;
  .cf;
  li {
    position: relative;
    list-style: none;
    float: left;
    margin: @thumbPadding;
    a {
      display: block;
      width: @thumbSize;
      height: @thumbSize + @thumbFontSize * 2 + @thumbPadding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: @thumbFontSize;
      overflow: hidden; // For text
    }
    &:hover a {
      opacity: 1;
    }
    p {
      margin: @thumbPadding * 1.4 0 0;
    }
    time {
      color: fade(@textColor, 30%);
    }
    img {
      width: @thumbSize;
      height: @thumbSize;
      margin: 0; // Override: article img
      background: @linkColor;
    }
  }
  & ~ div.txt {
    margin: @space * .5 0 0; // Better margin between to work lists
  }
}

// Image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  margin: 0 0 20px;
}

// Post list in "note"
div[role^=note-list] {
  section {
    margin: 0 0 @space * .2;
    overflow: hidden;
    h2 {
      .font-face;
      font-size: @baseFontSize * 2;
      margin: 0 0 .1em;
      font-weight: normal;
      time {
        color: fade(@textColor, 30%);
      }
      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }
    }
  }
  section:last-child {
    margin-bottom: 0;
  }
}

aside {
  margin: 0 0 @space * 1.35;
}

aside[role=sponsor] {
  max-width: @wrapperWidth;
  clear: both;
  .bsap {
    .bsa_it_i { // Letter i = image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // Letter t = text
      display: block;
      font-size: .5em;
      line-height: @baseLineHeight;
    }
    .bsa_it_d { // Letter d = description
      display: block;
      font-size: .9em;
      line-height: @baseLineHeight;
    }
    .bsa_it_p {
      display: block;
      margin-top: 5px;
      .helvetica;
      a {
        color: fade(@textColor, 40%);
        &:hover {
          color: @textColor;
        }
      }
    }
  }
}

.btn {
  .helvetica;
  display: inline-block;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
  &:hover, &:focus {
    background: @linkColor;
  }
}

footer {
  .helvetica;
  font-size: @baseFontSize / 2 - 1px;
}

// Four thumbnails in a row
@media (max-width: 1238px) {
  .wrapper {
    max-width: @thumbSize * 4 + @thumbPadding * 6; // Defined at work-list
  }
}

// Three thumbnails in a row
@media (max-width: 1018px) {
  .wrapper {
    max-width: @thumbSize * 3 + @thumbPadding * 4; // Defined at work-list
  }
}

// Small screen
@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  .wrapper {
    -webkit-text-size-adjust: none;
  }
}

// iPad and iPhone portrait {
@media (max-device-width: 1024px) and (orientation: portrait) {
  .wrapper {
    @padding: 69px;
    padding-left: @padding;
    padding-right: @padding;
  }
}

// iPhone
@media (max-device-width: 480px) {
  .wrapper {
    @padding: 32px;
    padding-left: @padding;
    padding-right: @padding;
  }

  ul[role^=work-list] {
    li {
      float: none; // Make sure smaller images are stretched to 100% in iOS and Safari, Firefox (only Chrome works without this hack at the moment)
      margin-bottom: @thumbPadding * 2;
      img {
        width: 100%;
        height: auto; // Should be 100%, but Safari for iOS has stupid bug for it.
      }
      a {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// iPhone portrait
@media (max-device-width: 480px) and (orientation: portrait) {
  .wrapper {
    @padding: 15px;
    padding-left: @padding;
    padding-right: @padding;
  }
}


Create panels.less

Create panels.less

[data-panel] {
	padding:@gutter;
	margin:@separating-margin-center;
	overflow:hidden;
	.border-radius(@border-radius);
	.shadow-extra-small();
}

[data-panel] [data-header],
[data-panel] [data-footer] {
	display:block;
	background-color:lighten(@light-grey,7.5%);
	padding:(@gutter / 2) @gutter;
}

[data-panel] [data-header] {
	margin:(@gutter * -1) (@gutter * -1) @gutter;
}

[data-panel] [data-footer] {
	margin:@gutter (@gutter * -1) (@gutter * -1);
}

[data-panel] [data-header].primary,
[data-panel] [data-footer].primary {
	background-color:@primary;
	color:@white;
}

[data-panel] [data-header].info,
[data-panel] [data-footer].info {
	background-color:@info;
	color:@white;
}

[data-panel] [data-header].success,
[data-panel] [data-footer].success {
	background-color:@success;
	color:@white;
}

[data-panel] [data-header].warning,
[data-panel] [data-footer].warning {
	background-color:@warning;
	color:@black;
}

[data-panel] [data-header].danger,
[data-panel] [data-footer].danger {
	background-color:@danger;
	color:@white;
}

error: pathspec 'less/panels.less' did not match any file(s) known to git


Update style of required asterisk

Update style of required asterisk

fatal: unable to access 'https://github.com/sonatra/sonatra-theme-gluon.git/': The requested URL returned error: 403


For some reason this didn't go in with the previous commit

// ------------------------------------
// Tooltips

.tooltip-inner {
  padding: 5px 10px;
}

// ------------------------------------
// Loading Indicators

.loading-indicator {
  position: relative;
  color: @fl-body-primary-color;
}
.loading-indicator-block {
  height: 100px;
}

error: pathspec 'ember/app/styles/flarum/components.less' did not match any file(s) known to git


fixing the import when builing in other projects

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/Livefyre/streamhub-sdk.git/'


moved some styles

moved some styles

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/Digipalvelutehdas/APIKA.git/'


removed button border styles

removed button border styles

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300);

// Colors
// -------------------------

@gray-lighter: #f5f5f5;
@gray-light: #e0e0e0;
@gray: #737373;
@gray-dark: #404040;
@gray-darker: #121212;

@brand-primary: #2ac5ee;
@brand-success: #0f9d58;
@brand-warning: #f4b400;
@brand-danger: #d80017;
@brand-info: #5bc0dd;

::selection {
  background: @brand-primary;
}

// Typography
// -------------------------

@font-size-base: 13px;
@font-family-base: 'Montserrat', sans-serif;
@headings-font-family: 'Montserrat', sans-serif;
@headings-font-weight: 700;
@text-color: @gray-darker;
@link-color: @brand-primary;
@link-hover-color: @gray-darker;

a {
  transition: all .4s cubic-bezier(.24,.45,.46,.92);

  &:hover {
    text-decoration: none;
  }

  &.text-danger {
    color: @brand-danger;

    &:hover {
      color: @gray-darker;
    }
  }
}

p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 300;
}

// Buttons
// -------------------------

@btn-default-bg: @gray-lighter;
@btn-default-color: @gray-darker;

.btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 3px;
  transition: all .4s cubic-bezier(.24,.45,.46,.92);

  &:hover {
    color: #fff;
    background-color: @gray-darker;
  }
}

.btn-social {
  padding: 10px 50px;

  :first-child {
    width: 38px;
    line-height: 38px;
  }
}

.btn-link {

  &:hover {
    text-decoration: none;
    background-color: transparent;
    color: @gray-darker;
  }
}

// Forms
// -------------------------

@input-border-radius: 2px;
@input-border-focus: #999;
@input-border: #f0f0f0;
@input-color: #444;
@input-color-placeholder: #999;
@input-height-base: 48px;

// Form states and alerts
// -------------------------

@state-success-text: #fff;
@state-success-bg: @brand-success;

@state-info-text: #fff;
@state-info-bg: @brand-primary;

@state-warning-text: #fff;
@state-warning-bg: @brand-warning;

@state-danger-text: #fff;
@state-danger-bg: @brand-danger;

// Alerts
// -------------------------

.alert {
  font-family: 'Raleway', sans-serif;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

// Navbar
// -------------------------

@navbar-height: 50px;
@navbar-default-bg: rgba(255,255,255,0.95);
@navbar-default-link-color: @gray-darker;
@navbar-default-link-active-color: @brand-primary;
@navbar-default-link-active-bg: transparent;
@navbar-default-link-hover-color: @brand-primary;
@navbar-default-link-hover-bg: transparent;
@navbar-default-brand-color: @gray-darker;
@navbar-default-brand-hover-color: @brand-primary;

.navbar-default {
  border: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);

  .navbar-brand {
    font-weight: 300;
  }

  .navbar-nav {
    > li > a {
      transition: color .4s cubic-bezier(.24,.45,.46,.92);
    }
  }
}

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300);

// Colors
// -------------------------

@gray-lighter: #f5f5f5;
@gray-light: #e0e0e0;
@gray: #737373;
@gray-dark: #404040;
@gray-darker: #121212;

@brand-primary: #2ac5ee;
@brand-success: #0f9d58;
@brand-warning: #f4b400;
@brand-danger: #d80017;
@brand-info: #5bc0dd;

::selection {
  background: @brand-primary;
}

// Typography
// -------------------------

@font-size-base: 13px;
@font-family-base: 'Montserrat', sans-serif;
@headings-font-family: 'Montserrat', sans-serif;
@headings-font-weight: 700;
@text-color: @gray-darker;
@link-color: @brand-primary;
@link-hover-color: @gray-darker;

a {
  transition: all .4s cubic-bezier(.24,.45,.46,.92);

  &:hover {
    text-decoration: none;
  }

  &.text-danger {
    color: @brand-danger;

    &:hover {
      color: @gray-darker;
    }
  }
}

p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 300;
}

// Buttons
// -------------------------

@btn-default-bg: @gray-lighter;
@btn-default-color: @gray-darker;
@btn-primary-border: darken(@brand-primary, 8%);
@btn-success-border: darken(@brand-success, 8%);
@btn-warning-border: darken(@brand-warning, 8%);
@btn-danger-border: darken(@brand-danger, 8%);
@btn-info-border: darken(@brand-info, 8%);

.btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 3px;
  transition: all .4s cubic-bezier(.24,.45,.46,.92);

  &:hover {
    color: #fff;
    background-color: @gray-darker;
  }
}

.btn-social {
  padding: 10px 50px;

  :first-child {
    width: 38px;
    line-height: 38px;
  }
}

.btn-link {

  &:hover {
    text-decoration: none;
    background-color: transparent;
    color: @gray-darker;
  }
}

// Forms
// -------------------------

@input-border-radius: 2px;
@input-border-focus: #999;
@input-border: #f0f0f0;
@input-color: #444;
@input-color-placeholder: #999;
@input-height-base: 48px;

// Form states and alerts
// -------------------------

@state-success-text: #fff;
@state-success-bg: @brand-success;

@state-info-text: #fff;
@state-info-bg: @brand-primary;

@state-warning-text: #fff;
@state-warning-bg: @brand-warning;

@state-danger-text: #fff;
@state-danger-bg: @brand-danger;

// Alerts
// -------------------------

.alert {
  font-family: 'Raleway', sans-serif;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

// Navbar
// -------------------------

@navbar-height: 50px;
@navbar-default-bg: rgba(255,255,255,0.95);
@navbar-default-link-color: @gray-darker;
@navbar-default-link-active-color: @brand-primary;
@navbar-default-link-active-bg: transparent;
@navbar-default-link-hover-color: @brand-primary;
@navbar-default-link-hover-bg: transparent;
@navbar-default-brand-color: @gray-darker;
@navbar-default-brand-hover-color: @brand-primary;

.navbar-default {
  border: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);

  .navbar-brand {
    font-weight: 300;
  }

  .navbar-nav {
    > li > a {
      transition: color .4s cubic-bezier(.24,.45,.46,.92);
    }
  }
}