Update media query description

Update media query description

/*!
  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', Helvetica, 'Hiragino Sans GB', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
}

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

// 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, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: @baseLineHeight;
  max-width: @thumbSize * 5 + @thumbPadding * 8; // defined at work-list
  margin: 0 auto;
  padding: @space * 1.5 @space * 1.2;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @textColor;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @linkColor;
    .transition(~"color .1s ease, background .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;
}

@logoWidth: 43px;
a[role=logo] {
  float: left;
  display: block;
  width: 37px;
  height: @logoWidth;
  background: url("data:image/svg+xml,<svg id='logo' width='37px' height='43px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M18.5,0.171L0.021,10.839v21.337L18.5,42.845l18.479-10.669V10.839L18.5,0.171z M27.043,26.377l-8.542,4.867L9.96,26.377 v-9.734l8.541-4.866l8.542,4.866V26.377z'/></svg>") no-repeat 0 0;
  background-size: auto @logoWidth;
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.35 @logoWidth + 4px;
  .cf;
  ul {
    position: relative;
    li {
      position: absolute;
      list-style: none;
      &[role=current] {
        z-index: 9999;
      }
      &:not([role=current]) {
        opacity: 0;
        pointer-events: none;
      }
      a {
        padding: 3px .8em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
      }
    }
    @baseNavPosition: 15px;
    @rate: 20px;
    &.nav-home {
      top: @baseNavPosition;
      li { top: 0px; }
    }
    &.nav-work {
      top: @baseNavPosition - @rate * 1;
      li { top: @rate * 1; }
    }
    &.nav-store {
      top: @baseNavPosition - @rate * 2;
      li { top: @rate * 2; }
    }
    &.nav-note {
      top: @baseNavPosition - @rate * 3;
      li { top: @rate * 3; }
    }
    &.nav-about {
      top: @baseNavPosition - @rate * 4;
      li { top: @rate * 4; }
    }
    &:hover {
      li {
        .transition(~"top .25s ease-out, opacity .3s ease-out .15s");
        opacity: 1;
        pointer-events: auto;
        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 20px; }
        &:nth-of-type(3) { top: 40px; }
        &:nth-of-type(4) { top: 60px; }
        &:nth-of-type(5) { top: 80px; }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 246px;
    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;
  max-width: @wrapperWidth;
  > * {
    font-weight: normal;
  }
  h1 {
    margin: 0 0 .1em;
  }
  h2 {
    .helvetica;
  }
  & + .txt :first-child { // ie. hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

article {
  width: 100%;
  margin: 0 0 @space * 1.35;
  // for some specified posts in work category
  .cf;
  img, video, iframe {
    display: block;
    margin: 0 0 40px;
    max-width: 100%;
  }
  .txt {
    clear: both; // for sibling, following elements (ie. .browser class) with float: left;
    overflow: hidden;
    max-width: @wrapperWidth;
    -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;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c";
        font-size: 120px;
        color: fade(@textColor, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      font-size: 75%;
    }
    hr {
      position: relative;
      .helvetica;
      margin: @space 0 2.4em;
      border-bottom: 1px dotted fade(@textColor, 10%);
      &:before {
        position: absolute;
        top: -6px;
        content: attr(data-placeholder);
        background: @backgroundColor;
        padding-right: 10px;
        pointer-events: none;
      }
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
  }
  .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
}

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

ul[role^=work-list] {
  margin: -@thumbPadding;
  .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 * 1.35;
    overflow: hidden;
    h2 {
      .font-face;
      margin: 0 0 .3em;
      max-width: @wrapperWidth;
      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 { // image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // text
      display: block;
      font-size: .5em;
      line-height: @baseLineHeight;
    }
    .bsa_it_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;
        }
      }
    }
  }
}

.tweet {
  .helvetica;
  display: block;
  float: left;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  &:hover {
    color: @backgroundColor;
    background: @linkColor;
  }
}

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

// 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) {
  :root {
    -webkit-text-size-adjust: none;
  }

  nav[role=navigation] {
    ul {
      position: static;
      li {
        float: left;
        position: static;
        &[role=current] {
          a {
            color: @linkColor;
          }
        }
        &:not([role=current]) {
          opacity: 1;
          pointer-events: auto;
        }
        &:first-child {
          display: none; // hide HOME link
        }
        a {
          display: block;
          padding: 15px .6em;
        }
      }
    }
  }
}

// ipad, iphone portrait {
@media (max-device-width: 1024px) and (orientation: portrait) {
  :root {
    -webkit-text-size-adjust: none;
    padding: @space * 1.5 69px;
  }
}

// iphone
@media (max-device-width: 480px) {
  :root {
    padding: @space * 1.5 40px;
  }

  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) {
  a[role=logo] {
    float: none;
  }

  nav[role=navigation] {
    float: none;
    margin-left: 0;
    margin-top: 10px;
    ul {
      li {
        float: none;
        a {
          padding: 10px 0;
        }
      }
    }
  }

  nav[role=pagination] {
    a {
      top: 379px;
    }
  }
}

/*!
  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', Helvetica, 'Hiragino Sans GB', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
}

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

// 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, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: @baseLineHeight;
  max-width: @thumbSize * 5 + @thumbPadding * 8; // defined at work-list
  margin: 0 auto;
  padding: @space * 1.5 @space * 1.2;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @textColor;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @linkColor;
    .transition(~"color .1s ease, background .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;
}

@logoWidth: 43px;
a[role=logo] {
  float: left;
  display: block;
  width: 37px;
  height: @logoWidth;
  background: url("data:image/svg+xml,<svg id='logo' width='37px' height='43px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M18.5,0.171L0.021,10.839v21.337L18.5,42.845l18.479-10.669V10.839L18.5,0.171z M27.043,26.377l-8.542,4.867L9.96,26.377 v-9.734l8.541-4.866l8.542,4.866V26.377z'/></svg>") no-repeat 0 0;
  background-size: auto @logoWidth;
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.35 @logoWidth + 4px;
  .cf;
  ul {
    position: relative;
    li {
      position: absolute;
      list-style: none;
      &[role=current] {
        z-index: 9999;
      }
      &:not([role=current]) {
        opacity: 0;
        pointer-events: none;
      }
      a {
        padding: 3px .8em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
      }
    }
    @baseNavPosition: 15px;
    @rate: 20px;
    &.nav-home {
      top: @baseNavPosition;
      li { top: 0px; }
    }
    &.nav-work {
      top: @baseNavPosition - @rate * 1;
      li { top: @rate * 1; }
    }
    &.nav-store {
      top: @baseNavPosition - @rate * 2;
      li { top: @rate * 2; }
    }
    &.nav-note {
      top: @baseNavPosition - @rate * 3;
      li { top: @rate * 3; }
    }
    &.nav-about {
      top: @baseNavPosition - @rate * 4;
      li { top: @rate * 4; }
    }
    &:hover {
      li {
        .transition(~"top .25s ease-out, opacity .3s ease-out .15s");
        opacity: 1;
        pointer-events: auto;
        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 20px; }
        &:nth-of-type(3) { top: 40px; }
        &:nth-of-type(4) { top: 60px; }
        &:nth-of-type(5) { top: 80px; }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 246px;
    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;
  max-width: @wrapperWidth;
  > * {
    font-weight: normal;
  }
  h1 {
    margin: 0 0 .1em;
  }
  h2 {
    .helvetica;
  }
  & + .txt :first-child { // ie. hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

article {
  width: 100%;
  margin: 0 0 @space * 1.35;
  // for some specified posts in work category
  .cf;
  img, video, iframe {
    display: block;
    margin: 0 0 40px;
    max-width: 100%;
  }
  .txt {
    clear: both; // for sibling, following elements (ie. .browser class) with float: left;
    overflow: hidden;
    max-width: @wrapperWidth;
    -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;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c";
        font-size: 120px;
        color: fade(@textColor, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      font-size: 75%;
    }
    hr {
      position: relative;
      .helvetica;
      margin: @space 0 2.4em;
      border-bottom: 1px dotted fade(@textColor, 10%);
      &:before {
        position: absolute;
        top: -6px;
        content: attr(data-placeholder);
        background: @backgroundColor;
        padding-right: 10px;
        pointer-events: none;
      }
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
  }
  .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
}

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

ul[role^=work-list] {
  margin: -@thumbPadding;
  .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 * 1.35;
    overflow: hidden;
    h2 {
      .font-face;
      margin: 0 0 .3em;
      max-width: @wrapperWidth;
      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 { // image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // text
      display: block;
      font-size: .5em;
      line-height: @baseLineHeight;
    }
    .bsa_it_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;
        }
      }
    }
  }
}

.tweet {
  .helvetica;
  display: block;
  float: left;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  &:hover {
    color: @backgroundColor;
    background: @linkColor;
  }
}

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

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

// all ios devices, the easy way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  :root {
    -webkit-text-size-adjust: none;
  }

  nav[role=navigation] {
    ul {
      position: static;
      li {
        float: left;
        position: static;
        &[role=current] {
          a {
            color: @linkColor;
          }
        }
        &:not([role=current]) {
          opacity: 1;
          pointer-events: auto;
        }
        &:first-child {
          display: none; // hide HOME link
        }
        a {
          display: block;
          padding: 15px .6em;
        }
      }
    }
  }
}

// ipad portrait {
@media (max-device-width: 1024px) and (orientation: portrait) {
  :root {
    -webkit-text-size-adjust: none;
    padding: @space * 1.5 69px;
  }
}

// iphone
@media (max-device-width: 480px) {
  :root {
    padding: @space * 1.5 40px;
  }

  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) {
  a[role=logo] {
    float: none;
  }

  nav[role=navigation] {
    float: none;
    margin-left: 0;
    margin-top: 10px;
    ul {
      li {
        float: none;
        a {
          padding: 10px 0;
        }
      }
    }
  }

  nav[role=pagination] {
    a {
      top: 379px;
    }
  }
}


Better line-height control

Better line-height control

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: #000;
  background: #fff;
  font-size: 14px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  font-weight: 100;
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 40px;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

::selection {
  background: rgba(0, 0, 0, .05);
}

@font-face {
  font-family: 'f';
  src: url('f.woff') format('woff'),
       url('f.svg#AllerRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

a {
  color: #000;
  -webkit-transition: all .5s ease, background .5s ease, opacity 1.5s ease, border .5s ease;
     -moz-transition: all .5s ease, background .5s ease, opacity 1.5s ease, border .5s ease;
}
  .a a, a:hover {
    color: #e34;
    -webkit-transition: color .1s ease, background .1s ease, opacity .1s ease, border .1s ease;
       -moz-transition: color .1s ease, background .1s ease, opacity .1s ease, border .1s ease;
  }

ins {
  .gray;
}

del {
  text-decoration: line-through;
}

.gray { color: rgba(0, 0, 0, .4); }

.aller {
  font-family: f, Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  text-transform: uppercase;
}

.helvetica {
  .gray;
  font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  font-size: 12px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: .25em;
}

body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: rgba(0, 0, 0, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .02);
}
body:after {
  bottom: 0;
  height: 70px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

header {
  position: relative;
  .aller;
  font-size: 30px;
  padding: 5px 0 0 40px;
  height: 38px;
  width: 160px;
  margin: 0 auto;
  a:hover {
    color: inherit;
  }
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 38px;
    width: 38px;
    content: '';
    background: url(l.svg) no-repeat 0 0;
    background-size: 38px 38px;
  }
}

nav {
  .helvetica;
  font-size: 11px;
  &[role=navigation] {
    padding: 15px 0;
    ul {
      text-align: center;
      li {
        display: inline;
        margin: 0 .8em;
      }
    }
  }
  &[role=pagination] {
    a {
      position: absolute;
      top: 180px;
      display: block;
      padding: 8px 10px;
      font-size: 9px;
      letter-spacing: .2em;
      background: rgba(0, 0, 0, .05);
      z-index: 9999;
      &[role=next] {
        left: 0;
      }
      &[role=previous] {
        right: 0;
      }
    }
  }
}

hgroup {
  .aller;
  font-size: 18px;
  text-align: center;
  padding-top: 40px;
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: 40px;
  a {
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
    &:hover {
      // border-bottom-color: #000;
    }
  }
  img, video {
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: 640px;
    font-size: 18px;
    margin: 0 auto;
    text-align: justify;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    p {
      margin: 1em 0;
      line-height: 2;
    }
    h3 {
      .helvetica;
      padding: 60px 0 0;
      text-align: center;
      &:first-child {
        margin-top: -40px;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, Consolas, monospace;
      color: #68a;
    }
  }
  div[role*=announcement] {
    text-align: center;
  }
  .note, .download {
    .helvetica;
    color: #000;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    padding: 20px;
    border-left: 3px solid rgba(238, 51, 68, .2);
    background: rgba(238, 51, 68, .1);
  }
}

// image list in "work"
@thumb-size: 64px;
@thumb-padding: 8px;

ul[role*=list] {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
  padding-top: 12px;
  clear: both;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: 8px;
    img {
      width: @thumb-size;
      height: @thumb-size;
      max-width: @thumb-size;
      margin: 0;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .aller;
      color: #fff;
      font-size: 10px;
      line-height: 1.2;
      opacity: 0;
      border-bottom: none;
      background: rgba(0, 0, 0, .8);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
ul[role$=small] {
  max-width: 640px;
  margin: 100px auto;
  padding: 60px 0 20px;
  li {
    img {
    }
    a {
      &:hover {
      }
    }
    &:hover a {
    }
  }
}

// post list in "note"
dl {
  text-align: center;
  margin-top: -40px;
  dt {
    line-height: 1;
    padding: 60px 0 0;
    .helvetica;
    a {
      border: none;
    }
  }
  dd {
    margin-bottom: 40px;
  }
}

aside {
  padding: 40px 0 0;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  clear: both;
  .bsap {
    padding: 10px 0 40px;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        .gray;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  article .txt {
    font-size: 16px;
  }
}

@media screen and (max-device-width: 480px) {
  :root {
    padding: 40px 20px;
  }
  article .txt {
    font-size: 14px;
  }
}

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: #000;
  background: #fff;
  font-size: 14px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  font-weight: 100;
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 40px;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

::selection {
  background: rgba(0, 0, 0, .05);
}

@font-face {
  font-family: 'f';
  src: url('f.woff') format('woff'),
       url('f.svg#AllerRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

a {
  color: #000;
  -webkit-transition: all .5s ease, background .5s ease, opacity 1.5s ease, border .5s ease;
     -moz-transition: all .5s ease, background .5s ease, opacity 1.5s ease, border .5s ease;
}
  .a a, a:hover {
    color: #e34;
    -webkit-transition: color .1s ease, background .1s ease, opacity .1s ease, border .1s ease;
       -moz-transition: color .1s ease, background .1s ease, opacity .1s ease, border .1s ease;
  }

ins {
  .gray;
}

del {
  text-decoration: line-through;
}

.gray { color: rgba(0, 0, 0, .4); }

.aller {
  font-family: f, Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  text-transform: uppercase;
}

.helvetica {
  .gray;
  font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  font-size: 12px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: .25em;
}

body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: rgba(0, 0, 0, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .02);
}
body:after {
  bottom: 0;
  height: 70px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

header {
  position: relative;
  .aller;
  font-size: 30px;
  padding: 5px 0 0 40px;
  height: 38px;
  width: 160px;
  margin: 0 auto;
  a:hover {
    color: inherit;
  }
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 38px;
    width: 38px;
    content: '';
    background: url(l.svg) no-repeat 0 0;
    background-size: 38px 38px;
  }
}

nav {
  .helvetica;
  font-size: 11px;
  &[role=navigation] {
    padding: 15px 0;
    ul {
      text-align: center;
      li {
        display: inline;
        margin: 0 .8em;
      }
    }
  }
  &[role=pagination] {
    a {
      position: absolute;
      top: 180px;
      display: block;
      padding: 8px 10px;
      font-size: 9px;
      letter-spacing: .2em;
      background: rgba(0, 0, 0, .05);
      z-index: 9999;
      &[role=next] {
        left: 0;
      }
      &[role=previous] {
        right: 0;
      }
    }
  }
}

hgroup {
  .aller;
  font-size: 18px;
  text-align: center;
  padding-top: 40px;
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: 40px;
  a {
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
    &:hover {
      // border-bottom-color: #000;
    }
  }
  img, video {
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: 640px;
    font-size: 18px;
    margin: 0 auto;
    text-align: justify;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    p {
      margin: 1em 0;
      line-height: 2;
    }
    h3 {
      .helvetica;
      padding: 60px 0 0;
      text-align: center;
      &:first-child {
        margin-top: -40px;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, Consolas, monospace;
      color: #68a;
    }
  }
  div[role*=announcement] {
    text-align: center;
  }
  .note, .download {
    .helvetica;
    color: #000;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    padding: 20px;
    border-left: 3px solid rgba(238, 51, 68, .2);
    background: rgba(238, 51, 68, .1);
  }
}

// image list in "work"
ul[role*=list] {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
  padding-top: 12px;
  clear: both;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: 8px;
    img {
      width: 64px;
      height: 64px;
      margin: 0;
    }
    a {
      position: absolute;
      top: -8px;
      left: -8px;
      padding: 8px;
      width: 64px;
      height: 64px;
      .aller;
      color: #fff;
      font-size: 10px;
      line-height: 1.2;
      opacity: 0;
      border-bottom: none;
      background: rgba(0, 0, 0, .8);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
ul[role$=small] {
  max-width: 640px;
  margin: 100px auto;
  padding: 60px 0 20px;
  li {
    img {
    }
    a {
      &:hover {
      }
    }
    &:hover a {
    }
  }
}

// post list in "note"
dl {
  text-align: center;
  margin-top: -40px;
  dt {
    line-height: 2;
    padding: 60px 0 0;
    .helvetica;
    a {
      border: none;
    }
  }
  dd {
    margin-bottom: 40px;
  }
}

aside {
  padding: 40px 0 0;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  clear: both;
  .bsap {
    padding: 10px 0 40px;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        .gray;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  article .txt {
    font-size: 16px;
  }
}

@media screen and (max-device-width: 480px) {
  :root {
    padding: 40px 20px;
  }
  article .txt {
    font-size: 14px;
  }
}


Need this for the color values in inline color picker.

// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

// Style definitions are from
// https://github.com/chriskempson/tomorrow-theme/tree/master/Brackets

// Brackets-specific default font and color definitions
//@import url("brackets_colors.less");

// Default theme -- all UI styling comes from variables in a theme
// Themes can rely on variables defined above
//@import url("brackets_theme_default.less");

// Include Codemirror styling overrides so that we can overrides proper values
// for the theme.  If you need to customize the tree, you also include jsTree.less
// and even brackets_scrollbars.less
//@import url("brackets_codemirror_override.less");

/*
 * Brackets Default Theme
 *
 * Defines all the variables that one can configure in a theme. This should
 * contain all variables / mixins for UI styling that we want to be able to
 * change in a theme.
 *
 * Throughout the rest of the LESS files we should _only_ use color
 * variable names that are on the LHS of the list below. So, if we
 * need a new color for some UI element, we should add a variable
 * in this file.
 */

