pogodevorg/blog.pogodev.org

// Text-level semantics
//
// The elements in this section give semantics to inline text.
//
// Weight: 1
//
// Style guide: base.text

// Abbreviation / Acroynym
//
// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
// on hover.
//
// Markup: text-abbr.twig
//
// Style guide: base.text.abbr

abbr[title] {
  // Remove the bottom border in Firefox <40.
  border-bottom: 0;
  // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  text-decoration: underline;
  text-decoration: underline dotted;

  @media print {
    // Add visible title after abbreviations.
    &:after {
      content: ' (' attr(title) ')';
    }
  }
}

// Bold
//
// The `<strong>` element or the `<b>` element is for emphasizing a snippet of
// text with a heavier font-weight.
//
// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
// without conveying additional importance.
//
// Markup: text-b.twig
//
// Weight: -1
//
// Style guide: base.text.b

// Prevent the duplicate application of `bolder` by the next rule in Safari 6.

b,
strong {
  font-weight: inherit;
}

// sass-lint:disable no-mergeable-selectors
b,
strong {
  // Add the correct font weight in Chrome, Edge, and Safari.
  font-weight: bolder;
}
// sass-lint:enable no-mergeable-selectors

// Cite
//
// The `<cite>` element represents a reference to a creative work.
//
// Markup: text-cite.twig
//
// Style guide: base.text.cite

cite {
  // Add your styles.
}

// Code
//
// The `<code>` element represents a fragment of computer code. The `<var>`
// element represents a variable. The `<samp>` element represents (sample)
// output from a program or computing system. The `<kbd>` element represents
// user input (typically keyboard input.)
//
// Markup: text-code.twig
//
// Style guide: base.text.code

%monospace,
code,
kbd,
samp,
var {
  // Correct the inheritance and scaling of font size in all browsers.
  // The font-family value ends with ", serif".
  @include typeface(monospace);
  // Correct the odd `em` font sizing in all browsers.
  font-size: 1em;
}

// Deleted text
//
// The `<del>` element indicates blocks of text that have been deleted.
//
// Markup: text-del.twig
//
// Style guide: base.text.del

del {
  // Add your styles.
}

// Definition
//
// The `<dfn>` element represents the defining instance of a term.
//
// Markup: text-dfn.twig
//
// Style guide: base.text.dfn

dfn {
  // Add the correct font style in Android <4.4.
  font-style: italic;
}

// Italics
//
// The `<em>` element or the `<i>` element is used for emphasizing a snippet of
// text with italics.
//
// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
// technical terms, etc.
//
// Markup: text-i.twig
//
// Weight: -1
//
// Style guide: base.text.i

i,
em {
  // Add your styles.
}

// Inserted text
//
// The `<ins>` element indicates additions to the document.
//
// Markup: text-ins.twig
//
// Style guide: base.text.ins

ins {
  // Add your styles.
}

// Marked text
//
// The `<mark>` element highlights a run of text due to its relevance in another
// context.
//
// Markup: text-mark.twig
//
// Style guide: base.text.mark

mark {
  // Add the correct background and color in IE <10.
  background-color: color(mark-bg);
  color: color(text);
}

// Quote
//
// The `<q>` element represents an inline quote from another source. Longer
// quotes should use the `<blockquote>` element.
//
// Markup: text-q.twig
//
// Style guide: base.text.q

q {
  // Add your styles.
}

// Strikethrough text
//
// The `<s>` element indicates blocks of text that are no longer relevant.
//
// Markup: text-s.twig
//
// Style guide: base.text.s

s {
  // Add your styles.
}

// Small text
//
// For de-emphasizing inline or blocks of text, use the `<small>` element to set
// text at 80% the size of the parent.
//
// Markup: text-small.twig
//
// Style guide: base.text.small

small {
  // Add the correct font size in all browsers.
  @include font-size(s);
}

// Superscript / Subscript
//
// The `<sup>` element represents a superscript and the `<sub>` element
// represents a subscript.
//
// Markup: text-sub.twig
//
// Style guide: base.text.sub

sub,
sup {
  // Prevent `sub` and `sup` elements from affecting the line height in
  // all browsers.
  @include font-size(xs);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

// Underlined text
//
// To underline text use the `<u>` element. Not recommended since underlines are
// used by web browsers to style hyperlinks.
//
// Markup: text-u.twig
//
// Style guide: base.text.u

u {
  // Add your styles.
}