cv/csscv/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: $color--blue--dark;
$color--text: $color--grey--light;
$color--comment: $color--grey--dark;
$color--selector: $color--blue--light;
$color--braces: $color--blue--light;
$color--property: $color--mustard;
$color--value: $color--mustard;
$color--colons: $color--grey--dark;
$color--string: $color--turquoise;
$color--number: $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