joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

(Chore) Sass Variables: Prefix color variables with "$color-" / Add typography variables

Browse source
This commit is contained in:
0xfff 2016-09-26 02:37:19 +02:00
parent 92177218c3
commit bac1df746b
13 changed files with 159 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/scss/_buttons.scss
View file

@ -6,10 +6,9 @@
line-height: 30px; line-height: 30px;
height: 40px; height: 40px;
display: inline-block; display: inline-block;
font-family: $font-heading;
font-weight: 300; font-weight: 300;
background-color: $blue; background-color: $color-blue;
color: $white; color: $color-white;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13); box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13);
transition: all .2s ease; transition: all .2s ease;
&:hover { &:hover {
@ -25,33 +24,33 @@
.btn-white-solid { .btn-white-solid {
@extend .btn; @extend .btn;
border-color: $white; border-color: $color-white;
background-color: darken($white, 3); background-color: darken($color-white, 3);
margin-bottom: 10px; margin-bottom: 10px;
color: lighten($black, 5) !important; color: lighten($color-black, 5) !important;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: $white; background-color: $color-white;
} }
} }
.btn-green { .btn-green {
@extend .btn; @extend .btn;
background-color: $green; background-color: $color-green;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
color: $white !important; color: $color-white !important;
text-decoration: none; text-decoration: none;
border: none; border: none;
&:hover { &:hover {
background-color: darken($green, 3); background-color: darken($color-green, 3);
color: $white !important; color: $color-white !important;
} }
} }
.btn-blue { .btn-blue {
@extend .btn; @extend .btn;
background-color: $blue; background-color: $color-blue;
color: $white !important; color: $color-white !important;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
} }
@ -59,10 +58,10 @@
.btn-blue-solid { .btn-blue-solid {
@extend .btn; @extend .btn;
background-color: $blue; background-color: $color-blue;
color: $white !important; color: $color-white !important;
&:hover { &:hover {
background-color: lighten($blue, 3); background-color: lighten($color-blue, 3);
color: $white !important; color: $color-white !important;
} }
} }

34
src/scss/_colors.scss
View file

