feat(style): tweak default code color

feat(style): tweak default code color

// Global variables
@fontstack-sans-serif: "Helvetica Neue", Arial, sans-serif;
@fontstack-serif: Georgia, serif;
@fontstack-monospace: Menlo, monospace;
@fontstack-default: @fontstack-sans-serif;
@font-size: 1.6vw;
@line-height: (20 / 14); // ~ 1.428571429

@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@code-color: spin(@link-color, 110);

@breakpoint-lg: 1600px;
@breakpoint-md: 1000px;
@breakpoint-sm: 640px;
@breakpoint-xs: 400px;
@padding-lg: 22vw;
@padding-md: 8vw;
@padding-sm: 4vw;
@padding-xs: .8em;
@blockquote-border: 2px;

// 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 @padding-lg;
  margin: 0 auto 0;
  font-family: @fontstack-default;
  font-size: @font-size;
  line-height: @line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;
  transition: all .2s ease;

  @media (max-width: @breakpoint-md) {
    padding-left: @padding-md;
    padding-right: @padding-md;
    font-size: (@font-size * 1.4);
  }

  @media (max-width: @breakpoint-sm) {
    padding-left: @padding-sm;
    padding-right: @padding-sm;
    font-size: (@font-size * 2.4);
  }

  @media (max-width: @breakpoint-xs) {
    font-size: (@font-size * 3.2);
  }

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

  // 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-size: 330%;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-size: 72%;
  font-weight: normal;
  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 {
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
    text-decoration: underline;
    text-decoration-skip: ink;
  }

  &[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

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

::-webkit-input-placeholder {
  color: @text-color;
  opacity: .1;
}

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

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

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

// Main navigation
.navigation {
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 60%;
  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;
        text-decoration: 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: #ccc;
    }

    a {
      color: #ccc;
    }
  }
}

// Main content
.content {
  margin-bottom: 16vmin;

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

  // Post / page content first element fix
  .post-content,
  .page-content {

    > *:first-child {
      margin-top: 0;

      > *:first-child {
        margin-top: 0;
      }
    }
  }

  a {
    font-weight: bold;
  }

  p {
    margin-bottom: 1.6rem;
    line-height: (@line-height * 1.2);
  }

  header {
    padding-bottom: 16vmin;

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

      @media (max-width: @breakpoint-sm) {
        // Override viewport units defined in post.html
        font-size: 280%;
      }

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

      // Override margin from article img
      svg,
      img {
        // avoid header stretched by global img styles
        margin-left: 0;
        margin-right: 0;
        margin-bottom: .3em;

        @media (max-width: @breakpoint-sm) {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode.
    .image-title {
      text-indent: -999999px;
      line-height: 0;
    }

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

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin-top: 2vmin;
    }
  }

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

  ul, ol {
    margin-bottom: 1.8rem;
    margin-left: 1.2em;

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

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

  ol {
    margin-left: 1.75em;
  }

  img, video, iframe, .browser {
    display: block;
    width: calc(100% + (@padding-xs * 2) + (@blockquote-border * 2));
    margin: 0 calc(-@padding-xs - @blockquote-border) 1.8rem;

    @media (max-width: @breakpoint-md) {
      margin-left: -@padding-md;
      margin-right: -@padding-md;
      width: calc(100% + (@padding-md * 2));
    }

    @media (max-width: @breakpoint-sm) {
      margin-left: -@padding-sm;
      margin-right: -@padding-sm;
      width: calc(100% + (@padding-sm * 2));
    }

    // avoid images with `.no-enlarge` stretched by global img styles
    &.no-enlarge {
      margin-left: 0;
      margin-right: 0;
      max-width: 100%;
      width: auto;
    }
  }

  blockquote {
    position: relative;
    margin-bottom: 2.8rem;
    margin-left: calc(-@padding-xs - @blockquote-border);

    @media (max-width: @breakpoint-sm) {
      margin-left: 0;
    }

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

      @media (max-width: @breakpoint-sm) {
        padding-left: calc(4vw - 2px);
        padding-right: 4vw;
        margin-left: -4vw;
        margin-right: -4vw;
      }
    }

    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"
      }
    }
  }

  hr {
    border-top: 1px solid fade(#ccc, 20%);
    margin-top: 2em;
    margin-bottom: 2em;
  }

  sup {
    font-size: 75%;
  }

  abbr {
    border-bottom: 1px dashed;
  }

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

  // Only apply word breaking rule for codes in paragraphs
  p code,
  li code {
    word-break: break-all;
  }

  pre {
    padding: 1em;
    margin: 0 0 1.8rem;
    overflow-x: scroll;
    font-size: 80%;
    line-height: (@line-height * 1.2);
    background: fade(#08f, 4%);
    // Bouncing scroll fix for iOS
    -webkit-overflow-scrolling: touch;

    @media (max-width: @breakpoint-md) {
      padding-left: 8vw;
      padding-right: 8vw;
      margin-left: -8vw;
      margin-right: -8vw;
    }

    @media (max-width: @breakpoint-sm) {
      padding-left: 4vw;
      padding-right: 4vw;
      margin-left: -4vw;
      margin-right: -4vw;
    }
  }

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

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1.8rem;
      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;

      &: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 1.8rem;

    th,
    td {
      padding: .6em;
    }

    th {
      border-bottom: 2px solid fade(@text-color, 6%);
      // Override default user agent stylesheet
      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: start;
    }
  }
}

// Fix empty space when a paragraph starts with quote marks and some asian punctuation marks
.leading-indent-fix {
  text-indent: -.39em;
}

// Tweet button margin fix
.post-modified-date {
  font-size: 75%;
  opacity: .5;
}

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

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

  // Reset browser border-radius for small screens
  @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) {
    border-radius: 0;
  }

  &: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%)
      ,    0 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 {
    // avoid images inside .browser stretched by global img styles
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: 100%;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);
  }
}

// Extra offset for OS X screenshots
.screenshot-mac {
  margin-left: -56px;
  margin-right: -56px;

  @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) {
    margin-left: 0;
    margin-right: 0
  }
}

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: .8em;
  margin-left: calc(-@padding-xs - @blockquote-border);
  border-left: 2px solid @link-color;

  @media (max-width: @breakpoint-sm) {
    padding-left: calc(4vw - 2px);
    padding-right: 4vw;
    margin-left: -4vw;
    margin-right: -4vw;
  }
}

