variables naming convention

This commit is contained in:
raphaelgoettter 2014-07-02 16:12:58 +02:00
parent 64f55038cc
commit 5f6250ae52
4 changed files with 29 additions and 16 deletions

View file

@ -17,13 +17,17 @@
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors
@primary-color : #000; // text color on body and content
@base-color : #000; // text color on body and content
@primary-color : #000; // text color on primary elements
@secondary-color : #000; // text color on secondary elements
@headings-color : #000; // text color on headings
@primary-color-link : #333; // primary links color
@primary-color-link-hover : #000; // primary hovered/focused links color
@base-color-link : #333; // base links color
@base-color-link-hover : #000; // base hovered/focused links color
// backgrounds
@primary-background : #fff; // body background color
@base-background : #fff; // body background color
@primary-background : #fff; // primary elements background color
@secondary-background : #fff; // secondary elements background color
// spacings
@tiny-value : 0.5em; // tiny value for margins / paddings

View file

@ -68,16 +68,16 @@ body {
/* set body font-size in em (1.4em equiv "14px") */
font-size: unit((@base-font-size / 10), em);
background-color: @primary-background;
color: @primary-color;
background-color: @base-background;
color: @base-color;
font-family: @font-stack-common;
line-height: @line-height;
}
a {
color: @primary-color-link;
color: @base-color-link;
&:hover, &:focus, &:active {
color: @primary-color-link-hover;
color: @base-color-link-hover;
}
}
@ -104,11 +104,13 @@ figure {
h1,
.h1-like {
font-size: @h1-size;
font-family: @font-stack-headings;
}
h2,
.h2-like {
font-size: @h2-size;
font-family: @font-stack-headings;
}
h3,

View file

@ -17,12 +17,17 @@ $font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // mon
$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors
$primary-color : #000; // text color on body
$primary-color-link : #333; // primary links color;
$primary-color-link-hover : #000; // primary hovered/focused links color;
$base-color : #000; // text color on body and content
$primary-color : #000; // text color on primary elements
$secondary-color : #000; // text color on secondary elements
$headings-color : #000; // text color on headings
$base-color-link : #333; // base links color
$base-color-link-hover : #000; // base hovered/focused links color
// backgrounds
$primary-background : #fff; // body background color
$base-background : #fff; // body background color
$primary-background : #fff; // primary elements background color
$secondary-background : #fff; // secondary elements background color
// spacings
$tiny-value : 0.5em; // tiny value for margins / paddings

View file

@ -67,16 +67,16 @@ body {
/* set body font-size in em (1.4em equiv "14px") */
font-size: ($base-font-size / 10px) + em;
background-color: $primary-background;
color: $primary-color;
background-color: $base-background;
color: $base-color;
font-family: $font-stack-common;
line-height: $line-height;
}
a {
color: $primary-color-link;
color: $base-color-link;
&:hover, &:focus, &:active {
color: $primary-color-link-hover;
color: $base-color-link-hover;
}
}
@ -102,10 +102,12 @@ figure {
h1, .h1-like {
font-size: $h1-size;
font-family: $font-stack-headings;
}
h2, .h2-like {
font-size: $h2-size;
font-family: $font-stack-headings;
}
h3, .h3-like {