sass version cleanup, added gulp task for sass build,
This commit is contained in:
David Miller
parent
cd2a02dfb2
commit
1ff088f84b
43
gulpfile.js
43
gulpfile.js
@ -1,6 +1,6 @@
|
||||
// Assigning modules to local variables
|
||||
var gulp = require('gulp');
|
||||
var less = require('gulp-less');
|
||||
var sass = require('gulp-sass');
|
||||
var browserSync = require('browser-sync').create();
|
||||
var header = require('gulp-header');
|
||||
var cleanCSS = require('gulp-clean-css');
|
||||
@ -17,10 +17,7 @@ var banner = ['/*!\n',
|
||||
''
|
||||
].join('');
|
||||
|
||||
// Default task
|
||||
gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
|
||||
|
||||
// Less task to compile the less files and add the banner
|
||||
// Compile LESS files from /less into /css
|
||||
gulp.task('less', function() {
|
||||
return gulp.src('less/agency.less')
|
||||
.pipe(less())
|
||||
@ -31,7 +28,7 @@ gulp.task('less', function() {
|
||||
}))
|
||||
});
|
||||
|
||||
// Minify CSS
|
||||
// Minify compiled CSS
|
||||
gulp.task('minify-css', ['less'], function() {
|
||||
return gulp.src('css/agency.css')
|
||||
.pipe(cleanCSS({ compatibility: 'ie8' }))
|
||||
@ -54,21 +51,15 @@ gulp.task('minify-js', function() {
|
||||
}))
|
||||
});
|
||||
|
||||
// Copy Bootstrap core files from node_modules to vendor directory
|
||||
gulp.task('bootstrap', function() {
|
||||
return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
|
||||
// Copy vendor libraries from /node_modules into /vendor
|
||||
gulp.task('copy', function() {
|
||||
gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
|
||||
.pipe(gulp.dest('vendor/bootstrap'))
|
||||
})
|
||||
|
||||
// Copy jQuery core files from node_modules to vendor directory
|
||||
gulp.task('jquery', function() {
|
||||
return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
|
||||
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
|
||||
.pipe(gulp.dest('vendor/jquery'))
|
||||
})
|
||||
|
||||
// Copy Font Awesome core files from node_modules to vendor directory
|
||||
gulp.task('fontawesome', function() {
|
||||
return gulp.src([
|
||||
gulp.src([
|
||||
'node_modules/font-awesome/**',
|
||||
'!node_modules/font-awesome/**/*.map',
|
||||
'!node_modules/font-awesome/.npmignore',
|
||||
@ -79,8 +70,8 @@ gulp.task('fontawesome', function() {
|
||||
.pipe(gulp.dest('vendor/font-awesome'))
|
||||
})
|
||||
|
||||
// Copy all third party dependencies from node_modules to vendor directory
|
||||
gulp.task('copy', ['bootstrap', 'jquery', 'fontawesome']);
|
||||
// Run everything
|
||||
gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
|
||||
|
||||
// Configure the browserSync task
|
||||
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
|
||||
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('css/*.css', ['minify-css']);
|
||||
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('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
|
||||
}))
|
||||
});
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"gulp-header": "^1.8.7",
|
||||
"gulp-less": "^3.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^2.3.2",
|
||||
"gulp-uglify": "^1.5.4",
|
||||
"jquery": "^1.11.3"
|
||||
},
|
||||
|
||||
@ -1,39 +1,53 @@
|
||||
// Mixins
|
||||
|
||||
// Bootstrap Button Variant
|
||||
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
@at-root {
|
||||
&.active,
|
||||
&:active,
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
.open .dropdown-toggle#{&} {
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 10%);
|
||||
border-color: darken($border, 25%);
|
||||
}
|
||||
&:hover {
|
||||
color: $color;
|
||||
background-color: darken($background, 10%);
|
||||
border-color: darken($border, 12%);
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] #{&} {
|
||||
&,
|
||||
&.active,
|
||||
&:active,
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:hover {
|
||||
&.focus {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $background;
|
||||
@ -41,7 +55,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Background Features
|
||||
// Background Cover Mixin
|
||||
|
||||
@mixin background-cover {
|
||||
-webkit-background-size: cover;
|
||||
@ -50,7 +64,7 @@
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
// Font Selections
|
||||
// Font Mixins
|
||||
|
||||
@mixin serif-font {
|
||||
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
// Variables
|
||||
|
||||
$brand-primary: #fed136;
|
||||
$brand-danger: #e74c3c;
|
||||
$gray-darkest: #222;
|
||||
$gray: #777;
|
||||
$gray-lighter: #f7f7f7;
|
||||
$placeholder-text: #bbbbbb;
|
||||
// Gray and Brand Colors for use across theme
|
||||
|
||||
$theme-primary: #fed136;
|
||||
$theme-danger: #e74c3c;
|
||||
|
||||
$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
|
||||
258
scss/agency.scss
258
scss/agency.scss
@ -1,5 +1,5 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import "variables.scss";
|
||||
@import "mixins.scss";
|
||||
|
||||
// Global Components
|
||||
|
||||
@ -9,11 +9,11 @@ body {
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $gray;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $brand-primary;
|
||||
color: $theme-primary;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -26,30 +26,25 @@ p.large {
|
||||
}
|
||||
|
||||
a,
|
||||
a.active,
|
||||
a:active,
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:hover {
|
||||
a:active,
|
||||
a.active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $brand-primary;
|
||||
color: $theme-primary;
|
||||
}
|
||||
|
||||
a.active,
|
||||
a:active,
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: darken($brand-primary, 10%);
|
||||
a:active,
|
||||
a.active {
|
||||
color: darken($theme-primary, 10%);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -63,19 +58,19 @@ h6 {
|
||||
}
|
||||
|
||||
.bg-darkest-gray {
|
||||
background-color: $gray-darkest;
|
||||
background-color: $gray-darker;
|
||||
}
|
||||
|
||||
// Restyled Primary Buttons
|
||||
|
||||
.btn-primary {
|
||||
@include button-variant(white, $brand-primary, $brand-primary);
|
||||
@include button-variant(white, $theme-primary, $theme-primary);
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
@include button-variant(white, $brand-primary, $brand-primary);
|
||||
@include button-variant(white, $theme-primary, $theme-primary);
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
border-radius: 3px;
|
||||
@ -85,40 +80,33 @@ h6 {
|
||||
|
||||
// Custom Navigation Bar
|
||||
|
||||
.navbar-default {
|
||||
background-color: $gray-darkest;
|
||||
.navbar-custom {
|
||||
background-color: $gray-darker;
|
||||
border-color: transparent;
|
||||
|
||||
.navbar-brand {
|
||||
color: $brand-primary;
|
||||
color: $theme-primary;
|
||||
@include script-font;
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($brand-primary, 10%);
|
||||
&.active {
|
||||
color: darken($theme-primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
border-color: fade(white, 2%);
|
||||
border-color: fade-out(white, .02);
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
|
||||
.icon-bar {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $brand-primary;
|
||||
background-color: $theme-primary;
|
||||
border-color: $theme-primary;
|
||||
@include heading-font;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $theme-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
li {
|
||||
a {
|
||||
@ -126,54 +114,52 @@ h6 {
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $brand-primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $theme-primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > .active > a {
|
||||
.navbar-nav>.active>a {
|
||||
border-radius: 0;
|
||||
color: white;
|
||||
background-color: $brand-primary;
|
||||
background-color: $theme-primary;
|
||||
}
|
||||
|
||||
.navbar-nav > .active > a:focus,
|
||||
.navbar-nav > .active > a:hover {
|
||||
.navbar-nav>.active>a:hover,
|
||||
.navbar-nav>.active>a:focus {
|
||||
color: white;
|
||||
background-color: darken($brand-primary, 10%);
|
||||
background-color: darken($theme-primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.navbar-default {
|
||||
.navbar-custom {
|
||||
background-color: transparent;
|
||||
padding: 25px 0;
|
||||
-webkit-transition: padding 0.3s;
|
||||
-moz-transition: padding 0.3s;
|
||||
transition: padding 0.3s;
|
||||
border: none;
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 2em;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.navbar-nav > .active > a {
|
||||
.navbar-nav>.active>a {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-default.navbar-shrink {
|
||||
background-color: $gray-darkest;
|
||||
// Navbar Change on Scroll
|
||||
|
||||
@media(min-width:768px) {
|
||||
.navbar-custom.affix {
|
||||
background-color: $gray-darker;
|
||||
padding: 10px 0;
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@ -182,17 +168,15 @@ h6 {
|
||||
|
||||
header {
|
||||
background-image: url('../img/header-bg.jpg');
|
||||
background-repeat: none;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
@include background-cover;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
||||
.intro-text {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.intro-lead-in {
|
||||
@include serif-font;
|
||||
font-style: italic;
|
||||
@ -200,7 +184,6 @@ header {
|
||||
line-height: 22px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.intro-heading {
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
@ -216,7 +199,6 @@ header {
|
||||
.intro-text {
|
||||
padding-top: 300px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.intro-lead-in {
|
||||
@include serif-font;
|
||||
font-style: italic;
|
||||
@ -224,7 +206,6 @@ header {
|
||||
line-height: 40px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.intro-heading {
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
@ -240,13 +221,11 @@ header {
|
||||
|
||||
section {
|
||||
padding: 100px 0;
|
||||
|
||||
h2.section-heading {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3.section-subheading {
|
||||
font-size: 16px;
|
||||
@include serif-font;
|
||||
@ -276,15 +255,13 @@ section {
|
||||
.portfolio-item {
|
||||
margin: 0 0 15px;
|
||||
right: 0;
|
||||
|
||||
.portfolio-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
.portfolio-hover {
|
||||
background: fade($brand-primary, 90%);
|
||||
background: fade-out($theme-primary, .9);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -292,11 +269,9 @@ section {
|
||||
transition: all ease 0.5s;
|
||||
-webkit-transition: all ease 0.5s;
|
||||
-moz-transition: all ease 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portfolio-hover-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -306,11 +281,9 @@ section {
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
color: white;
|
||||
|
||||
i {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
@ -318,19 +291,16 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio-caption {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
|
||||
h4 {
|
||||
text-transform: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include serif-font;
|
||||
font-style: italic;
|
||||
@ -339,7 +309,6 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
z-index: 2;
|
||||
}
|
||||
@ -359,7 +328,6 @@ section {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -370,36 +338,30 @@ section {
|
||||
left: 40px;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
|
||||
> li {
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline-panel {
|
||||
width: 100%;
|
||||
float: right;
|
||||
padding: 0 20px 0 100px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 15px;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
@ -407,7 +369,6 @@ section {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-image {
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
@ -415,31 +376,27 @@ section {
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: $brand-primary;
|
||||
background-color: $theme-primary;
|
||||
color: white;
|
||||
border-radius: 100%;
|
||||
border: 7px solid #f1f1f1;
|
||||
text-align: center;
|
||||
|
||||
h4 {
|
||||
font-size: 10px;
|
||||
margin-top: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-inverted > .timeline-panel {
|
||||
float: right;
|
||||
text-align: left;
|
||||
padding: 0 20px 0 100px;
|
||||
|
||||
&:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 15px;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
@ -447,23 +404,19 @@ section {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-heading {
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
|
||||
&.subheading {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-body {
|
||||
> p,
|
||||
> ul {
|
||||
@ -477,31 +430,26 @@ section {
|
||||
&:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
> li {
|
||||
margin-bottom: 100px;
|
||||
min-height: 100px;
|
||||
|
||||
.timeline-panel {
|
||||
width: 41%;
|
||||
float: left;
|
||||
padding: 0 20px 20px 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.timeline-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
|
||||
h4 {
|
||||
font-size: 13px;
|
||||
margin-top: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-inverted > .timeline-panel {
|
||||
float: right;
|
||||
text-align: left;
|
||||
@ -515,23 +463,19 @@ section {
|
||||
.timeline {
|
||||
> li {
|
||||
min-height: 150px;
|
||||
|
||||
.timeline-panel {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.timeline-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-left: -75px;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-inverted > .timeline-panel {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
@ -543,21 +487,17 @@ section {
|
||||
.timeline {
|
||||
> li {
|
||||
min-height: 170px;
|
||||
|
||||
.timeline-panel {
|
||||
padding: 0 20px 20px 100px;
|
||||
}
|
||||
|
||||
.timeline-image {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin-left: -85px;
|
||||
|
||||
h4 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-inverted > .timeline-panel {
|
||||
padding: 0 100px 20px 20px;
|
||||
}
|
||||
@ -570,18 +510,15 @@ section {
|
||||
.team-member {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
border: 7px solid white;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -598,65 +535,52 @@ aside.clients {
|
||||
// Contact Section
|
||||
|
||||
section#contact {
|
||||
background-color: $gray-darkest;
|
||||
background-color: $gray-darker;
|
||||
background-image: url('../img/map-image.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.section-heading {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
height: 236px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: $brand-primary;
|
||||
border-color: $theme-primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
color: $placeholder-text;
|
||||
color: $gray-lighter;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
color: $placeholder-text;
|
||||
color: $gray-lighter;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
color: $placeholder-text;
|
||||
color: $gray-lighter;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
color: $placeholder-text;
|
||||
color: $gray-lighter;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: $brand-danger;
|
||||
color: $theme-danger;
|
||||
}
|
||||
}
|
||||
|
||||
@ -665,13 +589,11 @@ section#contact {
|
||||
footer {
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
|
||||
span.copyright {
|
||||
line-height: 40px;
|
||||
@include heading-font;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ul.quicklinks {
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
@ -684,11 +606,10 @@ footer {
|
||||
|
||||
ul.social-buttons {
|
||||
margin-bottom: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
background-color: $gray-darkest;
|
||||
background-color: $gray-darker;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 100%;
|
||||
@ -699,20 +620,19 @@ ul.social-buttons {
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $brand-primary;
|
||||
&:active {
|
||||
background-color: $theme-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.active,
|
||||
.btn:focus,
|
||||
.btn:active,
|
||||
.btn:active:focus,
|
||||
.btn:focus {
|
||||
.btn.active,
|
||||
.btn:active:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -731,72 +651,62 @@ ul.social-buttons {
|
||||
min-height: 100%;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p.item-intro {
|
||||
margin: 20px 0 30px;
|
||||
@include serif-font;
|
||||
font-style: italic;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul.list-inline {
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background-color: transparent;
|
||||
width:75px;
|
||||
height:75px;
|
||||
background-color:transparent;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.lr {
|
||||
height: 75px;
|
||||
width: 1px;
|
||||
margin-left: 35px;
|
||||
background-color: $gray-darkest;
|
||||
height:75px;
|
||||
width:1px;
|
||||
margin-left:35px;
|
||||
background-color:$gray-darker;
|
||||
transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate(45deg);
|
||||
/* Safari and Chrome */
|
||||
z-index: 1051;
|
||||
|
||||
z-index:1051;
|
||||
.rl {
|
||||
height: 75px;
|
||||
width: 1px;
|
||||
background-color: $gray-darkest;
|
||||
height:75px;
|
||||
width:1px;
|
||||
background-color:$gray-darker;
|
||||
transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate(90deg);
|
||||
/* Safari and Chrome */
|
||||
z-index: 1052;
|
||||
z-index:1052;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
@ -807,12 +717,12 @@ ul.social-buttons {
|
||||
|
||||
::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: $brand-primary;
|
||||
background: $theme-primary;
|
||||
}
|
||||
|
||||
::selection {
|
||||
text-shadow: none;
|
||||
background: $brand-primary;
|
||||
background: $theme-primary;
|
||||
}
|
||||
|
||||
img::selection {
|
||||
@ -824,5 +734,5 @@ img::-moz-selection {
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: $brand-primary;
|
||||
webkit-tap-highlight-color: $theme-primary;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user