// Reference notes and links in post
.footnotes {
  border-top: 1px solid fade(#ccc, 20%);
  padding-top: 2em;
  margin-top: 2em;
  font-size: 80%;
}

:target {

  // Redcarpet-style
  [rev=footnote],
  [rel=footnote],
  // Kramdown-style
  .reversefootnote,
  .footnote {
    color: @link-color;
  }
}

// Post list in "work" and "note"
.list {
  display: block;
  margin: 0 0 .4rem;

  h1 {
    .heading;
    font-size: 200%;
    line-height: 1.1;
    // Override heading defines in .content
    opacity: 1;
    margin: 0;

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      font-size: 180%;
    }
  }

  .external {

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      display: none;
    }
  }
}

.external {

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

    // Extra margin for external symbol in singular
    &--post {
      margin-left: 1rem;
    }
  }

  &:hover,
  &:focus {

    .dot {
      transform: scale(1.4);
    }
  }
}

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

  ul {

    li {
      display: inline;

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

      &:last-child {

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

// Import theme modules
@import "module-loader";

// Import user custom styles
@import "../../../_less/user";

// Global variables
@fontstack-sans-serif: "Helvetica Neue", Arial, sans-serif;
@fontstack-serif: Georgia, serif;
@fontstack-monospace: Menlo, monospace;
@fontstack-default: @fontstack-sans-serif;
@font-size: 1.6vw;
@line-height: (20 / 14); // ~ 1.428571429

@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@code-color: spin(@link-color, 180);

@breakpoint-lg: 1600px;
@breakpoint-md: 1000px;
@breakpoint-sm: 640px;
@breakpoint-xs: 400px;
@padding-lg: 22vw;
@padding-md: 8vw;
@padding-sm: 4vw;
@padding-xs: .8em;
@blockquote-border: 2px;

// 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 @padding-lg;
  margin: 0 auto 0;
  font-family: @fontstack-default;
  font-size: @font-size;
  line-height: @line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;
  transition: all .2s ease;

  @media (max-width: @breakpoint-md) {
    padding-left: @padding-md;
    padding-right: @padding-md;
    font-size: (@font-size * 1.4);
  }

  @media (max-width: @breakpoint-sm) {
    padding-left: @padding-sm;
    padding-right: @padding-sm;
    font-size: (@font-size * 2.4);
  }

  @media (max-width: @breakpoint-xs) {
    font-size: (@font-size * 3.2);
  }

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

  // 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-size: 330%;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-size: 72%;
  font-weight: normal;
  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 {
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
    text-decoration: underline;
    text-decoration-skip: ink;
  }

  &[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

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

::-webkit-input-placeholder {
  color: @text-color;
  opacity: .1;
}

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

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

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

// Main navigation
.navigation {
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 60%;
  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;
        text-decoration: 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: #ccc;
    }

    a {
      color: #ccc;
    }
  }
}

// Main content
.content {
  margin-bottom: 16vmin;

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

  // Post / page content first element fix
  .post-content,
  .page-content {

    > *:first-child {
      margin-top: 0;

      > *:first-child {
        margin-top: 0;
      }
    }
  }

  a {
    font-weight: bold;
  }

  p {
    margin-bottom: 1.6rem;
    line-height: (@line-height * 1.2);
  }

  header {
    padding-bottom: 16vmin;

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

      @media (max-width: @breakpoint-sm) {
        // Override viewport units defined in post.html
        font-size: 280%;
      }

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

      // Override margin from article img
      svg,
      img {
        // avoid header stretched by global img styles
        margin-left: 0;
        margin-right: 0;
        margin-bottom: .3em;

        @media (max-width: @breakpoint-sm) {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode.
    .image-title {
      text-indent: -999999px;
      line-height: 0;
    }

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

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin-top: 2vmin;
    }
  }

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

  ul, ol {
    margin-bottom: 1.8rem;
    margin-left: 1.2em;

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

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

  ol {
    margin-left: 1.75em;
  }

  img, video, iframe, .browser {
    display: block;
    width: calc(100% + (@padding-xs * 2) + (@blockquote-border * 2));
    margin: 0 calc(-@padding-xs - @blockquote-border) 1.8rem;

    @media (max-width: @breakpoint-md) {
      margin-left: -@padding-md;
      margin-right: -@padding-md;
      width: calc(100% + (@padding-md * 2));
    }

    @media (max-width: @breakpoint-sm) {
      margin-left: -@padding-sm;
      margin-right: -@padding-sm;
      width: calc(100% + (@padding-sm * 2));
    }

    // avoid images with `.no-enlarge` stretched by global img styles
    &.no-enlarge {
      margin-left: 0;
      margin-right: 0;
      max-width: 100%;
      width: auto;
    }
  }

  blockquote {
    position: relative;
    margin-bottom: 2.8rem;
    margin-left: calc(-@padding-xs - @blockquote-border);

    @media (max-width: @breakpoint-sm) {
      margin-left: 0;
    }

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

      @media (max-width: @breakpoint-sm) {
        padding-left: calc(4vw - 2px);
        padding-right: 4vw;
        margin-left: -4vw;
        margin-right: -4vw;
      }
    }

    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"
      }
    }
  }

  hr {
    border-top: 1px solid fade(#ccc, 20%);
    margin-top: 2em;
    margin-bottom: 2em;
  }

  sup {
    font-size: 75%;
  }

  abbr {
    border-bottom: 1px dashed;
  }

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

  // Only apply word breaking rule for codes in paragraphs
  p code,
  li code {
    word-break: break-all;
  }

  pre {
    padding: 1em;
    margin: 0 0 1.8rem;
    overflow-x: scroll;
    font-size: 80%;
    line-height: (@line-height * 1.2);
    background: fade(#08f, 4%);
    // Bouncing scroll fix for iOS
    -webkit-overflow-scrolling: touch;

    @media (max-width: @breakpoint-md) {
      padding-left: 8vw;
      padding-right: 8vw;
      margin-left: -8vw;
      margin-right: -8vw;
    }

    @media (max-width: @breakpoint-sm) {
      padding-left: 4vw;
      padding-right: 4vw;
      margin-left: -4vw;
      margin-right: -4vw;
    }
  }

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

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1.8rem;
      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;

      &: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 1.8rem;

    th,
    td {
      padding: .6em;
    }

    th {
      border-bottom: 2px solid fade(@text-color, 6%);
      // Override default user agent stylesheet
      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: start;
    }
  }
}

// Fix empty space when a paragraph starts with quote marks and some asian punctuation marks
.leading-indent-fix {
  text-indent: -.39em;
}

// Tweet button margin fix
.post-modified-date {
  font-size: 75%;
  opacity: .5;
}

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

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

  // Reset browser border-radius for small screens
  @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) {
    border-radius: 0;
  }

  &: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%)
      ,    0 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 {
    // avoid images inside .browser stretched by global img styles
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: 100%;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);
  }
}

