| @@ -0,0 +1,314 @@ | ||
| /*! | ||
| * Start Bootstrap - Grayscale v3.3.7+1 (http://startbootstrap.com/template-overviews/grayscale) | ||
| * Copyright 2013-2016 Start Bootstrap | ||
| * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) | ||
| */ | ||
| body { | ||
| width: 100%; | ||
| height: 100%; | ||
| font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| color: white; | ||
| background-color: black; | ||
| } | ||
| html { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| margin: 0 0 35px; | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-weight: 700; | ||
| letter-spacing: 1px; | ||
| } | ||
| p { | ||
| margin: 0 0 25px; | ||
| font-size: 18px; | ||
| line-height: 1.5; | ||
| } | ||
| @media (min-width: 768px) { | ||
| p { | ||
| margin: 0 0 35px; | ||
| font-size: 20px; | ||
| line-height: 1.6; | ||
| } | ||
| } | ||
| a { | ||
| color: #42DCA3; | ||
| -webkit-transition: all 0.2s ease-in-out; | ||
| -moz-transition: all 0.2s ease-in-out; | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
| a:hover, | ||
| a:focus { | ||
| text-decoration: none; | ||
| color: #1d9b6c; | ||
| } | ||
| .light { | ||
| font-weight: 400; | ||
| } | ||
| .navbar-custom { | ||
| margin-bottom: 0; | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.3); | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| background-color: black; | ||
| } | ||
| .navbar-custom .navbar-toggle { | ||
| color: white; | ||
| background-color: rgba(255, 255, 255, 0.2); | ||
| font-size: 12px; | ||
| } | ||
| .navbar-custom .navbar-toggle:focus, | ||
| .navbar-custom .navbar-toggle:active { | ||
| outline: none; | ||
| } | ||
| .navbar-custom .navbar-brand { | ||
| font-weight: 700; | ||
| } | ||
| .navbar-custom .navbar-brand:focus { | ||
| outline: none; | ||
| } | ||
| .navbar-custom a { | ||
| color: white; | ||
| } | ||
| .navbar-custom .nav li a { | ||
| -webkit-transition: background 0.3s ease-in-out; | ||
| -moz-transition: background 0.3s ease-in-out; | ||
| transition: background 0.3s ease-in-out; | ||
| } | ||
| .navbar-custom .nav li a:hover { | ||
| color: rgba(255, 255, 255, 0.8); | ||
| outline: none; | ||
| background-color: transparent; | ||
| } | ||
| .navbar-custom .nav li a:focus, | ||
| .navbar-custom .nav li a:active { | ||
| outline: none; | ||
| background-color: transparent; | ||
| } | ||
| .navbar-custom .nav li.active { | ||
| outline: none; | ||
| } | ||
| .navbar-custom .nav li.active a { | ||
| background-color: rgba(255, 255, 255, 0.3); | ||
| } | ||
| .navbar-custom .nav li.active a:hover { | ||
| color: white; | ||
| } | ||
| @media (min-width: 768px) { | ||
| .navbar-custom { | ||
| padding: 20px 0; | ||
| border-bottom: none; | ||
| letter-spacing: 1px; | ||
| background: transparent; | ||
| -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | ||
| -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | ||
| transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | ||
| } | ||
| .navbar-custom.top-nav-collapse { | ||
| padding: 0; | ||
| background: black; | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.3); | ||
| } | ||
| } | ||
| .intro { | ||
| display: table; | ||
| width: 100%; | ||
| height: auto; | ||
| padding: 100px 0; | ||
| text-align: center; | ||
| color: white; | ||
| background: url(../img/intro-bg.jpg) no-repeat bottom center scroll; | ||
| background-color: black; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| } | ||
| .intro .intro-body { | ||
| display: table-cell; | ||
| vertical-align: middle; | ||
| } | ||
| .intro .intro-body .brand-heading { | ||
| font-size: 40px; | ||
| } | ||
| .intro .intro-body .intro-text { | ||
| font-size: 18px; | ||
| } | ||
| @media (min-width: 768px) { | ||
| .intro { | ||
| height: 100%; | ||
| padding: 0; | ||
| } | ||
| .intro .intro-body .brand-heading { | ||
| font-size: 100px; | ||
| } | ||
| .intro .intro-body .intro-text { | ||
| font-size: 26px; | ||
| } | ||
| } | ||
| .btn-circle { | ||
| width: 70px; | ||
| height: 70px; | ||
| margin-top: 15px; | ||
| padding: 7px 16px; | ||
| border: 2px solid white; | ||
| border-radius: 100% !important; | ||
| font-size: 40px; | ||
| color: white; | ||
| background: transparent; | ||
| -webkit-transition: background 0.3s ease-in-out; | ||
| -moz-transition: background 0.3s ease-in-out; | ||
| transition: background 0.3s ease-in-out; | ||
| } | ||
| .btn-circle:hover, | ||
| .btn-circle:focus { | ||
| outline: none; | ||
| color: white; | ||
| background: rgba(255, 255, 255, 0.1); | ||
| } | ||
| .btn-circle i.animated { | ||
| -webkit-transition-property: -webkit-transform; | ||
| -webkit-transition-duration: 1s; | ||
| -moz-transition-property: -moz-transform; | ||
| -moz-transition-duration: 1s; | ||
| } | ||
| .btn-circle:hover i.animated { | ||
| -webkit-animation-name: pulse; | ||
| -moz-animation-name: pulse; | ||
| -webkit-animation-duration: 1.5s; | ||
| -moz-animation-duration: 1.5s; | ||
| -webkit-animation-iteration-count: infinite; | ||
| -moz-animation-iteration-count: infinite; | ||
| -webkit-animation-timing-function: linear; | ||
| -moz-animation-timing-function: linear; | ||
| } | ||
| @-webkit-keyframes pulse { | ||
| 0% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
| @-moz-keyframes pulse { | ||
| 0% { | ||
| -moz-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| -moz-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| } | ||
| 100% { | ||
| -moz-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
| .content-section { | ||
| padding-top: 100px; | ||
| } | ||
| .download-section { | ||
| width: 100%; | ||
| padding: 50px 0; | ||
| color: white; | ||
| background: url(../img/downloads-bg.jpg) no-repeat center center scroll; | ||
| background-color: black; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| } | ||
| #map { | ||
| width: 100%; | ||
| height: 200px; | ||
| margin-top: 100px; | ||
| } | ||
| @media (min-width: 767px) { | ||
| .content-section { | ||
| padding-top: 250px; | ||
| } | ||
| .download-section { | ||
| padding: 100px 0; | ||
| } | ||
| #map { | ||
| height: 400px; | ||
| margin-top: 250px; | ||
| } | ||
| } | ||
| .btn { | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-weight: 400; | ||
| -webkit-transition: all 0.3s ease-in-out; | ||
| -moz-transition: all 0.3s ease-in-out; | ||
| transition: all 0.3s ease-in-out; | ||
| border-radius: 0; | ||
| } | ||
| .btn-default { | ||
| border: 1px solid #42DCA3; | ||
| color: #42DCA3; | ||
| background-color: transparent; | ||
| } | ||
| .btn-default:hover, | ||
| .btn-default:focus { | ||
| border: 1px solid #42DCA3; | ||
| outline: none; | ||
| color: black; | ||
| background-color: #42DCA3; | ||
| } | ||
| ul.banner-social-buttons { | ||
| margin-top: 0; | ||
| } | ||
| @media (max-width: 1199px) { | ||
| ul.banner-social-buttons { | ||
| margin-top: 15px; | ||
| } | ||
| } | ||
| @media (max-width: 767px) { | ||
| ul.banner-social-buttons li { | ||
| display: block; | ||
| margin-bottom: 20px; | ||
| padding: 0; | ||
| } | ||
| ul.banner-social-buttons li:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| footer { | ||
| padding: 50px 0; | ||
| } | ||
| footer p { | ||
| margin: 0; | ||
| } | ||
| ::-moz-selection { | ||
| text-shadow: none; | ||
| background: #fcfcfc; | ||
| background: rgba(255, 255, 255, 0.2); | ||
| } | ||
| ::selection { | ||
| text-shadow: none; | ||
| background: #fcfcfc; | ||
| background: rgba(255, 255, 255, 0.2); | ||
| } | ||
| img::selection { | ||
| background: transparent; | ||
| } | ||
| img::-moz-selection { | ||
| background: transparent; | ||
| } | ||
| body { | ||
| webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); | ||
| } |
| @@ -0,0 +1,92 @@ | ||
| var gulp = require('gulp'); | ||
| var less = require('gulp-less'); | ||
| var browserSync = require('browser-sync').create(); | ||
| var header = require('gulp-header'); | ||
| var cleanCSS = require('gulp-clean-css'); | ||
| var rename = require("gulp-rename"); | ||
| var uglify = require('gulp-uglify'); | ||
| var pkg = require('./package.json'); | ||
|
|
||
| // Set the banner content | ||
| var banner = ['/*!\n', | ||
| ' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n', | ||
| ' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n', | ||
| ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n', | ||
| ' */\n', | ||
| '' | ||
| ].join(''); | ||
|
|
||
| // Compile LESS files from /less into /css | ||
| gulp.task('less', function() { | ||
| return gulp.src('less/grayscale.less') | ||
| .pipe(less()) | ||
| .pipe(header(banner, { pkg: pkg })) | ||
| .pipe(gulp.dest('css')) | ||
| .pipe(browserSync.reload({ | ||
| stream: true | ||
| })) | ||
| }); | ||
|
|
||
| // Minify compiled CSS | ||
| gulp.task('minify-css', ['less'], function() { | ||
| return gulp.src('css/grayscale.css') | ||
| .pipe(cleanCSS({ compatibility: 'ie8' })) | ||
| .pipe(rename({ suffix: '.min' })) | ||
| .pipe(gulp.dest('css')) | ||
| .pipe(browserSync.reload({ | ||
| stream: true | ||
| })) | ||
| }); | ||
|
|
||
| // Minify JS | ||
| gulp.task('minify-js', function() { | ||
| return gulp.src('js/grayscale.js') | ||
| .pipe(uglify()) | ||
| .pipe(header(banner, { pkg: pkg })) | ||
| .pipe(rename({ suffix: '.min' })) | ||
| .pipe(gulp.dest('js')) | ||
| .pipe(browserSync.reload({ | ||
| stream: true | ||
| })) | ||
| }); | ||
|
|
||
| // 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')) | ||
|
|
||
| gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js']) | ||
| .pipe(gulp.dest('vendor/jquery')) | ||
|
|
||
| gulp.src([ | ||
| 'node_modules/font-awesome/**', | ||
| '!node_modules/font-awesome/**/*.map', | ||
| '!node_modules/font-awesome/.npmignore', | ||
| '!node_modules/font-awesome/*.txt', | ||
| '!node_modules/font-awesome/*.md', | ||
| '!node_modules/font-awesome/*.json' | ||
| ]) | ||
| .pipe(gulp.dest('vendor/font-awesome')) | ||
| }) | ||
|
|
||
| // Run everything | ||
| gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']); | ||
|
|
||
| // Configure the browserSync task | ||
| gulp.task('browserSync', function() { | ||
| browserSync.init({ | ||
| server: { | ||
| baseDir: '' | ||
| }, | ||
| }) | ||
| }) | ||
|
|
||
| // Dev task with browserSync | ||
| gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function() { | ||
| gulp.watch('less/*.less', ['less']); | ||
| gulp.watch('css/*.css', ['minify-css']); | ||
| gulp.watch('js/*.js', ['minify-js']); | ||
| // Reloads the browser whenever HTML or JS files change | ||
| gulp.watch('*.html', browserSync.reload); | ||
| gulp.watch('js/**/*.js', browserSync.reload); | ||
| }); |
| @@ -0,0 +1,164 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content=""> | ||
| <meta name="author" content=""> | ||
|
|
||
| <title>Grayscale - Start Bootstrap Theme</title> | ||
|
|
||
| <!-- Bootstrap Core CSS --> | ||
| <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <!-- Custom Fonts --> | ||
| <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> | ||
|
|
||
| <!-- Theme CSS --> | ||
| <link href="css/grayscale.min.css" rel="stylesheet"> | ||
|
|
||
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | ||
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | ||
| <!--[if lt IE 9]> | ||
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | ||
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| </head> | ||
|
|
||
| <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> | ||
|
|
||
| <!-- Navigation --> | ||
| <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> | ||
| <div class="container"> | ||
| <div class="navbar-header"> | ||
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> | ||
| Menu <i class="fa fa-bars"></i> | ||
| </button> | ||
| <a class="navbar-brand page-scroll" href="#page-top"> | ||
| <i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- Collect the nav links, forms, and other content for toggling --> | ||
| <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> | ||
| <ul class="nav navbar-nav"> | ||
| <!-- Hidden li included to remove active class from about link when scrolled up past about section --> | ||
| <li class="hidden"> | ||
| <a href="#page-top"></a> | ||
| </li> | ||
| <li> | ||
| <a class="page-scroll" href="#about">About</a> | ||
| </li> | ||
| <li> | ||
| <a class="page-scroll" href="#download">Download</a> | ||
| </li> | ||
| <li> | ||
| <a class="page-scroll" href="#contact">Contact</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <!-- /.navbar-collapse --> | ||
| </div> | ||
| <!-- /.container --> | ||
| </nav> | ||
|
|
||
| <!-- Intro Header --> | ||
| <header class="intro"> | ||
| <div class="intro-body"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-8 col-md-offset-2"> | ||
| <h1 class="brand-heading">Grayscale</h1> | ||
| <p class="intro-text">A free, responsive, one page Bootstrap theme. | ||
| <br>Created by Start Bootstrap.</p> | ||
| <a href="#about" class="btn btn-circle page-scroll"> | ||
| <i class="fa fa-angle-double-down animated"></i> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- About Section --> | ||
| <section id="about" class="container content-section text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2"> | ||
| <h2>About Grayscale</h2> | ||
| <p>Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p> | ||
| <p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p> | ||
| <p>Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Download Section --> | ||
| <section id="download" class="content-section text-center"> | ||
| <div class="download-section"> | ||
| <div class="container"> | ||
| <div class="col-lg-8 col-lg-offset-2"> | ||
| <h2>Download Grayscale</h2> | ||
| <p>You can download Grayscale for free on the preview page at Start Bootstrap.</p> | ||
| <a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">Visit Download Page</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Contact Section --> | ||
| <section id="contact" class="container content-section text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2"> | ||
| <h2>Contact Start Bootstrap</h2> | ||
| <p>Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!</p> | ||
| <p><a href="mailto:feedback@startbootstrap.com">feedback@startbootstrap.com</a> | ||
| </p> | ||
| <ul class="list-inline banner-social-buttons"> | ||
| <li> | ||
| <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> | ||
| </li> | ||
| <li> | ||
| <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> | ||
| </li> | ||
| <li> | ||
| <a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Google+</span></a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Map Section --> | ||
| <div id="map"></div> | ||
|
|
||
| <!-- Footer --> | ||
| <footer> | ||
| <div class="container text-center"> | ||
| <p>Copyright © Your Website 2016</p> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <!-- jQuery --> | ||
| <script src="vendor/jquery/jquery.js"></script> | ||
|
|
||
| <!-- Bootstrap Core JavaScript --> | ||
| <script src="vendor/bootstrap/js/bootstrap.min.js"></script> | ||
|
|
||
| <!-- Plugin JavaScript --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> | ||
|
|
||
| <!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ --> | ||
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script> | ||
|
|
||
| <!-- Theme JavaScript --> | ||
| <script src="js/grayscale.min.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
| @@ -0,0 +1,185 @@ | ||
| /*! | ||
| * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com) | ||
| * Code licensed under the Apache License v2.0. | ||
| * For details, see http://www.apache.org/licenses/LICENSE-2.0. | ||
| */ | ||
|
|
||
| // jQuery to collapse the navbar on scroll | ||
| function collapseNavbar() { | ||
| if ($(".navbar").offset().top > 50) { | ||
| $(".navbar-fixed-top").addClass("top-nav-collapse"); | ||
| } else { | ||
| $(".navbar-fixed-top").removeClass("top-nav-collapse"); | ||
| } | ||
| } | ||
|
|
||
| $(window).scroll(collapseNavbar); | ||
| $(document).ready(collapseNavbar); | ||
|
|
||
| // jQuery for page scrolling feature - requires jQuery Easing plugin | ||
| $(function() { | ||
| $('a.page-scroll').bind('click', function(event) { | ||
| var $anchor = $(this); | ||
| $('html, body').stop().animate({ | ||
| scrollTop: $($anchor.attr('href')).offset().top | ||
| }, 1500, 'easeInOutExpo'); | ||
| event.preventDefault(); | ||
| }); | ||
| }); | ||
|
|
||
| // Closes the Responsive Menu on Menu Item Click | ||
| $('.navbar-collapse ul li a').click(function() { | ||
| $(".navbar-collapse").collapse('hide'); | ||
| }); | ||
|
|
||
| // Google Maps Scripts | ||
| var map = null; | ||
| // When the window has finished loading create our google map below | ||
| google.maps.event.addDomListener(window, 'load', init); | ||
| google.maps.event.addDomListener(window, 'resize', function() { | ||
| map.setCenter(new google.maps.LatLng(40.6700, -73.9400)); | ||
| }); | ||
|
|
||
| function init() { | ||
| // Basic options for a simple Google Map | ||
| // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions | ||
| var mapOptions = { | ||
| // How zoomed in you want the map to start at (always required) | ||
| zoom: 15, | ||
|
|
||
| // The latitude and longitude to center the map (always required) | ||
| center: new google.maps.LatLng(40.6700, -73.9400), // New York | ||
|
|
||
| // Disables the default Google Maps UI components | ||
| disableDefaultUI: true, | ||
| scrollwheel: false, | ||
| draggable: false, | ||
|
|
||
| // How you would like to style the map. | ||
| // This is where you would paste any style found on Snazzy Maps. | ||
| styles: [{ | ||
| "featureType": "water", | ||
| "elementType": "geometry", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 17 | ||
| }] | ||
| }, { | ||
| "featureType": "landscape", | ||
| "elementType": "geometry", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 20 | ||
| }] | ||
| }, { | ||
| "featureType": "road.highway", | ||
| "elementType": "geometry.fill", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 17 | ||
| }] | ||
| }, { | ||
| "featureType": "road.highway", | ||
| "elementType": "geometry.stroke", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 29 | ||
| }, { | ||
| "weight": 0.2 | ||
| }] | ||
| }, { | ||
| "featureType": "road.arterial", | ||
| "elementType": "geometry", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 18 | ||
| }] | ||
| }, { | ||
| "featureType": "road.local", | ||
| "elementType": "geometry", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 16 | ||
| }] | ||
| }, { | ||
| "featureType": "poi", | ||
| "elementType": "geometry", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 21 | ||
| }] | ||
| }, { | ||
| "elementType": "labels.text.stroke", | ||
| "stylers": [{ | ||
| "visibility": "on" | ||
| }, { | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 16 | ||
| }] | ||
| }, { | ||
| "elementType": "labels.text.fill", | ||
| "stylers": [{ | ||
| "saturation": 36 | ||
| }, { | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 40 | ||
| }] | ||
| }, { | ||
| "elementType": "labels.icon", | ||
| "stylers": [{ | ||
| "visibility": "off" | ||
| }] | ||
| }, { | ||
| "featureType": "transit", | ||
| "elementType": "geometry", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 19 | ||
| }] | ||
| }, { | ||
| "featureType": "administrative", | ||
| "elementType": "geometry.fill", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 20 | ||
| }] | ||
| }, { | ||
| "featureType": "administrative", | ||
| "elementType": "geometry.stroke", | ||
| "stylers": [{ | ||
| "color": "#000000" | ||
| }, { | ||
| "lightness": 17 | ||
| }, { | ||
| "weight": 1.2 | ||
| }] | ||
| }] | ||
| }; | ||
|
|
||
| // Get the HTML DOM element that will contain your map | ||
| // We are using a div with id="map" seen below in the <body> | ||
| var mapElement = document.getElementById('map'); | ||
|
|
||
| // Create the Google Map using out element and options defined above | ||
| map = new google.maps.Map(mapElement, mapOptions); | ||
|
|
||
| // Custom Map Marker Icon - Customize the map-marker.png file to customize your icon | ||
| var image = 'img/map-marker.png'; | ||
| var myLatLng = new google.maps.LatLng(40.6700, -73.9400); | ||
| var beachMarker = new google.maps.Marker({ | ||
| position: myLatLng, | ||
| map: map, | ||
| icon: image | ||
| }); | ||
| } |
| @@ -0,0 +1,341 @@ | ||
| @import "variables.less"; | ||
| @import "mixins.less"; | ||
|
|
||
| body { | ||
| width: 100%; | ||
| height: 100%; | ||
| font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| color: white; | ||
| background-color: black; | ||
| } | ||
|
|
||
| html { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| margin: 0 0 35px; | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| font-weight: 700; | ||
| letter-spacing: 1px; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0 0 25px; | ||
| font-size: 18px; | ||
| line-height: 1.5; | ||
| @media(min-width:768px) { | ||
| margin: 0 0 35px; | ||
| font-size: 20px; | ||
| line-height: 1.6; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| color: @primary; | ||
| -webkit-transition: all .2s ease-in-out; | ||
| -moz-transition: all .2s ease-in-out; | ||
| transition: all .2s ease-in-out; | ||
| &:hover, | ||
| &:focus { | ||
| text-decoration: none; | ||
| color: darken(@primary,20%); | ||
| } | ||
| } | ||
|
|
||
| .light { | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .navbar-custom { | ||
| margin-bottom: 0; | ||
| border-bottom: 1px solid fade(white, 30%); | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| background-color: black; | ||
| .navbar-toggle { | ||
| color: white; | ||
| background-color: fade(white, 20%); | ||
| font-size: 12px; | ||
| &:focus, | ||
| &:active { | ||
| outline: none; | ||
| } | ||
| } | ||
| .navbar-brand { | ||
| font-weight: 700; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } | ||
| a { | ||
| color: white; | ||
| } | ||
| .nav { | ||
| li { | ||
| a { | ||
| -webkit-transition: background .3s ease-in-out; | ||
| -moz-transition: background .3s ease-in-out; | ||
| transition: background .3s ease-in-out; | ||
| &:hover { | ||
| color: fade(white, 80%); | ||
| outline: none; | ||
| background-color: transparent; | ||
| } | ||
| &:focus, | ||
| &:active { | ||
| outline: none; | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| &.active { | ||
| outline: none; | ||
| a { | ||
| background-color: fade(white, 30%); | ||
| &:hover { | ||
| color: white; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| @media(min-width:768px) { | ||
| padding: 20px 0; | ||
| border-bottom: none; | ||
| letter-spacing: 1px; | ||
| background: transparent; | ||
| -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
| -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
| transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
| &.top-nav-collapse { | ||
| padding: 0; | ||
| background: black; | ||
| border-bottom: 1px solid fade(white, 30%); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .intro { | ||
| display: table; | ||
| width: 100%; | ||
| height: auto; | ||
| padding: 100px 0; | ||
| text-align: center; | ||
| color: white; | ||
| background: url(../img/intro-bg.jpg) no-repeat bottom center scroll; | ||
| background-color: black; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| .intro-body { | ||
| display: table-cell; | ||
| vertical-align: middle; | ||
| .brand-heading { | ||
| font-size: 40px; | ||
| } | ||
| .intro-text { | ||
| font-size: 18px; | ||
| } | ||
| } | ||
| @media(min-width:768px) { | ||
| height: 100%; | ||
| padding: 0; | ||
| .intro-body { | ||
| .brand-heading { | ||
| font-size: 100px; | ||
| } | ||
| .intro-text { | ||
| font-size: 26px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .btn-circle { | ||
| width: 70px; | ||
| height: 70px; | ||
| margin-top: 15px; | ||
| padding: 7px 16px; | ||
| border: 2px solid white; | ||
| border-radius: 100% !important; | ||
| font-size: 40px; | ||
| color: white; | ||
| background: transparent; | ||
| -webkit-transition: background .3s ease-in-out; | ||
| -moz-transition: background .3s ease-in-out; | ||
| transition: background .3s ease-in-out; | ||
| &:hover, | ||
| &:focus { | ||
| outline: none; | ||
| color: white; | ||
| background: fade(white, 10%); | ||
| } | ||
| i.animated { | ||
| -webkit-transition-property: -webkit-transform; | ||
| -webkit-transition-duration: 1s; | ||
| -moz-transition-property: -moz-transform; | ||
| -moz-transition-duration: 1s; | ||
| } | ||
| &:hover { | ||
| i.animated { | ||
| -webkit-animation-name: pulse; | ||
| -moz-animation-name: pulse; | ||
| -webkit-animation-duration: 1.5s; | ||
| -moz-animation-duration: 1.5s; | ||
| -webkit-animation-iteration-count: infinite; | ||
| -moz-animation-iteration-count: infinite; | ||
| -webkit-animation-timing-function: linear; | ||
| -moz-animation-timing-function: linear; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @-webkit-keyframes pulse { | ||
| 0% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| 50% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @-moz-keyframes pulse { | ||
| 0% { | ||
| -moz-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| 50% { | ||
| -moz-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| 100% { | ||
| -moz-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| .content-section { | ||
| padding-top: 100px; | ||
| } | ||
|
|
||
| .download-section { | ||
| width: 100%; | ||
| padding: 50px 0; | ||
| color: white; | ||
| background: url(../img/downloads-bg.jpg) no-repeat center center scroll; | ||
| background-color: black; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| } | ||
|
|
||
| #map { | ||
| width: 100%; | ||
| height: 200px; | ||
| margin-top: 100px; | ||
| } | ||
|
|
||
| @media(min-width:767px) { | ||
| .content-section { | ||
| padding-top: 250px; | ||
| } | ||
|
|
||
| .download-section { | ||
| padding: 100px 0; | ||
| } | ||
|
|
||
| #map { | ||
| height: 400px; | ||
| margin-top: 250px; | ||
| } | ||
| } | ||
|
|
||
| .btn { | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| font-weight: 400; | ||
| -webkit-transition: all .3s ease-in-out; | ||
| -moz-transition: all .3s ease-in-out; | ||
| transition: all .3s ease-in-out; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| .btn-default { | ||
| border: 1px solid @primary; | ||
| color: @primary; | ||
| background-color: transparent; | ||
| &:hover, | ||
| &:focus { | ||
| border: 1px solid @primary; | ||
| outline: none; | ||
| color: black; | ||
| background-color: @primary; | ||
| } | ||
| } | ||
|
|
||
| ul.banner-social-buttons { | ||
| margin-top: 0; | ||
| @media(max-width:1199px) { | ||
| margin-top: 15px; | ||
| } | ||
| @media(max-width:767px) { | ||
| li { | ||
| display: block; | ||
| margin-bottom: 20px; | ||
| padding: 0; | ||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| footer { | ||
| padding: 50px 0; | ||
| p { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| ::-moz-selection { | ||
| text-shadow: none; | ||
| background: #fcfcfc; | ||
| background: fade(white, 20%); | ||
| } | ||
|
|
||
| ::selection { | ||
| text-shadow: none; | ||
| background: #fcfcfc; | ||
| background: fade(white, 20%); | ||
| } | ||
|
|
||
| img::selection { | ||
| background: transparent; | ||
| } | ||
|
|
||
| img::-moz-selection { | ||
| background: transparent; | ||
| } | ||
|
|
||
| body { | ||
| webkit-tap-highlight-color: fade(white, 20%); | ||
| } |
| @@ -0,0 +1 @@ | ||
| // Mixins |
| @@ -0,0 +1,3 @@ | ||
| // Variables | ||
|
|
||
| @primary: #42DCA3; |
| @@ -0,0 +1,27 @@ | ||
| { | ||
| "name": "startbootstrap-grayscale", | ||
| "title": "Grayscale", | ||
| "version": "3.3.7+1", | ||
| "homepage": "http://startbootstrap.com/template-overviews/grayscale", | ||
| "author": "Start Bootstrap", | ||
| "license": { | ||
| "type": "MIT", | ||
| "url": "https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE" | ||
| }, | ||
| "devDependencies": { | ||
| "bootstrap": "^3.3.7", | ||
| "browser-sync": "^2.13.0", | ||
| "font-awesome": "^4.6.3", | ||
| "gulp": "^3.9.1", | ||
| "gulp-clean-css": "^2.0.10", | ||
| "gulp-header": "^1.8.7", | ||
| "gulp-less": "^3.1.0", | ||
| "gulp-rename": "^1.2.2", | ||
| "gulp-uglify": "^1.5.4", | ||
| "jquery": "^1.11.3" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/BlackrockDigital/startbootstrap-grayscale.git" | ||
| } | ||
| } |
| @@ -0,0 +1 @@ | ||
| // Mixins |
| @@ -0,0 +1,3 @@ | ||
| // Variables | ||
|
|
||
| $primary: #42DCA3; |
| @@ -0,0 +1,341 @@ | ||
| @import "variables"; | ||
| @import "mixins"; | ||
|
|
||
| body { | ||
| width: 100%; | ||
| height: 100%; | ||
| font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| color: white; | ||
| background-color: black; | ||
| } | ||
|
|
||
| html { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| margin: 0 0 35px; | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| font-weight: 700; | ||
| letter-spacing: 1px; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0 0 25px; | ||
| font-size: 18px; | ||
| line-height: 1.5; | ||
| @media(min-width:768px) { | ||
| margin: 0 0 35px; | ||
| font-size: 20px; | ||
| line-height: 1.6; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| color: $primary; | ||
| -webkit-transition: all .2s ease-in-out; | ||
| -moz-transition: all .2s ease-in-out; | ||
| transition: all .2s ease-in-out; | ||
| &:hover, | ||
| &:focus { | ||
| text-decoration: none; | ||
| color: darken($primary,20%); | ||
| } | ||
| } | ||
|
|
||
| .light { | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .navbar-custom { | ||
| margin-bottom: 0; | ||
| border-bottom: 1px solid rgba(white, 0.3); | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| background-color: black; | ||
| .navbar-toggle { | ||
| padding: 4px 6px; | ||
| font-size: 16px; | ||
| color: white; | ||
| &:focus, | ||
| &:active { | ||
| outline: none; | ||
| } | ||
| } | ||
| .navbar-brand { | ||
| font-weight: 700; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } | ||
| a { | ||
| color: white; | ||
| } | ||
| .nav { | ||
| li { | ||
| a { | ||
| -webkit-transition: background .3s ease-in-out; | ||
| -moz-transition: background .3s ease-in-out; | ||
| transition: background .3s ease-in-out; | ||
| &:hover { | ||
| color: rgba(white, 0.8); | ||
| outline: none; | ||
| background-color: transparent; | ||
| } | ||
| &:focus, | ||
| &:active { | ||
| outline: none; | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| &.active { | ||
| outline: none; | ||
| a { | ||
| background-color: rgba(white, 0.3); | ||
| &:hover { | ||
| color: white; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| @media(min-width:768px) { | ||
| padding: 20px 0; | ||
| border-bottom: none; | ||
| letter-spacing: 1px; | ||
| background: transparent; | ||
| -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
| -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
| transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
| &.top-nav-collapse { | ||
| padding: 0; | ||
| background: black; | ||
| border-bottom: 1px solid rgba(white, 0.3); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .intro { | ||
| display: table; | ||
| width: 100%; | ||
| height: auto; | ||
| padding: 100px 0; | ||
| text-align: center; | ||
| color: white; | ||
| background: url(../img/intro-bg.jpg) no-repeat bottom center scroll; | ||
| background-color: black; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| .intro-body { | ||
| display: table-cell; | ||
| vertical-align: middle; | ||
| .brand-heading { | ||
| font-size: 40px; | ||
| } | ||
| .intro-text { | ||
| font-size: 18px; | ||
| } | ||
| } | ||
| @media(min-width:768px) { | ||
| height: 100%; | ||
| padding: 0; | ||
| .intro-body { | ||
| .brand-heading { | ||
| font-size: 100px; | ||
| } | ||
| .intro-text { | ||
| font-size: 26px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .btn-circle { | ||
| width: 70px; | ||
| height: 70px; | ||
| margin-top: 15px; | ||
| padding: 7px 16px; | ||
| border: 2px solid white; | ||
| border-radius: 100% !important; | ||
| font-size: 40px; | ||
| color: white; | ||
| background: transparent; | ||
| -webkit-transition: background .3s ease-in-out; | ||
| -moz-transition: background .3s ease-in-out; | ||
| transition: background .3s ease-in-out; | ||
| &:hover, | ||
| &:focus { | ||
| outline: none; | ||
| color: white; | ||
| background: rgba(white, 0.1); | ||
| } | ||
| i.animated { | ||
| -webkit-transition-property: -webkit-transform; | ||
| -webkit-transition-duration: 1s; | ||
| -moz-transition-property: -moz-transform; | ||
| -moz-transition-duration: 1s; | ||
| } | ||
| &:hover { | ||
| i.animated { | ||
| -webkit-animation-name: pulse; | ||
| -moz-animation-name: pulse; | ||
| -webkit-animation-duration: 1.5s; | ||
| -moz-animation-duration: 1.5s; | ||
| -webkit-animation-iteration-count: infinite; | ||
| -moz-animation-iteration-count: infinite; | ||
| -webkit-animation-timing-function: linear; | ||
| -moz-animation-timing-function: linear; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @-webkit-keyframes pulse { | ||
| from { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| 50% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @-moz-keyframes pulse { | ||
| from { | ||
| -moz-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| 50% { | ||
| -moz-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| 100% { | ||
| -moz-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| .content-section { | ||
| padding-top: 100px; | ||
| } | ||
|
|
||
| .download-section { | ||
| width: 100%; | ||
| padding: 50px 0; | ||
| color: white; | ||
| background: url(../img/downloads-bg.jpg) no-repeat center center scroll; | ||
| background-color: black; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| } | ||
|
|
||
| #map { | ||
| width: 100%; | ||
| height: 200px; | ||
| margin-top: 100px; | ||
| } | ||
|
|
||
| @media(min-width:767px) { | ||
| .content-section { | ||
| padding-top: 250px; | ||
| } | ||
|
|
||
| .download-section { | ||
| padding: 100px 0; | ||
| } | ||
|
|
||
| #map { | ||
| height: 400px; | ||
| margin-top: 250px; | ||
| } | ||
| } | ||
|
|
||
| .btn { | ||
| text-transform: uppercase; | ||
| font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| font-weight: 400; | ||
| -webkit-transition: all .3s ease-in-out; | ||
| -moz-transition: all .3s ease-in-out; | ||
| transition: all .3s ease-in-out; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| .btn-default { | ||
| border: 1px solid $primary; | ||
| color: $primary; | ||
| background-color: transparent; | ||
| &:hover, | ||
| &:focus { | ||
| border: 1px solid $primary; | ||
| outline: none; | ||
| color: black; | ||
| background-color: $primary; | ||
| } | ||
| } | ||
|
|
||
| ul.banner-social-buttons { | ||
| margin-top: 0; | ||
| @media(max-width:1199px) { | ||
| margin-top: 15px; | ||
| } | ||
| @media(max-width:767px) { | ||
| li { | ||
| display: block; | ||
| margin-bottom: 20px; | ||
| padding: 0; | ||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| footer { | ||
| padding: 50px 0; | ||
| p { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| ::-moz-selection { | ||
| text-shadow: none; | ||
| background: #fcfcfc; | ||
| background: rgba(white, 0.2); | ||
| } | ||
|
|
||
| ::selection { | ||
| text-shadow: none; | ||
| background: #fcfcfc; | ||
| background: rgba(white, 0.2); | ||
| } | ||
|
|
||
| img::selection { | ||
| background: transparent; | ||
| } | ||
|
|
||
| img::-moz-selection { | ||
| background: transparent; | ||
| } | ||
|
|
||
| body { | ||
| -webkit-tap-highlight-color: rgba(white, 0.2); | ||
| } |
| @@ -0,0 +1,34 @@ | ||
| // Animated Icons | ||
| // -------------------------- | ||
|
|
||
| .@{fa-css-prefix}-spin { | ||
| -webkit-animation: fa-spin 2s infinite linear; | ||
| animation: fa-spin 2s infinite linear; | ||
| } | ||
|
|
||
| .@{fa-css-prefix}-pulse { | ||
| -webkit-animation: fa-spin 1s infinite steps(8); | ||
| animation: fa-spin 1s infinite steps(8); | ||
| } | ||
|
|
||
| @-webkit-keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| // Bordered & Pulled | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-border { | ||
| padding: .2em .25em .15em; | ||
| border: solid .08em @fa-border-color; | ||
| border-radius: .1em; | ||
| } | ||
|
|
||
| .@{fa-css-prefix}-pull-left { float: left; } | ||
| .@{fa-css-prefix}-pull-right { float: right; } | ||
|
|
||
| .@{fa-css-prefix} { | ||
| &.@{fa-css-prefix}-pull-left { margin-right: .3em; } | ||
| &.@{fa-css-prefix}-pull-right { margin-left: .3em; } | ||
| } | ||
|
|
||
| /* Deprecated as of 4.4.0 */ | ||
| .pull-right { float: right; } | ||
| .pull-left { float: left; } | ||
|
|
||
| .@{fa-css-prefix} { | ||
| &.pull-left { margin-right: .3em; } | ||
| &.pull-right { margin-left: .3em; } | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Base Class Definition | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix} { | ||
| display: inline-block; | ||
| font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } |
| @@ -0,0 +1,6 @@ | ||
| // Fixed Width Icons | ||
| // ------------------------- | ||
| .@{fa-css-prefix}-fw { | ||
| width: (18em / 14); | ||
| text-align: center; | ||
| } |
| @@ -0,0 +1,18 @@ | ||
| /*! | ||
| * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome | ||
| * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) | ||
| */ | ||
|
|
||
| @import "variables.less"; | ||
| @import "mixins.less"; | ||
| @import "path.less"; | ||
| @import "core.less"; | ||
| @import "larger.less"; | ||
| @import "fixed-width.less"; | ||
| @import "list.less"; | ||
| @import "bordered-pulled.less"; | ||
| @import "animated.less"; | ||
| @import "rotated-flipped.less"; | ||
| @import "stacked.less"; | ||
| @import "icons.less"; | ||
| @import "screen-reader.less"; |
| @@ -0,0 +1,13 @@ | ||
| // Icon Sizes | ||
| // ------------------------- | ||
|
|
||
| /* makes the font 33% larger relative to the icon container */ | ||
| .@{fa-css-prefix}-lg { | ||
| font-size: (4em / 3); | ||
| line-height: (3em / 4); | ||
| vertical-align: -15%; | ||
| } | ||
| .@{fa-css-prefix}-2x { font-size: 2em; } | ||
| .@{fa-css-prefix}-3x { font-size: 3em; } | ||
| .@{fa-css-prefix}-4x { font-size: 4em; } | ||
| .@{fa-css-prefix}-5x { font-size: 5em; } |
| @@ -0,0 +1,19 @@ | ||
| // List Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-ul { | ||
| padding-left: 0; | ||
| margin-left: @fa-li-width; | ||
| list-style-type: none; | ||
| > li { position: relative; } | ||
| } | ||
| .@{fa-css-prefix}-li { | ||
| position: absolute; | ||
| left: -@fa-li-width; | ||
| width: @fa-li-width; | ||
| top: (2em / 14); | ||
| text-align: center; | ||
| &.@{fa-css-prefix}-lg { | ||
| left: (-@fa-li-width + (4em / 14)); | ||
| } | ||
| } |
| @@ -0,0 +1,60 @@ | ||
| // Mixins | ||
| // -------------------------- | ||
|
|
||
| .fa-icon() { | ||
| display: inline-block; | ||
| font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } | ||
|
|
||
| .fa-icon-rotate(@degrees, @rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; | ||
| -webkit-transform: rotate(@degrees); | ||
| -ms-transform: rotate(@degrees); | ||
| transform: rotate(@degrees); | ||
| } | ||
|
|
||
| .fa-icon-flip(@horiz, @vert, @rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)"; | ||
| -webkit-transform: scale(@horiz, @vert); | ||
| -ms-transform: scale(@horiz, @vert); | ||
| transform: scale(@horiz, @vert); | ||
| } | ||
|
|
||
|
|
||
| // Only display content to screen readers. A la Bootstrap 4. | ||
| // | ||
| // See: http://a11yproject.com/posts/how-to-hide-content/ | ||
|
|
||
| .sr-only() { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip: rect(0,0,0,0); | ||
| border: 0; | ||
| } | ||
|
|
||
| // Use in conjunction with .sr-only to only display content when it's focused. | ||
| // | ||
| // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | ||
| // | ||
| // Credit: HTML5 Boilerplate | ||
|
|
||
| .sr-only-focusable() { | ||
| &:active, | ||
| &:focus { | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
| margin: 0; | ||
| overflow: visible; | ||
| clip: auto; | ||
| } | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| /* FONT PATH | ||
| * -------------------------- */ | ||
|
|
||
| @font-face { | ||
| font-family: 'FontAwesome'; | ||
| src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); | ||
| src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), | ||
| url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), | ||
| url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), | ||
| url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), | ||
| url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); | ||
| // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Rotated & Flipped Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } | ||
| .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } | ||
| .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } | ||
|
|
||
| .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } | ||
| .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } | ||
|
|
||
| // Hook for IE8-9 | ||
| // ------------------------- | ||
|
|
||
| :root .@{fa-css-prefix}-rotate-90, | ||
| :root .@{fa-css-prefix}-rotate-180, | ||
| :root .@{fa-css-prefix}-rotate-270, | ||
| :root .@{fa-css-prefix}-flip-horizontal, | ||
| :root .@{fa-css-prefix}-flip-vertical { | ||
| filter: none; | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| // Screen Readers | ||
| // ------------------------- | ||
|
|
||
| .sr-only { .sr-only(); } | ||
| .sr-only-focusable { .sr-only-focusable(); } |
| @@ -0,0 +1,20 @@ | ||
| // Stacked Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-stack { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 2em; | ||
| height: 2em; | ||
| line-height: 2em; | ||
| vertical-align: middle; | ||
| } | ||
| .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { | ||
| position: absolute; | ||
| left: 0; | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| .@{fa-css-prefix}-stack-1x { line-height: inherit; } | ||
| .@{fa-css-prefix}-stack-2x { font-size: 2em; } | ||
| .@{fa-css-prefix}-inverse { color: @fa-inverse; } |
| @@ -0,0 +1,34 @@ | ||
| // Spinning Icons | ||
| // -------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-spin { | ||
| -webkit-animation: fa-spin 2s infinite linear; | ||
| animation: fa-spin 2s infinite linear; | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pulse { | ||
| -webkit-animation: fa-spin 1s infinite steps(8); | ||
| animation: fa-spin 1s infinite steps(8); | ||
| } | ||
|
|
||
| @-webkit-keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| // Bordered & Pulled | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-border { | ||
| padding: .2em .25em .15em; | ||
| border: solid .08em $fa-border-color; | ||
| border-radius: .1em; | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pull-left { float: left; } | ||
| .#{$fa-css-prefix}-pull-right { float: right; } | ||
|
|
||
| .#{$fa-css-prefix} { | ||
| &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } | ||
| &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } | ||
| } | ||
|
|
||
| /* Deprecated as of 4.4.0 */ | ||
| .pull-right { float: right; } | ||
| .pull-left { float: left; } | ||
|
|
||
| .#{$fa-css-prefix} { | ||
| &.pull-left { margin-right: .3em; } | ||
| &.pull-right { margin-left: .3em; } | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Base Class Definition | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix} { | ||
| display: inline-block; | ||
| font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } |
| @@ -0,0 +1,6 @@ | ||
| // Fixed Width Icons | ||
| // ------------------------- | ||
| .#{$fa-css-prefix}-fw { | ||
| width: (18em / 14); | ||
| text-align: center; | ||
| } |
| @@ -0,0 +1,13 @@ | ||
| // Icon Sizes | ||
| // ------------------------- | ||
|
|
||
| /* makes the font 33% larger relative to the icon container */ | ||
| .#{$fa-css-prefix}-lg { | ||
| font-size: (4em / 3); | ||
| line-height: (3em / 4); | ||
| vertical-align: -15%; | ||
| } | ||
| .#{$fa-css-prefix}-2x { font-size: 2em; } | ||
| .#{$fa-css-prefix}-3x { font-size: 3em; } | ||
| .#{$fa-css-prefix}-4x { font-size: 4em; } | ||
| .#{$fa-css-prefix}-5x { font-size: 5em; } |
| @@ -0,0 +1,19 @@ | ||
| // List Icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-ul { | ||
| padding-left: 0; | ||
| margin-left: $fa-li-width; | ||
| list-style-type: none; | ||
| > li { position: relative; } | ||
| } | ||
| .#{$fa-css-prefix}-li { | ||
| position: absolute; | ||
| left: -$fa-li-width; | ||
| width: $fa-li-width; | ||
| top: (2em / 14); | ||
| text-align: center; | ||
| &.#{$fa-css-prefix}-lg { | ||
| left: -$fa-li-width + (4em / 14); | ||
| } | ||
| } |
| @@ -0,0 +1,60 @@ | ||
| // Mixins | ||
| // -------------------------- | ||
|
|
||
| @mixin fa-icon() { | ||
| display: inline-block; | ||
| font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } | ||
|
|
||
| @mixin fa-icon-rotate($degrees, $rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; | ||
| -webkit-transform: rotate($degrees); | ||
| -ms-transform: rotate($degrees); | ||
| transform: rotate($degrees); | ||
| } | ||
|
|
||
| @mixin fa-icon-flip($horiz, $vert, $rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; | ||
| -webkit-transform: scale($horiz, $vert); | ||
| -ms-transform: scale($horiz, $vert); | ||
| transform: scale($horiz, $vert); | ||
| } | ||
|
|
||
|
|
||
| // Only display content to screen readers. A la Bootstrap 4. | ||
| // | ||
| // See: http://a11yproject.com/posts/how-to-hide-content/ | ||
|
|
||
| @mixin sr-only { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip: rect(0,0,0,0); | ||
| border: 0; | ||
| } | ||
|
|
||
| // Use in conjunction with .sr-only to only display content when it's focused. | ||
| // | ||
| // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | ||
| // | ||
| // Credit: HTML5 Boilerplate | ||
|
|
||
| @mixin sr-only-focusable { | ||
| &:active, | ||
| &:focus { | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
| margin: 0; | ||
| overflow: visible; | ||
| clip: auto; | ||
| } | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| /* FONT PATH | ||
| * -------------------------- */ | ||
|
|
||
| @font-face { | ||
| font-family: 'FontAwesome'; | ||
| src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); | ||
| src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); | ||
| // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Rotated & Flipped Icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } | ||
| .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } | ||
| .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } | ||
|
|
||
| .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } | ||
| .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } | ||
|
|
||
| // Hook for IE8-9 | ||
| // ------------------------- | ||
|
|
||
| :root .#{$fa-css-prefix}-rotate-90, | ||
| :root .#{$fa-css-prefix}-rotate-180, | ||
| :root .#{$fa-css-prefix}-rotate-270, | ||
| :root .#{$fa-css-prefix}-flip-horizontal, | ||
| :root .#{$fa-css-prefix}-flip-vertical { | ||
| filter: none; | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| // Screen Readers | ||
| // ------------------------- | ||
|
|
||
| .sr-only { @include sr-only(); } | ||
| .sr-only-focusable { @include sr-only-focusable(); } |
| @@ -0,0 +1,20 @@ | ||
| // Stacked Icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-stack { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 2em; | ||
| height: 2em; | ||
| line-height: 2em; | ||
| vertical-align: middle; | ||
| } | ||
| .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { | ||
| position: absolute; | ||
| left: 0; | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| .#{$fa-css-prefix}-stack-1x { line-height: inherit; } | ||
| .#{$fa-css-prefix}-stack-2x { font-size: 2em; } | ||
| .#{$fa-css-prefix}-inverse { color: $fa-inverse; } |
| @@ -0,0 +1,18 @@ | ||
| /*! | ||
| * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome | ||
| * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) | ||
| */ | ||
|
|
||
| @import "variables"; | ||
| @import "mixins"; | ||
| @import "path"; | ||
| @import "core"; | ||
| @import "larger"; | ||
| @import "fixed-width"; | ||
| @import "list"; | ||
| @import "bordered-pulled"; | ||
| @import "animated"; | ||
| @import "rotated-flipped"; | ||
| @import "stacked"; | ||
| @import "icons"; | ||
| @import "screen-reader"; |
