Update clearfix method: http://nicolasgallagher.com/micro-clearfix-hack/

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

// global variables
@space: 70px;
@txt_width: 750px;
@link: #e34; // #2ed for invert color
@bg: #fff;
@txt: #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: 56px;
}

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

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 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: @txt;
  background: @bg;
  font-size: 24px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  max-width: @thumb-size * 5 + @thumb-padding * 8; // defined at work-list
  margin: 0 auto;
  padding: @space * 1.5 @space * .8;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @txt;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @link;
    .transition(~"color .1s ease, background .1s ease, opacity .1s ease");
  }

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

del {
  text-decoration: line-through;
}

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

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

@logo_width: 43px;
a[role=logo] {
  float: left;
  display: block;
  width: 37px;
  height: @logo_width;
  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 @logo_width;
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.35 @logo_width + 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;
      }
    }
    @base: 15px;
    @rate: 20px;
    &.nav-home {
      top: @base;
      li { top: 0px; }
    }
    &.nav-work {
      top: @base - @rate * 1;
      li { top: @rate * 1; }
    }
    &.nav-store {
      top: @base - @rate * 2;
      li { top: @rate * 2; }
    }
    &.nav-note {
      top: @base - @rate * 3;
      li { top: @rate * 3; }
    }
    &.nav-about {
      top: @base - @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: 10px;
    letter-spacing: .2em;
    background: fade(@txt, 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(@link, 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: @txt_width;
  > * {
    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: @txt_width;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@txt, 30%); // set larger value for invert color
    }
    p {
      margin: 0 0 1.1em;
      line-height: 1.6;
    }
    h3 {
      .helvetica;
      margin: @space 0 1.6em;
    }
    ul, ol {
      margin: 0 0 1em 1em;
      li {
        line-height: 1.6;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c";
        font-size: 120px;
        line-height: 1;
        color: fade(@txt, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      line-height: 1;
      font-size: .7em;
    }
    hr {
      position: relative;
      .helvetica;
      margin: @space 0 2.4em;
      border-bottom: 1px dotted fade(@txt, 10%);
      &:before {
        position: absolute;
        top: -5px;
        content: attr(data-placeholder);
        background: @bg;
        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 {
    @icon: 40px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: @icon @icon;
    padding-left: @icon * 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"
@thumb-size: 190px;
@thumb-padding: 15px;
@thumb-font-size: 18px;

ul[role^=work-list] {
  margin: -@thumb-padding;
  .cf;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: @thumb-padding;
    a {
      display: block;
      width: @thumb-size;
      height: @thumb-size + @thumb-font-size * 2 + @thumb-padding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: 17px;
      overflow: hidden; // for text
    }
    &:hover a {
      opacity: 1;
    }
    p {
      margin: @thumb-padding * 1.4 0 0;
    }
    time {
      color: fade(@txt, 30%);
    }
    img {
      width: @thumb-size;
      height: @thumb-size;
      margin: 0; // override: article img
      background: @link;
    }
  }
  & ~ 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: @txt_width;
      font-weight: normal;
      time {
        color: fade(@txt, 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: @txt_width;
  clear: both;
  .bsap {
    .bsa_it_i { // image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // text
      display: block;
      font-size: .5em;
      line-height: 1.6;
    }
    .bsa_it_d { // description
      display: block;
      font-size: .9em;
      line-height: 1.6;
    }
    .bsa_it_p {
      display: block;
      margin-top: 5px;
      .helvetica;
      a {
        color: fade(@txt, 40%);
        &:hover {
          color: @txt;
        }
      }
    }
  }
}

footer {
  .helvetica;
  font-size: 11px;
}

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

// iphone
@media (max-device-width: 480px) {
  :root {
    -webkit-text-size-adjust: none;
  }

  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: @thumb-padding * 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) {
  :root {
    padding: @space * 1.5 20px;
  }

  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;
@txt_width: 750px;
@link: #e34; // #2ed for invert color
@bg: #fff;
@txt: #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: 56px;
}

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

.clearfix {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   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: @txt;
  background: @bg;
  font-size: 24px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  max-width: @thumb-size * 5 + @thumb-padding * 8; // defined at work-list
  margin: 0 auto;
  padding: @space * 1.5 @space * .8;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @txt;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @link;
    .transition(~"color .1s ease, background .1s ease, opacity .1s ease");
  }

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

del {
  text-decoration: line-through;
}

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

// core styles begin
body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: fade(@txt, 5%);
  border-bottom: 1px solid fade(@txt, 2%);
}

@logo_width: 43px;
a[role=logo] {
  float: left;
  display: block;
  width: 37px;
  height: @logo_width;
  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 @logo_width;
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.35 @logo_width + 4px;
  &:after {
    .clearfix;
  }
  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;
      }
    }
    @base: 15px;
    @rate: 20px;
    &.nav-home {
      top: @base;
      li { top: 0px; }
    }
    &.nav-work {
      top: @base - @rate * 1;
      li { top: @rate * 1; }
    }
    &.nav-store {
      top: @base - @rate * 2;
      li { top: @rate * 2; }
    }
    &.nav-note {
      top: @base - @rate * 3;
      li { top: @rate * 3; }
    }
    &.nav-about {
      top: @base - @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: 10px;
    letter-spacing: .2em;
    background: fade(@txt, 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(@link, 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: @txt_width;
  > * {
    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;
  &:after {
    .clearfix;
  }
  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: @txt_width;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@txt, 30%); // set larger value for invert color
    }
    p {
      margin: 0 0 1.1em;
      line-height: 1.6;
    }
    h3 {
      .helvetica;
      margin: @space 0 1.6em;
    }
    ul, ol {
      margin: 0 0 1em 1em;
      li {
        line-height: 1.6;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: '\201c';
        font-size: 120px;
        line-height: 1;
        color: fade(@txt, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      line-height: 1;
      font-size: .7em;
    }
    hr {
      position: relative;
      .helvetica;
      margin: @space 0 2.4em;
      border-bottom: 1px dotted fade(@txt, 10%);
      &:before {
        position: absolute;
        top: -5px;
        content: attr(data-placeholder);
        background: @bg;
        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 {
    @icon: 40px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: @icon @icon;
    padding-left: @icon * 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"
@thumb-size: 190px;
@thumb-padding: 15px;
@thumb-font-size: 18px;

ul[role^=work-list] {
  margin: -@thumb-padding;
  &:after {
     .clearfix;
  }
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: @thumb-padding;
    a {
      display: block;
      width: @thumb-size;
      height: @thumb-size + @thumb-font-size * 2 + @thumb-padding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: 17px;
      overflow: hidden; // for text
    }
    &:hover a {
      opacity: 1;
    }
    p {
      margin: @thumb-padding * 1.4 0 0;
    }
    time {
      color: fade(@txt, 30%);
    }
    img {
      width: @thumb-size;
      height: @thumb-size;
      margin: 0; // override: article img
      background: @link;
    }
  }
  & ~ 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: @txt_width;
      font-weight: normal;
      time {
        color: fade(@txt, 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: @txt_width;
  clear: both;
  .bsap {
    .bsa_it_i { // image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // text
      display: block;
      font-size: .5em;
      line-height: 1.6;
    }
    .bsa_it_d { // description
      display: block;
      font-size: .9em;
      line-height: 1.6;
    }
    .bsa_it_p {
      display: block;
      margin-top: 5px;
      .helvetica;
      a {
        color: fade(@txt, 40%);
        &:hover {
          color: @txt;
        }
      }
    }
  }
}

footer {
  .helvetica;
  font-size: 11px;
}

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

// iphone
@media (max-device-width: 480px) {
  :root {
    -webkit-text-size-adjust: none;
  }

  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: @thumb-padding * 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) {
  :root {
    padding: @space * 1.5 20px;
  }

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


Fixes colour for prices in search results

Turns out that I forgot to add the span selector in the last pull request: https://github.com/hevnly/asset-bazaar/commit/bf46c990ea4336beb761c133d67e2d177246b3ad

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/hevnly/asset-bazaar.git/'