Updated breadcrumbs.

Updated breadcrumbs.

@import "breadcrumb-settings.less";
@breadcrumb-padding: 10px;
@breadcrumb-line-height: 30px;
@breadcrumb-border-width: @default-border-width;
@breadcrumb-border-color: @default-border-color;
@breadcrumb-border-radius: @default-border-radius;
@breadcrumb-height: 2 * @breadcrumb-padding + @breadcrumb-line-height;
@breadcrumb-curve-offset: (@breadcrumb-border-radius) * (1 - cos(45deg));// - (@breadcrumb-border-width / 2)
@breadcrumb-adjusted-height: @breadcrumb-height - 2 * @breadcrumb-curve-offset;
@breadcrumb-diagonal: @breadcrumb-adjusted-height * sqrt(2) / 2;
@breadcrumb-corner-translate-x: @breadcrumb-border-width - @breadcrumb-curve-offset;
@breadcrumb-corner-translate-y: (@breadcrumb-curve-offset / 2) - @breadcrumb-border-width;//(@breadcrumb-diagonal / 2) - (@breadcrumb-height / 2);
.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: @breadcrumb-line-height;
    &:after {
        content: '';
        clear: both;
        display: table;
    }
    & > li {
        margin: 0;
        margin-left: -@breadcrumb-border-radius;
        padding: 0;
        float: left;
        &:first-child {
            margin-left: 0;
            border-left: @breadcrumb-border-width solid @breadcrumb-border-color;
            border-top-left-radius: @breadcrumb-border-radius;
            border-bottom-left-radius: @breadcrumb-border-radius;
            & > a {
                padding-left: @breadcrumb-padding;
            }
        }
        & > a {
            display: block;
            position: relative;
            margin: 0;
            padding: @breadcrumb-padding;

            //padding-left: @breadcrumb-diagonal;
            //padding-right: @breadcrumb-diagonal;
            border-top: @breadcrumb-border-width solid @breadcrumb-border-color;
            border-right: @breadcrumb-border-width solid @breadcrumb-border-color;
            border-bottom: @breadcrumb-border-width solid @breadcrumb-border-color;
            border-top-right-radius: @breadcrumb-border-radius;
            border-bottom-right-radius: @breadcrumb-border-radius;
            text-decoration: none;
            float: left;
            height: @breadcrumb-height;
            &:after {
                display: block;
                content: '';
                position: absolute;

                //& when (@breadcrumb-border-radius > 0) {
                //right: 0;
                //}
                //& when (@breadcrumb-border-radius = 0) {
                //right: -@breadcrumb-border-width;
                //}
                right: 0;//@breadcrumb-curve-offset;
                top: 0;//@breadcrumb-curve-offset;
                .transform(translateX(@breadcrumb-corner-translate-x) translateX(50%) translateY(@breadcrumb-corner-translate-y) translateY(25%) rotate(45deg));
                border-top: @breadcrumb-border-width solid @breadcrumb-border-color;
                border-right: @breadcrumb-border-width solid @breadcrumb-border-color;
                border-top-right-radius: @breadcrumb-border-radius;
                height: @breadcrumb-diagonal;
                width: @breadcrumb-diagonal;
            }
        }
    }
}

@import "breadcrumb-settings.less";
@breadcrumb-padding: 10px;
@breadcrumb-line-height: 30px;
@breadcrumb-border-width: 1px; //@default-border-width;
@breadcrumb-border-color: @default-border-color;
@breadcrumb-border-radius: @default-border-radius;
@breadcrumb-height: 2 * @breadcrumb-padding + @breadcrumb-line-height;
@breadcrumb-curve-offset-x: @breadcrumb-border-radius - (@breadcrumb-border-radius * cos(45deg));
@breadcrumb-curve-offset-y: @breadcrumb-curve-offset-x;
@breadcrumb-diagonal: (@breadcrumb-height + 3 * @breadcrumb-border-width - 2 * @breadcrumb-curve-offset-x) * sqrt(2) / 2;
.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: @breadcrumb-line-height;
    &:after {
        content: '';
        clear: both;
        display: table;
    }
    & > li {
        margin: 0;
        margin-left: -@breadcrumb-border-radius;
        padding: 0;
        float: left;
        border-top: @breadcrumb-border-width solid @breadcrumb-border-color;
        border-right: @breadcrumb-border-width solid @breadcrumb-border-color;
        border-bottom: @breadcrumb-border-width solid @breadcrumb-border-color;
        border-top-right-radius: @breadcrumb-border-radius;
        border-bottom-right-radius: @breadcrumb-border-radius;
        &:first-child {
            margin-left: 0;
            border-left: @breadcrumb-border-width solid @breadcrumb-border-color;
            border-top-left-radius: @breadcrumb-border-radius;
            border-bottom-left-radius: @breadcrumb-border-radius;
            & > a {
                padding-left: @breadcrumb-padding;
            }
        }
        & > a {
            display: block;
            position: relative;
            margin: 0;
            padding: @breadcrumb-padding;
            padding-left: @breadcrumb-diagonal;
            padding-right: @breadcrumb-padding + @breadcrumb-curve-offset-x;
            text-decoration: none;
            float: left;
            height: @breadcrumb-height;
            &:after {
                display: block;
                content: '';
                position: absolute;
                & when (@breadcrumb-border-radius > 0) {
                    right: 0;
                }
                & when (@breadcrumb-border-radius = 0) {
                    right: -@breadcrumb-border-width;
                }
                top: @breadcrumb-curve-offset-y - 2 * @breadcrumb-border-width;
                .transform(translateX(50%) translateY(25%) rotate(45deg));
                border-top: @breadcrumb-border-width solid @breadcrumb-border-color;
                border-right: @breadcrumb-border-width solid @breadcrumb-border-color;
                border-top-right-radius: @breadcrumb-border-radius;
                height: @breadcrumb-diagonal;
                width: @breadcrumb-diagonal;
            }
        }
    }
}


Enclosed html tag in `

Enclosed html tag in `

// Filter
//
// Allows for filtering of elements matching a given jQuery selector.
// The elements that do not pass the filter are hidden until the filter is updated and their visibility is reevaluated.
//
// Each element that is to be filterable must define on itself the appropriate data attribites by which it can be filtered.
// If a data attribiute is not provided, the element is ignored by the filter for that particular condition and is treated as if it passed the filter.
//
// The options to be passed to the Filterable plugin are allways an array of filter definition objects.
// If using the data-api each of these object has to be represented by a single `:input` element with the appropriate `data-*` attributes.
//
// To allow users to view all filterable elements when using the data-api, simple palce within the filter `<form>` a button with `type="reset"` attribute.
//
//

//

JavaScript Required

//

//         Script `filterable.js` must be included.
//

//

//
//
Filter definition object

// All options can be also specified by
//

//

//

//             Name
//             Type
//             Default
//             Description
//

//

//

//

//             filter-attrib
//             string
//
//             Defines the name of the `data-` attribute of the filterable objects to use for filtering.
//

//

//             filter-value
//             string
//
//             The filter value to be used in the condition. When using the data-api this is automatically generated from the `:input` element value and is not have to be set manually
//

//

//             filter-operator
//             enum
//
//
//                 Defines how to compare the values. If comparing strings or arrays of strings we can use either `subset` or `intersect` operators.
//                 For comparing numeric values the `=`, `<`, `>`, `<=` and `>=` are available.
//

//

//

//                             Filter object `filter-value`
//                             Filterable element `data-*` attribute value
//                             Operator
//                             Description
//

//

//

//

//                             [string]
//                             string
//                             intersect
//                             Checks if the filterable string attribute is a member of the filter object value array.
//

//

//                             [string]
//                             [string]
//                             intersect
//                             Checks if the filterable array attribute has at least one common element with the filter object value array.
//

//

//                             [string]
//                             [string]
//                             subset
//                             Checks if the filterable array attribute elements are all members of the filter object value array.
//

//

//                             string
//                             [string]
//                             intersect
//                             Checks if the filterable array attribute contains the filter object value string.
//

//

//                             number
//                             number
//                             =
//                             Checks if the filterable numeric attribute is equal to the filter object numeric value.
//

//

//                             number
//                             number
//                             >
//                             Checks if the filterable numeric attribute is greater then the filter object numeric value.
//

//

//                             number
//                             number
//                             <
//                             Checks if the filterable numeric attribute is lower then the filter object numeric value.
//

//

//                             number
//                             number
//                             >=
//                             Checks if the filterable numeric attribute is greater then or equal to the filter object numeric value.
//

//

