Skip to content

Commit

Permalink
Add more example, css, and import some rework modules.
Browse files Browse the repository at this point in the history
  • Loading branch information
@johno
johno committed Oct 29, 2014
1 parent 4fefa6b commit fe1db58
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 21 deletions.
15 changes: 13 additions & 2 deletions air.md
View file
Expand Up @@ -4,9 +4,11 @@

### 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](https://github.com/markdowncss).

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.

Expand All @@ -27,12 +29,21 @@ gulp.task('watch', function() {
#### Lists

* Apples
* Oranges
* Citrus
* Oranges
* Grapefruit
* Potatoes
* Milk

1. Mow the lawn
2. Feed the dog
3. 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](http://johnotander.com)([@4lpine](https://twitter.com/4lpine)).
102 changes: 99 additions & 3 deletions css/air.css
View file
@@ -1,14 +1,74 @@
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: " (" attr(href) ")";
}

abbr[title]:after {
content: " (" attr(title) ")";
}

a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}

html {
font-size: 12px;
}

@media screen and (min-width: var(--viewport-m, 32rem)) and (max-width: var(--viewport-l, 48rem)) {
@media screen and (min-width: 32rem) and (max-width: 48rem) {
html {
font-size: 15px;
}
}

@media screen and (min-width: var(--viewport-l, 48rem)) {
@media screen and (min-width: 48rem) {
html {
font-size: 16px;
}
Expand Down Expand Up @@ -73,12 +133,25 @@ small,
font-size: .707em;
}

/* https://github.com/mrmrs/fluidity */

img,
canvas,
iframe,
video,
svg,
select,
textarea {
max-width: 100%;
}

@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;
}
Expand All @@ -90,14 +163,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;
}
22 changes: 16 additions & 6 deletions example/-markdown.html
View file
@@ -1,24 +1,29 @@
<p><img src="https://cloud.githubusercontent.com/assets/1424573/4785631/dc5ddcd2-5d82-11e4-88a2-06fdabbe4fb8.png" alt="A pretty dock on a lake"></p>
<h1>Air</h1>
<h3>A markdown theme that is light and airy.</h3>
<p>Air is the first of many stylesheets to make HTML generated from markdown look beautiful. A list of all available stylesheets can be found <a href="https://github.com/markdowncss">here</a>.</p>
<p>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.</p>
<h2>Curabitur semper rhoncus magna quis blandit.</h2>
<h2><em>Curabitur semper rhoncus magna quis blandit.</em></h2>
<p>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.</p>
<h4>Some example code:</h4>
<pre><code class="language-js">gulp.task('watch', function() {
gulp.watch('*.md', function() {
gulp.start('md', 'html');
<pre><code class="language-js">gulp.task(<span class="hljs-string">'watch'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
gulp.watch(<span class="hljs-string">'*.md'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
gulp.start(<span class="hljs-string">'md'</span>, <span class="hljs-string">'html'</span>);
});

gulp.watch('*.css', function() {
gulp.start('css');
gulp.watch(<span class="hljs-string">'*.css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
gulp.start(<span class="hljs-string">'css'</span>);
});
});
</code></pre>
<h4>Lists</h4>
<ul>
<li>Apples</li>
<li>Citrus
<ul>
<li>Oranges</li>
<li>Grapefruit</li>
</ul></li>
<li>Potatoes</li>
<li>Milk</li>
</ul>
Expand All @@ -27,4 +32,9 @@ <h4>Lists</h4>
<li>Feed the dog</li>
<li>Dance</li>
</ol>
<h4>Blockquotes</h4>
<blockquote>
<p>Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.</p>
<p>Antoine de Saint-Exupéry</p>
</blockquote>
<p>Crafted with &lt;3 by <a href="http://johnotander.com">John Otander</a>(<a href="https://twitter.com/4lpine">@4lpine</a>).</p>
5 changes: 4 additions & 1 deletion gulpfile.js
View file
Expand Up @@ -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() {
Expand All @@ -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'));
});
Expand Down
29 changes: 28 additions & 1 deletion index.css
View file
@@ -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;
}
Expand All @@ -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;
}
22 changes: 16 additions & 6 deletions index.html
View file
Expand Up @@ -9,24 +9,29 @@
<p><img src="https://cloud.githubusercontent.com/assets/1424573/4785631/dc5ddcd2-5d82-11e4-88a2-06fdabbe4fb8.png" alt="A pretty dock on a lake"></p>
<h1>Air</h1>
<h3>A markdown theme that is light and airy.</h3>
<p>Air is the first of many stylesheets to make HTML generated from markdown look beautiful. A list of all available stylesheets can be found <a href="https://github.com/markdowncss">here</a>.</p>
<p>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.</p>
<h2>Curabitur semper rhoncus magna quis blandit.</h2>
<h2><em>Curabitur semper rhoncus magna quis blandit.</em></h2>
<p>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.</p>
<h4>Some example code:</h4>
<pre><code class="language-js">gulp.task('watch', function() {
gulp.watch('*.md', function() {
gulp.start('md', 'html');
<pre><code class="language-js">gulp.task(<span class="hljs-string">'watch'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
gulp.watch(<span class="hljs-string">'*.md'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
gulp.start(<span class="hljs-string">'md'</span>, <span class="hljs-string">'html'</span>);
});

gulp.watch('*.css', function() {
gulp.start('css');
gulp.watch(<span class="hljs-string">'*.css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
gulp.start(<span class="hljs-string">'css'</span>);
});
});
</code></pre>
<h4>Lists</h4>
<ul>
<li>Apples</li>
<li>Citrus
<ul>
<li>Oranges</li>
<li>Grapefruit</li>
</ul></li>
<li>Potatoes</li>
<li>Milk</li>
</ul>
Expand All @@ -35,6 +40,11 @@ <h4>Lists</h4>
<li>Feed the dog</li>
<li>Dance</li>
</ol>
<h4>Blockquotes</h4>
<blockquote>
<p>Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.</p>
<p>Antoine de Saint-Exupéry</p>
</blockquote>
<p>Crafted with &lt;3 by <a href="http://johnotander.com">John Otander</a>(<a href="https://twitter.com/4lpine">@4lpine</a>).</p>

</body>
Expand Down
8 changes: 6 additions & 2 deletions package.json
View file
Expand Up @@ -23,13 +23,17 @@
},
"homepage": "https://github.com/markdowncss/air",
"dependencies": {
"furtive-typescale": "0.0.2",
"furtive-print": "0.0.1",
"furtive-responsive-utils": "0.0.1",
"furtive-typescale": "0.0.4",
"gulp": "^3.8.9",
"gulp-htmlincluder": "^0.1.0",
"gulp-remarkable": "0.0.3",
"gulp-remarkable": "0.0.5",
"gulp-rename": "^1.2.0",
"gulp-rework": "^1.0.2",
"gulp-size": "^1.1.0",
"rework-class-prefix": "0.0.2",
"rework-custom-media": "^0.2.0",
"rework-npm": "^1.0.0",
"rework-vars": "^3.1.1"
}
Expand Down

0 comments on commit fe1db58

Please sign in to comment.