| @@ -0,0 +1,189 @@ | ||
| <!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>Clean Blog - Contact</title> | ||
|
|
||
| <!-- Bootstrap Core CSS --> | ||
| <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <!-- Theme CSS --> | ||
| <link href="css/clean-blog.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=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> | ||
|
|
||
| <!-- 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> | ||
|
|
||
| <!-- Navigation --> | ||
| <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> | ||
| <div class="container-fluid"> | ||
| <!-- Brand and toggle get grouped for better mobile display --> | ||
| <div class="navbar-header page-scroll"> | ||
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | ||
| <span class="sr-only">Toggle navigation</span> | ||
| Menu <i class="fa fa-bars"></i> | ||
| </button> | ||
| <a class="navbar-brand" href="index.html">Start Bootstrap</a> | ||
| </div> | ||
|
|
||
| <!-- Collect the nav links, forms, and other content for toggling --> | ||
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | ||
| <ul class="nav navbar-nav navbar-right"> | ||
| <li> | ||
| <a href="index.html">Home</a> | ||
| </li> | ||
| <li> | ||
| <a href="about.html">About</a> | ||
| </li> | ||
| <li> | ||
| <a href="post.html">Sample Post</a> | ||
| </li> | ||
| <li> | ||
| <a href="contact.html">Contact</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <!-- /.navbar-collapse --> | ||
| </div> | ||
| <!-- /.container --> | ||
| </nav> | ||
|
|
||
| <!-- Page Header --> | ||
| <!-- Set your background image for this header on the line below. --> | ||
| <header class="intro-header" style="background-image: url('img/contact-bg.jpg')"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <div class="page-heading"> | ||
| <h1>Contact Me</h1> | ||
| <hr class="small"> | ||
| <span class="subheading">Have questions? I have answers (maybe).</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Main Content --> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <p>Want to get in touch with me? Fill out the form below to send me a message and I will try to get back to you within 24 hours!</p> | ||
| <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. --> | ||
| <!-- WARNING: Some web hosts do not allow emails to be sent through forms to common mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! --> | ||
| <!-- NOTE: To use the contact form, your site must be on a live web host with PHP! The form will not work locally! --> | ||
| <form name="sentMessage" id="contactForm" novalidate> | ||
| <div class="row control-group"> | ||
| <div class="form-group col-xs-12 floating-label-form-group controls"> | ||
| <label>Name</label> | ||
| <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."> | ||
| <p class="help-block text-danger"></p> | ||
| </div> | ||
| </div> | ||
| <div class="row control-group"> | ||
| <div class="form-group col-xs-12 floating-label-form-group controls"> | ||
| <label>Email Address</label> | ||
| <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."> | ||
| <p class="help-block text-danger"></p> | ||
| </div> | ||
| </div> | ||
| <div class="row control-group"> | ||
| <div class="form-group col-xs-12 floating-label-form-group controls"> | ||
| <label>Phone Number</label> | ||
| <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."> | ||
| <p class="help-block text-danger"></p> | ||
| </div> | ||
| </div> | ||
| <div class="row control-group"> | ||
| <div class="form-group col-xs-12 floating-label-form-group controls"> | ||
| <label>Message</label> | ||
| <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea> | ||
| <p class="help-block text-danger"></p> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div id="success"></div> | ||
| <div class="row"> | ||
| <div class="form-group col-xs-12"> | ||
| <button type="submit" class="btn btn-default">Send</button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr> | ||
|
|
||
| <!-- Footer --> | ||
| <footer> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <ul class="list-inline text-center"> | ||
| <li> | ||
| <a href="#"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-github fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <p class="copyright text-muted">Copyright © Your Website 2016</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <!-- jQuery --> | ||
| <script src="vendor/jquery/jquery.min.js"></script> | ||
|
|
||
| <!-- Bootstrap Core JavaScript --> | ||
| <script src="vendor/bootstrap/js/bootstrap.min.js"></script> | ||
|
|
||
| <!-- Contact Form JavaScript --> | ||
| <script src="js/jqBootstrapValidation.js"></script> | ||
| <script src="js/contact_me.js"></script> | ||
|
|
||
| <!-- Theme JavaScript --> | ||
| <script src="js/clean-blog.min.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
| @@ -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/clean-blog.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/clean-blog.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/clean-blog.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,40 @@ | ||
| // Floating label headings for the contact form | ||
| $(function() { | ||
| $("body").on("input propertychange", ".floating-label-form-group", function(e) { | ||
| $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val()); | ||
| }).on("focus", ".floating-label-form-group", function() { | ||
| $(this).addClass("floating-label-form-group-with-focus"); | ||
| }).on("blur", ".floating-label-form-group", function() { | ||
| $(this).removeClass("floating-label-form-group-with-focus"); | ||
| }); | ||
| }); | ||
|
|
||
| // Navigation Scripts to Show Header on Scroll-Up | ||
| jQuery(document).ready(function($) { | ||
| var MQL = 1170; | ||
|
|
||
| //primary navigation slide-in effect | ||
| if ($(window).width() > MQL) { | ||
| var headerHeight = $('.navbar-custom').height(); | ||
| $(window).on('scroll', { | ||
| previousTop: 0 | ||
| }, | ||
| function() { | ||
| var currentTop = $(window).scrollTop(); | ||
| //check if user is scrolling up | ||
| if (currentTop < this.previousTop) { | ||
| //if scrolling up... | ||
| if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) { | ||
| $('.navbar-custom').addClass('is-visible'); | ||
| } else { | ||
| $('.navbar-custom').removeClass('is-visible is-fixed'); | ||
| } | ||
| } else if (currentTop > this.previousTop) { | ||
| //if scrolling down... | ||
| $('.navbar-custom').removeClass('is-visible'); | ||
| if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed'); | ||
| } | ||
| this.previousTop = currentTop; | ||
| }); | ||
| } | ||
| }); |
| @@ -0,0 +1,72 @@ | ||
| // Contact Form Scripts | ||
|
|
||
| $(function() { | ||
|
|
||
| $("#contactForm input,#contactForm textarea").jqBootstrapValidation({ | ||
| preventSubmit: true, | ||
| submitError: function($form, event, errors) { | ||
| // additional error messages or events | ||
| }, | ||
| submitSuccess: function($form, event) { | ||
| event.preventDefault(); // prevent default submit behaviour | ||
| // get values from FORM | ||
| var name = $("input#name").val(); | ||
| var email = $("input#email").val(); | ||
| var phone = $("input#phone").val(); | ||
| var message = $("textarea#message").val(); | ||
| var firstName = name; // For Success/Failure Message | ||
| // Check for white space in name for Success/Fail message | ||
| if (firstName.indexOf(' ') >= 0) { | ||
| firstName = name.split(' ').slice(0, -1).join(' '); | ||
| } | ||
| $.ajax({ | ||
| url: "././mail/contact_me.php", | ||
| type: "POST", | ||
| data: { | ||
| name: name, | ||
| phone: phone, | ||
| email: email, | ||
| message: message | ||
| }, | ||
| cache: false, | ||
| success: function() { | ||
| // Success message | ||
| $('#success').html("<div class='alert alert-success'>"); | ||
| $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") | ||
| .append("</button>"); | ||
| $('#success > .alert-success') | ||
| .append("<strong>Your message has been sent. </strong>"); | ||
| $('#success > .alert-success') | ||
| .append('</div>'); | ||
|
|
||
| //clear all fields | ||
| $('#contactForm').trigger("reset"); | ||
| }, | ||
| error: function() { | ||
| // Fail message | ||
| $('#success').html("<div class='alert alert-danger'>"); | ||
| $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") | ||
| .append("</button>"); | ||
| $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); | ||
| $('#success > .alert-danger').append('</div>'); | ||
| //clear all fields | ||
| $('#contactForm').trigger("reset"); | ||
| }, | ||
| }); | ||
| }, | ||
| filter: function() { | ||
| return $(this).is(":visible"); | ||
| }, | ||
| }); | ||
|
|
||
| $("a[data-toggle=\"tab\"]").click(function(e) { | ||
| e.preventDefault(); | ||
| $(this).tab("show"); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| /*When clicking on Full hide fail/success boxes */ | ||
| $('#name').focus(function() { | ||
| $('#success').html(''); | ||
| }); |
| @@ -0,0 +1,22 @@ | ||
| // Mixins | ||
|
|
||
| .transition-all() { | ||
| -webkit-transition: all 0.5s; | ||
| -moz-transition: all 0.5s; | ||
| transition: all 0.5s; | ||
| } | ||
|
|
||
| .background-cover() { | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| background-size: cover; | ||
| -o-background-size: cover; | ||
| } | ||
|
|
||
| .serif-font() { | ||
| font-family: 'Lora', 'Times New Roman', serif; | ||
| } | ||
|
|
||
| .sans-serif-font() { | ||
| font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Variables | ||
|
|
||
| // Gray and Brand Colors for use across theme | ||
|
|
||
| @theme-primary: #0085A1; | ||
|
|
||
| @gray-base: #000; | ||
| @gray-darker: lighten(@gray-base, 13.5%); // #222 | ||
| @gray-dark: lighten(@gray-base, 20%); // #333 | ||
| @gray: lighten(@gray-base, 33.5%); // #555 | ||
| @gray-light: lighten(@gray-base, 46.7%); // #777 | ||
| @gray-lighter: lighten(@gray-base, 93.5%); // #eee |
| @@ -0,0 +1,26 @@ | ||
| <?php | ||
| // Check for empty fields | ||
| if(empty($_POST['name']) || | ||
| empty($_POST['email']) || | ||
| empty($_POST['phone']) || | ||
| empty($_POST['message']) || | ||
| !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) | ||
| { | ||
| echo "No arguments Provided!"; | ||
| return false; | ||
| } | ||
|
|
||
| $name = strip_tags(htmlspecialchars($_POST['name'])); | ||
| $email_address = strip_tags(htmlspecialchars($_POST['email'])); | ||
| $phone = strip_tags(htmlspecialchars($_POST['phone'])); | ||
| $message = strip_tags(htmlspecialchars($_POST['message'])); | ||
|
|
||
| // Create the email and send the message | ||
| $to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. | ||
| $email_subject = "Website Contact Form: $name"; | ||
| $email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message"; | ||
| $headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. | ||
| $headers .= "Reply-To: $email_address"; | ||
| mail($to,$email_subject,$email_body,$headers); | ||
| return true; | ||
| ?> |
| @@ -0,0 +1,27 @@ | ||
| { | ||
| "name": "clean-blog", | ||
| "title": "Clean Blog", | ||
| "version": "3.3.7+1", | ||
| "homepage": "http://startbootstrap.com/template-overviews/clean-blog", | ||
| "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-clean-blog.git" | ||
| } | ||
| } |
| @@ -0,0 +1,184 @@ | ||
| <!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>Clean Blog - Sample Post</title> | ||
|
|
||
| <!-- Bootstrap Core CSS --> | ||
| <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <!-- Theme CSS --> | ||
| <link href="css/clean-blog.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=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> | ||
|
|
||
| <!-- 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> | ||
|
|
||
| <!-- Navigation --> | ||
| <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> | ||
| <div class="container-fluid"> | ||
| <!-- Brand and toggle get grouped for better mobile display --> | ||
| <div class="navbar-header page-scroll"> | ||
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | ||
| <span class="sr-only">Toggle navigation</span> | ||
| Menu <i class="fa fa-bars"></i> | ||
| </button> | ||
| <a class="navbar-brand" href="index.html">Start Bootstrap</a> | ||
| </div> | ||
|
|
||
| <!-- Collect the nav links, forms, and other content for toggling --> | ||
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | ||
| <ul class="nav navbar-nav navbar-right"> | ||
| <li> | ||
| <a href="index.html">Home</a> | ||
| </li> | ||
| <li> | ||
| <a href="about.html">About</a> | ||
| </li> | ||
| <li> | ||
| <a href="post.html">Sample Post</a> | ||
| </li> | ||
| <li> | ||
| <a href="contact.html">Contact</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <!-- /.navbar-collapse --> | ||
| </div> | ||
| <!-- /.container --> | ||
| </nav> | ||
|
|
||
| <!-- Page Header --> | ||
| <!-- Set your background image for this header on the line below. --> | ||
| <header class="intro-header" style="background-image: url('img/post-bg.jpg')"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <div class="post-heading"> | ||
| <h1>Man must explore, and this is exploration at its greatest</h1> | ||
| <h2 class="subheading">Problems look mighty small from 150 miles up</h2> | ||
| <span class="meta">Posted by <a href="#">Start Bootstrap</a> on August 24, 2014</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Post Content --> | ||
| <article> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p> | ||
|
|
||
| <p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p> | ||
|
|
||
| <p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p> | ||
|
|
||
| <p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p> | ||
|
|
||
| <p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p> | ||
|
|
||
| <h2 class="section-heading">The Final Frontier</h2> | ||
|
|
||
| <p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p> | ||
|
|
||
| <p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p> | ||
|
|
||
| <blockquote>The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote> | ||
|
|
||
| <p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p> | ||
|
|
||
| <h2 class="section-heading">Reaching for the Stars</h2> | ||
|
|
||
| <p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p> | ||
|
|
||
| <a href="#"> | ||
| <img class="img-responsive" src="img/post-sample-image.jpg" alt=""> | ||
| </a> | ||
| <span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span> | ||
|
|
||
| <p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p> | ||
|
|
||
| <p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p> | ||
|
|
||
| <p>Placeholder text by <a href="http://spaceipsum.com/">Space Ipsum</a>. Photographs by <a href="https://www.flickr.com/photos/nasacommons/">NASA on The Commons</a>.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <hr> | ||
|
|
||
| <!-- Footer --> | ||
| <footer> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <ul class="list-inline text-center"> | ||
| <li> | ||
| <a href="#"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-github fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <p class="copyright text-muted">Copyright © Your Website 2016</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <!-- jQuery --> | ||
| <script src="vendor/jquery/jquery.min.js"></script> | ||
|
|
||
| <!-- Bootstrap Core JavaScript --> | ||
| <script src="vendor/bootstrap/js/bootstrap.min.js"></script> | ||
|
|
||
| <!-- Contact Form JavaScript --> | ||
| <script src="js/jqBootstrapValidation.js"></script> | ||
| <script src="js/contact_me.js"></script> | ||
|
|
||
| <!-- Theme JavaScript --> | ||
| <script src="js/clean-blog.min.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
| @@ -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"; |