/* Define some variables used in multiple places */
@background: #1d1f21;
@foreground: #c5c8c6;
@bc-color-step-size: 10%;

/* Code Styling */

/* Custom scrollbar colors */
.platform-win & {
    .CodeMirror-gutter-filler {
        background-color: rgb(15, 15, 15);
    }
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        background-color: rgb(15, 15, 15);
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
    }
}

.platform-linux & {
    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
    }
}

.CodeMirror, .CodeMirror-scroll {
    background-color: @background;
    color: @foreground;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: #2f2f2f;
}
.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset 15px 0 0 0 #000;
}

.CodeMirror-focused .CodeMirror-activeline {
    .CodeMirror-gutter-elt {
        background: #000;
        color: #fff;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: #767676;
    }
}

.cm-keyword, .cm-qualifier, .cm-builtin, .cm-tag, .cm-quote {color: #6c9ef8;}
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #d89333;}
.cm-number, .cm-attribute, .cm-plus {color: #85a300;}
.cm-def, .cm-property {color: #b77fdb;}
.cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}
.cm-comment {color: #767676;}
.cm-error, .cm-minus {color: #dc322f;}
.cm-header {color: #d85896;}
.cm-link {color: #b77fdb; text-decoration: none;}
.cm-rangeinfo {color: #6c71c4;}

/* Extra CSS */

.CodeMirror-cursor {
    border-left: 1px solid #c5c8c6 !important;
}

.CodeMirror-gutters {
    background-color: @background;
    border-right: none;
}

.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt, .CodeMirror-linenumber {
    color: #767676;
}

.CodeMirror .CodeMirror-selected {
    background: #333f48;
}
.CodeMirror-focused .CodeMirror-selected {
    background: #0050a0;
}

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #2e5c00;
    color: @foreground !important;
}

/* Inline editor styling */

.related-container .selection:before {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.inline-widget {
    color: #333;
}

.inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
    background: transparent;
}

// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

// Style definitions are from
// https://github.com/chriskempson/tomorrow-theme/tree/master/Brackets

// Brackets-specific default font and color definitions
//@import url("brackets_colors.less");

// Default theme -- all UI styling comes from variables in a theme
// Themes can rely on variables defined above
//@import url("brackets_theme_default.less");

// Include Codemirror styling overrides so that we can overrides proper values
// for the theme.  If you need to customize the tree, you also include jsTree.less
// and even brackets_scrollbars.less
//@import url("brackets_codemirror_override.less");

/*
 * Brackets Default Theme
 *
 * Defines all the variables that one can configure in a theme. This should
 * contain all variables / mixins for UI styling that we want to be able to
 * change in a theme.
 *
 * Throughout the rest of the LESS files we should _only_ use color
 * variable names that are on the LHS of the list below. So, if we
 * need a new color for some UI element, we should add a variable
 * in this file.
 */

/* Define some variables used in multiple places */
@background: #1d1f21;
@foreground: #c5c8c6;
@bc-color-step-size: 10%;

/* Code Styling */

/* Custom scrollbar colors */
.platform-win & {
    .CodeMirror-gutter-filler {
        background-color: rgb(15, 15, 15);
    }
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        background-color: rgb(15, 15, 15);
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
    }
}

.platform-linux & {
    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
    }
}

.CodeMirror, .CodeMirror-scroll {
    background-color: @background;
    color: @foreground;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: #2f2f2f;
}
.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset 15px 0 0 0 #000;
}

.CodeMirror-focused .CodeMirror-activeline {
    .CodeMirror-gutter-elt {
        background: #000;
        color: #fff;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: #767676;
    }
}

.cm-keyword, .cm-qualifier, .cm-builtin, .cm-tag, .cm-quote {color: #6c9ef8;}
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #d89333;}
.cm-number, .cm-attribute, .cm-plus {color: #85a300;}
.cm-def, .cm-property {color: #b77fdb;}
.cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}
.cm-comment {color: #767676;}
.cm-error, .cm-minus {color: #dc322f;}
.cm-header {color: #d85896;}
.cm-link {color: #b77fdb; text-decoration: none;}
.cm-rangeinfo {color: #6c71c4;}

/* Extra CSS */

.CodeMirror-cursor {
    border-left: 1px solid #c5c8c6 !important;
}

.CodeMirror-gutters {
    background-color: @background;
    border-right: none;
}

.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt, .CodeMirror-linenumber {
    color: #767676;
}

.CodeMirror .CodeMirror-selected {
    background: #333f48;
}
.CodeMirror-focused .CodeMirror-selected {
    background: #0050a0;
}

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #2e5c00;
    color: @foreground !important;
}

/* Inline editor styling */

.related-container .selection:before {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
    background: transparent;
}


Fixes #4016 unpublished content styling in list view

// Table Styles
.umb-table {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid @gray-8;
    flex-wrap: nowrap;
    justify-content: space-between;
    min-width: auto;
}

.umb-table.umb-table-inactive {

    &:before {
        content: "";
        background: rgba(255, 255, 255, 0.75);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        outline: 1px solid rgba(255, 255, 255, 0.75);
    }

}

.umb-table a {
    text-decoration: none;
    cursor: pointer;

    &:focus {
        outline: none;
        text-decoration: none;
    }
}

input.umb-table__input {
    margin: 0 auto;
}

// Table Head Styles
.umb-table-head {
    background-color: @gray-10;
    font-size: 14px;
    font-weight: bold;
}

.umb-table-head__link {
    position: relative;
    cursor: default;
    text-decoration: none;
    color: @gray-3;
    &:hover {
        text-decoration: none;
        color: @gray-3;
    }
}

.umb-table-head__link .sortable {
    &:hover {
        text-decoration: none;
        cursor: pointer;
        color: @black;
    }
}

.umb-table-thead__icon {
    position: absolute;
    padding-top: 1px;
    padding-left: 3px;
    font-size: 13px;
    cursor: default;
}

.umb-table-thead .sortable:hover {
    cursor: pointer;
    text-decoration: none;
}

// Table Body Styles
.umb-table-body {
    position: relative;
}

.umb-table-body .umb-table-row {
    color: @gray-5;
    border-top: 1px solid @gray-8;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    min-height: 52px;
    &:hover {
        background-color: @gray-10;
    }
}

.umb-table-body .umb-table-row.-solid {
    cursor: default;

    &:hover {
        background-color: @white;
    }
}

.umb-table-body__link {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.umb-table-body__icon,
.umb-table-body__icon[class^="icon-"],
.umb-table-body__icon[class*=" icon-"] {
    margin: 0 auto;
    font-size: 22px;
    line-height: 22px;
    color: @turquoise-d1;
}

.umb-table-body__checkicon,
.umb-table-body__checkicon[class^="icon-"],
.umb-table-body__checkicon[class*=" icon-"] {
    display: none;
    font-size: 18px;
    line-height: 22px;
    color: @green;
}

.umb-table-body .umb-table__name {
    color: @black;
    font-size: 14px;
    font-weight: bold;
}

// Styles of no items in the listview
.umb-table-body__empty {
    font-size: 16px;
    text-align: center;
    color: @gray-3;
    padding: 20px 0;
    height: 100%;
}

// Show checkmark when checked, hide file icon
.-selected {
    .umb-table-body__fileicon {
        display: none;
    }

    .umb-table-body__checkicon {
        display: inline-block;
    }
}

// Styling for when item is published or not
.-published {

}

.-content .-unpublished:not(.with-unpublished-version) {
    .umb-table__name > * {
        opacity: .4;
    }

    .umb-table-body__icon {
        opacity: .4;
    }
}

.-selected.-unpublished {
    .umb-table-body__icon {
        opacity: 1;
    }
}

// Table Row Styles
.umb-table-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    user-select: none;
}

.umb-table-body .umb-table-row--empty {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 5px 0;
    cursor: auto;
    user-select: auto;
}

.umb-table-body .umb-table-row--empty:hover {
    background-color: transparent;
    cursor: auto;
}

// Table Cell Styles
.umb-table-cell {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 1%; //NOTE 1% is a Internet Explore hack, so that cells don't collapse
    position: relative;
    margin: auto 14px;
    padding: 6px 2px;
    text-align: left;
    overflow:hidden;
}

.umb-table-cell > * {
    overflow: hidden;
    white-space: nowrap; //NOTE Disable/Enable this to keep textstring on one line
    text-overflow: ellipsis;
}

.umb-table-cell:first-of-type:not(.not-fixed) {
    flex: 0 0 25px;
    margin: 0 0 0 15px;
    padding: 15px 0;
}

.umb-table-cell--auto-width {
    flex: 0 0 auto !important;
}

.umb-table-cell--faded {
    opacity: 0.4;
}

// Increases the space for the name cell
.umb-table__name {
    flex: 1 1 25%;
    max-width: 25%;
}

.umb-table__loading-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.umb-table__row-expand {
    font-size: 12px;
    text-decoration: none;
    color: @black;
}

.umb-table__row-expand--hidden {
    visibility: hidden;
}

.umb-table--condensed {

    .umb-table-cell:first-of-type:not(.not-fixed) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .umb-table-body__icon {
        font-size: 20px;
    }

}

// Table Styles
.umb-table {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid @gray-8;
    flex-wrap: nowrap;
    justify-content: space-between;
    min-width: auto;
}

.umb-table.umb-table-inactive {

    &:before {
        content: "";
        background: rgba(255, 255, 255, 0.75);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        outline: 1px solid rgba(255, 255, 255, 0.75);
    }

}

.umb-table a {
    text-decoration: none;
    cursor: pointer;

    &:focus {
        outline: none;
        text-decoration: none;
    }
}

input.umb-table__input {
    margin: 0 auto;
}

// Table Head Styles
.umb-table-head {
    background-color: @gray-10;
    font-size: 14px;
    font-weight: bold;
}

.umb-table-head__link {
    position: relative;
    cursor: default;
    text-decoration: none;
    color: @gray-3;
    &:hover {
        text-decoration: none;
        color: @gray-3;
    }
}

.umb-table-head__link .sortable {
    &:hover {
        text-decoration: none;
        cursor: pointer;
        color: @black;
    }
}

.umb-table-thead__icon {
    position: absolute;
    padding-top: 1px;
    padding-left: 3px;
    font-size: 13px;
    cursor: default;
}

.umb-table-thead .sortable:hover {
    cursor: pointer;
    text-decoration: none;
}

// Table Body Styles
.umb-table-body {
    position: relative;
}

.umb-table-body .umb-table-row {
    color: @gray-5;
    border-top: 1px solid @gray-8;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    min-height: 52px;
    &:hover {
        background-color: @gray-10;
    }
}

.umb-table-body .umb-table-row.-solid {
    cursor: default;

    &:hover {
        background-color: @white;
    }
}

.umb-table-body__link {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.umb-table-body__icon,
.umb-table-body__icon[class^="icon-"],
.umb-table-body__icon[class*=" icon-"] {
    margin: 0 auto;
    font-size: 22px;
    line-height: 22px;
    color: @turquoise-d1;
}

.umb-table-body__checkicon,
.umb-table-body__checkicon[class^="icon-"],
.umb-table-body__checkicon[class*=" icon-"] {
    display: none;
    font-size: 18px;
    line-height: 22px;
    color: @green;
}

.umb-table-body .umb-table__name {
    color: @black;
    font-size: 14px;
    font-weight: bold;
}

// Styles of no items in the listview
.umb-table-body__empty {
    font-size: 16px;
    text-align: center;
    color: @gray-3;
    padding: 20px 0;
    height: 100%;
}

// Show checkmark when checked, hide file icon
.-selected {
    .umb-table-body__fileicon {
        display: none;
    }

    .umb-table-body__checkicon {
        display: inline-block;
    }
}

// Styling for when item is published or not
.-published {

}

.-content :not(.with-unpublished-version).-unpublished {
    .umb-table__name > * {
        opacity: .4;
    }

    .umb-table-body__icon {
        opacity: .4;
    }
}

.-selected.-unpublished {
    .umb-table-body__icon {
        opacity: 1;
    }
}

// Table Row Styles
.umb-table-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    user-select: none;
}

.umb-table-body .umb-table-row--empty {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 5px 0;
    cursor: auto;
    user-select: auto;
}

.umb-table-body .umb-table-row--empty:hover {
    background-color: transparent;
    cursor: auto;
}

// Table Cell Styles
.umb-table-cell {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 1%; //NOTE 1% is a Internet Explore hack, so that cells don't collapse
    position: relative;
    margin: auto 14px;
    padding: 6px 2px;
    text-align: left;
    overflow:hidden;
}

.umb-table-cell > * {
    overflow: hidden;
    white-space: nowrap; //NOTE Disable/Enable this to keep textstring on one line
    text-overflow: ellipsis;
}

.umb-table-cell:first-of-type:not(.not-fixed) {
    flex: 0 0 25px;
    margin: 0 0 0 15px;
    padding: 15px 0;
}

.umb-table-cell--auto-width {
    flex: 0 0 auto !important;
}

.umb-table-cell--faded {
    opacity: 0.4;
}

// Increases the space for the name cell
.umb-table__name {
    flex: 1 1 25%;
    max-width: 25%;
}

.umb-table__loading-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.umb-table__row-expand {
    font-size: 12px;
    text-decoration: none;
    color: @black;
}

.umb-table__row-expand--hidden {
    visibility: hidden;
}

.umb-table--condensed {

    .umb-table-cell:first-of-type:not(.not-fixed) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .umb-table-body__icon {
        font-size: 20px;
    }

}


list-group -> list-tree

list-group -> list-tree

@import "ui-variables";
@import "ui-mixins";
@import "octicon-mixins";

.list-group, .list-tree {
  margin: 0;
  list-style: none;

  .list-item,
  .list-nested-item > .list-item {
    .text(normal);
    line-height: @component-line-height;
  }

  .generate-list-item-text-color(@class) {
    .list-item.@{class},
    .list-nested-item.@{class} > .list-item {
      .text(@class);
    }
  }
  .generate-list-item-text-color(subtle);
  .generate-list-item-text-color(info);
  .generate-list-item-text-color(success);
  .generate-list-item-text-color(warning);
  .generate-list-item-text-color(error);
  .generate-list-item-text-color(selected);

  .list-item:hover,
  .list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
  .list-nested-item .list-item:hover,
  .list-nested-item .list-item:hover .disclosure-arrow,
  .selected > .list-nested-item > .list-item .disclosure-arrow,
  .selected > .list-nested-item > .list-item:hover .disclosure-arrow  {
    .text(highlighted);
  }

  .list-nested-item.collapsed > .list-group {
    display: none;
  }
  .list-nested-item.collapsed > .list-item > .disclosure-arrow {
    .octicon(chevron-right, @disclosure-arrow-size);
  }
}

// Handle indentation of the tree. Assume disclosure arrows.
.list-tree {
  @disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding;

  .disclosure-arrow { margin-right: @component-icon-padding; }

  &.has-collapsable-children li.list-item {
    margin-left: @disclosure-arrow-padding;
  }
  .list-nested-item > .list-tree,
  .list-nested-item > .list-group {
    margin-left: @disclosure-arrow-padding;
  }

}

@import "ui-variables";
@import "ui-mixins";
@import "octicon-mixins";

.list-group .list-group-item { .text(normal); }

.generate-list-group-text-color(@class) {
  .list-group .list-group-item.@{class},
  .list-group .list-group-nested-item.@{class} > .list-group-item {
    .text(@class);
  }
}
.generate-list-group-text-color(subtle);
.generate-list-group-text-color(info);
.generate-list-group-text-color(success);
.generate-list-group-text-color(warning);
.generate-list-group-text-color(error);
.generate-list-group-text-color(selected);

.list-group .list-group-item:hover,
.list-group .list-group-nested-item:hover > .list-group-item, // i.e. highlight directory when hover child file
.list-group .list-group-nested-item .list-group-item:hover,
.list-group .list-group-nested-item .list-group-item:hover .disclosure-arrow,
.list-group .selected > .list-group-nested-item > .list-group-item .disclosure-arrow,
.list-group .selected > .list-group-nested-item > .list-group-item:hover .disclosure-arrow  {
  .text(highlighted);
}

.list-group .list-group-nested-item.collapsed > .list-group {
  display: none;
}
.list-group .list-group-nested-item.collapsed > .list-group-item > .disclosure-arrow {
  .octicon(chevron-right, @disclosure-arrow-size);
}


Update static/vendors/bootstrap/less/mixins/size.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

// Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

error: pathspec 'static/vendors/bootstrap/less/mixins/size.less' did not match any file(s) known to git


Update comments.

Update comments.

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

/*
 * TODO This can be removed next time we update CodeMirror2.
 * Marijn made this change to codemirror.css, but I need it now
 * in order to make font resizing work.
 */
.CodeMirror pre {
    line-height: inherit;
    padding: 0 @code-padding;
}

.CodeMirror-scroll {
    background-color: @background-color-3;
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

@code-padding: 1.2em;

.cm-s-default {
    span.cm-keyword {color: @accent-keyword;}
    span.cm-atom {color: @accent-atom;}
    span.cm-number {color: @accent-number;}
    span.cm-def {color: @accent-def;}
    span.cm-variable {color: @accent-variable;}
    span.cm-variable-2 {color: @accent-variable-2;}
    span.cm-variable-3 {color: @accent-variable-3;}
    span.cm-property {color: @accent-property;}
    span.cm-operator {color: @accent-operator;}
    span.cm-comment {color: @accent-comment;}
    span.cm-string {color: @accent-string;}
    span.cm-string-2 {color: @accent-string-2;}
    span.cm-meta {color: @accent-meta;}
    span.cm-error {color: @accent-error;}
    span.cm-qualifier {color: @accent-qualifier;}
    span.cm-builtin {color: @accent-builtin;}
    span.cm-bracket {color: @accent-bracket;}
    span.cm-tag {color: @accent-tag;}
    span.cm-attribute {color: @accent-attribute;}
    span.cm-header {color: @accent-header;}
    span.cm-quote {color: @accent-quote;}
    span.cm-hr {color: @accent-hr;}
    span.cm-link {color: @accent-link;}
    span.cm-rangeinfo {color: @accent-rangeinfo;}
    span.cm-minus {color: @accent-minus;}
    span.cm-plus {color: @accent-plus;}

    span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @background-color-2;}
    span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

    .CodeMirror-cursor {
        .code-cursor();

        /* Ensure the cursor shows up in front of code spans with a background color
         * (e.g. matchingbracket).
         */
        z-index: 3;
    }

    .CodeMirror-lines {
        padding: @code-padding 0;

        /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
         * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
         * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
         * we are guaranteed that the mouse event will be captured by our parent div, and click events will
         * be dispatched.
         */
        pointer-events: none;
    }

    .CodeMirror-linewidget {
        /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
         * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
        pointer-events: auto;
    }

    .CodeMirror-gutters {
        background-color: @background-color-3;
        border-right: none;
        padding-top: @code-padding;
        padding-bottom: @code-padding;
        min-width: 2.5em;
    }
    .CodeMirror-linenumber {
        color: @accent-comment;
        min-width: 2.5em;
        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
        padding-top: 0px;
        padding-bottom: 0px;
    }
    &.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.

    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @background-color-1;
    }

    .CodeMirror .CodeMirror-cursor {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursor {
        visibility: visible;
    }

    .CodeMirror.cm-s-default .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.cm-s-default.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }

    .CodeMirror-scroll {
        outline: none;
    }

    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

/*
 * TODO This can be removed next time we update CodeMirror2.
 * Marijn made this change to codemirror.css, but I need it now
 * in order to make font resizing work.
 */
.CodeMirror pre {
    line-height: inherit;
    padding: 0 @code-padding;
}

.CodeMirror-scroll {
    background-color: @background-color-3;
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

@code-padding: 1.2em;

.cm-s-default {
    span.cm-keyword {color: @accent-keyword;}
    span.cm-atom {color: @accent-atom;}
    span.cm-number {color: @accent-number;}
    span.cm-def {color: @accent-def;}
    span.cm-variable {color: @accent-variable;}
    span.cm-variable-2 {color: @accent-variable-2;}
    span.cm-variable-3 {color: @accent-variable-3;}
    span.cm-property {color: @accent-property;}
    span.cm-operator {color: @accent-operator;}
    span.cm-comment {color: @accent-comment;}
    span.cm-string {color: @accent-string;}
    span.cm-string-2 {color: @accent-string-2;}
    span.cm-meta {color: @accent-meta;}
    span.cm-error {color: @accent-error;}
    span.cm-qualifier {color: @accent-qualifier;}
    span.cm-builtin {color: @accent-builtin;}
    span.cm-bracket {color: @accent-bracket;}
    span.cm-tag {color: @accent-tag;}
    span.cm-attribute {color: @accent-attribute;}
    span.cm-header {color: @accent-header;}
    span.cm-quote {color: @accent-quote;}
    span.cm-hr {color: @accent-hr;}
    span.cm-link {color: @accent-link;}
    span.cm-rangeinfo {color: @accent-rangeinfo;}
    span.cm-minus {color: @accent-minus;}
    span.cm-plus {color: @accent-plus;}

    span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @background-color-2;}
    span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

    .CodeMirror-cursor {
        .code-cursor();

        /* Ensure the cursor shows up in front of code spans with a background color
         * (e.g. matchingbracket).
         */
        z-index: 3;
    }

    .CodeMirror-lines {
        padding: @code-padding 0;

        /* This is necessary for issue #2780. It seems that because the cursor is in front of the code, it can
         * interfere with the mouseup when the user clicks on the code and the cursor moves underneath the mouse
         * position.
         */
        pointer-events: none;
    }

    .CodeMirror-linewidget {
        pointer-events: auto;
    }

    .CodeMirror-gutters {
        background-color: @background-color-3;
        border-right: none;
        padding-top: @code-padding;
        padding-bottom: @code-padding;
        min-width: 2.5em;
    }
    .CodeMirror-linenumber {
        color: @accent-comment;
        min-width: 2.5em;
        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
        padding-top: 0px;
        padding-bottom: 0px;
    }
    &.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.

    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @background-color-1;
    }

    .CodeMirror .CodeMirror-cursor {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursor {
        visibility: visible;
    }

    .CodeMirror.cm-s-default .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.cm-s-default.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }

    .CodeMirror-scroll {
        outline: none;
    }

    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}


Make the first player indicator smaller

Make the first player indicator smaller

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


space

space

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/'


[#74] remove fixed blog post background

[#74] remove fixed blog post background

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/'


add a transition delay to the blocks to give the appearance of moving from one stage to another.

@import (reference) 'variables';
@import (reference) 'mixins';

.town-city {
    margin: 5px 0;
    min-width: 120px;

    .ng-enter,
    .ng-leave.ng-leave-active {
        transition-delay: 0s !important;
    }

    .ng-leave,
    .ng-enter.ng-enter-active {
        transition-delay: .6s !important;
    }

    &.commit-blocks-legend {
        .village,
        .town,
        .city,
        .state {
            background-color: @dash-widget-section-highlight;
        }

        .commit-blocks-legend-block {
            display: inline-block;
            line-height: 46px;
            height: 46px;
            margin-right: 2rem;

            .village, .town, .city {
                position: relative;
                top: 50%;
                .transform(translateY(-50%));
            }
        }
    }

    .village,
    .town,
    .city,
    .state {
        float: left;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 2px;
    }

    .commit-fail {
        background-color: @state-danger-text;

        @line: rgba(122, 122, 122, .15);
        background: repeating-linear-gradient(
            135deg,
            @line,
            @line 2px,
            @state-danger-text 2px,
            @state-danger-text 4px
        );
    }

    .commit-pass {
        background-color: @state-success-text;
    }

    .village {
        width: 10px;
        height: 10px;
    }

    .town {
        width: 22px;
        height: 10px;
    }

    .city {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }

    .state {
        width: 22px;
        height: 46px;
        border-radius: 4px;
    }
}

@import (reference) 'variables';
@import (reference) 'mixins';

.town-city {
    margin: 5px 0;
    min-width: 120px;

    &.commit-blocks-legend {
        .village,
        .town,
        .city,
        .state {
            background-color: @dash-widget-section-highlight;
        }

        .commit-blocks-legend-block {
            display: inline-block;
            line-height: 46px;
            height: 46px;
            margin-right: 2rem;

            .village, .town, .city {
                position: relative;
                top: 50%;
                .transform(translateY(-50%));
            }
        }
    }

    .village,
    .town,
    .city,
    .state {
        float: left;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 2px;
    }

    .commit-fail {
        background-color: @state-danger-text;

        @line: rgba(122, 122, 122, .15);
        background: repeating-linear-gradient(
            135deg,
            @line,
            @line 2px,
            @state-danger-text 2px,
            @state-danger-text 4px
        );
    }

    .commit-pass {
        background-color: @state-success-text;
    }

    .village {
        width: 10px;
        height: 10px;
    }

    .town {
        width: 22px;
        height: 10px;
    }

    .city {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }

    .state {
        width: 22px;
        height: 46px;
        border-radius: 4px;
    }
}


improve block color transition

improve block color transition

fatal: remote error: upload-pack: not our ref c8d30cdd7695e9f0e4377faebaf4a65b1db4072c
fatal: the remote end hung up unexpectedly