//                             number
//                             number
//                             <=
//                             Checks if the filterable numeric attribute is lower then or equal to  the filter object numeric value.
//

//

//

//
//

//

//

//
//
Methods

//
$().filterable(filterObjects)

// Filters the set of elements on which it is called according to the given array of filter objects.
//
$().filterable('reset')

// Shows all filterable elements.
//
//
Events

// All the events are given as their first parameter the jQuery object referencing the given set of filterable DOM elements.
//

//

//

//             Event Type
//             Descriptioin
//

//

//

//

//             resetStart.sui.filterable
//             Fired as soon as the `reset` method is called.
//

//

//             resetEnd.sui.filterable
//             Fired as soon as the `reset` method is finished executing.
//

//

//             filter.sui.filterable
//             Fired when the `filter` method is called.
//

//

//             filter.sui.filterable
//             Fired when the `filter` method is finished executing.
//

//

//

//
// Markup:
//

//     <form class="form-filter offset-bottom" data-target="#people tr">
//

//

//

//                     Place of Birth
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="birth-place"
//                         data-filter-operator="intersect"
//                     >
//                         <option value="">All</option>
//                         <option value="Denver">Denver</option>
//                         <option value="Liptákov">Liptákov</option>
//                         <option value="Moscow">Moscow</option>
//                         <option value="Munich">Munich</option>
//                         <option value="Prague">Prague</option>
//                         <option value="Viena">Viena</option>
//                     </select>
//

//

//

//

//                     Cash <
//                     <input
//                         type="text"
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="cash"
//                         data-filter-operator="<"
//                     >
//

//

//

//

//                     Cash >
//                     <input
//                         type="text"
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="cash"
//                         data-filter-operator=">"
//                     >
//

//

//

//

//

//

//                     Country visited
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="countries-visited"
//                         data-filter-operator="intersect"
//                         multiple
//                     >
//                         <option value="">Any</option>
//                         <option value="China">China</option>
//                         <option value="Denmark">Denmark</option>
//                         <option value="Germany">Germany</option>
//                         <option value="Holland">Holland</option>
//                         <option value="Russia">Russia</option>
//                         <option value="USA">USA</option>
//                     </select>
//

//

//

//

//                     Residence
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="residence"
//                         data-filter-operator="intersect"
//                         multiple
//                     >
//                         <option value="Denver">Denver</option>
//                         <option value="Philadelphia">Philadelphia</option>
//                         <option value="Sydney">Sydney</option>
//                         <option value="Toronto">Toronto</option>
//                         <option value="Viena">Viena</option>
//                     </select>
//

//

//

//

//                     Favorite meal
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="favorite-meal"
//                         data-filter-operator="subset"
//                         multiple
//                     >
//                         <option value="Fries">Fries</option>
//                         <option value="Goulash">Goulash</option>
//                         <option value="Hamburger">Hamburger</option>
//                         <option value="Hotdog">Hotdog</option>
//                         <option value="Meatloaf">Meatloaf</option>
//                         <option value="Pizza">Pizza</option>
//                         <option value="Spagethi">Spagethi</option>
//                     </select>
//

//

//

//

//                     <button
//                         type="reset"
//                         class="btn btn-default"
//                         data-toggle="reset-filter"
//                     >
//                         Reset Filter
//                     </button>
//

//

//

//     </form>
//

//

//

//                 #
//                 User
//                 Place of Birth
//                 Cash
//                 Residence
//                 Countries Visited
//                 Favorite Meal
//

//

//

//

//                 1
//                 Brown, James
//                 Prague
//                 10
//                 Philadelphia
//                 China, Russia
//                 Hamburger, Pizza, Spagethi
//

//

//                 2
//                 Paisley, Brad
//                 Denver
//                 15
//                 Philadelphia
//                 China, USA
//                 Hamburger, Hotdog, Fries
//

//

//                 3
//                 Parker, Maceo
//                 Munich
//                 8
//                 Toronto
//                 USA, Russia, Denmark
//                 Fries, Meatloaf
//

//

//                 4
//                 Cimrman, Jára
//                 Liptákov
//                 25
//                 Viena
//                 China, Russia, Germany
//                 Goulash
//

//

//                 5
//                 Smith, John
//                 Munich
//                 17
//                 Sydney
//                 Germany, Holland, Denmark
//                 Meatloaf, Hotdog
//

//

//                 6
//                 Scholizin, Vladimir
//                 Moscow
//                 5
//                 Philadelphia
//                 USA
//                 Pizza, Goulash
//

//

//                 7
//                 Wesley, Fred
//                 Denver
//                 0
//                 Toronto
//                 Germany, Russia, Denmark
//                 Pizza, Hotdog
//

//

//

//

//
// Styleguide 5.15

// Filter
//
// Allows for filtering of elements matching a given jQuery selector.
// The elements that do not pass the filter are hidden until the filter is updated and their visibility is reevaluated.
//
// Each element that is to be filterable must define on itself the appropriate data attribites by which it can be filtered.
// If a data attribiute is not provided, the element is ignored by the filter for that particular condition and is treated as if it passed the filter.
//
// The options to be passed to the Filterable plugin are allways an array of filter definition objects.
// If using the data-api each of these object has to be represented by a single `:input` element with the appropriate `data-*` attributes.
//
// To allow users to view all filterable elements when using the data-api, simple palce within the filter <form> a button with `type="reset"` attribute.
//
//

//

JavaScript Required

//

//         Script `filterable.js` must be included.
//

//

//
//
Filter definition object

// All options can be also specified by
//

//

//

//             Name
//             Type
//             Default
//             Description
//

//

//

//

//             filter-attrib
//             string
//
//             Defines the name of the `data-` attribute of the filterable objects to use for filtering.
//

//

//             filter-value
//             string
//
//             The filter value to be used in the condition. When using the data-api this is automatically generated from the `:input` element value and is not have to be set manually
//

//

//             filter-operator
//             enum
//
//
//                 Defines how to compare the values. If comparing strings or arrays of strings we can use either `subset` or `intersect` operators.
//                 For comparing numeric values the `=`, `<`, `>`, `<=` and `>=` are available.
//

//

//

//                             Filter object `filter-value`
//                             Filterable element `data-*` attribute value
//                             Operator
//                             Description
//

//

//

//

//                             [string]
//                             string
//                             intersect
//                             Checks if the filterable string attribute is a member of the filter object value array.
//

//

//                             [string]
//                             [string]
//                             intersect
//                             Checks if the filterable array attribute has at least one common element with the filter object value array.
//

//

//                             [string]
//                             [string]
//                             subset
//                             Checks if the filterable array attribute elements are all members of the filter object value array.
//

//

//                             string
//                             [string]
//                             intersect
//                             Checks if the filterable array attribute contains the filter object value string.
//

//

//                             number
//                             number
//                             =
//                             Checks if the filterable numeric attribute is equal to the filter object numeric value.
//

//

//                             number
//                             number
//                             >
//                             Checks if the filterable numeric attribute is greater then the filter object numeric value.
//

//

//                             number
//                             number
//                             <
//                             Checks if the filterable numeric attribute is lower then the filter object numeric value.
//

//

//                             number
//                             number
//                             >=
//                             Checks if the filterable numeric attribute is greater then or equal to the filter object numeric value.
//

//

//                             number
//                             number
//                             <=
//                             Checks if the filterable numeric attribute is lower then or equal to  the filter object numeric value.
//

//

//

//
//

//

//

//
//
Methods

//
$().filterable(filterObjects)

// Filters the set of elements on which it is called according to the given array of filter objects.
//
$().filterable('reset')

// Shows all filterable elements.
//
//
Events

// All the events are given as their first parameter the jQuery object referencing the given set of filterable DOM elements.
//

//

//

//             Event Type
//             Descriptioin
//

//

//

//

//             resetStart.sui.filterable
//             Fired as soon as the `reset` method is called.
//

//

//             resetEnd.sui.filterable
//             Fired as soon as the `reset` method is finished executing.
//

//

//             filter.sui.filterable
//             Fired when the `filter` method is called.
//

//

//             filter.sui.filterable
//             Fired when the `filter` method is finished executing.
//

//

//

//
// Markup:
//

//     <form class="form-filter offset-bottom" data-target="#people tr">
//

//

//

//                     Place of Birth
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="birth-place"
//                         data-filter-operator="intersect"
//                     >
//                         <option value="">All</option>
//                         <option value="Denver">Denver</option>
//                         <option value="Liptákov">Liptákov</option>
//                         <option value="Moscow">Moscow</option>
//                         <option value="Munich">Munich</option>
//                         <option value="Prague">Prague</option>
//                         <option value="Viena">Viena</option>
//                     </select>
//