@ -1,19 +1,19 @@
// brand colors // brand colors
$black: #2f2f2f; $color-black: #2f2f2f;
$white: #ffffff; $color-white: #ffffff;
$blue: #1c75bc; $color-blue: #1c75bc;
// site colors // site colors
$red: #ec2227; $color-red: #ec2227;
$green: #1dd68a; $color-green: #1dd68a;
$gray: #f0f0f0; $color-gray: #f0f0f0;
$dark-blue: #0b3b5a; $color-blue-dark: #0b3b5a;
$gray-light: #f7f9fa; $color-gray-light: #f7f9fa;
// for the style guide: // for the style guide:
@function contrast-color($color, $dark, $light, $threshold: 50) { @function contrast-color($color, $dark, $light, $threshold: 50) {
@if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm @if (lightness(scale-color($color, $color-green: 30%, $color-blue: -6%, $color-red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
@return $dark; // Lighter background, return dark color @return $dark; // Lighter background, return dark color
} @else { } @else {
@return $light; // Darker background, return light color @return $light; // Darker background, return light color
@ -21,16 +21,16 @@ $gray-light: #f7f9fa;
} }
$color: $color:
('black', $black), ('black', $color-black),
('white', $white), ('white', $color-white),
('blue', $blue), ('blue', $color-blue),
('red', $red), ('red', $color-red),
('green', $green), ('green', $color-green),
('gray', $gray), ('gray', $color-gray),
('dark-blue', $dark-blue), ('dark-blue', $color-blue-dark),
('gray-light', $gray-light); ('gray-light', $color-gray-light);
@each $name, $bgcolor in $color { @each $name, $bgcolor in $color {
.color__tile--#{$name}-bg { .color__tile--#{$name}-bg {

2
src/scss/_footer.scss
View file

@ -22,7 +22,7 @@ footer
a { a {
color: $white; color: $color-white;
line-height: 1.7; line-height: 1.7;
} }

2
src/scss/_forms.scss
View file

@ -2,7 +2,7 @@ form {
input { input {
font-size: 15px; font-size: 15px;
padding: 10px 5px 10px 5px; padding: 10px 5px 10px 5px;
border: 2px solid $black; border: 2px solid $color-black;
box-sizing: border-box; box-sizing: border-box;
appearance: none; appearance: none;
} }

5
src/scss/_header.scss
View file

@ -1,12 +1,12 @@
#top { #top {
border-bottom: 1px solid rgba($white, 0.35); border-bottom: 1px solid rgba($color-white, 0.35);
margin-bottom: 20px; margin-bottom: 20px;
} }
.hero { .hero {
position: relative; position: relative;
min-height: 600px; min-height: 600px;
color: $white; color: $color-white;
&__title, &__lead, &__text { &__title, &__lead, &__text {
text-shadow: 2px 2px 5px rgba(black, 0.2); text-shadow: 2px 2px 5px rgba(black, 0.2);
@ -22,7 +22,6 @@
} }
&__lead { &__lead {
font-family: $font-heading;
font-weight: 200; font-weight: 200;
font-size: 24px; font-size: 24px;
line-height: 1.25; line-height: 1.25;

20
src/scss/_home.scss
View file

@ -9,7 +9,7 @@ $homeSectionPaddingTop: 40px;
text-align: center; text-align: center;
&:nth-child(2n) { &:nth-child(2n) {
background-color: $gray-light; background-color: $color-gray-light;
} }
.row { .row {
@ -69,7 +69,7 @@ $homeSectionPaddingTop: 40px;
.home-architecture-graphic { .home-architecture-graphic {
> img { > img {
max-width: 100%; max-width: 100%;
box-shadow: -5px 0 10px $black; box-shadow: -5px 0 10px $color-black;
border-radius: 8px 0 0 0; border-radius: 8px 0 0 0;
} }
} }
@ -102,7 +102,7 @@ $homeSectionPaddingTop: 40px;
width: 819px; width: 819px;
height: 339px; height: 339px;
max-width: 150%; max-width: 150%;
background: linear-gradient(to right, $gray-light, rgba($gray-light, 0.5) 33%, rgba($gray-light, 0) 75%); background: linear-gradient(to right, $color-gray-light, rgba($color-gray-light, 0.5) 33%, rgba($color-gray-light, 0) 75%);
} }
} }
} }
@ -122,13 +122,13 @@ $homeSectionPaddingTop: 40px;
top: -$homeSectionPaddingTop; top: -$homeSectionPaddingTop;
bottom: -$homeSectionPaddingTop; bottom: -$homeSectionPaddingTop;
width: 200%; width: 200%;
background: linear-gradient(to left, $white 50%, rgba($white, 0) 87.5%); background: linear-gradient(to left, $color-white 50%, rgba($color-white, 0) 87.5%);
} }
} }
} }
.home-get-started-cta { .home-get-started-cta {
background-color: $blue; background-color: $color-blue;
color: white; color: white;
padding-bottom: 0; padding-bottom: 0;
@ -142,7 +142,7 @@ $homeSectionPaddingTop: 40px;
} }
.btn-white-solid { .btn-white-solid {
color: $blue; color: $color-blue;
} }
} }
@ -171,8 +171,8 @@ $homeSectionPaddingTop: 40px;
} }
.news-post { .news-post {
background-color: $white; background-color: $color-white;
box-shadow: 0 1px 4px rgba($black, 0.25); box-shadow: 0 1px 4px rgba($color-black, 0.25);
margin: 20px 0; margin: 20px 0;
.news-image { .news-image {
position: relative; position: relative;
@ -208,11 +208,11 @@ $homeSectionPaddingTop: 40px;
} }
h3 { h3 {
font-size: 18px; font-size: 18px;
color: $blue; color: $color-blue;
line-height: 1.2; line-height: 1.2;
} }
.date { .date {
color: lighten($black, 50%); color: lighten($color-black, 50%);
font-size: 14px; font-size: 14px;
} }
p { p {

24
src/scss/_interior.scss
View file

@ -1,5 +1,5 @@
#title{ #title{
background-color: rgba($blue, .1); background-color: rgba($color-blue, .1);
margin-bottom: 40px; margin-bottom: 40px;
h1 { h1 {
padding-top: 60px; padding-top: 60px;
@ -41,7 +41,7 @@ iframe {
} }
} }
.divider { .divider {
border-top: 1px solid $gray; border-top: 1px solid $color-gray;
text-align: center; text-align: center;
img { img {
width: 40px; width: 40px;
@ -51,7 +51,7 @@ iframe {
} }
.boxed-content { .boxed-content {
border: 1px solid $blue; border: 1px solid $color-blue;
padding: 20px 40px 0px 30px; padding: 20px 40px 0px 30px;
margin-top: 20px; margin-top: 20px;
li { li {
@ -66,19 +66,19 @@ iframe {
} }
.downloads { .downloads {
border: 2px solid $gray; border: 2px solid $color-gray;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
h2 { h2 {
font-size: 16px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
color: $black; color: $color-black;
margin: 0px; margin: 0px;
} }
} }
.callout-blue { .callout-blue {
border: 2px solid $blue; border: 2px solid $color-blue;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
@ -86,10 +86,10 @@ iframe {
h2 { h2 {
font-size: 64px; font-size: 64px;
margin-bottom: 20px; margin-bottom: 20px;
color: $blue; color: $color-blue;
} }
span { span {
color: $blue; color: $color-blue;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
@ -99,7 +99,7 @@ iframe {
} }
.callout-green { .callout-green {
border: 2px solid $green; border: 2px solid $color-green;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
@ -107,10 +107,10 @@ iframe {
h2 { h2 {
font-size: 64px; font-size: 64px;
margin-bottom: 20px; margin-bottom: 20px;
color: $green; color: $color-green;
} }
span { span {
color: $green; color: $color-green;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
@ -136,7 +136,7 @@ iframe {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 50px; padding: 0 50px;
border-right: 2px solid $gray; border-right: 2px solid $color-gray;
img.icon { img.icon {
width: 25px; width: 25px;
height: auto; height: auto;

2
src/scss/_junk-drawer.scss
View file

@ -22,7 +22,7 @@ a.blog_link {
} }
.background-title { .background-title {
background-color: $gray; background-color: $color-gray;
padding: 10px; padding: 10px;
margin-top: 30px; margin-top: 30px;
margin-bottom: 0; margin-bottom: 0;

4
src/scss/_layout.scss
View file

@ -1,8 +1,8 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $black; color: $color-black;
background-color: $white; background-color: $color-white;
} }
.content { .content {

93
src/scss/_nav.scss
View file

@ -1,61 +1,62 @@
$nav-height: 90px; $nav-height: 90px;
.nav { .nav {
float: right; float: right;
text-align: right; text-align: right;
&__list { &__list {
list-style: none; list-style: none;
} }
&__item { &__item {
position: relative; position: relative;
display: inline-block; display: inline-block;
text-transform: uppercase; font-weight: 300;
font-size: 14px; letter-spacing: 0.02em;
letter-spacing: 0.02em; line-height: $nav-height;
line-height: $nav-height; &:last-child > .nav__link {
&:last-child > .nav__link { padding-right: 0;
padding-right: 0; }
}
&--languages { &--languages {
& > .nav__link { & > .nav__link {
padding: 0 25px; padding: 0 25px;
} }
} }
&:hover { &:hover {
.nav__sublist { .nav__sublist {
display: block; display: block;
opacity: 1; opacity: 1;
animation: fadein 0.4s; animation: fadein 0.4s;
} }
} }
} }
&__sublist { &__sublist {
display: none; display: none;
position: absolute; position: absolute;
top: 100%; top: 100%;
right: 0; right: 0;
padding-top: 10px; padding-top: 10px;
} }
&__subitem { &__subitem {
line-height: 45px; line-height: 45px;
} }
&__link { &__link {
display: inline-block; display: inline-block;
padding: 0 10px; padding: 0 10px;
text-decoration: none; &, &:hover, &:visited, &:focus, &:active {
color: rgba($white, 1); color: rgba($color-white, 1);
} text-decoration: none;
}
}
} }
@keyframes fadein { @keyframes fadein {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 1; } to { opacity: 1; }
} }

24
src/scss/_overlay-menu.scss
View file

@ -49,7 +49,7 @@
opacity: .7; opacity: .7;
} }
span { span {
background: $white; background: $color-white;
border: none; border: none;
height: 4px; height: 4px;
width: 100%; width: 100%;
@ -69,15 +69,15 @@
.button_container.active .top { .button_container.active .top {
transform: translateY(8px) translateX(0) rotate(45deg); transform: translateY(8px) translateX(0) rotate(45deg);
background: $white; background: $color-white;
} }
.button_container.active .middle { .button_container.active .middle {
opacity: 0; opacity: 0;
background: $white; background: $color-white;
} }
.button_container.active .bottom { .button_container.active .bottom {
transform: translateY(-8px) translateX(0) rotate(-45deg); transform: translateY(-8px) translateX(0) rotate(-45deg);
background: $white; background: $color-white;
} }
} }
@ -94,7 +94,7 @@
opacity: .7; opacity: .7;
} }
span { span {
background: $blue; background: $color-blue;
border: none; border: none;
height: 4px; height: 4px;
width: 100%; width: 100%;
@ -115,20 +115,20 @@
.button_container.active .top { .button_container.active .top {
transform: translateY(8px) translateX(0) rotate(45deg); transform: translateY(8px) translateX(0) rotate(45deg);
background: $blue; background: $color-blue;
} }
.button_container.active .middle { .button_container.active .middle {
opacity: 0; opacity: 0;
background: $blue; background: $color-blue;
} }
.button_container.active .bottom { .button_container.active .bottom {
transform: translateY(-8px) translateX(0) rotate(-45deg); transform: translateY(-8px) translateX(0) rotate(-45deg);
background: $blue; background: $color-blue;
} }
.overlay { .overlay {
position: fixed; position: fixed;
background: $black; background: $color-black;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -175,7 +175,7 @@
a { a {
display: block; display: block;
position: relative; position: relative;
color: $white; color: $color-white;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
padding-bottom: 15px; padding-bottom: 15px;
@ -189,10 +189,10 @@
.sign-up-btn { .sign-up-btn {
border: none; border: none;
padding: 30px; padding: 30px;
color: $green !important; color: $color-green !important;
&:hover { &:hover {
background: none !important; background: none !important;
color: $green !important; color: $color-green !important;
} }
} }
} }

4
src/scss/_styleguide.scss
View file

@ -27,13 +27,13 @@
.component { .component {
margin: 20px 0; margin: 20px 0;
box-shadow: 5px 5px 15px -5px $black; box-shadow: 5px 5px 15px -5px $color-black;
border-radius: 10px; border-radius: 10px;
} }
.component__header { .component__header {
padding: 20px; padding: 20px;
border-bottom: 1px solid lighten($black, 50%); border-bottom: 1px solid lighten($color-black, 50%);
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
} }

59
src/scss/_typography.scss
View file

@ -4,52 +4,65 @@
// @import "fonts/open-sans/italic"; // @import "fonts/open-sans/italic";
@import "fonts/montserrat/montserrat"; @import "fonts/montserrat/montserrat";
$font-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif; $font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
$font-heading: $font-body; $font-family-heading: $font-family-body;
$font-size-base: 17px;
$font-size-base-plus: 19px;
$font-size-medium: 24px;
$font-size-large: 30px;
$font-size-xlarge: 40px;
$font-size-xxlarge: 80px;
$line-height-base: 1.5;
$line-height-heading: 1.1;
$font-base-size: 17px;
body { body {
font-family: $font-body; font-family: $font-family-body;
font-size: ($font-base-size / 16px * 100%); font-size: ($font-size-base / 16px * 100%);
line-height: 1.5; line-height: $line-height-base;
font-weight: 300; font-weight: 300;
} }
p { a {
font-size: $font-base-size; color: $color-blue;
line-height: 1.5; text-decoration: none;
a { &:hover, &:focus {
color: $blue;
text-decoration: none; }
&:hover { &:active {
text-decoration: underline;
} }
&:visited {
color: $color-blue;
} }
} }
h1, h2, h3 { h1, h2, h3 {
font-family: $font-heading; font-family: $font-family-heading;
line-height: $line-height-heading;
font-weight: 300; font-weight: 300;
} }
h1 { h1 {
font-size: 36px; font-size: $font-size-xlarge;
line-height: 40px;
font-weight: 300; font-weight: 300;
} }
h2 { h2 {
font-size: 28px; font-size: $font-size-large;
color: $blue; color: $color-blue;
} }
h3 { h3 {
font-size: 20px; font-size: $font-size-medium;
color: $black; color: $color-black;
} }
a { a {
text-decoration: none; text-decoration: none;
color: $blue; color: $color-blue;
} }