Air is the first of many stylesheets to make HTML generated from markdown look beautiful. A list of all available stylesheets can be found here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula pharetra ultricies. Cras magna turpis, vestibulum ut arcu et, rutrum porta velit. Curabitur luctus erat a velit tincidunt, vel malesuada nibh tempor. Mauris condimentum quam lorem, in finibus eros faucibus id. Nunc erat metus, fringilla dignissim faucibus id, malesuada quis justo. Vestibulum erat augue, feugiat vitae porttitor vel, condimentum quis ipsum. Etiam sagittis eros et dolor semper congue.
-Curabitur ac euismod turpis. Maecenas gravida viverra augue quis scelerisque. Vivamus quis massa elementum odio pharetra efficitur at eget nibh. Donec varius purus quis nisi gravida tristique. Quisque dictum justo nec nulla hendrerit aliquet. Duis ac ultrices nunc. Proin elit augue, fringilla at varius at, interdum ut justo. Sed sed eros a leo molestie bibendum. Nullam ac justo malesuada, euismod dui at, finibus purus. Sed mi risus, porta ac sem ac, commodo semper risus.
gulp.task('watch', function() {
- gulp.watch('*.md', function() {
- gulp.start('md', 'html');
+gulp.task('watch', function() {
+ gulp.watch('*.md', function() {
+ gulp.start('md', 'html');
});
- gulp.watch('*.css', function() {
- gulp.start('css');
+ gulp.watch('*.css', function() {
+ gulp.start('css');
});
});
Lists
- Apples
+- Citrus
+
- Oranges
+- Grapefruit
+
- Potatoes
- Milk
@@ -27,4 +32,9 @@ Lists
Feed the dog
Dance
+Blockquotes
+
+Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
+Antoine de Saint-Exupéry
+
Crafted with <3 by John Otander(@4lpine).
diff --git a/gulpfile.js b/gulpfile.js
index b1b403c..b55839f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,6 +5,8 @@ var gulp = require('gulp'),
reworkVars = require('rework-vars'),
includer = require('gulp-htmlincluder'),
classPrefix = require('rework-class-prefix'),
+ media = require('rework-custom-media'),
+ size = require('gulp-size'),
md = require('gulp-remarkable');
gulp.task('md', function() {
@@ -22,7 +24,8 @@ gulp.task('html', ['md', 'css'], function() {
gulp.task('css', function() {
return gulp.src('index.css')
- .pipe(rework(reworkNPM(), classPrefix('air-'), reworkVars()))
+ .pipe(rework(reworkNPM(), classPrefix('air-'), media(), reworkVars()))
+ .pipe(size({ gzip: true, showFiles: true }))
.pipe(name('air.css'))
.pipe(gulp.dest('css'));
});
diff --git a/index.css b/index.css
index 3823cbf..0d2a637 100644
--- a/index.css
+++ b/index.css
@@ -1,10 +1,14 @@
+@import "furtive-print";
@import "furtive-typescale";
+@import "furtive-responsive-utils";
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300);
body {
+ color: #444;
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: 300;
- margin: 0 auto;
+ margin: 6rem auto 1rem;
max-width: 48rem;
text-align: center;
}
@@ -16,14 +20,37 @@ img {
width: 200px;
}
+a,
+a:visited {
+ color: #3498db;
+}
+
+a:hover,
+a:focus,
+a:active {
+ color: #2980b9;
+}
+
pre {
background-color: #fafafa;
padding: 1rem;
text-align: left;
}
+blockquote {
+ margin: 0;
+ border-left: 5px solid #7a7a7a;
+ font-style: italic;
+ padding: 1.33em;
+ text-align: left;
+}
+
ul,
ol,
li {
text-align: left;
}
+
+p {
+ color: #777;
+}
diff --git a/index.html b/index.html
index 5695707..5f29459 100644
--- a/index.html
+++ b/index.html
@@ -9,24 +9,29 @@
Air
A markdown theme that is light and airy.
+Air is the first of many stylesheets to make HTML generated from markdown look beautiful. A list of all available stylesheets can be found here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula pharetra ultricies. Cras magna turpis, vestibulum ut arcu et, rutrum porta velit. Curabitur luctus erat a velit tincidunt, vel malesuada nibh tempor. Mauris condimentum quam lorem, in finibus eros faucibus id. Nunc erat metus, fringilla dignissim faucibus id, malesuada quis justo. Vestibulum erat augue, feugiat vitae porttitor vel, condimentum quis ipsum. Etiam sagittis eros et dolor semper congue.
-Curabitur semper rhoncus magna quis blandit.
+Curabitur semper rhoncus magna quis blandit.
Curabitur ac euismod turpis. Maecenas gravida viverra augue quis scelerisque. Vivamus quis massa elementum odio pharetra efficitur at eget nibh. Donec varius purus quis nisi gravida tristique. Quisque dictum justo nec nulla hendrerit aliquet. Duis ac ultrices nunc. Proin elit augue, fringilla at varius at, interdum ut justo. Sed sed eros a leo molestie bibendum. Nullam ac justo malesuada, euismod dui at, finibus purus. Sed mi risus, porta ac sem ac, commodo semper risus.
Some example code:
-gulp.task('watch', function() {
- gulp.watch('*.md', function() {
- gulp.start('md', 'html');
+gulp.task('watch', function() {
+ gulp.watch('*.md', function() {
+ gulp.start('md', 'html');
});
- gulp.watch('*.css', function() {
- gulp.start('css');
+ gulp.watch('*.css', function() {
+ gulp.start('css');
});
});
Lists
- Apples
+- Citrus
+
- Oranges
+- Grapefruit
+
- Potatoes
- Milk
@@ -35,6 +40,11 @@ Lists
Feed the dog
Dance
+Blockquotes
+
+Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
+Antoine de Saint-Exupéry
+
Crafted with <3 by John Otander(@4lpine).