//

//

//

//                     Cash <
//                     <input
//                         type="text"
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="cash"
//                         data-filter-operator="<"
//                     >
//

//

//

//

//                     Cash >
//                     <input
//                         type="text"
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="cash"
//                         data-filter-operator=">"
//                     >
//

//

//

//

//

//

//                     Country visited
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="countries-visited"
//                         data-filter-operator="intersect"
//                         multiple
//                     >
//                         <option value="">Any</option>
//                         <option value="China">China</option>
//                         <option value="Denmark">Denmark</option>
//                         <option value="Germany">Germany</option>
//                         <option value="Holland">Holland</option>
//                         <option value="Russia">Russia</option>
//                         <option value="USA">USA</option>
//                     </select>
//

//

//

//

//                     Residence
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="residence"
//                         data-filter-operator="intersect"
//                         multiple
//                     >
//                         <option value="Denver">Denver</option>
//                         <option value="Philadelphia">Philadelphia</option>
//                         <option value="Sydney">Sydney</option>
//                         <option value="Toronto">Toronto</option>
//                         <option value="Viena">Viena</option>
//                     </select>
//

//

//

//

//                     Favorite meal
//                     <select
//                         class="form-control"
//                         data-toggle="filter"
//                         data-filter-attrib="favorite-meal"
//                         data-filter-operator="subset"
//                         multiple
//                     >
//                         <option value="Fries">Fries</option>
//                         <option value="Goulash">Goulash</option>
//                         <option value="Hamburger">Hamburger</option>
//                         <option value="Hotdog">Hotdog</option>
//                         <option value="Meatloaf">Meatloaf</option>
//                         <option value="Pizza">Pizza</option>
//                         <option value="Spagethi">Spagethi</option>
//                     </select>
//

//

//

//

//                     <button
//                         type="reset"
//                         class="btn btn-default"
//                         data-toggle="reset-filter"
//                     >
//                         Reset Filter
//                     </button>
//

//

//

//     </form>
//

//

//

//                 #
//                 User
//                 Place of Birth
//                 Cash
//                 Residence
//                 Countries Visited
//                 Favorite Meal
//

//

//

//

//                 1
//                 Brown, James
//                 Prague
//                 10
//                 Philadelphia
//                 China, Russia
//                 Hamburger, Pizza, Spagethi
//

//

//                 2
//                 Paisley, Brad
//                 Denver
//                 15
//                 Philadelphia
//                 China, USA
//                 Hamburger, Hotdog, Fries
//

//

//                 3
//                 Parker, Maceo
//                 Munich
//                 8
//                 Toronto
//                 USA, Russia, Denmark
//                 Fries, Meatloaf
//

//

//                 4
//                 Cimrman, Jára
//                 Liptákov
//                 25
//                 Viena
//                 China, Russia, Germany
//                 Goulash
//

//

//                 5
//                 Smith, John
//                 Munich
//                 17
//                 Sydney
//                 Germany, Holland, Denmark
//                 Meatloaf, Hotdog
//

//

//                 6
//                 Scholizin, Vladimir
//                 Moscow
//                 5
//                 Philadelphia
//                 USA
//                 Pizza, Goulash
//

//

//                 7
//                 Wesley, Fred
//                 Denver
//                 0
//                 Toronto
//                 Germany, Russia, Denmark
//                 Pizza, Hotdog
//

//

//

//

//
// Styleguide 5.15


Issue #30: Deprecate `Bliss` theme

Issue #30: Deprecate `Bliss` theme

- Removing also the ability to have animations

.animation {
  display: none;
}

/* Headers displayed using background-clip + fallback */
h2 {
  font-family: @heading-font-family-sans-serif;
  font-size: 5em;
  font-weight: 900;
  margin-bottom: .5em;

  .about &, .talks & {
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent, transparent),
                url("@{img-path}@{theme-path}blue.jpg") repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
  }

  .work & {
    color: @body-bg-color;
  }
}

/* Use a ligher color since the background-image is darker */
.portfolio .portfolio-fields,
.portfolio .portfolio-content:hover .portfolio-fields,
.work .aside {
  color: @navigation-text-color;
}

/* Using an opacity gradient over an image */
.work {
  background-image: url("@{img-path}@{theme-path}blue.jpg");
  &:before {
    #gradient > .horizontal(@navigation-bg-color, #115b7f);
    height: 100%;
    bottom: 0;
    position: absolute;
    content: '';
    width: 100%;
    opacity: .85;
  }
}


feat(style): match link space in header and footer

//
// Common
// --------------------------------------------------

// Typography setup
// TODO: need better solution
// Apply `font-feature` for Apple devices, since these features are only
// available for San Francisco. implemented in `app.js`
.js-system {

  &--apple {
    font-feature-settings: "case", "ss01", "ss02";
  }
}

// Main navigation
@nav-padding: 1.4vmax;
@nav-item-space: 1vmax;
.navigation {
  padding-top: @nav-padding;
  padding-bottom: @nav-padding;
  margin-right: -@nav-item-space;
  margin-left: -@nav-item-space;
  font-size: 60%;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

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

    a {
      padding: .5em @nav-item-space;

      &:hover,
      &:focus {
        color: @link-color;
        text-decoration: none;
      }
    }
  }
}

// Currently activated page or category class
.current {

  a {
    color: @link-color;
  }
}

