diff --git a/package.json b/package.json index 5195ae3..b25fb0a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "grunt-postcss": "^0.8.0", "grunt-sass": "^2.0.0", "grunt-sass-lint": "^0.2.2", - "load-grunt-tasks": "^3.5.2" + "load-grunt-tasks": "^3.5.2", + "sass-lint": "^1.10.2" }, "dependencies": { "normalize.css": "^7.0.0" diff --git a/site/assets/scss/components/_styleguide.scss b/site/assets/scss/components/_styleguide.scss new file mode 100644 index 0000000..4b24d4c --- /dev/null +++ b/site/assets/scss/components/_styleguide.scss @@ -0,0 +1,24 @@ + + +.color-samples { + > div { + display: flex; + margin: $gutter 0; + height: 100px; + + div { flex: 1 1 auto; } + + :nth-child(1) { background-color: $white; } + :nth-child(2) { background-color: $light; } + :nth-child(3) { background-color: $light-grey; } + :nth-child(4) { background-color: $dark-grey; } + :nth-child(5) { background-color: $black; } + + :nth-child(6) { background-color: $dark-blue; } + :nth-child(7) { background-color: $blue; } + :nth-child(8) { background-color: $red; } + :nth-child(9) { background-color: $orange; } + :nth-child(10) { background-color: $yellow; } + } +} + diff --git a/site/assets/scss/elements/_cta.scss b/site/assets/scss/elements/_cta.scss new file mode 100644 index 0000000..a8cefbc --- /dev/null +++ b/site/assets/scss/elements/_cta.scss @@ -0,0 +1,41 @@ +.cta-primary, +.cta-secondary { + &, + &:visited { + display: inline-block; + margin: $gutter; + margin-left: 0; + border: 1px solid $red; + background-color: $white; + padding: $gutter; + text-decoration: none; + color: $red; + } + + &:hover, + &:active { + margin: $gutter - 1px; + margin-left: -1px; + border-width: 2px; + border-color: $red; + background-color: $light; + text-decoration: none; + color: $red; + } +} + +.cta-secondary { + &, + &:visited { + border-color: $dark-grey; + color: $dark-grey; + } + + &:hover, + &:active { + border-width: 2px; + border-color: $black; + background-color: $light; + color: $black; + } +} diff --git a/site/assets/scss/elements/_typography.scss b/site/assets/scss/elements/_typography.scss index 2ba89e8..5efc69c 100644 --- a/site/assets/scss/elements/_typography.scss +++ b/site/assets/scss/elements/_typography.scss @@ -1,6 +1,8 @@ html, body { @include font-default; + background-color: $light; + color: $black; } .h1, @@ -57,11 +59,19 @@ p { line-height: 1.4; } -// a { -// &:visited { } -// &:hover { } -// &:active { } -// } +a { + &, + &:visited { + text-decoration: underline; + color: $blue; + } + + &:hover, + &:active { + text-decoration: underline; + color: $dark-blue; + } +} .small { @include font-roboto; @@ -75,7 +85,11 @@ code { @include font-mono; display: block; margin: $gutter; + background-color: $dark-grey; + padding: 0 0 $gutter; + width: auto; line-height: 1.35; white-space: pre; + color: $light; font-size: 18px; } diff --git a/site/assets/scss/main.scss b/site/assets/scss/main.scss index 404a261..3b9264c 100644 --- a/site/assets/scss/main.scss +++ b/site/assets/scss/main.scss @@ -9,6 +9,7 @@ @import 'elements/typography'; @import 'elements/nav'; @import 'elements/icons'; +@import 'elements/cta'; @import 'elements/layout'; -// @import 'components/thing'; +@import 'components/styleguide'; diff --git a/site/assets/scss/settings/_colors.scss b/site/assets/scss/settings/_colors.scss index 3fc9e1b..5c440a9 100644 --- a/site/assets/scss/settings/_colors.scss +++ b/site/assets/scss/settings/_colors.scss @@ -1,85 +1,11 @@ +$white: #fff; +$light: rgba(246, 244, 243, 1); +$light-grey: rgba(191, 189, 193, 1); +$dark-grey: rgba(46, 47, 47, 1); +$black: #000; - -$color-a1: rgba(191, 189, 193, 1); -$color-a2: rgba(109, 106, 117, 1); -$color-a3: rgba(55, 50, 62, 1); -$color-a4: rgba(222, 184, 65, 1); -$color-a5: rgba(222, 158, 54, 1); - - -$color-b1: rgba(187, 225, 195, 1); -$color-b2: rgba(167, 205, 189, 1); -$color-b3: rgba(134, 157, 122, 1); -$color-b4: rgba(145, 120, 93, 1); -$color-b5: rgba(139, 93, 51, 1); - - -$color-c1: rgba(240, 58, 71, 1); -$color-c2: rgba(175, 91, 91, 1); -$color-c3: rgba(246, 244, 243, 1); -$color-c4: rgba(39, 111, 191, 1); -$color-c5: rgba(24, 48, 89, 1); - - -$color-d1: rgba(172, 189, 186, 1); -$color-d2: rgba(205, 221, 221, 1); -$color-d3: rgba(165, 153, 181, 1); -$color-d4: rgba(46, 47, 47, 1); -$color-d5: rgba(5, 16, 20, 1); - - -$color-e1: rgba(255, 200, 87, 1); -$color-e2: rgba(233, 114, 76, 1); -$color-e3: rgba(197, 40, 61, 1); -$color-e4: rgba(72, 29, 36, 1); -$color-e5: rgba(37, 95, 133, 1); - -.color-samples { - > div { - display: flex; - margin: $gutter 0; - height: 100px; - - > div { flex: 1 1 auto; } - } - - .color-a { - :nth-child(1) { background-color: $color-a1; } - :nth-child(2) { background-color: $color-a2; } - :nth-child(3) { background-color: $color-a3; } - :nth-child(4) { background-color: $color-a4; } - :nth-child(5) { background-color: $color-a5; } - } - - .color-b { - :nth-child(1) { background-color: $color-b1; } - :nth-child(2) { background-color: $color-b2; } - :nth-child(3) { background-color: $color-b3; } - :nth-child(4) { background-color: $color-b4; } - :nth-child(5) { background-color: $color-b5; } - } - - .color-c { - :nth-child(1) { background-color: $color-c1; } - :nth-child(2) { background-color: $color-c2; } - :nth-child(3) { background-color: $color-c3; } - :nth-child(4) { background-color: $color-c4; } - :nth-child(5) { background-color: $color-c5; } - } - - .color-d { - :nth-child(1) { background-color: $color-d1; } - :nth-child(2) { background-color: $color-d2; } - :nth-child(3) { background-color: $color-d3; } - :nth-child(4) { background-color: $color-d4; } - :nth-child(5) { background-color: $color-d5; } - } - - .color-e { - :nth-child(1) { background-color: $color-e1; } - :nth-child(2) { background-color: $color-e2; } - :nth-child(3) { background-color: $color-e3; } - :nth-child(4) { background-color: $color-e4; } - :nth-child(5) { background-color: $color-e5; } - } -} +$yellow: rgba(255, 200, 87, 1); +$orange: rgba(233, 114, 76, 1); +$red: rgba(197, 40, 61, 1); +$blue: rgba(37, 95, 133, 1); +$dark-blue: rgba(24, 48, 89, 1); diff --git a/site/favicon.ico b/site/favicon.ico new file mode 100755 index 0000000..2a47582 Binary files /dev/null and b/site/favicon.ico differ diff --git a/site/pages/styleguide.hbs b/site/pages/styleguide.hbs index 27cd3e9..8e5072e 100644 --- a/site/pages/styleguide.hbs +++ b/site/pages/styleguide.hbs @@ -8,6 +8,13 @@

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Looking at styling for an h3

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+

Looking at styling for an h4

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Looking at styling for an h5
@@ -21,16 +28,23 @@

Colors

-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-

Misc elements

- +

Code Samples

function thing1(thing2) { var thing3 = 'some default value'; @@ -38,10 +52,3 @@ } -