viur-ignite-css/less/basic.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * BASICS, FUNDAMENTALS and TYPE
 *
 * ViUR Ignite CSS supports the 100% Easy to read standard:
 * https://ia.net/know-how/100e2r
 *
 * The body font size is 100% (roughly 16px).
 * Objects use a font size based on this size: using »rem« (root em).
 * Inline elements and type should react to their direct surroundings - thus use »em«.
 */


html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  margin: 0; // IE Reset
  background: @backgroundColor;
  overflow: hidden;
  font-size:100.01%;
  line-height:1.5;
  color: @textColor;
  font-family: @bodyFonts;
  -webkit-font-smoothing: antialiased; // Fix for webkit rendering
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}

// Links
a { color: @mainColor; text-decoration: none; outline: 0; }
a:hover, a:focus, a:active { color: darken(@mainColor, 10%); }
p a, p a:visited { line-height: inherit; }

// Typography

// Please style your headlines with the help of classes (e.g.: .headline, .subline, .heading)
h1, h2, h3, h4, h5, h6 {
  color: inherit; font-family: @headFonts; font-weight: normal; line-height: 1.6;
  &:not(:first-child) {margin-top: 1.5em;}
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit; color: inherit;}
h1 {font-size: 2.1em; margin-bottom: 1em;}
h2 {font-size: 1.7em; margin-bottom: .5em;}
h3 {font-size: 1.5em; margin-bottom: .25em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.15em;}
h6 {font-size: 1em;}
// Use .headline for your important headlines.
.headline {font-family: @headFonts; color: @mainColor;}

// Use .subline to your headline
.subline {font-family: @headFonts; color: lighten(@complementColor, 20%);}

// remove margin-top of .subline after .headline
.headline + .subline {margin-top: 0;}

// Use .lead to emphasize the first paragraph of a section.
.lead {font-size: 1.3em; font-weight: 300;}

p {
  line-height: 1.6;
  font-size: 1em;
}

strong {font-weight: 700;}
em {font-style:italic;}
small {font-size: .8em}

ins {
  text-decoration: none;
  border-bottom: 1px dashed;
}

mark {
  background: lighten(@mainColor,40%);
  color: contrast(lighten(@mainColor,40%), @textColor, @invTextColor);
  padding:1px;
  &:before,
  &:after {
    letter-spacing: -0.2em;
    content: "\00a0";
  }
}

blockquote {
  font-family: @headFonts;
  font-style: italic;
  font-size: 1.2em;
  color: @complementColor;
  padding: 0 15px;
  border-left: 7px solid @complementColor;
  cite {
    font-size: .8em;
    vertical-align: baseline;
    * {vertical-align: baseline;}
    &:before {
      display: inline-block;
      content: '\2014';
      margin-right: 3px;
      color: @complementColor;
    }
  }
  &:after {
    content: attr(cite);
    font-size: .6em;
    margin-top: 2em;
  }
}

code, pre {font-family: @monoFonts; background: darken(@backgroundColor,5%); color: contrast(darken(@backgroundColor,5%));}
code {
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  tab-size: 4;
  hyphens: none;
  padding: 3px;
  border-radius: 3px;
  margin: 0px 3px;
  &:before,
  &:after {
    letter-spacing: -0.2em;
    content: "\00a0";
  }
}
pre {
  padding: 10px 20px;
  margin-bottom: 10px;
}

// Keys
.kbd,
kbd {
  background-color: darken(@backgroundColor, 10%);
  border: 1px solid darken(@backgroundColor, 15%);
  border-radius: 3px;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  color: contrast(darken(@backgroundColor, 10%));
  display: inline-block;
  font-size: .8rem;
  font-family: @monoFonts;
  margin: 0 0.1em;
  padding: .2em .6em;
  text-shadow: 0 1px 0 #fff;
  .txt-nowrap;
  &.kbd-vDark {
    border: 1px solid contrast(darken(@backgroundColor, 15%));
    background-color: contrast(darken(@backgroundColor, 10%));
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px lighten(contrast(darken(@backgroundColor, 10%)), 20%) inset;
    color: darken(@backgroundColor, 10%);
  }
}

// Lists
ul.is-list {
  padding: 3px 18px;
  margin:0;
  list-style-type: disc;
}

.is-list ul {
  padding: 3px 18px;
  list-style-type: square;
}

.is-list ul ul,
.is-list ol ul {
  list-style-type: circle;
}

ol.is-list {
  padding: 3px 20px;
  margin:0;
  list-style-type: decimal;
}

.is-list ol {
  padding: 3px 20px;
  list-style-type: upper-roman;
}

.is-list ol ol,
.is-list ul ol {
  list-style-type: upper-alpha;
}


// => Basic Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
  body {font-size: 90%;}
}

.media-mixin(@break) when (@break = @breakMedium) {
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @break2x) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}