csscv.css

@charset "UTF-8";
/*------------------------------------*\
    CSSCV
\*------------------------------------*/
/*!*
 * 
 * CSSCV -- csswizardry.com/csscv -- @csswizardry
 * 
 */
/**
 * CSSCV is a simple, opinionated stylesheet for formatting semantic HTML to
 * look like a CSS file. Apply the class of `.csscv` to the `html` element of
 * your page to invoke the CSSCV stylesheet. Removing this class will leave you
 * with an unstyled page of pure, semantic HTML. This is useful if you wish to
 * disable CSSCV in order to style your page more suitably for recruiters and
 * more serious applications.
 */
.csscv {
  /*------------------------------------*\
      #CONTENTS
  \*------------------------------------*/
  /**
   * SETTINGS
   * RESET
   * HELPERS
   * BASE
   * RULESETS
   * SELECTORS
   * DECLARATIONS
   * PROPERTIES
   * VALUES
   * STRINGS
   * NUMBERS
   * URLS
   * LISTS
   * BEM
   * COMMENTS
   * NOTICE
   */
  /*------------------------------------*\
      #SETTINGS
  \*------------------------------------*/
  /**
   * How big would you like your tabs to be?
   */
  /**
   * Colour settings.
   */
  /**
   * Reassign colour variables to better names.
   */
  /*------------------------------------*\
      #RESET
  \*------------------------------------*/
  /**
   * This is a pretty poor reset, but it will suffice for a single-page, single-
   * responsibility stylesheet.
   *
   * 1. Everything the same size (16px by default).
   * 2. Fixes an odd font-sizing issue in some browsers.
   */
  /*------------------------------------*\
      #HELPERS
  \*------------------------------------*/
  /**
   * Little helper classes to allow us to quickly build stuff.
   *
   * 1. Space apart our rulesets by the same value as our line-height.
   */
  /*------------------------------------*\
      #BASE
  \*------------------------------------*/
  /**
   * 1. Comfortable line-height (equivalent to 24px).
   * 2. Pad the page by the same value as our line-height.
   */
  /*------------------------------------*\
      #RULESETS
  \*------------------------------------*/
  /**
   * Wrap our selector and declarations in an element with a class of `.ruleset`.
   */
  /*------------------------------------*\
      #SELECTORS
  \*------------------------------------*/
  /**
   * Each section is marked up as a heading which becomes our selector. We assume
   * all our selectors will be classes.
   *
   * 1. Lowercase our class names.
   * 2. Prepend a period.
   * 3. Append an opening brace.
   */
  /**
   * Insert a hyphen in place of a space in multiple word selectors.
   *
   * 1. Force the empty element to take up its space.
   */
  /*------------------------------------*\
      #DECLARATIONS
  \*------------------------------------*/
  /**
   * Each block of declarations is marked up as a definition list with a class of
   * `.declarations`.
   *
   * 1. Close our declarations with a curly brace.
   */
  /*------------------------------------*\
      #PROPERTIES
  \*------------------------------------*/
  /**
   * A `dt` and `dd` form a property–value pair (i.e. declaration). Each `dt` gets
   * a class of `.property`.
   *
   * 1. Indent our declarations based on the chosen tab size.
   * 2. End each property with a colon and a space.
   */
  /*------------------------------------*\
      #VALUES
  \*------------------------------------*/
  /**
   * Each `dd` gets a class of `.value`.
   *
   * 1. End each value with a semi-colon.
   */
  /*------------------------------------*\
      #STRINGS
  \*------------------------------------*/
  /**
   * Strings in CSS (such as font names) need to be enclosed in quotes. Wrap
   * strings in your CV with a `span` with a class of `.string`, e.g.
   * `<span class="string">Harry Roberts</span>`.
   */
  /*------------------------------------*\
      #NUMBERS
  \*------------------------------------*/
  /**
   * Numbers in values need wrapping in a `.number` element.
   */
  /*------------------------------------*\
      #URLS
  \*------------------------------------*/
  /**
   * Wrap any URLs with a `span` with a class of `.url`.
   */
  /*------------------------------------*\
      #LISTS
  \*------------------------------------*/
  /**
   * Lists of values should be marked up with a `ul` with a class of `.value-list`.
   */
  /*------------------------------------*\
      #BEM
  \*------------------------------------*/
  /**
   * Denote any relationships within your CV with BEM-style naming.
   *
   * 1. An element of an item is prepended with the namespace you set (via
   *    `data-namespace` in your markup) and two underscores.
   * 2. A modifier of an item is prepended with the namespace you set (via
   *    `data-namespace` in your markup) and two hyphens.
   */
  /*------------------------------------*\
      #COMMENTS
  \*------------------------------------*/
  /**
   * Create inline comments.
   */
  /**
   * Create multi-line, DocBlock style comments.
   */
  /*------------------------------------*\
      #NOTICE
  \*------------------------------------*/
  /**
   * The attribution notice that appears at the bottom of a CSSCV page.
   *
   * 1. Only display the message if CSSCV is enabled; the notice carries an inline
   *    style of `display: none;` which will take effect once CSSCV is disabled.
   */
}
.csscv * {
  margin: 0;
  padding: 0;
  font-size: 100%;
  /* [1] */
  font-family: monospace, monospace;
  /* [2] */
  font-weight: normal;
}
.csscv .spaced,
.csscv .notice,
.csscv .ruleset {
  margin-bottom: 24px;
  /* [1] */
  margin-bottom: 1.5rem;
  /* [1] */
}
.csscv .spaced--large {
  margin-bottom: 120px;
  margin-bottom: 7.5rem;
}
.csscv .indented {
  padding-left: 2.5em;
}
.csscv {
  line-height: 1.5;
  /* [1] */
  padding: 24px;
  /* [2] */
  padding: 1.5rem;
  /* [2] */
  padding-bottom: 0;
  color: #E06C75;
  background-color: #282c34;
}
.csscv a {
  color: inherit;
}
.csscv .selector {
  color: #D19A66;
  text-transform: lowercase;
  /* [1] */
}
.csscv .selector:before {
  content: ".";
  /* [2] */
}
.csscv .selector:after {
  content: " {";
  /* [3] */
}
.csscv .selector__delimiter {
  position: relative;
  white-space: pre;
  /* [1] */
}
.csscv .selector__delimiter:before {
  content: "-";
  position: absolute;
  display: inline-block;
  width: 0.625em;
  text-align: center;
}
.csscv .declarations:after {
  content: "}";
  /* [1] */
  color: #D19A66;
}
.csscv .property {
  text-transform: lowercase;
  float: left;
  clear: both;
  padding-left: 2.5em;
  /* [1] */
  color: #E06C75;
}
.csscv .property:after {
  content: ": ";
  /* [2] */
  color: #98C379;
}
.csscv .value {
  color: #E06C75;
}
.csscv .value:after {
  content: ";";
  /* [1] */
  color: #98C379;
}
.csscv .string {
  color: #98C379;
}
.csscv .string:before, .csscv .string:after {
  content: '"';
}
.csscv .number {
  color: #98C379;
}
.csscv .url:before {
  content: "url(";
}
.csscv .url:after {
  content: ")";
}
.csscv .value-list {
  list-style: none;
  display: inline;
}
.csscv .value-list > li {
  display: inline;
}
.csscv .value-list > li:after {
  content: ", ";
}
.csscv .value-list > li:last-child:after {
  content: "";
}
.csscv .element:before {
  content: attr(data-namespace) "__";
  /* [1] */
}
.csscv .modifier:before {
  content: attr(data-namespace) "--";
  /* [2] */
}
.csscv .comment {
  color: #98C379;
}
.csscv .comment:before {
  content: "/* ";
}
.csscv .comment:after {
  content: " */";
}
.csscv .comment-block {
  color: #98C379;
}
.csscv .comment-block:before, .csscv .comment-block:after {
  display: block;
}
.csscv .comment-block:before {
  content: "/**";
}
.csscv .comment-block:after {
  content: " */";
}
.csscv .comment-block__line {
  display: block;
}
.csscv .comment-block__line:before {
  content: " * ";
}
.csscv .notice {
  display: block !important;
  /* [1] */
}

/*# sourceMappingURL=csscv.css.map */