rdd.ro/nunta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sass version cleanup, added gulp task for sass build,

Browse Source
This commit is contained in:
David Miller 2016-08-19 15:48:30 -04:00
parent cd2a02dfb2
commit 1ff088f84b
6 changed files with 641 additions and 708 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
gulpfile.js
View File

@ -1,6 +1,6 @@
// Assigning modules to local variables
var gulp = require('gulp'); var gulp = require('gulp');
var less = require('gulp-less'); var less = require('gulp-less');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create(); var browserSync = require('browser-sync').create();
var header = require('gulp-header'); var header = require('gulp-header');
var cleanCSS = require('gulp-clean-css'); var cleanCSS = require('gulp-clean-css');
@ -17,10 +17,7 @@ var banner = ['/*!\n',
'' ''
].join(''); ].join('');
// Default task // Compile LESS files from /less into /css
gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
// Less task to compile the less files and add the banner
gulp.task('less', function() { gulp.task('less', function() {
return gulp.src('less/agency.less') return gulp.src('less/agency.less')
.pipe(less()) .pipe(less())
@ -31,7 +28,7 @@ gulp.task('less', function() {
})) }))
}); });
// Minify CSS // Minify compiled CSS
gulp.task('minify-css', ['less'], function() { gulp.task('minify-css', ['less'], function() {
return gulp.src('css/agency.css') return gulp.src('css/agency.css')
.pipe(cleanCSS({ compatibility: 'ie8' })) .pipe(cleanCSS({ compatibility: 'ie8' }))
@ -54,21 +51,15 @@ gulp.task('minify-js', function() {
})) }))
}); });
// Copy Bootstrap core files from node_modules to vendor directory // Copy vendor libraries from /node_modules into /vendor
gulp.task('bootstrap', function() { gulp.task('copy', function() {
return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map']) gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
.pipe(gulp.dest('vendor/bootstrap')) .pipe(gulp.dest('vendor/bootstrap'))
})
// Copy jQuery core files from node_modules to vendor directory gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
gulp.task('jquery', function() {
return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery')) .pipe(gulp.dest('vendor/jquery'))
})
// Copy Font Awesome core files from node_modules to vendor directory gulp.src([
gulp.task('fontawesome', function() {
return gulp.src([
'node_modules/font-awesome/**', 'node_modules/font-awesome/**',
'!node_modules/font-awesome/**/*.map', '!node_modules/font-awesome/**/*.map',
'!node_modules/font-awesome/.npmignore', '!node_modules/font-awesome/.npmignore',
@ -79,8 +70,8 @@ gulp.task('fontawesome', function() {
.pipe(gulp.dest('vendor/font-awesome')) .pipe(gulp.dest('vendor/font-awesome'))
}) })
// Copy all third party dependencies from node_modules to vendor directory // Run everything
gulp.task('copy', ['bootstrap', 'jquery', 'fontawesome']); gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
// Configure the browserSync task // Configure the browserSync task
gulp.task('browserSync', function() { gulp.task('browserSync', function() {
@ -92,7 +83,7 @@ gulp.task('browserSync', function() {
}) })
// Watch Task that compiles LESS and watches for HTML or JS changes and reloads with browserSync // Watch Task that compiles LESS and watches for HTML or JS changes and reloads with browserSync
gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function() { gulp.task('watch', ['browserSync', 'less', 'minify-css', 'minify-js'], function() {
gulp.watch('less/*.less', ['less']); gulp.watch('less/*.less', ['less']);
gulp.watch('css/*.css', ['minify-css']); gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['minify-js']); gulp.watch('js/*.js', ['minify-js']);
@ -100,3 +91,15 @@ gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function()
gulp.watch('*.html', browserSync.reload); gulp.watch('*.html', browserSync.reload);
gulp.watch('js/**/*.js', browserSync.reload); gulp.watch('js/**/*.js', browserSync.reload);
}); });
// Compiles SCSS files from /scss into /css
// NOTE: This theme uses LESS by default. To swtich to SCSS you will need to update this gulpfile by changing the 'less' tasks to run 'sass'!
gulp.task('sass', function() {
return gulp.src('scss/agency.scss')
.pipe(sass())
.pipe(header(banner, { pkg: pkg }))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});

1
package.json
View File

@ -17,6 +17,7 @@
"gulp-header": "^1.8.7", "gulp-header": "^1.8.7",
"gulp-less": "^3.1.0", "gulp-less": "^3.1.0",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^1.5.4", "gulp-uglify": "^1.5.4",
"jquery": "^1.11.3" "jquery": "^1.11.3"
}, },

48
scss/_mixins.scss
View File

@ -1,39 +1,53 @@
// Mixins
// Bootstrap Button Variant // Bootstrap Button Variant
@mixin button-variant($color, $background, $border) { @mixin button-variant($color, $background, $border) {
color: $color; color: $color;
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
@at-root {
&.active,
&:active,
&:focus, &:focus,
&:hover, &.focus {
.open .dropdown-toggle#{&} { color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 25%);
}
&:hover {
color: $color; color: $color;
background-color: darken($background, 10%); background-color: darken($background, 10%);
border-color: darken($border, 12%); border-color: darken($border, 12%);
} }
&.active,
&:active, &:active,
.open .dropdown-toggle#{&} { &.active,
.open > &.dropdown-toggle {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
&:hover,
&:focus,
&.focus {
color: $color;
background-color: darken($background, 17%);
border-color: darken($border, 25%);
}
}
&:active,
&.active,
.open > &.dropdown-toggle {
background-image: none; background-image: none;
} }
&.disabled, &.disabled,
&[disabled], &[disabled],
fieldset[disabled] #{&} { fieldset[disabled] & {
&, &:hover,
&.active,
&:active,
&:focus, &:focus,
&:hover { &.focus {
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
} }
} }
}
.badge { .badge {
color: $background; color: $background;
@ -41,7 +55,7 @@
} }
} }
// Background Features // Background Cover Mixin
@mixin background-cover { @mixin background-cover {
-webkit-background-size: cover; -webkit-background-size: cover;
@ -50,7 +64,7 @@
-o-background-size: cover; -o-background-size: cover;
} }
// Font Selections // Font Mixins
@mixin serif-font { @mixin serif-font {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;

17
scss/_variables.scss
View File

@ -1,8 +1,13 @@
// Variables // Variables
$brand-primary: #fed136; // Gray and Brand Colors for use across theme
$brand-danger: #e74c3c;
$gray-darkest: #222; $theme-primary: #fed136;
$gray: #777; $theme-danger: #e74c3c;
$gray-lighter: #f7f7f7;
$placeholder-text: #bbbbbb; $gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee

234
scss/agency.scss
View File

@ -1,5 +1,5 @@
@import 'variables'; @import "variables.scss";
@import 'mixins'; @import "mixins.scss";
// Global Components // Global Components
@ -9,11 +9,11 @@ body {
} }
.text-muted { .text-muted {
color: $gray; color: $gray-light;
} }
.text-primary { .text-primary {
color: $brand-primary; color: $theme-primary;
} }
p { p {
@ -26,30 +26,25 @@ p.large {
} }
a, a,
a.active, a:hover,
a:active,
a:focus, a:focus,
a:hover { a:active,
a.active {
outline: none; outline: none;
} }
a { a {
color: $brand-primary; color: $theme-primary;
} }
a.active, a:hover,
a:active,
a:focus, a:focus,
a:hover { a:active,
color: darken($brand-primary, 10%); a.active {
color: darken($theme-primary, 10%);
} }
h1, h1, h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
} }
@ -63,19 +58,19 @@ h6 {
} }
.bg-darkest-gray { .bg-darkest-gray {
background-color: $gray-darkest; background-color: $gray-darker;
} }
// Restyled Primary Buttons // Restyled Primary Buttons
.btn-primary { .btn-primary {
@include button-variant(white, $brand-primary, $brand-primary); @include button-variant(white, $theme-primary, $theme-primary);
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
} }
.btn-xl { .btn-xl {
@include button-variant(white, $brand-primary, $brand-primary); @include button-variant(white, $theme-primary, $theme-primary);
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
border-radius: 3px; border-radius: 3px;
@ -85,40 +80,33 @@ h6 {
// Custom Navigation Bar // Custom Navigation Bar
.navbar-default { .navbar-custom {
background-color: $gray-darkest; background-color: $gray-darker;
border-color: transparent; border-color: transparent;
.navbar-brand { .navbar-brand {
color: $brand-primary; color: $theme-primary;
@include script-font; @include script-font;
&:hover,
&.active, &:focus,
&:active, &:active,
&:focus, &.active {
&:hover { color: darken($theme-primary, 10%);
color: darken($brand-primary, 10%);
} }
} }
.navbar-collapse { .navbar-collapse {
border-color: fade(white, 2%); border-color: fade-out(white, .02);
} }
.navbar-toggle { .navbar-toggle {
background-color: $brand-primary; background-color: $theme-primary;
border-color: $brand-primary; border-color: $theme-primary;
@include heading-font;
.icon-bar { color: white;
background-color: white; font-size: 12px;
} &:hover,
&:focus {
&:focus, background-color: $theme-primary;
&:hover {
background-color: $brand-primary;
} }
} }
.nav { .nav {
li { li {
a { a {
@ -126,54 +114,52 @@ h6 {
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
color: white; color: white;
&:hover,
&:focus, &:focus {
&:hover { color: $theme-primary;
color: $brand-primary;
outline: none; outline: none;
} }
} }
} }
} }
.navbar-nav>.active>a { .navbar-nav>.active>a {
border-radius: 0; border-radius: 0;
color: white; color: white;
background-color: $brand-primary; background-color: $theme-primary;
} }
.navbar-nav>.active>a:hover,
.navbar-nav > .active > a:focus, .navbar-nav>.active>a:focus {
.navbar-nav > .active > a:hover {
color: white; color: white;
background-color: darken($brand-primary, 10%); background-color: darken($theme-primary, 10%);
} }
} }
@media(min-width:768px) { @media(min-width:768px) {
.navbar-default { .navbar-custom {
background-color: transparent; background-color: transparent;
padding: 25px 0; padding: 25px 0;
-webkit-transition: padding 0.3s; -webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s; -moz-transition: padding 0.3s;
transition: padding 0.3s; transition: padding 0.3s;
border: none; border: none;
.navbar-brand { .navbar-brand {
font-size: 2em; font-size: 2em;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
} }
.navbar-nav>.active>a { .navbar-nav>.active>a {
border-radius: 3px; border-radius: 3px;
} }
} }
}
.navbar-default.navbar-shrink { // Navbar Change on Scroll
background-color: $gray-darkest;
@media(min-width:768px) {
.navbar-custom.affix {
background-color: $gray-darker;
padding: 10px 0; padding: 10px 0;
.navbar-brand { .navbar-brand {
font-size: 1.5em; font-size: 1.5em;
} }
@ -182,17 +168,15 @@ h6 {
header { header {
background-image: url('../img/header-bg.jpg'); background-image: url('../img/header-bg.jpg');
background-repeat: none; background-repeat: no-repeat;
background-attachment: scroll; background-attachment: scroll;
background-position: center center; background-position: center center;
@include background-cover; @include background-cover;
text-align: center; text-align: center;
color: white; color: white;
.intro-text { .intro-text {
padding-top: 100px; padding-top: 100px;
padding-bottom: 50px; padding-bottom: 50px;
.intro-lead-in { .intro-lead-in {
@include serif-font; @include serif-font;
font-style: italic; font-style: italic;
@ -200,7 +184,6 @@ header {
line-height: 22px; line-height: 22px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.intro-heading { .intro-heading {
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
@ -216,7 +199,6 @@ header {
.intro-text { .intro-text {
padding-top: 300px; padding-top: 300px;
padding-bottom: 200px; padding-bottom: 200px;
.intro-lead-in { .intro-lead-in {
@include serif-font; @include serif-font;
font-style: italic; font-style: italic;
@ -224,7 +206,6 @@ header {
line-height: 40px; line-height: 40px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.intro-heading { .intro-heading {
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
@ -240,13 +221,11 @@ header {
section { section {
padding: 100px 0; padding: 100px 0;
h2.section-heading { h2.section-heading {
font-size: 40px; font-size: 40px;
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
h3.section-subheading { h3.section-subheading {
font-size: 16px; font-size: 16px;
@include serif-font; @include serif-font;
@ -276,15 +255,13 @@ section {
.portfolio-item { .portfolio-item {
margin: 0 0 15px; margin: 0 0 15px;
right: 0; right: 0;
.portfolio-link { .portfolio-link {
display: block; display: block;
position: relative; position: relative;
max-width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;
.portfolio-hover { .portfolio-hover {
background: fade($brand-primary, 90%); background: fade-out($theme-primary, .9);
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -292,11 +269,9 @@ section {
transition: all ease 0.5s; transition: all ease 0.5s;
-webkit-transition: all ease 0.5s; -webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s; -moz-transition: all ease 0.5s;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
.portfolio-hover-content { .portfolio-hover-content {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -306,11 +281,9 @@ section {
top: 50%; top: 50%;
margin-top: -12px; margin-top: -12px;
color: white; color: white;
i { i {
margin-top: -12px; margin-top: -12px;
} }
h3, h3,
h4 { h4 {
margin: 0; margin: 0;
@ -318,19 +291,16 @@ section {
} }
} }
} }
.portfolio-caption { .portfolio-caption {
max-width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
text-align: center; text-align: center;
padding: 25px; padding: 25px;
h4 { h4 {
text-transform: none; text-transform: none;
margin: 0; margin: 0;
} }
p { p {
@include serif-font; @include serif-font;
font-style: italic; font-style: italic;
@ -339,7 +309,6 @@ section {
} }
} }
} }
* { * {
z-index: 2; z-index: 2;
} }
@ -359,7 +328,6 @@ section {
list-style: none; list-style: none;
padding: 0; padding: 0;
position: relative; position: relative;
&:before { &:before {
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -370,36 +338,30 @@ section {
left: 40px; left: 40px;
margin-left: -1.5px; margin-left: -1.5px;
} }
> li { > li {
margin-bottom: 50px; margin-bottom: 50px;
position: relative; position: relative;
min-height: 50px; min-height: 50px;
&:before,
&:after, &:after {
&:before {
content: " "; content: " ";
display: table; display: table;
} }
&:after { &:after {
clear: both; clear: both;
} }
.timeline-panel { .timeline-panel {
width: 100%; width: 100%;
float: right; float: right;
padding: 0 20px 0 100px; padding: 0 20px 0 100px;
position: relative; position: relative;
text-align: left; text-align: left;
&:before { &:before {
border-left-width: 0; border-left-width: 0;
border-right-width: 15px; border-right-width: 15px;
left: -15px; left: -15px;
right: auto; right: auto;
} }
&:after { &:after {
border-left-width: 0; border-left-width: 0;
border-right-width: 14px; border-right-width: 14px;
@ -407,7 +369,6 @@ section {
right: auto; right: auto;
} }
} }
.timeline-image { .timeline-image {
left: 0; left: 0;
margin-left: 0; margin-left: 0;
@ -415,31 +376,27 @@ section {
height: 80px; height: 80px;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
background-color: $brand-primary; background-color: $theme-primary;
color: white; color: white;
border-radius: 100%; border-radius: 100%;
border: 7px solid #f1f1f1; border: 7px solid #f1f1f1;
text-align: center; text-align: center;
h4 { h4 {
font-size: 10px; font-size: 10px;
margin-top: 12px; margin-top: 12px;
line-height: 14px; line-height: 14px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
float: right; float: right;
text-align: left; text-align: left;
padding: 0 20px 0 100px; padding: 0 20px 0 100px;
&:before { &:before {
border-left-width: 0; border-left-width: 0;
border-right-width: 15px; border-right-width: 15px;
left: -15px; left: -15px;
right: auto; right: auto;
} }
&:after { &:after {
border-left-width: 0; border-left-width: 0;
border-right-width: 14px; border-right-width: 14px;
@ -447,23 +404,19 @@ section {
right: auto; right: auto;
} }
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.timeline-heading { .timeline-heading {
h4 { h4 {
margin-top: 0; margin-top: 0;
color: inherit; color: inherit;
&.subheading { &.subheading {
text-transform: none; text-transform: none;
} }
} }
} }
.timeline-body { .timeline-body {
> p, > p,
> ul { > ul {
@ -477,31 +430,26 @@ section {
&:before { &:before {
left: 50%; left: 50%;
} }
> li { > li {
margin-bottom: 100px; margin-bottom: 100px;
min-height: 100px; min-height: 100px;
.timeline-panel { .timeline-panel {
width: 41%; width: 41%;
float: left; float: left;
padding: 0 20px 20px 30px; padding: 0 20px 20px 30px;
text-align: right; text-align: right;
} }
.timeline-image { .timeline-image {
width: 100px; width: 100px;
height: 100px; height: 100px;
left: 50%; left: 50%;
margin-left: -50px; margin-left: -50px;
h4 { h4 {
font-size: 13px; font-size: 13px;
margin-top: 16px; margin-top: 16px;
line-height: 18px; line-height: 18px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
float: right; float: right;
text-align: left; text-align: left;
@ -515,23 +463,19 @@ section {
.timeline { .timeline {
> li { > li {
min-height: 150px; min-height: 150px;
.timeline-panel { .timeline-panel {
padding: 0 20px 20px; padding: 0 20px 20px;
} }
.timeline-image { .timeline-image {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin-left: -75px; margin-left: -75px;
h4 { h4 {
font-size: 18px; font-size: 18px;
margin-top: 30px; margin-top: 30px;
line-height: 26px; line-height: 26px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
padding: 0 20px 20px; padding: 0 20px 20px;
} }
@ -543,21 +487,17 @@ section {
.timeline { .timeline {
> li { > li {
min-height: 170px; min-height: 170px;
.timeline-panel { .timeline-panel {
padding: 0 20px 20px 100px; padding: 0 20px 20px 100px;
} }
.timeline-image { .timeline-image {
width: 170px; width: 170px;
height: 170px; height: 170px;
margin-left: -85px; margin-left: -85px;
h4 { h4 {
margin-top: 40px; margin-top: 40px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
padding: 0 100px 20px 20px; padding: 0 100px 20px 20px;
} }
@ -570,18 +510,15 @@ section {
.team-member { .team-member {
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
img { img {
margin: 0 auto; margin: 0 auto;
border: 7px solid white; border: 7px solid white;
} }
h4 { h4 {
margin-top: 25px; margin-top: 25px;
margin-bottom: 0; margin-bottom: 0;
text-transform: none; text-transform: none;
} }
p { p {
margin-top: 0; margin-top: 0;
} }
@ -598,65 +535,52 @@ aside.clients {
// Contact Section // Contact Section
section#contact { section#contact {
background-color: $gray-darkest; background-color: $gray-darker;
background-image: url('../img/map-image.png'); background-image: url('../img/map-image.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
.section-heading { .section-heading {
color: white; color: white;
} }
.form-group { .form-group {
margin-bottom: 25px; margin-bottom: 25px;
input, input,
textarea { textarea {
padding: 20px; padding: 20px;
} }
input.form-control { input.form-control {
height: auto; height: auto;
} }
textarea.form-control { textarea.form-control {
height: 236px; height: 236px;
} }
} }
.form-control:focus { .form-control:focus {
border-color: $brand-primary; border-color: $theme-primary;
box-shadow: none; box-shadow: none;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
color: $placeholder-text; color: $gray-lighter;
} }
:-moz-placeholder { /* Firefox 18- */
:-moz-placeholder {
/* Firefox 18- */
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
color: $placeholder-text; color: $gray-lighter;
} }
::-moz-placeholder { /* Firefox 19+ */
::-moz-placeholder {
/* Firefox 19+ */
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
color: $placeholder-text; color: $gray-lighter;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
@include heading-font; @include heading-font;
font-weight: 700; font-weight: 700;
color: $placeholder-text; color: $gray-lighter;
} }
.text-danger { .text-danger {
color: $brand-danger; color: $theme-danger;
} }
} }
@ -665,13 +589,11 @@ section#contact {
footer { footer {
padding: 25px 0; padding: 25px 0;
text-align: center; text-align: center;
span.copyright { span.copyright {
line-height: 40px; line-height: 40px;
@include heading-font; @include heading-font;
text-transform: none; text-transform: none;
} }
ul.quicklinks { ul.quicklinks {
margin-bottom: 0; margin-bottom: 0;
line-height: 40px; line-height: 40px;
@ -684,11 +606,10 @@ footer {
ul.social-buttons { ul.social-buttons {
margin-bottom: 0; margin-bottom: 0;
li { li {
a { a {
display: block; display: block;
background-color: $gray-darkest; background-color: $gray-darker;
height: 40px; height: 40px;
width: 40px; width: 40px;
border-radius: 100%; border-radius: 100%;
@ -699,20 +620,19 @@ ul.social-buttons {
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
&:hover,
&:active,
&:focus, &:focus,
&:hover { &:active {
background-color: $brand-primary; background-color: $theme-primary;
} }
} }
} }
} }
.btn.active, .btn:focus,
.btn:active, .btn:active,
.btn:active:focus, .btn.active,
.btn:focus { .btn:active:focus {
outline: none; outline: none;
} }
@ -731,33 +651,27 @@ ul.social-buttons {
min-height: 100%; min-height: 100%;
padding: 100px 0; padding: 100px 0;
text-align: center; text-align: center;
h2 { h2 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 3em; font-size: 3em;
} }
p { p {
margin-bottom: 30px; margin-bottom: 30px;
} }
p.item-intro { p.item-intro {
margin: 20px 0 30px; margin: 20px 0 30px;
@include serif-font; @include serif-font;
font-style: italic; font-style: italic;
font-size: 16px; font-size: 16px;
} }
ul.list-inline { ul.list-inline {
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 0; margin-top: 0;
} }
img { img {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.close-modal { .close-modal {
position: absolute; position: absolute;
width:75px; width:75px;
@ -766,27 +680,24 @@ ul.social-buttons {
top: 25px; top: 25px;
right: 25px; right: 25px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.3; opacity: 0.3;
} }
.lr { .lr {
height:75px; height:75px;
width:1px; width:1px;
margin-left:35px; margin-left:35px;
background-color: $gray-darkest; background-color:$gray-darker;
transform: rotate(45deg); transform: rotate(45deg);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
/* IE 9 */ /* IE 9 */
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
/* Safari and Chrome */ /* Safari and Chrome */
z-index:1051; z-index:1051;
.rl { .rl {
height:75px; height:75px;
width:1px; width:1px;
background-color: $gray-darkest; background-color:$gray-darker;
transform: rotate(90deg); transform: rotate(90deg);
-ms-transform: rotate(90deg); -ms-transform: rotate(90deg);
/* IE 9 */ /* IE 9 */
@ -796,7 +707,6 @@ ul.social-buttons {
} }
} }
} }
.modal-backdrop { .modal-backdrop {
opacity: 0; opacity: 0;
display: none; display: none;
@ -807,12 +717,12 @@ ul.social-buttons {
::-moz-selection { ::-moz-selection {
text-shadow: none; text-shadow: none;
background: $brand-primary; background: $theme-primary;
} }
::selection { ::selection {
text-shadow: none; text-shadow: none;
background: $brand-primary; background: $theme-primary;
} }
img::selection { img::selection {
@ -824,5 +734,5 @@ img::-moz-selection {
} }
body { body {
-webkit-tap-highlight-color: $brand-primary; webkit-tap-highlight-color: $theme-primary;
} }