// Latest work link
body:hover .latest {
  color: @link-color !important;
}

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

  // For some specified posts in work category
  .cf;

  // Remove extra space for the last paragraph in the container
  article {

    // article > p
    > *:last-child {
      margin-bottom: 0 !important;

      // article > ul > li, article > .footnotes > ol
      > *:last-child {
        margin-bottom: 0 !important;

        // article > ul > li > p, article > .footnotes > ol > li
        > *:last-child {
          margin-bottom: 0 !important;

          // article > .footnotes > ol > li > p
          > *:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

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

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

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

  a {
    font-weight: bold;

    // TODO: Fixes wrong underline color for inline `code` within `a` links.
    // However no browser supports this feature at the time of writing.
    // More info: http://caniuse.com/#feat=css-has
    // Date: Dec 10, 2016, 5:59 PM
    &:has(>code) {
      text-decoration-color: @code-color;
    }
  }

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

  header {
    display: flex;
    min-height: calc(100vh - ((@nav-padding * 4)) - 5ex);
    // Additional padding for content inside `header` are higher than `header`
    // container
    padding-top: 10vmin;
    padding-bottom: 10vmin;
    margin-bottom: 16vmin;
    flex-direction: column;
    justify-content: center;
    background: fade(@text-color, 2%);
    .padding-offset(@space-lg);
    .margin-offset(-@space-lg);

    @media (max-width: @breakpoint-md) {
      min-height: calc(50vh - @nav-padding * 2 - 3ex);
      padding-top: 16vmin;
      padding-bottom: 16vmin;
      .padding-offset(@space-md);
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      .padding-offset(@space-sm);
      .margin-offset(-@space-sm);
    }

    h1 {
      .heading();
      // visual align left
      margin-left: -2px;
      hyphens: none;
      line-height: 1.1;

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

      svg {
      }

      svg,
      img {
        // Normalize image size
        display: block;
        max-width: 100%;

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

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

    // Reset subheading in page title (used by AMSF atm)
    h2 {
      margin: 1.2vmin 0 0;
    }

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

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

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

  ul,
  ol {
    margin-bottom: 1.8rem;
    list-style: none;
    counter-reset: list;

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

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

      &:before {
        position: absolute;
        display: inline-block;
        width: 4em;
        margin-top: 1px;
        margin-left: -4em;
        font-size: 80%;
        line-height: (@line-height * 1.2 / .8);
        text-align: right;
        opacity: .6;
        pointer-events: none;
      }

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

  ul li:before {
    content: "•";
    padding-right: .6em;
  }

  ol li:before {
    counter-increment: list;
    content: counter(list) ".";
    padding-right: .3em;
  }

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

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

    dt {

      &:before {
        position: absolute;
        width: 1em;
        margin-left: -1em;
        content: "-";
        opacity: .6;
        pointer-events: none;
      }
    }

    dd {
      margin-bottom: 1.8rem;
    }
  }

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

    @media (max-width: @breakpoint-md) {
      width: calc(100% + (@space-md * 2));
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      width: calc(100% + (@space-sm * 2));
      .margin-offset(-@space-sm);
    }

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

    // Full width image
    &.size-large {
      width: calc(100% + (@space-lg * 2));
      .margin-offset(-@space-lg);

      @media (max-width: @breakpoint-md) {
        width: calc(100% + (@space-md * 2));
        .margin-offset(-@space-md);
      }

      @media (max-width: @breakpoint-sm) {
        width: calc(100% + (@space-sm * 2));
        .margin-offset(-@space-sm);
      }
    }

    &.size-small {
      width: calc(100% + (@space-xs * 2));
      .margin-offset(-@space-xs);

      @media (max-width: @breakpoint-md) {
        width: calc(100% + (@space-md * 2));
        .margin-offset(-@space-md);
      }

      @media (max-width: @breakpoint-sm) {
        width: calc(100% + (@space-sm * 2));
        .margin-offset(-@space-sm);
      }
    }

    &.size-left {
      float: left;
      max-width: 36vw;
      margin-top: (@space-xs / 2);
      margin-right: @space-xs;
      margin-bottom: (@space-xs / 2);

      @media (max-width: @breakpoint-md) {
        float: none;
        max-width: none;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
      }
    }

    &.size-right {
      float: right;
      max-width: 36vw;
      margin-top: (@space-xs / 2);
      margin-left: @space-xs;
      margin-bottom: (@space-xs / 2);

      @media (max-width: @breakpoint-md) {
        float: none;
        max-width: none;
        margin-top: auto;
        margin-left: auto;
        margin-bottom: auto;
      }
    }
  }

  blockquote {
    position: relative;
    margin-bottom: 2.8rem;
    margin-left: -@space-xs;
    font-size: 90%;

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

    > p {
      padding-left: @space-xs;
      border-left: @border-default solid;
      // TODO: Need better solution
      // We will reset the common margin-bototm to get gapless borders for
      // blockquotes. This could help fix
      // https://github.com/amsf/amsf-curtana/issues/4
      padding-bottom: 1.6rem;
      // Now reset default margin button from global define
      margin-bottom: 0;
      opacity: .6;

      // Remove extra padding for the last element, re-apply margin
      &:last-of-type {
        padding-bottom: 0;
        margin-bottom: 1.6rem;
      }

      @media (max-width: @breakpoint-sm) {
        .padding-offset(calc(@space-sm - @border-default), @space-sm);
        .margin-offset(-@space-sm);
      }
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-style: normal;

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

  hr {
    .spliter();
  }

  sup {
    font-size: 75%;
  }

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

  pre {
    background: fade(#08f, 4%);
  }

  code {
    font-size: 92%;
    overflow-wrap: break-word;
  }

  // TODO: Need refine
  // Date: Jan 18, 2017, 8:24 PM
  //
  // Jekyll (liquid) {% highlight %} method and GFM method generates different
  // markup for code blocks, this result in different CSS styling for different
  // highlight methods you use.
  //
  // ## GFM method
  //
  // ```
  // div.language-js.highlighter-rouge
  //   pre.highlight
  //     code
  // ```
  //
  // ## GFM method with `line_numbers` enabled under `syntax_highlighter_opts`
  //
  // ```
  // div.language-js.highlighter-rouge
  //   div.highlight
  //     table
  //       tbody
  //         tr
  //           td.gutter.gl
  //             pre
  //               code
  //           td.code
  //             pre
  //               code
  // ```
  //
  // ## Jekyll {% highlight %} method:
  //
  // ```
  // figure.highlight
  //   pre
  //     code.language-html
  //       table
  //         tbody
  //           tr
  //             td.gutter.gl
  //               pre
  //                 code
  //             td.code
  //               pre
  //                 code
  // ```
  pre,
  .highlight > pre,
  .highlighter-rouge .highlight {
    padding: @space-xs;
    .margin-offset(-@space-xs);
    margin-bottom: 1.8rem;
    overflow-x: auto;
    font-size: 80%;
    line-height: (@line-height * 1.2);
    // Bouncing scroll fix for iOS
    -webkit-overflow-scrolling: touch;

    @media (max-width: @breakpoint-md) {
      .padding-offset(@space-md);
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      .padding-offset(@space-sm);
      .margin-offset(-@space-sm);
    }

    // Reset overflow for code in code blocks
    code {
      overflow-wrap: normal;
    }
  }

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

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1.8rem;
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      // Remove border-radius for iOS devices
      border-radius: 0;
      outline: none;
      transition: padding .2s ease;

      &:focus {
        padding: 1vmin;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input,
  textarea,
  select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        // Override Firefox default styles
        box-shadow: none;
      }
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    width: 100%;
    .margin-offset(-@space-xs);
    margin-bottom: 1.8rem;

    // TODO: responsive table support
    // display: inline-block;
    // overflow-x: auto;
    // white-space: nowrap;

    // TODO: table shadow support
    // background-image: radial-gradient(ellipse at left, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, 0) 75%),
    //                   radial-gradient(ellipse at right, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, 0) 75%);
    // background-size: 30px 100%, 30px 100%;
    // background-position: 0 center, 100% center;
    // background-attachment: scroll, scroll;
    // background-repeat: no-repeat;

    // TODO: responsive table support
    @media (max-width: @breakpoint-md) {
      width: calc(100% + (@space-md * 2));
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      width: calc(100% + (@space-sm * 2));
      .margin-offset(-@space-sm);

      // TODO: table shadow support
      // Darker shadow for mobile devices
      // background-image: radial-gradient(ellipse at left, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 75%),
      //                   radial-gradient(ellipse at right, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 75%);
    }

    th,
    td {
      padding: .6em @space-xs;

      &:first-child {
        padding-left: @space-xs;
        // TODO: table shadow support
        // background-image: linear-gradient(to right, #fff 50%, rgba(255, 255, 255, 0) 100%);
        // background-repeat: no-repeat;
        // background-position: 0 0;
        // background-size: 50px 100%;
      }

      &:last-child {
        padding-right: @space-xs;
        // TODO: table shadow support
        // background-image: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0) 100%);
        // background-repeat: no-repeat;
        // background-position: 100% 0;
        // background-size: 50px 100%;
      }

      @media (max-width: @breakpoint-md) {

        &:first-child {
          padding-left: @space-md;
        }

        &:last-child {
          padding-right: @space-md;
        }
      }

      @media (max-width: @breakpoint-sm) {

        &:first-child {
          padding-left: @space-sm;
        }

        &:last-child {
          padding-right: @space-sm;
        }
      }
    }

    th {
      border-bottom: @border-default solid fade(@text-color, 6%);
      // Override default user agent stylesheet
      text-align: left;
    }

    td {
      border-top: @border-sm solid fade(@text-color, 4%);
    }
  }
}

// Posts with Asian characters
:lang(zh),
:lang(ja) {
  text-align: justify;

  header {

    &,
    & * {
      text-align: start;
    }
  }
}

// Fix empty space when a paragraph starts with quote marks and some asian
// punctuation marks, class names are powered by `grunt-leading-quotes`
.leading-indent-fix {

  & { text-indent: -.39em; }
  &--double-quotes { text-indent: -.45em; }
  &--single-quotes { text-indent: -.28em; }
  &--chinese-corner-bracket { text-indent: -.6em; }
  &--chinese-white-corner-bracket { text-indent: -.56em; }
  &--fullwidth-parenthesis { text-indent: -.62em; }

  // Special heading indent fix with `@heading-letter-spacing` offset
  h1& {
    &--double-quotes { text-indent: (-.45em - @heading-letter-spacing); }
    &--single-quotes { text-indent: (-.28em - @heading-letter-spacing); }
  }

  // Reset indent for list, otherwise it looks weird
  li & {
    text-indent: 0;
  }
}

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

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

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

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

  &:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: lighten(#f24e59, 30%);
    border-radius: 50%;
    content: "";
    box-shadow:
        16px 0 0 0   fade(lighten(#fac536, 30%), 96%)
      , 32px 0 0 0   fade(lighten(#26e93d, 30%), 96%)
      ,    0 0 0 1px fade(darken(#f24e59, 30%), 30%)
      , 16px 0 0 1px fade(darken(#fac536, 30%), 30%)
      , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%)
    ;
  }

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

// Extra offset for OS X screenshots
.screenshot-mac {
  @osx-shadow-size: 56px;
  .margin-offset(-@osx-shadow-size);

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

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: @space-xs;
  margin-left: -@space-xs;
  border-left: @border-default solid @link-color;

  @media (max-width: @breakpoint-sm) {
    .padding-offset(calc(@space-sm - @border-default), @space-sm);
    .margin-offset(-@space-sm);
  }
}

// Reference notes and links in post
.footnotes {
  .spliter();
  font-size: 80%;
}

:target {

  // Redcarpet-style
  [rev=footnote],
  [rel=footnote],

  // kramdown-style
  .reversefootnote,
  .footnote {
    color: @link-color;
  }
}

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

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

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

  .external {

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

// A dot symbol for external links
.external {

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

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

  &:hover,
  &:focus {

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

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

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 @nav-item-space;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

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

//
// Common
// --------------------------------------------------

// Typography setup
// TODO: need better solution
// Apply `font-feature` for Apple devices, since these features are only
// available for San Francisco. implemented in `app.js`
.js-system {

  &--apple {
    font-feature-settings: "case", "ss01", "ss02";
  }
}

// Main navigation
@nav-padding: 1.4vmax;
.navigation {
  padding-top: @nav-padding;
  padding-bottom: @nav-padding;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 60%;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

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

    a {
      padding: .5em 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        text-decoration: none;
      }
    }
  }
}

// Currently activated page or category class
.current {

  a {
    color: @link-color;
  }
}

// Latest work link
body:hover .latest {
  color: @link-color !important;
}

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

  // For some specified posts in work category
  .cf;

  // Remove extra space for the last paragraph in the container
  article {

    // article > p
    > *:last-child {
      margin-bottom: 0 !important;

      // article > ul > li, article > .footnotes > ol
      > *:last-child {
        margin-bottom: 0 !important;

        // article > ul > li > p, article > .footnotes > ol > li
        > *:last-child {
          margin-bottom: 0 !important;

          // article > .footnotes > ol > li > p
          > *:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

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

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

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

  a {
    font-weight: bold;

    // TODO: Fixes wrong underline color for inline `code` within `a` links.
    // However no browser supports this feature at the time of writing.
    // More info: http://caniuse.com/#feat=css-has
    // Date: Dec 10, 2016, 5:59 PM
    &:has(>code) {
      text-decoration-color: @code-color;
    }
  }

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

  header {
    display: flex;
    min-height: calc(100vh - ((@nav-padding * 4)) - 5ex);
    // Additional padding for content inside `header` are higher than `header`
    // container
    padding-top: 10vmin;
    padding-bottom: 10vmin;
    margin-bottom: 16vmin;
    flex-direction: column;
    justify-content: center;
    background: fade(@text-color, 2%);
    .padding-offset(@space-lg);
    .margin-offset(-@space-lg);

    @media (max-width: @breakpoint-md) {
      min-height: calc(50vh - @nav-padding * 2 - 3ex);
      padding-top: 16vmin;
      padding-bottom: 16vmin;
      .padding-offset(@space-md);
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      .padding-offset(@space-sm);
      .margin-offset(-@space-sm);
    }

    h1 {
      .heading();
      // visual align left
      margin-left: -2px;
      hyphens: none;
      line-height: 1.1;

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

      svg {
      }

      svg,
      img {
        // Normalize image size
        display: block;
        max-width: 100%;

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

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

    // Reset subheading in page title (used by AMSF atm)
    h2 {
      margin: 1.2vmin 0 0;
    }

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

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

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

  ul,
  ol {
    margin-bottom: 1.8rem;
    list-style: none;
    counter-reset: list;

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

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

      &:before {
        position: absolute;
        display: inline-block;
        width: 4em;
        margin-top: 1px;
        margin-left: -4em;
        font-size: 80%;
        line-height: (@line-height * 1.2 / .8);
        text-align: right;
        opacity: .6;
        pointer-events: none;
      }

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

  ul li:before {
    content: "•";
    padding-right: .6em;
  }

  ol li:before {
    counter-increment: list;
    content: counter(list) ".";
    padding-right: .3em;
  }

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

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

    dt {

      &:before {
        position: absolute;
        width: 1em;
        margin-left: -1em;
        content: "-";
        opacity: .6;
        pointer-events: none;
      }
    }

    dd {
      margin-bottom: 1.8rem;
    }
  }

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

    @media (max-width: @breakpoint-md) {
      width: calc(100% + (@space-md * 2));
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      width: calc(100% + (@space-sm * 2));
      .margin-offset(-@space-sm);
    }

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

    // Full width image
    &.size-large {
      width: calc(100% + (@space-lg * 2));
      .margin-offset(-@space-lg);

      @media (max-width: @breakpoint-md) {
        width: calc(100% + (@space-md * 2));
        .margin-offset(-@space-md);
      }

      @media (max-width: @breakpoint-sm) {
        width: calc(100% + (@space-sm * 2));
        .margin-offset(-@space-sm);
      }
    }

    &.size-small {
      width: calc(100% + (@space-xs * 2));
      .margin-offset(-@space-xs);

      @media (max-width: @breakpoint-md) {
        width: calc(100% + (@space-md * 2));
        .margin-offset(-@space-md);
      }

      @media (max-width: @breakpoint-sm) {
        width: calc(100% + (@space-sm * 2));
        .margin-offset(-@space-sm);
      }
    }

    &.size-left {
      float: left;
      max-width: 36vw;
      margin-top: (@space-xs / 2);
      margin-right: @space-xs;
      margin-bottom: (@space-xs / 2);

      @media (max-width: @breakpoint-md) {
        float: none;
        max-width: none;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
      }
    }

    &.size-right {
      float: right;
      max-width: 36vw;
      margin-top: (@space-xs / 2);
      margin-left: @space-xs;
      margin-bottom: (@space-xs / 2);

      @media (max-width: @breakpoint-md) {
        float: none;
        max-width: none;
        margin-top: auto;
        margin-left: auto;
        margin-bottom: auto;
      }
    }
  }

  blockquote {
    position: relative;
    margin-bottom: 2.8rem;
    margin-left: -@space-xs;
    font-size: 90%;

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

    > p {
      padding-left: @space-xs;
      border-left: @border-default solid;
      // TODO: Need better solution
      // We will reset the common margin-bototm to get gapless borders for
      // blockquotes. This could help fix
      // https://github.com/amsf/amsf-curtana/issues/4
      padding-bottom: 1.6rem;
      // Now reset default margin button from global define
      margin-bottom: 0;
      opacity: .6;

      // Remove extra padding for the last element, re-apply margin
      &:last-of-type {
        padding-bottom: 0;
        margin-bottom: 1.6rem;
      }

      @media (max-width: @breakpoint-sm) {
        .padding-offset(calc(@space-sm - @border-default), @space-sm);
        .margin-offset(-@space-sm);
      }
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-style: normal;

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

  hr {
    .spliter();
  }

  sup {
    font-size: 75%;
  }

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

  pre {
    background: fade(#08f, 4%);
  }

  code {
    font-size: 92%;
    overflow-wrap: break-word;
  }

  // TODO: Need refine
  // Date: Jan 18, 2017, 8:24 PM
  //
  // Jekyll (liquid) {% highlight %} method and GFM method generates different
  // markup for code blocks, this result in different CSS styling for different
  // highlight methods you use.
  //
  // ## GFM method
  //
  // ```
  // div.language-js.highlighter-rouge
  //   pre.highlight
  //     code
  // ```
  //
  // ## GFM method with `line_numbers` enabled under `syntax_highlighter_opts`
  //
  // ```
  // div.language-js.highlighter-rouge
  //   div.highlight
  //     table
  //       tbody
  //         tr
  //           td.gutter.gl
  //             pre
  //               code
  //           td.code
  //             pre
  //               code
  // ```
  //
  // ## Jekyll {% highlight %} method:
  //
  // ```
  // figure.highlight
  //   pre
  //     code.language-html
  //       table
  //         tbody
  //           tr
  //             td.gutter.gl
  //               pre
  //                 code
  //             td.code
  //               pre
  //                 code
  // ```
  pre,
  .highlight > pre,
  .highlighter-rouge .highlight {
    padding: @space-xs;
    .margin-offset(-@space-xs);
    margin-bottom: 1.8rem;
    overflow-x: auto;
    font-size: 80%;
    line-height: (@line-height * 1.2);
    // Bouncing scroll fix for iOS
    -webkit-overflow-scrolling: touch;

    @media (max-width: @breakpoint-md) {
      .padding-offset(@space-md);
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      .padding-offset(@space-sm);
      .margin-offset(-@space-sm);
    }

    // Reset overflow for code in code blocks
    code {
      overflow-wrap: normal;
    }
  }

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

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1.8rem;
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      // Remove border-radius for iOS devices
      border-radius: 0;
      outline: none;
      transition: padding .2s ease;

      &:focus {
        padding: 1vmin;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input,
  textarea,
  select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        // Override Firefox default styles
        box-shadow: none;
      }
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    width: 100%;
    .margin-offset(-@space-xs);
    margin-bottom: 1.8rem;

    // TODO: responsive table support
    // display: inline-block;
    // overflow-x: auto;
    // white-space: nowrap;

    // TODO: table shadow support
    // background-image: radial-gradient(ellipse at left, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, 0) 75%),
    //                   radial-gradient(ellipse at right, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, 0) 75%);
    // background-size: 30px 100%, 30px 100%;
    // background-position: 0 center, 100% center;
    // background-attachment: scroll, scroll;
    // background-repeat: no-repeat;

    // TODO: responsive table support
    @media (max-width: @breakpoint-md) {
      width: calc(100% + (@space-md * 2));
      .margin-offset(-@space-md);
    }

    @media (max-width: @breakpoint-sm) {
      width: calc(100% + (@space-sm * 2));
      .margin-offset(-@space-sm);

      // TODO: table shadow support
      // Darker shadow for mobile devices
      // background-image: radial-gradient(ellipse at left, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 75%),
      //                   radial-gradient(ellipse at right, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 75%);
    }

    th,
    td {
      padding: .6em @space-xs;

      &:first-child {
        padding-left: @space-xs;
        // TODO: table shadow support
        // background-image: linear-gradient(to right, #fff 50%, rgba(255, 255, 255, 0) 100%);
        // background-repeat: no-repeat;
        // background-position: 0 0;
        // background-size: 50px 100%;
      }

      &:last-child {
        padding-right: @space-xs;
        // TODO: table shadow support
        // background-image: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0) 100%);
        // background-repeat: no-repeat;
        // background-position: 100% 0;
        // background-size: 50px 100%;
      }

      @media (max-width: @breakpoint-md) {

        &:first-child {
          padding-left: @space-md;
        }

        &:last-child {
          padding-right: @space-md;
        }
      }

      @media (max-width: @breakpoint-sm) {

        &:first-child {
          padding-left: @space-sm;
        }

        &:last-child {
          padding-right: @space-sm;
        }
      }
    }

    th {
      border-bottom: @border-default solid fade(@text-color, 6%);
      // Override default user agent stylesheet
      text-align: left;
    }

    td {
      border-top: @border-sm solid fade(@text-color, 4%);
    }
  }
}

// Posts with Asian characters
:lang(zh),
:lang(ja) {
  text-align: justify;

  header {

    &,
    & * {
      text-align: start;
    }
  }
}

// Fix empty space when a paragraph starts with quote marks and some asian
// punctuation marks, class names are powered by `grunt-leading-quotes`
.leading-indent-fix {

  & { text-indent: -.39em; }
  &--double-quotes { text-indent: -.45em; }
  &--single-quotes { text-indent: -.28em; }
  &--chinese-corner-bracket { text-indent: -.6em; }
  &--chinese-white-corner-bracket { text-indent: -.56em; }
  &--fullwidth-parenthesis { text-indent: -.62em; }

  // Special heading indent fix with `@heading-letter-spacing` offset
  h1& {
    &--double-quotes { text-indent: (-.45em - @heading-letter-spacing); }
    &--single-quotes { text-indent: (-.28em - @heading-letter-spacing); }
  }

  // Reset indent for list, otherwise it looks weird
  li & {
    text-indent: 0;
  }
}

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

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

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

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

  &:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: lighten(#f24e59, 30%);
    border-radius: 50%;
    content: "";
    box-shadow:
        16px 0 0 0   fade(lighten(#fac536, 30%), 96%)
      , 32px 0 0 0   fade(lighten(#26e93d, 30%), 96%)
      ,    0 0 0 1px fade(darken(#f24e59, 30%), 30%)
      , 16px 0 0 1px fade(darken(#fac536, 30%), 30%)
      , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%)
    ;
  }

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

// Extra offset for OS X screenshots
.screenshot-mac {
  @osx-shadow-size: 56px;
  .margin-offset(-@osx-shadow-size);

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

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: @space-xs;
  margin-left: -@space-xs;
  border-left: @border-default solid @link-color;

  @media (max-width: @breakpoint-sm) {
    .padding-offset(calc(@space-sm - @border-default), @space-sm);
    .margin-offset(-@space-sm);
  }
}

// Reference notes and links in post
.footnotes {
  .spliter();
  font-size: 80%;
}

:target {

  // Redcarpet-style
  [rev=footnote],
  [rel=footnote],

  // kramdown-style
  .reversefootnote,
  .footnote {
    color: @link-color;
  }
}

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

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

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

  .external {

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

// A dot symbol for external links
.external {

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

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

  &:hover,
  &:focus {

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

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

  ul {

    li {
      display: inline;

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

      &:last-child {

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


tweak component line-height

tweak component line-height

/*
* This is sortof prepared for adjustable themes.
* Everything is based of a single color taken from the syntax theme.
*/

@import "syntax-variables";

//provide defaults, users can set configs that are handled in config.less
@font-family: 'Helvetica Neue', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
@font-size: 12px;
@font-weight: 200;

// a modular scale maintains relations across all sizes and spaces
// http://type-scale.com
@modular-scale: 1.25;

@modular-scale-xxs:  pow(@modular-scale, -3);
@modular-scale-xs:   pow(@modular-scale, -2);
@modular-scale-s:    pow(@modular-scale, -1);
@modular-scale-ms:   pow(@modular-scale, -.5); // because type becomes too small
@modular-scale-m:    1;
@modular-scale-l:    pow(@modular-scale, 1);
@modular-scale-xl:   pow(@modular-scale, 2);
@modular-scale-xxl:  pow(@modular-scale, 3);
@modular-scale-xxxl: pow(@modular-scale, 4);

// leading color
@ui-theme-color: @syntax-background-color;

// Tend towards blue instead of red when base color is white
.ui-hue() when (hsvhue(@ui-theme-color) = 0) and (hsvsaturation(@ui-theme-color) = 0%) {
  @ui-hue: 180;
}
.ui-hue() when (hsvhue(@ui-theme-color) > 0), (hsvsaturation(@ui-theme-color) > 0%) {
  @ui-hue: hsvhue(@ui-theme-color);
}
.ui-hue();
@ui-saturation:    3%;
@ui-brightness:    86%;
@ui-accent:        spin( hsl( @ui-hue, 50% + @ui-saturation, 50%), 66 );

// background
@base-bg: hsv(@ui-hue, @ui-saturation, @ui-brightness);

@level-0-bg: lighten(@base-bg, 12%);
@level-1-bg: lighten(@base-bg, 6%);
@level-2-bg:  darken(@base-bg, 0%);
@level-3-bg:  darken(@base-bg, 3%);
@level-4-bg:  darken(@base-bg, 6%);
@level-5-bg:  darken(@base-bg, 9%);

@bg-info:    hsl(208, 100%/1.33, 48%);
@bg-success: hsl(160,  70%/1.33, 48%);
@bg-warning: hsl(32,   60%/1.33, 48%);
@bg-error:   hsl(0,    70%/1.33, 48%);

// foreground
@base-fg: hsl(@ui-hue, @ui-saturation, max(30%, @ui-brightness / 3.3) );

@fg-subtle: fadeout(@base-fg, 18%);
@fg-faded: fade(@base-fg, 24%);
@fg-ignored:  fade(@base-fg, 48%);
@fg-highlight: hsl(@ui-hue, @ui-saturation*8, 12%);
@fg-selected: hsl(@ui-hue, @ui-saturation*8, 2%);

@fg-info:    hsl(219,  79%/1.33, 66%/1.33);
@fg-success: hsl(140,  44%/1.33, 62%/1.33);
@fg-warning: hsl( 36,  60%/1.33, 72%/1.33);
@fg-error:   hsl(  9, 100%/1.33, 64%/1.33);

@fg-added:    @fg-success;
@fg-renamed:  @fg-info;
@fg-modified: @fg-warning;
@fg-removed:  @fg-error;

@fg-active: contrast(@ui-theme-color, @base-fg, @base-bg);

// other required vars
// may or may not be used elsewhere in this package
// https://atom.io/docs/v0.174.0/theme-variables
// translate to vars required for other packages
@text-color: @base-fg;
@text-color-subtle: @fg-subtle;
@text-color-highlight: @fg-highlight;
@text-color-selected: @fg-selected;
@text-color-info:    @fg-info;
@text-color-success: @fg-success;
@text-color-warning: @fg-warning;
@text-color-error:   @fg-error;

@background-color-info: @bg-info;
@background-color-success: @bg-success;
@background-color-warning: @bg-warning;
@background-color-error: @bg-error;
@background-color-highlight: @ui-theme-color;
@background-color-selected: @level-2-bg;

@app-background-color:             @level-2-bg;
@base-background-color:            @app-background-color;
@base-border-color:                @level-4-bg;

@pane-item-background-color:       @level-3-bg;
@pane-item-border-color:           @level-5-bg;

@input-background-color:           @level-0-bg;
@input-border-color:               @level-5-bg;

@tool-panel-background-color:      @level-2-bg;
@tool-panel-border-color:          @level-5-bg;

@inset-panel-background-color:     @level-5-bg;
@inset-panel-border-color:         @level-5-bg;

@panel-heading-background-color:   @level-3-bg;
@panel-heading-border-color:       @level-5-bg;

@overlay-background-color:         @level-2-bg;
@overlay-border-color:             @level-5-bg;

@button-background-color:          @level-1-bg;
@button-background-color-hover:    @level-4-bg;
@button-background-color-selected: @level-1-bg;
@button-border-color:              @button-background-color;

@tab-bar-background-color:         @app-background-color;
@tab-bar-border-color:             @tab-bar-background-color;
@tab-background-color:             @level-2-bg;
@tab-background-color-active:      @ui-theme-color;
@tab-border-color:                 @tab-background-color;

@tree-view-background-color:       @level-3-bg;
@tree-view-border-color:           @level-3-bg;

@ui-site-color-1: @bg-success;             // green
@ui-site-color-2: spin(@bg-success, 60);   // blue
@ui-site-color-3: spin(@bg-success, -120); // orange
@ui-site-color-4: spin(@bg-success, -210); // pink
@ui-site-color-5: spin(@bg-success, -100); // yellow

@disclosure-arrow-size:    1rem;

@component-padding:        @modular-scale-m * 1rem;
@component-icon-padding:   @modular-scale-xs * 1rem;
@component-icon-size:      16/12 * 1rem;
@component-line-height:    @modular-scale-xxl * 1rem;
@component-border-radius:  2px;

@tab-height: @modular-scale-xxxl * 1rem;

/*
* This is sortof prepared for adjustable themes.
* Everything is based of a single color taken from the syntax theme.
*/

@import "syntax-variables";

//provide defaults, users can set configs that are handled in config.less
@font-family: 'Helvetica Neue', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
@font-size: 12px;
@font-weight: 200;

// a modular scale maintains relations across all sizes and spaces
// http://type-scale.com
@modular-scale: 1.25;

@modular-scale-xxs:  pow(@modular-scale, -3);
@modular-scale-xs:   pow(@modular-scale, -2);
@modular-scale-s:    pow(@modular-scale, -1);
@modular-scale-ms:   pow(@modular-scale, -.5); // because type becomes too small
@modular-scale-m:    1;
@modular-scale-l:    pow(@modular-scale, 1);
@modular-scale-xl:   pow(@modular-scale, 2);
@modular-scale-xxl:  pow(@modular-scale, 3);
@modular-scale-xxxl: pow(@modular-scale, 4);

// leading color
@ui-theme-color: @syntax-background-color;

// Tend towards blue instead of red when base color is white
.ui-hue() when (hsvhue(@ui-theme-color) = 0) and (hsvsaturation(@ui-theme-color) = 0%) {
  @ui-hue: 180;
}
.ui-hue() when (hsvhue(@ui-theme-color) > 0), (hsvsaturation(@ui-theme-color) > 0%) {
  @ui-hue: hsvhue(@ui-theme-color);
}
.ui-hue();
@ui-saturation:    3%;
@ui-brightness:    86%;
@ui-accent:        spin( hsl( @ui-hue, 50% + @ui-saturation, 50%), 66 );

// background
@base-bg: hsv(@ui-hue, @ui-saturation, @ui-brightness);

@level-0-bg: lighten(@base-bg, 12%);
@level-1-bg: lighten(@base-bg, 6%);
@level-2-bg:  darken(@base-bg, 0%);
@level-3-bg:  darken(@base-bg, 3%);
@level-4-bg:  darken(@base-bg, 6%);
@level-5-bg:  darken(@base-bg, 9%);

@bg-info:    hsl(208, 100%/1.33, 48%);
@bg-success: hsl(160,  70%/1.33, 48%);
@bg-warning: hsl(32,   60%/1.33, 48%);
@bg-error:   hsl(0,    70%/1.33, 48%);

// foreground
@base-fg: hsl(@ui-hue, @ui-saturation, max(30%, @ui-brightness / 3.3) );

@fg-subtle: fadeout(@base-fg, 18%);
@fg-faded: fade(@base-fg, 24%);
@fg-ignored:  fade(@base-fg, 48%);
@fg-highlight: hsl(@ui-hue, @ui-saturation*8, 12%);
@fg-selected: hsl(@ui-hue, @ui-saturation*8, 2%);

@fg-info:    hsl(219,  79%/1.33, 66%/1.33);
@fg-success: hsl(140,  44%/1.33, 62%/1.33);
@fg-warning: hsl( 36,  60%/1.33, 72%/1.33);
@fg-error:   hsl(  9, 100%/1.33, 64%/1.33);

@fg-added:    @fg-success;
@fg-renamed:  @fg-info;
@fg-modified: @fg-warning;
@fg-removed:  @fg-error;

@fg-active: contrast(@ui-theme-color, @base-fg, @base-bg);

// other required vars
// may or may not be used elsewhere in this package
// https://atom.io/docs/v0.174.0/theme-variables
// translate to vars required for other packages
@text-color: @base-fg;
@text-color-subtle: @fg-subtle;
@text-color-highlight: @fg-highlight;
@text-color-selected: @fg-selected;
@text-color-info:    @fg-info;
@text-color-success: @fg-success;
@text-color-warning: @fg-warning;
@text-color-error:   @fg-error;

@background-color-info: @bg-info;
@background-color-success: @bg-success;
@background-color-warning: @bg-warning;
@background-color-error: @bg-error;
@background-color-highlight: @ui-theme-color;
@background-color-selected: @level-2-bg;

@app-background-color:             @level-2-bg;
@base-background-color:            @app-background-color;
@base-border-color:                @level-4-bg;

@pane-item-background-color:       @level-3-bg;
@pane-item-border-color:           @level-5-bg;

@input-background-color:           @level-0-bg;
@input-border-color:               @level-5-bg;

@tool-panel-background-color:      @level-2-bg;
@tool-panel-border-color:          @level-5-bg;

@inset-panel-background-color:     @level-5-bg;
@inset-panel-border-color:         @level-5-bg;

@panel-heading-background-color:   @level-3-bg;
@panel-heading-border-color:       @level-5-bg;

@overlay-background-color:         @level-2-bg;
@overlay-border-color:             @level-5-bg;

@button-background-color:          @level-1-bg;
@button-background-color-hover:    @level-4-bg;
@button-background-color-selected: @level-1-bg;
@button-border-color:              @button-background-color;

@tab-bar-background-color:         @app-background-color;
@tab-bar-border-color:             @tab-bar-background-color;
@tab-background-color:             @level-2-bg;
@tab-background-color-active:      @ui-theme-color;
@tab-border-color:                 @tab-background-color;

@tree-view-background-color:       @level-3-bg;
@tree-view-border-color:           @level-3-bg;

@ui-site-color-1: @bg-success;             // green
@ui-site-color-2: spin(@bg-success, 60);   // blue
@ui-site-color-3: spin(@bg-success, -120); // orange
@ui-site-color-4: spin(@bg-success, -210); // pink
@ui-site-color-5: spin(@bg-success, -100); // yellow

@disclosure-arrow-size:    1rem;

@component-padding:        @modular-scale-m * 1rem;
@component-icon-padding:   @modular-scale-xs * 1rem;
@component-icon-size:      16/12 * 1rem;
@component-line-height:    @modular-scale-xxxl * 1rem;
@component-border-radius:  2px;

@tab-height: @modular-scale-xxxl * 1rem;


add padding back around the tab view

add padding back around the tab view


Correct font size

Correct font size

.badge {
    font-size: 12px;
    display: inline-block;
    color:#fff;
    background: #8e8e93;
    border-radius: 3px;
    padding: 1px 7px;
    box-sizing: border-box;
}
.icon .badge {
    position: absolute;
    left: 100%;
    margin-left: -10px;
    top: -2px;
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 5px;
}

.badge {
    font-size: 13px;
    display: inline-block;
    color:#fff;
    background: #8e8e93;
    border-radius: 3px;
    padding: 1px 7px;
    box-sizing: border-box;
}
.icon .badge {
    position: absolute;
    left: 100%;
    margin-left: -10px;
    top: -2px;
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 5px;
}


increased font size for submenu

increased font size for submenu

/**
 * Main less module
 *
 * @author Viacheslav Lotsmanov
 */

// imports {{{1

// variables
@import "variables";

// libs
@import "libs/reset";
@import "libs/lesshat";
@import "libs/font_mixins";
@import "libs/position_mixins";
@import "libs/animated_icon_mixin";
@import "libs/pseudo_mixins";

// project mixins
@import "mixins";

// fonts
@import "fonts";

// sprites
@import "sprites/icons";

// mixins
@import "circle_down_arrow_button";

// elements
@import "header";
@import "footer";
@import "content";
@import "content_bg";

// pages
@import "pages/main";
@import "pages/shops";
@import "pages/collection";
@import "pages/events";
@import "pages/error_404";

// imports }}}1

html, body {
	.size(100%);
	min-height: 100%;
	height: auto;
}

:focus { outline: none; }
::-moz-focus-inner { border: 0; }

html body {
	overflow-y: scroll;
	color: @contentColor;
	.fontMetrics(0, 0);
	background: @bgColor;

	h1 { // {{{1
		display: block;
		.sansSerifFont('Roboto-Thin', 52px);
		text-transform: uppercase;
		max-width: @maxWidth - ((@mainMargin2 - @mainMargin) * 2);
		margin-left: auto;
		margin-right: auto;
		.box-sizing(border-box);
		padding: 0 @mainMargin;
		padding-top: 80px - 45px;
		min-width: @minWidth;
	} // h1 }}}1

	nav.nav_block { // {{{1
		min-width: @minWidth;
		max-width: @maxWidth - ((@mainMargin2 - @mainMargin) * 2);
		margin-left: auto;
		margin-right: auto;
		.box-sizing(border-box);
		padding-left: @mainMargin;
		padding-right: @mainMargin;
		@pX: 11px; // padding X-axis
		padding-top: 36px - 9px;
		padding-bottom: 43px - 18px;

		&>a, &>span {
			.linkNoLine;
			display: inline-block;
			padding-left: @pX;
			padding-right: @pX;
			.sansSerifFont('Roboto-Light', 15px, 24px);
			text-transform: uppercase;
			white-space: nowrap;
			padding-top: 9px;
			padding-bottom: 8px;
			margin-right: @pX;

			&:first-child { margin-left: -@pX; }
			&:last-child { margin-right: 0; }
		}

		& > a > span {
			display: inline;
			border-bottom: 1px solid @linkColorUnderline;
			.transit(~'border-bottom-color');
		}

		& > a:hover > span {
			border-bottom-color: @activeLinkColorUnderline;
		}

		&>span {
			cursor: default;
			@bgC: #dcd1cd;
			background: @bgC;
			border-bottom-color: @bgC;

			&, &:hover { color: @contentColor; }
		}
	} // nav.nav_block }}}1

	h1 + main { padding-top: 55px - 27px; }

	main { // {{{1
		min-width: @minWidth;
		max-width: @minWidth;
		.box-sizing(border-box);
		padding-left: @mainMargin;
		padding-right: @mainMargin;
		margin-left: auto;
		margin-right: auto;
		font: @contentFont;

		p + p, blockquote + p,
		blockquote + blockquote, blockquote + p { padding-top: 24px; }

		p + p>img,
		blockquote + p>img {
			margin-top: 24px;
			margin-bottom: 16px;
			.size(100%, auto);
		}

		p + p.greetz, blockquote + p.greetz {
			.sansSerifFont('Roboto', 18px, 24px);
			font-weight: bold;
			text-align: center;
			padding-top: 74px - 24px;
		}

		b, strong { font-weight: bold; }
		i, em { font-style: italic; }

		&.stretch { max-width: @maxWidth; }
		&.no_limits { padding-left: 0; padding-right: 0; }

		blockquote.simple_rigth_quote { // {{{2
			display: block;
			&:after { .pseudoBlock; clear: both; }

			.wrap {
				display: block;
				float: right;
				&:after { .pseudoBlock; clear: both; }

				p {
					.sansSerifFont('Roboto', 17px, 24px);
				}

				p.signature {
					text-align: right;
					font: @contentFont;
					font-weight: bold;
				}

				p + p.signature { margin-top: -(48px - 32px); }
			} // .wrap

			& + p { padding-top: 34px; }
		} // blockquote.simple_rigth_quote }}}2
	} // main }}}1
} // html body

/**
 * Main less module
 *
 * @author Viacheslav Lotsmanov
 */

// imports {{{1

// variables
@import "variables";

// libs
@import "libs/reset";
@import "libs/lesshat";
@import "libs/font_mixins";
@import "libs/position_mixins";
@import "libs/animated_icon_mixin";
@import "libs/pseudo_mixins";

// project mixins
@import "mixins";

// fonts
@import "fonts";

// sprites
@import "sprites/icons";

// mixins
@import "circle_down_arrow_button";

// elements
@import "header";
@import "footer";
@import "content";
@import "content_bg";

// pages
@import "pages/main";
@import "pages/shops";
@import "pages/collection";
@import "pages/events";
@import "pages/error_404";

// imports }}}1

html, body {
	.size(100%);
	min-height: 100%;
	height: auto;
}

:focus { outline: none; }
::-moz-focus-inner { border: 0; }

html body {
	overflow-y: scroll;
	color: @contentColor;
	.fontMetrics(0, 0);
	background: @bgColor;

	h1 { // {{{1
		display: block;
		.sansSerifFont('Roboto-Thin', 52px);
		text-transform: uppercase;
		max-width: @maxWidth - ((@mainMargin2 - @mainMargin) * 2);
		margin-left: auto;
		margin-right: auto;
		.box-sizing(border-box);
		padding: 0 @mainMargin;
		padding-top: 80px - 45px;
		min-width: @minWidth;
	} // h1 }}}1

	nav.nav_block { // {{{1
		min-width: @minWidth;
		max-width: @maxWidth - ((@mainMargin2 - @mainMargin) * 2);
		margin-left: auto;
		margin-right: auto;
		.box-sizing(border-box);
		padding-left: @mainMargin;
		padding-right: @mainMargin;
		@pX: 11px; // padding X-axis
		padding-top: 36px - 9px;
		padding-bottom: 43px - 18px;

		&>a, &>span {
			.linkNoLine;
			display: inline-block;
			padding-left: @pX;
			padding-right: @pX;
			.sansSerifFont('Roboto-Light', 14px, 24px);
			text-transform: uppercase;
			white-space: nowrap;
			padding-top: 9px;
			padding-bottom: 8px;
			margin-right: @pX;

			&:first-child { margin-left: -@pX; }
			&:last-child { margin-right: 0; }
		}

		& > a > span {
			display: inline;
			border-bottom: 1px solid @linkColorUnderline;
			.transit(~'border-bottom-color');
		}

		& > a:hover > span {
			border-bottom-color: @activeLinkColorUnderline;
		}

		&>span {
			cursor: default;
			@bgC: #dcd1cd;
			background: @bgC;
			border-bottom-color: @bgC;

			&, &:hover { color: @contentColor; }
		}
	} // nav.nav_block }}}1

	h1 + main { padding-top: 55px - 27px; }

	main { // {{{1
		min-width: @minWidth;
		max-width: @minWidth;
		.box-sizing(border-box);
		padding-left: @mainMargin;
		padding-right: @mainMargin;
		margin-left: auto;
		margin-right: auto;
		font: @contentFont;

		p + p, blockquote + p,
		blockquote + blockquote, blockquote + p { padding-top: 24px; }

		p + p>img,
		blockquote + p>img {
			margin-top: 24px;
			margin-bottom: 16px;
			.size(100%, auto);
		}

		p + p.greetz, blockquote + p.greetz {
			.sansSerifFont('Roboto', 18px, 24px);
			font-weight: bold;
			text-align: center;
			padding-top: 74px - 24px;
		}

		b, strong { font-weight: bold; }
		i, em { font-style: italic; }

		&.stretch { max-width: @maxWidth; }
		&.no_limits { padding-left: 0; padding-right: 0; }

		blockquote.simple_rigth_quote { // {{{2
			display: block;
			&:after { .pseudoBlock; clear: both; }

			.wrap {
				display: block;
				float: right;
				&:after { .pseudoBlock; clear: both; }

				p {
					.sansSerifFont('Roboto', 17px, 24px);
				}

				p.signature {
					text-align: right;
					font: @contentFont;
					font-weight: bold;
				}

				p + p.signature { margin-top: -(48px - 32px); }
			} // .wrap

			& + p { padding-top: 34px; }
		} // blockquote.simple_rigth_quote }}}2
	} // main }}}1
} // html body