csscv.scss

/*------------------------------------*\
    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?
 */
$tab-size:  4;


/**
 * Colour settings.
 */
$color--blue--dark:     #002935;
$color--blue--light:    #0083ce;
$color--grey--dark:     #7f9597;
$color--grey--light:    #4f6c73;
$color--mustard:        #b58a0a;
$color--turquoise:      #00a19b;


/**
 * Reassign colour variables to better names.
 */
$color--background:     #24262B; //$color--blue--dark;
$color--text:           #BAC0CC; //$color--grey--light;
$color--comment:        #556674; //$color--grey--dark;
$color--selector:       #CE714B; //$color--blue--light;
$color--braces:         #CE714B; //$color--blue--light;
$color--property:       #AA4943; //$color--mustard;
$color--value:          #BAC0CC; //$color--mustard;
$color--colons:         #BAC0CC; //$color--grey--dark;
$color--string:         #A3BE8C; //$color--turquoise;
$color--number:         #CE714B; //$color--turquoise;





/*------------------------------------*\
    #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.
 */
* {
    margin:  0;
    padding: 0;
    font-size: 100%; /* [1] */
    font-family: monospace, monospace; /* [2] */
    font-weight: normal;
}





/*------------------------------------*\
    #HELPERS
\*------------------------------------*/
/**
 * Little helper classes to allow us to quickly build stuff.
 *
 * 1. Space apart our rulesets by the same value as our line-height.
 */
.spaced,
%spaced {
    margin-bottom: 24px; /* [1] */
    margin-bottom: 1.5rem; /* [1] */
}

.spaced--large {
    margin-bottom: 5 * 24px;
    margin-bottom: 5 * 1.5rem;
}

.indented {
    padding-left: ($tab-size * .625) +em;
}





/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * 1. Comfortable line-height (equivalent to 24px).
 * 2. Pad the page by the same value as our line-height.
 */
& {
    line-height: 1.5; /* [1] */
    padding: 24px; /* [2] */
    padding: 1.5rem; /* [2] */
    padding-bottom: 0;
    color: $color--text;
    background-color: $color--background;
}

a {
    color: inherit;
}





/*------------------------------------*\
    #RULESETS
\*------------------------------------*/
/**
 * Wrap our selector and declarations in an element with a class of `.ruleset`.
 */
.ruleset {
    @extend %spaced;
}





/*------------------------------------*\
    #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.
 */
.selector {
    color: $color--selector;
    text-transform: lowercase; /* [1] */

    &:before {
        content: "."; /* [2] */
    }

    &:after {
        content: " {"; /* [3] */
    }

}

    /**
     * Insert a hyphen in place of a space in multiple word selectors.
     *
     * 1. Force the empty element to take up its space.
     */
    .selector__delimiter {
        position: relative;
        white-space: pre; /* [1] */

        &:before {
            content: "-";
            position: absolute;
            display: inline-block;
            width: .625em;
            text-align: center;
        }

    }





/*------------------------------------*\
    #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.
 */
.declarations {

    &:after {
        content: "}"; /* [1] */
        color: $color--braces;
    }

}





/*------------------------------------*\
    #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.
 */
.property {
    text-transform: lowercase;
    float: left;
    clear: both;
    padding-left: ($tab-size * .625) +em; /* [1] */
    color: $color--property;

    &:after {
        content: ":\00A0"; /* [2] */
        color: $color--colons;
    }

}





/*------------------------------------*\
    #VALUES
\*------------------------------------*/
/**
 * Each `dd` gets a class of `.value`.
 *
 * 1. End each value with a semi-colon.
 */
.value {
    color: $color--value;

    &:after {
        content: ";"; /* [1] */
        color: $color--colons;
    }

}





/*------------------------------------*\
    #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>`.
 */
.string {
    color: $color--string;

    &:before,
    &:after {
        content: "\"";
    }

}





/*------------------------------------*\
    #NUMBERS
\*------------------------------------*/
/**
 * Numbers in values need wrapping in a `.number` element.
 */
.number {
    color: $color--number;
}





/*------------------------------------*\
    #URLS
\*------------------------------------*/
/**
 * Wrap any URLs with a `span` with a class of `.url`.
 */
.url {

    &:before{
        content: "url(";
    }

    &:after {
        content: ")";
    }

}





/*------------------------------------*\
    #LISTS
\*------------------------------------*/
/**
 * Lists of values should be marked up with a `ul` with a class of `.value-list`.
 */
.value-list {
    list-style: none;
    display: inline;

    > li {
        display: inline;

        &:after {
            content: ", ";
        }

        &:last-child:after {
            content: "";
        }

    }

}





/*------------------------------------*\
    #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.
 */
.element:before {
    content: attr(data-namespace) "__"; /* [1] */
}

.modifier:before {
    content: attr(data-namespace) "--"; /* [2] */
}





/*------------------------------------*\
    #COMMENTS
\*------------------------------------*/
/**
 * Create inline comments.
 */
.comment {
    color: $color--comment;

    &:before {
        content: "/* ";
    }

    &:after {
        content: " */";
    }

}


/**
 * Create multi-line, DocBlock style comments.
 */
.comment-block {
    color: $color--comment;

    &:before,
    &:after {
        display: block;
    }

    &:before {
        content: "/**";
    }

    &:after {
        content: "\00A0*/";
    }

}

    .comment-block__line {
        display: block;

        &:before {
            content: "\00A0*\00A0";
        }

    }





/*------------------------------------*\
    #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.
 */
.notice {
    @extend %spaced;
    display: block !important; /* [1] */
}





} //csscv