Add a -webkit-filter effect for .work-list

/*!
  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;
@sansSerif: "Helvetica Neue", "Hiragino Sans GB", sans-serif;
@serif: Palatino, "Hiragino Mincho ProN", serif;

// Transition mixin
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}

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

// 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, @sansSerif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
  -webkit-font-smoothing: antialiased;
}

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

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

  &:after {
    clear: both;
  }
}

// Basic reset
p,
ul, li,
h1, h2, h3, h4, h5, h6,
blockquote,
hr {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1;
}

body {
  color: @textColor;
  background: @backgroundColor;
  font-size: @baseFontSize;
  font-family: @serif;
  line-height: @baseLineHeight;
  margin: 0 auto 0;
  padding: 0 0  @space * 1.5;
  text-align: center;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;

  // A semitranslucent bar at the top of the page
  &: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;
  }
}

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

a, button {
  color: @textColor;
  text-decoration: none;
  .transition(~"color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease");

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

img, hr {
  border: 0;
}

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

del {
  text-decoration: line-through;
}

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

// Main site logo
.logo {
  display: block;
  width: 0;
  height: 0;
  margin: -29px auto @space / 5;
  border-style: solid;
  border-width: 0 26px 45px 26px;
  border-color: transparent;
  border-bottom-color: @textColor;
  text-indent: -9999em;

  &:hover {
    border-bottom-color: @linkColor;
  }
}

// A different logo only available in homepage
.index { // header.index
  margin: 0 0 @space / 5;
  .vertical(#9475d1, #b67fd6);

  .logo {
    margin: @space / 2 auto 0;
    border-bottom-color: @backgroundColor;

    &:hover {
      border-bottom-color: fade(@backgroundColor, 70%);
    }
  }

  // Post title
  h2 {
    padding: 0 5%;

    a {
      color: @backgroundColor;
      .font-face;
      font-size: @baseFontSize * 1.5;
      border-bottom: transparent 1px solid; // We have to define a transparent border in order to make transition work

      &:hover {
        border-bottom-color: @backgroundColor;
      }
    }
  }

  // "LATEST WORK"
  h3 {
    .helvetica;
    padding-top: 64px;
    color: @backgroundColor;
    opacity: .6;
  }
}

// Global navigations font styles
nav {
  .helvetica;
}

// Main navigation
.navigation { // nav.navigation
  margin: 0 0 @space * 1.5;
  .cf;

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

    a {
      padding: 3px 1em;
      font-weight: bold;
    }
  }
}

// Currently activated page or category a post it belongs to
.current { // li.current
  a {
    color: @linkColor;
  }
}

// Pagination for posts in category "note"
.pagination { // nav.pagination

  a {
    position: absolute;
    top: 162px;
    display: block;
    padding: 7px 10px;
    font-size: @baseFontSize / 2 - 2px;
    letter-spacing: .2em;
    background: fade(@textColor, 5%);
    z-index: 9999;
    .transition(~"padding .1s ease");

    &:hover {

      .tooltip {
        opacity: 1;
      }
    }
  }

  .tooltip { // a.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");
  }

  .next { // a.next
    left: 0;

    .tooltip {
      left: 0;
    }

    &:hover {
      padding-left: 15px;

      .tooltip {
        padding-left: 15px;
      }
    }
  }

  .prev { // a.prev
    right: 0;

    .tooltip {
      right: 0;
    }

    &:hover {
      padding-right: 15px;

      .tooltip {
        padding-right: 15px;
      }
    }
  }
}

// Titles wrapper
hgroup {
  padding-bottom: @space * 1.35;

  h1 {
    .font-face;
    margin: 0 0 .1em;
  }

  h2 {
    .helvetica;
  }

  // TODO: performance opti.
  & + .txt :first-child { // For example, hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

// Pserson status
.status { // h2.status

  a {

    &:before {
      @s: 9px;
      display: inline-block;
      content: "";
      width: @s;
      height: @s;
      border-radius: 50%;
      background: fade(@textColor, 20%);
      margin-right: @s;
    }
  }
}

.available {

  a {
    color: @textColor;

    &:hover {
      color: fade(green, 80%);
    }

    &:before {
      background: fade(green, 60%);
    }
  }
}
.unavailable {

  a {
    color: fade(@textColor, 50%);

    &:hover {
      color: fade(red, 60%);
    }

    &:before {
      background: fade(red, 20%);
    }
  }
}

// Width fix for article element except .work-list
.width-unfixed { // article.width-fix
  max-width: 100%;
}

// Article wrapper
article {
  max-width: @wrapperWidth;
  margin: 0 auto @space * 1.35;
  .cf; // For some specified posts in work category

  img, video, iframe {
    display: block;
    margin: 0 auto 40px;
    max-width: 100%;
  }
}

// All staff inside article .txt
.txt {
  overflow: hidden;
  text-align: left;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;

  a {
    border-bottom: 1px dotted fade(@textColor, 30%); // Set larger value for invert color
  }

  p {
    margin: 0 0 1.1em;
    line-height: @baseLineHeight;
  }

  h3 {
    .helvetica;
    margin: @space 0 1.6em;
  }

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

    li {
      line-height: @baseLineHeight;
    }
  }

  blockquote {
    position: relative;
    padding-left: @space * .75;
    font-style: italic;
    .cf;

    &:before {
      position: absolute;
      top: -16px;
      left: -8px;
      content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
      font-size: 120px;
      color: fade(@textColor, 70%);
      font-family: @sansSerif;
      font-style: normal;
      z-index: -1;
      pointer-events: none;
    }

    cite {
      float: right;
      margin: 0 0 2em;
      font-size: 85%;
      color: fade(@textColor, 80%);

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

  sup {
    font-size: 75%;
  }

  hr {
    .helvetica;
    margin: @space 0 1.6em;
    &:before {
      content: attr(data-placeholder);
    }
  }

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

  code, pre {
    font-family: Menlo, monospace;
    color: #68a;
  }

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

    label {
      .helvetica;
      display: block;
      margin-bottom: @space * .3;
    }

    input {
      .helvetica;
      display: block;
      border: 1px solid fade(@textColor, 20%);
      padding: 7px;
      margin: 0 auto @space * .3;
      width: 100%;
      outline: none;
      box-sizing: border-box;
      border-radius: 0; // Remove border-radius for ios devices
      -webkit-appearance: none; // Remove ios pre-defined style
      &:focus {
        border-color: @textColor;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {
    &:focus:required:invalid {
      &:focus {
        background: fade(@linkColor, 5%);
        border-color: @linkColor;
        box-shadow: none; // Override Firefox default styles
      }
    }
  }

  // Form validation message bubble, borrowed from default WebKit styles
  // More info: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  ::-webkit-validation-bubble-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: fade(@linkColor, 95%);
    color: @backgroundColor;
    // Override default WebKit styles
    min-width: 100%;
    max-height: auto;
    border: none;
    padding: 20px 0;
    border-radius: 0;
    -webkit-box-shadow: none;
  }

  ::-webkit-validation-bubble-arrow {
    display: none;
  }

  ::-webkit-validation-bubble-icon {
    display: none;
  }
}

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

// Tweet button margin fix
#tweet {
  margin-top: @space;
}

// Centered text
.center {
  text-align: center;
}

// Button styles
.btn {
  .helvetica;
  display: inline-block;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;

  &:hover, &:focus {
    color: @backgroundColor;
    background: @linkColor;
  }
}

// Broser frame for images in category "work"
.browser {
  margin: 0 0 40px;
  padding-top: 16px;
  border-radius: 4px;
  background: #e8e8e8;
  border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset rgba(255, 255, 255, .6) 0 1px 0 0;

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

// Special paragraph with an icon
.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 width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>"); }
.store    { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><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 width='40' height='40' xmlns='http://www.w3.org/2000/svg'><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>"); }

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

.work-list { // ul.work-list
  margin: -@thumbPadding;
  text-align: left;
  .cf;

  li {
    position: relative;
    list-style: none;
    float: left;
    margin: @thumbPadding;

    &:hover {
      a {
        opacity: 1;
      }

      img {
        .transition(-webkit-filter .1s ease);
        -webkit-filter: none;
                filter: none;
      }
    }
  }

  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
  }

  img {
    width: @thumbSize;
    height: @thumbSize;
    margin: 0; // Override: article img
    background: fade(@linkColor, 10%);
    .transition(-webkit-filter .5s ease);
    -webkit-filter: grayscale(.9);
            filter: grayscale(.9);
  }

  p {
    margin: @thumbPadding * 1.4 0 0;
  }

  time {
    color: fade(@textColor, 30%);
  }

  // Better margin between to work lists
  & ~ div.txt {
    margin: @space * .5 0 0;
  }
}

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

// Post list in "note"
.note-list { // div.note-list

  section {
    margin: 0 0 @space * .2;
    overflow: hidden;

    h2 {
      .font-face;
      font-size: @baseFontSize * 2;
      margin: 0 0 .1em;
      font-weight: normal;

      time {
        color: fade(@textColor, 30%);
      }

      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }
    }
  }

  section:last-child {
    margin-bottom: 0;
  }
}

// Wrap sponsor and .work-list in post template
aside {
  margin: 0 0 @space * 1.35;
}

// Sponsor ad
.sponsor { // aside.sponsor
  max-width: @wrapperWidth;
  clear: both;

  // Letter i = image
  .bsa_it_i {
    float: left;
    padding-right: 20px;
  }

  // Letter t = text
  .bsa_it_t {
    display: block;
    font-size: .5em;
    line-height: @baseLineHeight;
  }

  // Letter d = description
  .bsa_it_d {
    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;
      }
    }
  }
}

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

// FlexSlider Necessary Styles
.flexslider {

  // Slides
  ul {
    list-style: none;
  }

  li {
    display: none;
    cursor: pointer;
    -webkit-backface-visibility: hidden; // Hide the slides before the JS is loaded. Avoids image jumping

    &:first-child {
      display: block; // Display the first image when scripts are not ready
    }

    .flex-caption {
      .helvetica;
      margin: -30px 0 30px;
    }
  }
}

// FlexSlider - No JavaScript fallback
.no-js .flexslider ul li:first-child { display: block; }

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

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

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

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

  .work-list {
    img {
      -webkit-filter: none;
              filter: none;
    }
  }
}

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

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

  .work-list {
    li {
      float: none; // Make sure smaller images are stretched to 100% in iOS and Safari, Firefox (only Chrome works without this hack at the moment)
      margin-bottom: @thumbPadding * 2;

      img {
        width: 100%;
        height: auto; // Should be 100%, but Safari for iOS has stupid bug for it.
      }

      a {
        width: 100%;
        height: 100%;
      }
    }
  }
}

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

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

// Global variables
@space: 70px;
@wrapperWidth: 750px;
@baseFontSize: 24px;
@baseLineHeight: 1.7;
@linkColor: #e34; // #2ed for invert color
@backgroundColor: #fff;
@textColor: #000;
@sansSerif: "Helvetica Neue", "Hiragino Sans GB", sans-serif;
@serif: Palatino, "Hiragino Mincho ProN", serif;

// Transition mixin
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}

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

// 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, @sansSerif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
  -webkit-font-smoothing: antialiased;
}

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

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

  &:after {
    clear: both;
  }
}

// Basic reset
p,
ul, li,
h1, h2, h3, h4, h5, h6,
blockquote,
hr {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1;
}

body {
  color: @textColor;
  background: @backgroundColor;
  font-size: @baseFontSize;
  font-family: @serif;
  line-height: @baseLineHeight;
  margin: 0 auto 0;
  padding: 0 0  @space * 1.5;
  text-align: center;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;

  // A semitranslucent bar at the top of the page
  &: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;
  }
}

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

a, button {
  color: @textColor;
  text-decoration: none;
  .transition(~"color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease");

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

img, hr {
  border: 0;
}

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

del {
  text-decoration: line-through;
}

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

// Main site logo
.logo {
  display: block;
  width: 0;
  height: 0;
  margin: -29px auto @space / 5;
  border-style: solid;
  border-width: 0 26px 45px 26px;
  border-color: transparent;
  border-bottom-color: @textColor;
  text-indent: -9999em;

  &:hover {
    border-bottom-color: @linkColor;
  }
}

// A different logo only available in homepage
.index { // header.index
  margin: 0 0 @space / 5;
  .vertical(#9475d1, #b67fd6);

  .logo {
    margin: @space / 2 auto 0;
    border-bottom-color: @backgroundColor;

    &:hover {
      border-bottom-color: fade(@backgroundColor, 70%);
    }
  }

  // Post title
  h2 {
    padding: 0 5%;

    a {
      color: @backgroundColor;
      .font-face;
      font-size: @baseFontSize * 1.5;
      border-bottom: transparent 1px solid; // We have to define a transparent border in order to make transition work

      &:hover {
        border-bottom-color: @backgroundColor;
      }
    }
  }

  // "LATEST WORK"
  h3 {
    .helvetica;
    padding-top: 64px;
    color: @backgroundColor;
    opacity: .6;
  }
}

// Global navigations font styles
nav {
  .helvetica;
}

// Main navigation
.navigation { // nav.navigation
  margin: 0 0 @space * 1.5;
  .cf;

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

    a {
      padding: 3px 1em;
      font-weight: bold;
    }
  }
}

// Currently activated page or category a post it belongs to
.current { // li.current
  a {
    color: @linkColor;
  }
}

// Pagination for posts in category "note"
.pagination { // nav.pagination

  a {
    position: absolute;
    top: 162px;
    display: block;
    padding: 7px 10px;
    font-size: @baseFontSize / 2 - 2px;
    letter-spacing: .2em;
    background: fade(@textColor, 5%);
    z-index: 9999;
    .transition(~"padding .1s ease");

    &:hover {

      .tooltip {
        opacity: 1;
      }
    }
  }

  .tooltip { // a.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");
  }

  .next { // a.next
    left: 0;

    .tooltip {
      left: 0;
    }

    &:hover {
      padding-left: 15px;

      .tooltip {
        padding-left: 15px;
      }
    }
  }

  .prev { // a.prev
    right: 0;

    .tooltip {
      right: 0;
    }

    &:hover {
      padding-right: 15px;

      .tooltip {
        padding-right: 15px;
      }
    }
  }
}

// Titles wrapper
hgroup {
  padding-bottom: @space * 1.35;

  h1 {
    .font-face;
    margin: 0 0 .1em;
  }

  h2 {
    .helvetica;
  }

  // TODO: performance opti.
  & + .txt :first-child { // For example, hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

// Pserson status
.status { // h2.status

  a {

    &:before {
      @s: 9px;
      display: inline-block;
      content: "";
      width: @s;
      height: @s;
      border-radius: 50%;
      background: fade(@textColor, 20%);
      margin-right: @s;
    }
  }
}

.available {

  a {
    color: @textColor;

    &:hover {
      color: fade(green, 80%);
    }

    &:before {
      background: fade(green, 60%);
    }
  }
}
.unavailable {

  a {
    color: fade(@textColor, 50%);

    &:hover {
      color: fade(red, 60%);
    }

    &:before {
      background: fade(red, 20%);
    }
  }
}

// Width fix for article element except .work-list
.width-unfixed { // article.width-fix
  max-width: 100%;
}

// Article wrapper
article {
  max-width: @wrapperWidth;
  margin: 0 auto @space * 1.35;
  .cf; // For some specified posts in work category

  img, video, iframe {
    display: block;
    margin: 0 auto 40px;
    max-width: 100%;
  }
}

// All staff inside article .txt
.txt {
  overflow: hidden;
  text-align: left;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;

  a {
    border-bottom: 1px dotted fade(@textColor, 30%); // Set larger value for invert color
  }

  p {
    margin: 0 0 1.1em;
    line-height: @baseLineHeight;
  }

  h3 {
    .helvetica;
    margin: @space 0 1.6em;
  }

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

    li {
      line-height: @baseLineHeight;
    }
  }

  blockquote {
    position: relative;
    padding-left: @space * .75;
    font-style: italic;
    .cf;

    &:before {
      position: absolute;
      top: -16px;
      left: -8px;
      content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
      font-size: 120px;
      color: fade(@textColor, 70%);
      font-family: @sansSerif;
      font-style: normal;
      z-index: -1;
      pointer-events: none;
    }

    cite {
      float: right;
      margin: 0 0 2em;
      font-size: 85%;
      color: fade(@textColor, 80%);

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

  sup {
    font-size: 75%;
  }

  hr {
    .helvetica;
    margin: @space 0 1.6em;
    &:before {
      content: attr(data-placeholder);
    }
  }

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

  code, pre {
    font-family: Menlo, monospace;
    color: #68a;
  }

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

    label {
      .helvetica;
      display: block;
      margin-bottom: @space * .3;
    }

    input {
      .helvetica;
      display: block;
      border: 1px solid fade(@textColor, 20%);
      padding: 7px;
      margin: 0 auto @space * .3;
      width: 100%;
      outline: none;
      box-sizing: border-box;
      border-radius: 0; // Remove border-radius for ios devices
      -webkit-appearance: none; // Remove ios pre-defined style
      &:focus {
        border-color: @textColor;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {
    &:focus:required:invalid {
      &:focus {
        background: fade(@linkColor, 5%);
        border-color: @linkColor;
        box-shadow: none; // Override Firefox default styles
      }
    }
  }

  // Form validation message bubble, borrowed from default WebKit styles
  // More info: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  ::-webkit-validation-bubble-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: fade(@linkColor, 95%);
    color: @backgroundColor;
    // Override default WebKit styles
    min-width: 100%;
    max-height: auto;
    border: none;
    padding: 20px 0;
    border-radius: 0;
    -webkit-box-shadow: none;
  }

  ::-webkit-validation-bubble-arrow {
    display: none;
  }

  ::-webkit-validation-bubble-icon {
    display: none;
  }
}

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

// Tweet button margin fix
#tweet {
  margin-top: @space;
}

// Centered text
.center {
  text-align: center;
}

// Button styles
.btn {
  .helvetica;
  display: inline-block;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;

  &:hover, &:focus {
    color: @backgroundColor;
    background: @linkColor;
  }
}

// Broser frame for images in category "work"
.browser {
  margin: 0 0 40px;
  padding-top: 16px;
  border-radius: 4px;
  background: #e8e8e8;
  border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset rgba(255, 255, 255, .6) 0 1px 0 0;

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

// Special paragraph with an icon
.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 width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>"); }
.store    { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><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 width='40' height='40' xmlns='http://www.w3.org/2000/svg'><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>"); }

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

.work-list { // ul.work-list
  margin: -@thumbPadding;
  text-align: left;
  .cf;

  li {
    position: relative;
    list-style: none;
    float: left;
    margin: @thumbPadding;

    a {
      display: block;
      width: @thumbSize;
      height: @thumbSize + @thumbFontSize * 2 + @thumbPadding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: @thumbFontSize;
      overflow: hidden; // For text
    }

    &:hover a {
      opacity: 1;
    }

    p {
      margin: @thumbPadding * 1.4 0 0;
    }

    time {
      color: fade(@textColor, 30%);
    }

    img {
      width: @thumbSize;
      height: @thumbSize;
      margin: 0; // Override: article img
      background: @linkColor;
    }
  }

  // Better margin between to work lists
  & ~ div.txt {
    margin: @space * .5 0 0;
  }
}

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

// Post list in "note"
.note-list { // div.note-list

  section {
    margin: 0 0 @space * .2;
    overflow: hidden;

    h2 {
      .font-face;
      font-size: @baseFontSize * 2;
      margin: 0 0 .1em;
      font-weight: normal;

      time {
        color: fade(@textColor, 30%);
      }

      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }
    }
  }

  section:last-child {
    margin-bottom: 0;
  }
}

// Wrap sponsor and .work-list in post template
aside {
  margin: 0 0 @space * 1.35;
}

// Sponsor ad
.sponsor { // aside.sponsor
  max-width: @wrapperWidth;
  clear: both;

  // Letter i = image
  .bsa_it_i {
    float: left;
    padding-right: 20px;
  }

  // Letter t = text
  .bsa_it_t {
    display: block;
    font-size: .5em;
    line-height: @baseLineHeight;
  }

  // Letter d = description
  .bsa_it_d {
    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;
      }
    }
  }
}

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

// FlexSlider Necessary Styles
.flexslider {

  // Slides
  ul {
    list-style: none;
  }

  li {
    display: none;
    cursor: pointer;
    -webkit-backface-visibility: hidden; // Hide the slides before the JS is loaded. Avoids image jumping

    &:first-child {
      display: block; // Display the first image when scripts are not ready
    }

    .flex-caption {
      .helvetica;
      margin: -30px 0 30px;
    }
  }
}

// FlexSlider - No JavaScript fallback
.no-js .flexslider ul li:first-child { display: block; }

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

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

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

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

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

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

  .work-list {
    li {
      float: none; // Make sure smaller images are stretched to 100% in iOS and Safari, Firefox (only Chrome works without this hack at the moment)
      margin-bottom: @thumbPadding * 2;

      img {
        width: 100%;
        height: auto; // Should be 100%, but Safari for iOS has stupid bug for it.
      }

      a {
        width: 100%;
        height: 100%;
      }
    }
  }
}

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


Delete core.less

Delete core.less

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


changed width from 358px to auto, to avoid favorite-tags overflow the right column

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


basic less parent file

basic less parent file

// CSS Reset
@import "normalize.less";

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

@import "typography.less";
@import "code.less";
@import "forms.less";
@import "buttons.less";
@import "wells.less";
@import "layouts.less";
@import "grid.less";

// Your app/site styles
@import "app.less";

@import "utilities.less";
@import "print.less";

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


update heading primary font-size

update heading primary font-size

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/aoimedia/uikit.git/'


import for all

import for all

@import "kb-banner";
@import "kb-base";
@import "kb-box-slide";
@import "kb-button";
@import "kb-header";
@import "kb-label";
@import "kb-misc";
@import "kb-modal";
@import "kb-navigation";
@import "kb-pane";
@import "kb-progress-bar";
@import "kb-table";

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


Add missing test file

Add missing test file

error: pathspec 'test/data/excluded-files/vendor.less' did not match any file(s) known to git


fix #22

fix #22

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/Julienedies/est.git/'