// Extra offset for OS X screenshots
.screenshot-mac {
  margin-left: -56px;
  margin-right: -56px;

  @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) {
    margin-left: 0;
    margin-right: 0
  }
}

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: .8em;
  margin-left: calc(-@padding-xs - @blockquote-border);
  border-left: 2px solid @link-color;

  @media (max-width: @breakpoint-sm) {
    padding-left: calc(4vw - 2px);
    padding-right: 4vw;
    margin-left: -4vw;
    margin-right: -4vw;
  }
}

// Reference notes and links in post
.footnotes {
  border-top: 1px solid fade(#ccc, 20%);
  padding-top: 2em;
  margin-top: 2em;
  font-size: 80%;
}

:target {

  // Redcarpet-style
  [rev=footnote],
  [rel=footnote],
  // Kramdown-style
  .reversefootnote,
  .footnote {
    color: @link-color;
  }
}

// Post list in "work" and "note"
.list {
  display: block;
  margin: 0 0 .4rem;

  h1 {
    .heading;
    font-size: 200%;
    line-height: 1.1;
    // Override heading defines in .content
    opacity: 1;
    margin: 0;

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      font-size: 180%;
    }
  }

  .external {

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      display: none;
    }
  }
}

.external {

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

    // Extra margin for external symbol in singular
    &--post {
      margin-left: 1rem;
    }
  }

  &:hover,
  &:focus {

    .dot {
      transform: scale(1.4);
    }
  }
}

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

  ul {

    li {
      display: inline;

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

      &:last-child {

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

// Import theme modules
@import "module-loader";

// Import user custom styles
@import "../../../_less/user";


Add /onboarding/management/done.less

Add /onboarding/management/done.less

@import (reference) "../../constants";

#content-container {
  > .greyed-container {
    text-align: center;

    > img {
      margin-bottom: 15px;
    }

    > .spinner {
      margin-top: @metrics-small-padding;
      margin-bottom: @metrics-extra-large-padding;
    }

    > .black-indication {
      margin-top: @metrics-small-padding;
    }

    > .small-indication {
      margin-top: @metrics-very-small-padding;
    }
  }
}

error: pathspec 'app/assets/css/onboarding/management/done.less' did not match any file(s) known to git


tweaked outstanding-container background & border, replaced all occurences of 'float', 'whitesmoke/#F5F5F5' and 'text-align' with corresponding variables (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/fadeit/fadeitdk.git/'


less optimize

less optimize

fatal: unable to access 'https://github.com/vigour-io/element.git/': The requested URL returned error: 403


ensure current classes are within specific slide instance

fatal: unable to access 'https://github.com/hatchddigital/slide.git/': The requested URL returned error: 403


feat(template): colorize template by env

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/vyulabs/semaphore.git/'


add javascript.less file

add javascript.less file

.source.js {
  .punctuation {
    &.parameters {
      color: @green;
    }
  }
}

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


Create list.less

Create list.less

fatal: unable to access 'https://github.com/BarryMaloneWeb/BarryMaloneWeb.github.io.git/': The requested URL returned error: 403


Delete list.less

Delete list.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/joohyun1996/joohyun1996.github.com.git/'


Clear Story img styles

Clear Story img styles

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

.Story {
  border-radius: 4px;
  background-color: @white;
  color: #353535;
  border: solid 1px #e9e7e7;

  &__content {
    position: relative;
  }

  &__reblog {
    margin: 8px 0 -8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #99aab5;

    & > i {
      font-size: 18px;
      margin-right: 4px;
    }

    & > span {
      vertical-align: 2px;
    }
  }

  &:not(:first-child) {
    margin-top: 12px;
  }

  &:last-child {
    margin-bottom: 12px;
  }

  &__more {
    position: absolute;
    right: 16px;
    top: 20px;
    font-size: 20px !important;
    color: #c2ccd3;
    line-height: 12px;

    &:hover {
      cursor: pointer;
      color: darken(#c2ccd3, 15%);
    }
  }

  &__header {
    padding: 16px;
    display: flex;

    &__text {
      margin: 0 12px;

      a > h4 {
        font-weight: bold;
        color: @primary-color;

        .ant-tag {
          margin-left: 6px;
          font-size: 12px;
          vertical-align: 1px;
        }
      }
    }
  }

  &__date {
    position: relative;
    top: -2px;
    font-size: 14px;
    color: #99aab5;
  }

  &__topics > button {
    margin: 0 2px;
  }

  &__content {
    word-wrap: break-word;

    &__title {
      color: #353535;

      &:hover,
      &:focus,
      &:active {
        color: #353535;
        text-decoration: none;
      }

      &:visited {
        h2 {
          color: #99aab5;
        }
      }

      & > h2 {
        font-weight: bold;
        font-size: 20px;
        margin: 0 16px 8px;

        .ant-tag {
          vertical-align: 1px;
        }
      }
    }

    &__preview {
      color: #353535;

      &:hover,
      &:focus,
      &:active,
      &:visited {
        color: #353535;
        text-decoration: none;
      }

      video {
        width: 100%;
        max-height: 400px;
      }
    }

    &__body {
      padding: 4px 16px;
    }

    & &__img-container {
      width: 100%;

      & > img {
        display: block;
        max-width: 100%;
        max-height: 400px;
        margin: 4px auto;
      }
    }
  }

  &__footer {
    padding: 0 16px;
  }
}

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

.Story {
  border-radius: 4px;
  background-color: @white;
  color: #353535;
  border: solid 1px #e9e7e7;

  &__content {
    position: relative;
  }

  &__reblog {
    margin: 8px 0 -8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #99aab5;

    & > i {
      font-size: 18px;
      margin-right: 4px;
    }

    & > span {
      vertical-align: 2px;
    }
  }

  &:not(:first-child) {
    margin-top: 12px;
  }

  &:last-child {
    margin-bottom: 12px;
  }

  &__more {
    position: absolute;
    right: 16px;
    top: 20px;
    font-size: 20px !important;
    color: #c2ccd3;
    line-height: 12px;

    &:hover {
      cursor: pointer;
      color: darken(#c2ccd3, 15%);
    }
  }

  &__header {
    padding: 16px;
    display: flex;

    &__text {
      margin: 0 12px;

      a > h4 {
        font-weight: bold;
        color: @primary-color;

        .ant-tag {
          margin-left: 6px;
          font-size: 12px;
          vertical-align: 1px;
        }
      }
    }
  }

  &__date {
    position: relative;
    top: -2px;
    font-size: 14px;
    color: #99aab5;
  }

  &__topics > button {
    margin: 0 2px;
  }

  &__content {
    word-wrap: break-word;

    &__title {
      color: #353535;

      &:hover,
      &:focus,
      &:active {
        color: #353535;
        text-decoration: none;
      }

      &:visited {
        h2 {
          color: #99aab5;
        }
      }

      & > h2 {
        font-weight: bold;
        font-size: 20px;
        margin: 0 16px 8px;

        .ant-tag {
          vertical-align: 1px;
        }
      }
    }

    &__preview {
      color: #353535;

      &:hover,
      &:focus,
      &:active,
      &:visited {
        color: #353535;
        text-decoration: none;
      }

      video {
        width: 100%;
        max-height: 400px;
      }
    }

    &__body {
      padding: 4px 16px;
    }

    & &__img-container {
      width: 100%;

      & > img {
        width: auto;
        height: auto;
        max-height: 400px;
        max-width: 100%;
        margin: 4px auto;
        display: block;
      }
    }
  }

  &__footer {
    padding: 0 16px;
  }
}


settings-view package styles being polluted (#51)

* The margin pollutes the settings-view package 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/danosier/context-git.git/'


Fixed padding

Fixed padding

@import "../../../node_modules/font-awesome/less/font-awesome";
@import "../../../node_modules/bootstrap/less/bootstrap";
@import "../../../bower_components/retina.js/src/retina";
@import (inline) "../../../bower_components/animate.css/animate.css";
@import "../sass/_icon-font.scss";

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

#preloader {
    background: #FFF;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    padding-top: 70px;

    .logo {
        width: 90%;
        svg {
            fill: black;
        }
    }

    @media (min-width: @screen-sm-min) {
        .logo {
            width: 68%;
        }
    }

    @media (min-width: @screen-md-min) {
        .logo {
            width: 45%;
        }
    }

    @media (min-width: @screen-lg-min) {
        .logo {
            width: 650px;
        }
    }

    .spinner {
        font-size: 70px;

        animation-name: spin;
        animation-duration: 3000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;

    }
}

section {
    overflow: show;
    display: none;
}

section.intro {
    height: 550px;
    padding-top: 70px;
    // background-color: transparent;
    box-shadow: inset 0 0 0 1000px rgba(146, 215, 245, 0.17);
    .at2x('/img/bg.jpg', cover);
    background-repeat: no-repeat;
    background-position: center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    h1 {
        font-size: 70px;
    }

    h1, h2, h3, h4, h5, h6 {
        color: white;
    }

    .circles {
        max-width: 780px;
        margin: 0 auto;

        span {
            display: block;
            font-family: "Roboto";
            font-weight: 300;
            margin-top: 0.4em;
            color: white;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }

        h4 {
            margin: 0px;
            padding: 0px;
            color: white;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
    }

    .time_circles {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .time_circles > div {
        position: absolute;
        text-align: center;
    }

    .header {
        .logo {
            width: 90%;
        }

        h2 {
            font-weight: 100;
            margin: 0;
            font-size: 27px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }

        nav {
            margin-top: 7px;
              margin-right: 90px;

            li:first-child {
                margin-left: 0px;
            }

            li {
                float: left;
                margin: 15px 0px 0 20px;
                list-style: none;
                text-transform: uppercase;
                font-family: "Roboto";
                font-weight: 300;
                font-size: 19px;

                a, a:visited {
                    color: black;
                    text-decoration: none;
                }

                a:hover, a:active {
                    text-decoration: none;
                    color: white;
                }

            }

            .navbar {
                padding: 0;
                border-radius: 0;
                border-bottom: 1px solid black;
            }
        }
    }

    @media (min-width: @screen-sm-min) {
        .header {
            .logo {
                width: 68%;
            }
        }
    }

    @media (min-width: @screen-md-min) {
        .header {
            .logo {
                width: 45%;
            }
        }
    }

    @media (min-width: @screen-lg-min) {
        .header {
            .logo {
                width: 650px;
            }
        }
    }
}

section.timeline {
    background-color: white;

    .media-object {
        height: 48px;
        width: 48px;
        border-radius: 3px;
    }

    .media-heading {
        margin: 0;
    }

    .media-body {
        padding-bottom: 5px;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
        // width: 140px;

        p {
            margin: 0;
        }
    }

    ul {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 15px 0 20px 0;

        li {
            position: relative;

            .timeline-badge {
                position: absolute;
                left: 25px;
                height: 30px; // 50
                width: 30px; // 50
                border-top-right-radius: 50%;
                border-top-left-radius: 50%;
                border-bottom-right-radius: 50%;
                border-bottom-left-radius: 50%;
                background-color: #55acee;
                margin-left: -25px;
                text-align: center;
                color: #fff;
                line-height: 32px; // 55
                font-size: 1.4em;
                top: 16px;
                z-index: 0;
            }

            .message {
                float: right;
                width: 85%;
                background-color: #fff;
                padding: 10px 10px 0;
                border-radius: 4px;
                position: relative;
                border-radius: 4px;
                border: 1px solid #d4d4d4;
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
                margin-top: 5px;
            }

            .message:before {
                position: absolute;
                top: 11px;
                left: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 0 solid #ccc;
                border-right: 15px solid #ccc;
                border-bottom: 15px solid transparent;
                content: ' ';
            }

            .message:after {
                position: absolute;
                top: 12px;
                left: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 0px solid #fff;
                border-right: 14px solid #fff;
                border-bottom: 14px solid transparent;
                content: ' ';
            }
        }
    }

    ul:before {
        content: "";
        width: 3px;
        background-color: #ccd1d9;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 15px;
        margin-left: -1.5px;
    }

    @media (min-width: @screen-sm-min) {
        ul:before {
            left: 50%;
        }

        ul > li {
            .timeline-badge {
                left: 50%;
                height: 50px;
                width: 50px;
                line-height: 55px;
                top: 0;
            }

            .message {
                width: 45%;
            }
        }

        ul > li.pos-left > .message {
            float: left;
        }

        ul > li.pos-left > .message:before {
            border-right-width: 0;
            border-left-width: 15px;
            right: -15px;
            left: auto;
        }

        ul > li.pos-left > .message:after {
            border-left-width: 14px;
            border-right-width: 0;
            right: -14px;
            left: auto;
        }

        ul {
            li {
                .message {
                    margin: 0;
                }

                .timeline-badge {
                    top: 0;
                }
            }
        }
    }

    @media (min-width: @screen-md-min) {
        ul > li .message {
            width: 46%;
        }
    }

    @media (min-width: @screen-lg-min) {
        ul > li .message {
            width: 47%;
        }
    }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

section.regulation {
    background-color: transparent;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.66);
    text-align: center;
    height: 260px;

    div.regulation {
        margin-top: 40px;
        padding-bottom: 10px;
    }

    a {
        transition: all .3s;
    }

    h1 {
        color: white;
        font-weight: 100;
        font-size: 35px;
        line-height: 50px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    .btn-lg {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        padding: 15px 30px;
        background: transparent;
        color: white;
        font-size: 20px;
        border-color: white;
        font-weight: 100;
        letter-spacing: 1px;
    }

    .btn-lg:hover {
        color: black;
        background-color: white;
        text-shadow: none;
    }
}

section.sponsors {
    background-color: white;

    .row {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 35px;
    }

    h1 {
        color: black;
        font-weight: 100;
        font-size: 35px;
        line-height: 50px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    img {
        max-height: 95px;
        max-width: 200px;
        padding: 15px 20px 15px 20px;
    }

    img.grayscale {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        filter: gray;
        -webkit-filter: grayscale(100%);
        -webkit-transition: all .3s ease;
        -webkit-backface-visibility: hidden;
    }

    img.grayscale:hover {
        filter: none;
        -webkit-filter: grayscale(0%);
        cursor: pointer;
    }

    #logo-lpp {
        max-height: 120px;
    }

    #logo-mnl {
        max-height: 110px;
    }

    #logo-alberts {
        max-height: 110px;
    }

    #logo-baltronic {
        max-width: 240px;
    }

    #logo-zzk {
        max-width: 220px;
    }

    #logo-cl {
        max-height: 80px;
    }
}

section.about {
    background-color: transparent;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.66);
    text-align: center;

    color: white;
    font-family: "Roboto";

    padding-top: 20px;
    padding-bottom: 20px;

    div.about {
        padding-bottom: 10px;
    }

    p {
        line-height: 22px;
        font-size: 17px;
        font-weight: 300;
    }

    h1 {
        color: white;
        font-weight: 100;
        font-size: 35px;
        line-height: 50px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    h4 {
        color: white;
        font-size: 26px;
        font-weight: 100;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    blockquote {
        border: 0;
        margin: 0;
        padding: 0;
        font-size: 58px;
        font-weight: 100;
        line-height: 70px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    p {
        font-size: 14px;
        line-height: 22px;
    }

    .about-box {
        margin-top: 30px;
    }

    .about-box-icon {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        background: #FD0000;
        border-radius: 50%;
        padding-top: 28px;
        transition: all .3s;
        font-size: 60px;
        padding-top: 25px;
        border: 1px solid #FD0000;
        cursor: pointer;
    }

    .about-box-icon:hover {
        background: none;
        border: 1px solid #fff;
        transition: all .3s;
    }

    .mtb {
        i {
            transform: rotate(35deg);
            position: relative;
            top: -1px;
        }
    }

    .fut {
        i {
            position: relative;
            top: 6px;
            left: -4px;
        }
    }

    @media (min-width: @screen-sm-min) {
        blockquote {
            text-align: right;
        }

        p {
            text-align: justify;
        }

        .about-text {
            padding-top: 28px;
        }
    }
}

section.contacts {
    padding-top: 30px;
    padding-bottom: 20px;
    color: #555;
    background-color: white;

    font-family: "Roboto";

    .header {
        text-align: center;
    }

    p, a {
        margin-bottom: 5px;
        font-size: 18px;
        color: #888;
        line-height: 32px;

        span.glyphicon {
            padding-right: 15px;
            font-size: 24px;
            color: #ccc;
            vertical-align: middle;
        }
    }

    h3 {
        color: #555;
        font-weight: 100;
        font-size: 35px;
    }

    h4 {
        font-size: 30px;
        font-weight: 100;
        color: #555;
        line-height: 25px;
    }

    ul {
        padding: 0;
    }
}

section.contacts,
section.footer {
    .social-icons {
        margin-bottom: 20px;
        margin-top: 15px;

        li {
            display: inline-block;
        }

        i.icon-dr {
            margin: 0 8px;
            line-height: 35px;
            position: relative;
            top: 2px;
        }

        a {
            text-align: center;
            display: block;
            height: 40px;
            width: 40px;
            color: #888;
            margin: 0 10px;
            border: 1px solid #888;
            border-radius: 50%;
        }

        a:hover {
            i {
                color: white;
            }
        }

        a.tw:hover {
            background-color: #55acee;
            border: 1px solid #55acee;
        }

        a.fb:hover {
            background-color: #3b5998;
            border: 1px solid #3b5998;
        }

        a.dr:hover {
            background-color: #ff6600;
            border: 1px solid #ff6600;
        }
    }
}

section.footer {
    .social-icons {
        padding: 0px;
        margin: 0 0 10px;
    }
}

.logo {
    margin: auto;
    svg {
        fill: white;
    }
}

.uppercase {
    text-transform: uppercase;
}

section.footer {
    background: #1A1A1A;
    text-align: center;
    padding: 10px 0 20px 0;
    position: relative;
    font-size: 18px;
    color: #909090;
    padding-top: 20px;

    .copy {
        font-size: 12px;
    }

    .logo {
        width: 200px;
    }
}

.social-icons i {
    line-height: 40px;
}

a {
    text-decoration: none;
    color: #444;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto";
    font-weight: 300;
    color: #333;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(http://fonts.gstatic.com/s/roboto/v15/idLYXfFa1c7oAPILDl4z0XYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/Xu_FYwbs8k0teWf0uC8JpevvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW7O3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

.modal {
    .modal-content {
        padding: 100px 0;
        min-height: 100%;
        border: 0;
        border-radius: 0;
        text-align: center;
        background-clip: border-box;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: "Roboto";

        h2 {
            font-size: 42px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
            margin: 0;

            i.fa {
                font-size: 80px;
            }
        }

        h2.mtb i {
            transform: rotate(35deg);
        }

        p {
            margin-bottom: 30px;
        }
    }

    .modal-content p.item-intro {
        margin: 20px 0 20px;
        font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 16px;
        font-style: italic;
    }

    .modal-content ul.list-inline {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .modal-content img {
        margin-bottom: 30px;
    }

    .close-modal {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 75px;
        height: 75px;
        background-color: transparent;
        cursor: pointer;
    }

    .close-modal:hover {
        opacity: .3;
    }

    .close-modal .lr {
        z-index: 1051;
        width: 1px;
        height: 75px;
        margin-left: 35px;
        background-color: #222;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .close-modal .lr .rl {
        z-index: 1052;
        width: 1px;
        height: 75px;
        background-color: #222;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .modal-backdrop {
        display: none;
        opacity: 0;
    }

    button,
    button:hover {
        background-color: transparent;
        color: #555;
        border: 1px solid #555;
    }
}

@import "../../../node_modules/font-awesome/less/font-awesome";
@import "../../../node_modules/bootstrap/less/bootstrap";
@import "../../../bower_components/retina.js/src/retina";
@import (inline) "../../../bower_components/animate.css/animate.css";
@import "../sass/_icon-font.scss";

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

#preloader {
    background: #FFF;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    padding-top: 70px;

    .logo {
        width: 90%;
        svg {
            fill: black;
        }
    }

    @media (min-width: @screen-sm-min) {
        .logo {
            width: 68%;
        }
    }

    @media (min-width: @screen-md-min) {
        .logo {
            width: 45%;
        }
    }

    @media (min-width: @screen-lg-min) {
        .logo {
            width: 650px;
        }
    }

    .spinner {
        font-size: 70px;

        animation-name: spin;
        animation-duration: 3000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;

    }
}

section {
    overflow: show;
    display: none;
}

section.intro {
    height: 550px;
    padding-top: 70px;
    // background-color: transparent;
    box-shadow: inset 0 0 0 1000px rgba(146, 215, 245, 0.17);
    .at2x('/img/bg.jpg', cover);
    background-repeat: no-repeat;
    background-position: center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    h1 {
        font-size: 70px;
    }

    h1, h2, h3, h4, h5, h6 {
        color: white;
    }

    .circles {
        max-width: 780px;
        margin: 0 auto;

        span {
            display: block;
            font-family: "Roboto";
            font-weight: 300;
            margin-top: 0.4em;
            color: white;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }

        h4 {
            margin: 0px;
            padding: 0px;
            color: white;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
    }

    .time_circles {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .time_circles > div {
        position: absolute;
        text-align: center;
    }

    .header {
        .logo {
            width: 90%;
        }

        h2 {
            font-weight: 100;
            margin: 0;
            font-size: 27px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }

        nav {
            margin-top: 7px;
              margin-right: 90px;

            li:first-child {
                margin-left: 0px;
            }

            li {
                float: left;
                margin: 15px 0px 0 20px;
                list-style: none;
                text-transform: uppercase;
                font-family: "Roboto";
                font-weight: 300;
                font-size: 19px;

                a, a:visited {
                    color: black;
                    text-decoration: none;
                }

                a:hover, a:active {
                    text-decoration: none;
                    color: white;
                }

            }

            .navbar {
                padding: 0;
                border-radius: 0;
                border-bottom: 1px solid black;
            }
        }
    }

    @media (min-width: @screen-sm-min) {
        .header {
            .logo {
                width: 68%;
            }
        }
    }

    @media (min-width: @screen-md-min) {
        .header {
            .logo {
                width: 45%;
            }
        }
    }

    @media (min-width: @screen-lg-min) {
        .header {
            .logo {
                width: 650px;
            }
        }
    }
}

section.timeline {
    background-color: white;

    .media-object {
        height: 48px;
        width: 48px;
        border-radius: 3px;
    }

    .media-heading {
        margin: 0;
    }

    .media-body {
        padding-bottom: 5px;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
        // width: 140px;

        p {
            margin: 0;
        }
    }

    ul {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 15px 0 20px 0;

        li {
            position: relative;

            .timeline-badge {
                position: absolute;
                left: 25px;
                height: 30px; // 50
                width: 30px; // 50
                border-top-right-radius: 50%;
                border-top-left-radius: 50%;
                border-bottom-right-radius: 50%;
                border-bottom-left-radius: 50%;
                background-color: #55acee;
                margin-left: -25px;
                text-align: center;
                color: #fff;
                line-height: 32px; // 55
                font-size: 1.4em;
                top: 16px;
                z-index: 0;
            }

            .message {
                float: right;
                width: 85%;
                background-color: #fff;
                padding: 10px 10px 0;
                border-radius: 4px;
                position: relative;
                border-radius: 4px;
                border: 1px solid #d4d4d4;
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
                margin-top: 5px;
            }

            .message:before {
                position: absolute;
                top: 11px;
                left: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 0 solid #ccc;
                border-right: 15px solid #ccc;
                border-bottom: 15px solid transparent;
                content: ' ';
            }

            .message:after {
                position: absolute;
                top: 12px;
                left: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 0px solid #fff;
                border-right: 14px solid #fff;
                border-bottom: 14px solid transparent;
                content: ' ';
            }
        }
    }

    ul:before {
        content: "";
        width: 3px;
        background-color: #ccd1d9;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 15px;
        margin-left: -1.5px;
    }

    @media (min-width: @screen-sm-min) {
        ul:before {
            left: 50%;
        }

        ul > li {
            .timeline-badge {
                left: 50%;
                height: 50px;
                width: 50px;
                line-height: 55px;
                top: 0;
            }

            .message {
                width: 45%;
            }
        }

        ul > li.pos-left > .message {
            float: left;
        }

        ul > li.pos-left > .message:before {
            border-right-width: 0;
            border-left-width: 15px;
            right: -15px;
            left: auto;
        }

        ul > li.pos-left > .message:after {
            border-left-width: 14px;
            border-right-width: 0;
            right: -14px;
            left: auto;
        }

        ul {
            li {
                .message {
                    margin: 0;
                }

                .timeline-badge {
                    top: 0;
                }
            }
        }
    }

    @media (min-width: @screen-md-min) {
        ul > li .message {
            width: 46%;
        }
    }

    @media (min-width: @screen-lg-min) {
        ul > li .message {
            width: 47%;
        }
    }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

section.regulation {
    background-color: transparent;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.66);
    text-align: center;
    height: 260px;

    div.regulation {
        margin-top: 40px;
        padding-bottom: 10px;
    }

    a {
        transition: all .3s;
    }

    h1 {
        color: white;
        font-weight: 100;
        font-size: 35px;
        line-height: 50px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    .btn-lg {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        padding: 15px 30px;
        background: transparent;
        color: white;
        font-size: 20px;
        border-color: white;
        font-weight: 100;
        letter-spacing: 1px;
    }

    .btn-lg:hover {
        color: black;
        background-color: white;
        text-shadow: none;
    }
}

section.sponsors {
    background-color: white;

    .row {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 35px;
    }

    h1 {
        color: black;
        font-weight: 100;
        font-size: 35px;
        line-height: 50px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    img {
        max-height: 95px;
        max-width: 200px;
        padding: 15px 20px 15px 20px;
    }

    img.grayscale {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        filter: gray;
        -webkit-filter: grayscale(100%);
        -webkit-transition: all .3s ease;
        -webkit-backface-visibility: hidden;
    }

    img.grayscale:hover {
        filter: none;
        -webkit-filter: grayscale(0%);
        cursor: pointer;
    }

    #logo-lpp {
        max-height: 120px;
    }

    #logo-mnl {
        max-height: 110px;
    }

    #logo-alberts {
        max-height: 110px;
    }

    #logo-baltronic {
        max-width: 240px;
    }

    #logo-zzk {
        max-width: 220px;
    }

    #logo-cl {
        max-height: 80px;
    }
}

section.about {
    background-color: transparent;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.66);
    text-align: center;

    color: white;
    font-family: "Roboto";

    padding-top: 20px;
    padding-bottom: 20px;

    div.about {
        padding-bottom: 10px;
    }

    p {
        line-height: 22px;
        font-size: 17px;
        font-weight: 300;
    }

    h1 {
        color: white;
        font-weight: 100;
        font-size: 35px;
        line-height: 50px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    h4 {
        color: white;
        font-size: 26px;
        font-weight: 100;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    blockquote {
        border: 0;
        margin: 0;
        padding: 0;
        font-size: 58px;
        font-weight: 100;
        line-height: 70px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    p {
        font-size: 14px;
        line-height: 22px;
    }

    .about-box {
        margin-top: 30px;
    }

    .about-box-icon {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        background: #FD0000;
        border-radius: 50%;
        padding-top: 28px;
        transition: all .3s;
        font-size: 60px;
        padding-top: 25px;
        border: 1px solid #FD0000;
        cursor: pointer;
    }

    .about-box-icon:hover {
        background: none;
        border: 1px solid #fff;
        transition: all .3s;
    }

    .mtb {
        i {
            transform: rotate(35deg);
            position: relative;
            top: -1px;
        }
    }

    .fut {
        i {
            position: relative;
            top: 6px;
            left: -4px;
        }
    }

    @media (min-width: @screen-sm-min) {
        blockquote {
            text-align: right;
        }

        p {
            text-align: justify;
        }

        .about-text {
            padding-top: 20px;
        }
    }
}

section.contacts {
    padding-top: 30px;
    padding-bottom: 20px;
    color: #555;
    background-color: white;

    font-family: "Roboto";

    .header {
        text-align: center;
    }

    p, a {
        margin-bottom: 5px;
        font-size: 18px;
        color: #888;
        line-height: 32px;

        span.glyphicon {
            padding-right: 15px;
            font-size: 24px;
            color: #ccc;
            vertical-align: middle;
        }
    }

    h3 {
        color: #555;
        font-weight: 100;
        font-size: 35px;
    }

    h4 {
        font-size: 30px;
        font-weight: 100;
        color: #555;
        line-height: 25px;
    }

    ul {
        padding: 0;
    }
}

section.contacts,
section.footer {
    .social-icons {
        margin-bottom: 20px;
        margin-top: 15px;

        li {
            display: inline-block;
        }

        i.icon-dr {
            margin: 0 8px;
            line-height: 35px;
            position: relative;
            top: 2px;
        }

        a {
            text-align: center;
            display: block;
            height: 40px;
            width: 40px;
            color: #888;
            margin: 0 10px;
            border: 1px solid #888;
            border-radius: 50%;
        }

        a:hover {
            i {
                color: white;
            }
        }

        a.tw:hover {
            background-color: #55acee;
            border: 1px solid #55acee;
        }

        a.fb:hover {
            background-color: #3b5998;
            border: 1px solid #3b5998;
        }

        a.dr:hover {
            background-color: #ff6600;
            border: 1px solid #ff6600;
        }
    }
}

section.footer {
    .social-icons {
        padding: 0px;
        margin: 0 0 10px;
    }
}

.logo {
    margin: auto;
    svg {
        fill: white;
    }
}

.uppercase {
    text-transform: uppercase;
}

section.footer {
    background: #1A1A1A;
    text-align: center;
    padding: 10px 0 20px 0;
    position: relative;
    font-size: 18px;
    color: #909090;
    padding-top: 20px;

    .copy {
        font-size: 12px;
    }

    .logo {
        width: 200px;
    }
}

.social-icons i {
    line-height: 40px;
}

a {
    text-decoration: none;
    color: #444;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto";
    font-weight: 300;
    color: #333;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(http://fonts.gstatic.com/s/roboto/v15/idLYXfFa1c7oAPILDl4z0XYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/Xu_FYwbs8k0teWf0uC8JpevvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW7O3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

.modal {
    .modal-content {
        padding: 100px 0;
        min-height: 100%;
        border: 0;
        border-radius: 0;
        text-align: center;
        background-clip: border-box;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: "Roboto";

        h2 {
            font-size: 42px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
            margin: 0;

            i.fa {
                font-size: 80px;
            }
        }

        h2.mtb i {
            transform: rotate(35deg);
        }

        p {
            margin-bottom: 30px;
        }
    }

    .modal-content p.item-intro {
        margin: 20px 0 20px;
        font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 16px;
        font-style: italic;
    }

    .modal-content ul.list-inline {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .modal-content img {
        margin-bottom: 30px;
    }

    .close-modal {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 75px;
        height: 75px;
        background-color: transparent;
        cursor: pointer;
    }

    .close-modal:hover {
        opacity: .3;
    }

    .close-modal .lr {
        z-index: 1051;
        width: 1px;
        height: 75px;
        margin-left: 35px;
        background-color: #222;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .close-modal .lr .rl {
        z-index: 1052;
        width: 1px;
        height: 75px;
        background-color: #222;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .modal-backdrop {
        display: none;
        opacity: 0;
    }

    button,
    button:hover {
        background-color: transparent;
        color: #555;
        border: 1px solid #555;
    }
}


Styles changes.

Styles changes.

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/elasthink/uix.git/'


Add typography with <ul class="normal"> styles

/*==========================================*/
/*=== TYPOGRAPHY.less ===*/
/*=== TABLE OF CONTENTS ===*/
/*==========================================
:: BODY TEXT
:: BASE
:: PARAGRAPHS
:: HEADINGS
:: LISTS
:: QUOTES
:: LINKS
:: HELPER CLASSES
*/

// Typography.less
// Headings, body text, lists, code, and more for a versatile and durable typography system
// ----------------------------------------------------------------------------------------

// BODY TEXT

p {
	margin: 0 0 @baseLineHeight / 2;
	font-family: @baseFontFamily;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	small {
		font-size: @baseFontSize - 2;
		color: @grayLight;
	}
}
.lead {
	margin-bottom: @baseLineHeight;
	font-size: 20px;
	font-weight: 200;
	line-height: @baseLineHeight * 1.5;
}

// HEADINGS

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: @headingsFontFamily;
	font-weight: @headingsFontWeight;
	color: @headingsColor;
	text-rendering: optimizelegibility; // Fix the character spacing for headings
	small {
		font-weight: normal;
		color: @grayLight;
	}
}
h1 {
	font-size: 30px;
	line-height: @baseLineHeight * 2;
	small {
		font-size: 18px;
	}
}
h2 {
	font-size: 24px;
	line-height: @baseLineHeight * 2;
	small {
		font-size: 18px;
	}
}
h3 {
	line-height: @baseLineHeight * 1.5;
	font-size: 18px;
	small {
		font-size: 14px;
	}
}
h4, h5, h6 {
	line-height: @baseLineHeight;
}
h4 {
	font-size: 14px;
	small {
		font-size: 12px;
	}
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 11px;
	color: @grayLight;
	text-transform: uppercase;
}

// Page header
.page-header {
	padding-bottom: @baseLineHeight - 1;
	margin: @baseLineHeight 0;
	border-bottom: 1px solid @grayLighter;
}
.page-header h1 {
	line-height: 1;
}

// LISTS

// Unordered and Ordered lists
// Add a .normal class to unordered/ordered lists if you want them to have bullets/numbers
ul.normal, ol.normal {
	padding: 0;
	margin: 0 0 @baseLineHeight / 2 25px;
	font-size: @baseFontSize;
	ul, ol {
		margin: 0 0 0 45px;
	}
	ul {
		list-style-type: circle;
		ul {
			list-style-type: square;
		}
	}
	ol {
		list-style-type: upper-roman;
		ol {
			list-style-type: lower-roman;
		}
	}
	li {
		line-height: @baseLineHeight;
	}
}
ul.normal { list-style-type: disc }
ol.normal { list-style-type: decimal }

ul ul,
ul ol,
ol ol,
ol ul {
	margin-bottom: 0;
}
ul.unstyled,
ol.unstyled {
	margin-left: 0;
	list-style: none;
}

// Description Lists
dl {
	margin-bottom: @baseLineHeight;
}
dt,
dd {
	line-height: @baseLineHeight;
}
dt {
	font-weight: bold;
	line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
}
dd {
	margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
.dl-horizontal {
	dt {
		.text-overflow();
		float: left;
		clear: left;
		width: 120px;
		text-align: right;
	}
	dd {
		margin-left: 130px;
	}
}

// MISC
// ----

// Horizontal rules
hr {
	margin: @baseLineHeight 0;
	border: 0;
	border-top: 1px solid @hrBorder;
	border-bottom: 1px solid @white;
}

// Emphasis
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
.muted {
	color: @grayLight;
}

// Abbreviations and acronyms
abbr[title] {
	border-bottom: 1px dotted #ddd;
	cursor: help;
}
abbr.initialism {
	font-size: 90%;
	text-transform: uppercase;
}

// Blockquotes
blockquote {
	padding: 0 0 0 15px;
	margin: 0 0 @baseLineHeight;
	border-left: 5px solid @grayLighter;
	p {
		margin-bottom: 0;
		font-size: @baseFontSize;
		font-weight: 300;
		line-height: @baseLineHeight * 1.25;
	}
	small {
		display: block;
		line-height: @baseLineHeight;
		color: @grayLight;
		&:before {
			content: '\2014 \00A0';
		}
	}

	// Float right with text-align: right
	&.pull-right {
		float: right;
		padding-left: 0;
		padding-right: 15px;
		border-left: 0;
		border-right: 5px solid @grayLighter;
		p,
		small {
			text-align: right;
		}
	}
}

// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
	content: "";
}

// Addresses
address {
	display: block;
	margin-bottom: @baseLineHeight;
	line-height: @baseLineHeight;
	font-style: normal;
}

// Misc
small {
	font-size: 100%;
}
cite {
	font-style: normal;
}

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


Change highlight color tone.

Change highlight color tone.

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/topics-im/topics.git/'


added gray background to cover images (blog list)


removed @border-radius-base

removed @border-radius-base

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/dedalozzo/pit-bootstrap.git/'