viur-ignite-css/less/footnote.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * FOOTNOTES
 */

// #DOCUME .has-footnote

.has-footnotes {
  counter-reset: footnotes;
}

a.has-footnote {
  counter-increment: footnotes;
  text-decoration: none;
  color: inherit;
  outline: none;
  &:after {
    content: counter(footnotes);
    font-size: 0.65em;
    font-weight: 700;
    margin-left: 2px;
    line-height: 0;
    vertical-align: baseline;
    position: relative;
    top:-0.5em;
  }
  &:focus:after {
    outline: thin dotted;
    outline-offset: 2px;
  }
}

.footnotes {
  margin-top: 50px;
  border-top: 1px solid #ccc;
  font-size: 0.8rem;
}

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

.footnotes-list {
  list-style-type: decimal;
}

.footnotes-backlink  {
  font-size: 0.8em;
} // use: ↩


// => Footnote Media Queries

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

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

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

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

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