Skip to content

Commit d5d4c53

Browse files
johnojohno
committed
Add initial skeleton.
0 parents  commit d5d4c53

File tree

11 files changed

+528
-0
lines changed

11 files changed

+528
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 John Otander
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Modest
2+
3+
A markdown theme that is rather modest.
4+
5+
## Installation
6+
7+
#### Through npm:
8+
9+
```
10+
npm install --save markdown-modest
11+
```
12+
13+
This theme integrates well with `rework-npm`, and has rework CSS available in the index.css file.
14+
15+
#### Clone the repo:
16+
17+
```
18+
git clone https://github.com/markdowncss/modest.git
19+
```
20+
21+
#### Development:
22+
23+
```
24+
git clone https://github.com/markdowncss/modest.git && cd modest
25+
npm install
26+
gulp
27+
```
28+
29+
## Usage
30+
31+
Link the file in your Markdown to HTML build process:
32+
33+
```html
34+
<link rel="stylesheet" href="path/to/css/modest.css">
35+
```
36+
37+
## License
38+
39+
MIT
40+
41+
## Contributing
42+
43+
1. Fork it
44+
2. Create your feature branch (`git checkout -b my-new-feature`)
45+
3. Commit your changes (`git commit -am 'Add some feature'`)
46+
4. Push to the branch (`git push origin my-new-feature`)
47+
5. Create new Pull Request
48+
49+
Crafted with <3 by [John Otander](http://johnotander.com) ([@4lpine](https://twitter.com/4lpine)).

‎css/modest.css

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
@media print {
2+
*,
3+
*:before,
4+
*:after {
5+
background: transparent !important;
6+
color: #000 !important;
7+
box-shadow: none !important;
8+
text-shadow: none !important;
9+
}
10+
11+
a,
12+
a:visited {
13+
text-decoration: underline;
14+
}
15+
16+
a[href]:after {
17+
content: " (" attr(href) ")";
18+
}
19+
20+
abbr[title]:after {
21+
content: " (" attr(title) ")";
22+
}
23+
24+
a[href^="#"]:after,
25+
a[href^="javascript:"]:after {
26+
content: "";
27+
}
28+
29+
pre,
30+
blockquote {
31+
border: 1px solid #999;
32+
page-break-inside: avoid;
33+
}
34+
35+
thead {
36+
display: table-header-group;
37+
}
38+
39+
tr,
40+
img {
41+
page-break-inside: avoid;
42+
}
43+
44+
img {
45+
max-width: 100% !important;
46+
}
47+
48+
p,
49+
h2,
50+
h3 {
51+
orphans: 3;
52+
widows: 3;
53+
}
54+
55+
h2,
56+
h3 {
57+
page-break-after: avoid;
58+
}
59+
}
60+
61+
pre,
62+
code {
63+
font-family: Menlo, Monaco, "Courier New", monospace;
64+
}
65+
66+
pre {
67+
padding: .5rem;
68+
line-height: 1.25;
69+
overflow-x: scroll;
70+
}
71+
72+
a,
73+
a:visited {
74+
color: #3498db;
75+
}
76+
77+
a:hover,
78+
a:focus,
79+
a:active {
80+
color: #2980b9;
81+
}
82+
83+
.modest-no-decoration {
84+
text-decoration: none;
85+
}
86+
87+
html {
88+
font-size: 12px;
89+
}
90+
91+
@media screen and (min-width: 32rem) and (max-width: 48rem) {
92+
html {
93+
font-size: 15px;
94+
}
95+
}
96+
97+
@media screen and (min-width: 48rem) {
98+
html {
99+
font-size: 16px;
100+
}
101+
}
102+
103+
body {
104+
line-height: 1.85;
105+
}
106+
107+
p,
108+
.modest-p {
109+
font-size: 1rem;
110+
margin-bottom: 1.3rem;
111+
}
112+
113+
h1,
114+
.modest-h1,
115+
h2,
116+
.modest-h2,
117+
h3,
118+
.modest-h3,
119+
h4,
120+
.modest-h4 {
121+
margin: 1.414rem 0 .5rem;
122+
font-weight: inherit;
123+
line-height: 1.42;
124+
}
125+
126+
h1,
127+
.modest-h1 {
128+
margin-top: 0;
129+
font-size: 3.998rem;
130+
}
131+
132+
h2,
133+
.modest-h2 {
134+
font-size: 2.827rem;
135+
}
136+
137+
h3,
138+
.modest-h3 {
139+
font-size: 1.999rem;
140+
}
141+
142+
h4,
143+
.modest-h4 {
144+
font-size: 1.414rem;
145+
}
146+
147+
h5,
148+
.modest-h5 {
149+
font-size: 1.121rem;
150+
}
151+
152+
h6,
153+
.modest-h6 {
154+
font-size: .88rem;
155+
}
156+
157+
small,
158+
.modest-small {
159+
font-size: .707em;
160+
}
161+
162+
/* https://github.com/mrmrs/fluidity */
163+
164+
img,
165+
canvas,
166+
iframe,
167+
video,
168+
svg,
169+
select,
170+
textarea {
171+
max-width: 100%;
172+
}
173+
174+
html {
175+
font-size: 18px;
176+
max-width: 100%;
177+
}
178+
179+
body {
180+
color: #444;
181+
font-family: 'Merriweather', Georgia, serif;
182+
margin: 0;
183+
max-width: 100%;
184+
}

‎example/-markdown.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<h1>Modest</h1>
2+
<p><a href="https://github.com/markdowncss/modest">Modest</a> is the second of many stylesheets to make HTML generated from
3+
markdown look beautiful. A list of all available stylesheets can be found <a href="https://github.com/markdowncss">here</a>.</p>
4+
<h4>A markdown theme that is rather modest.</h4>
5+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula pharetra ultricies. Cras magna turpis,
6+
vestibulum ut arcu et, rutrum porta velit. Curabitur luctus erat a velit tincidunt, vel malesuada nibh tempor.
7+
Mauris condimentum quam lorem, in finibus eros faucibus id. Nunc erat metus, fringilla dignissim faucibus id,
8+
malesuada quis justo.</p>
9+
<blockquote>
10+
<p>Vestibulum erat augue, feugiat vitae porttitor vel, condimentum quis ipsum. Etiam sagittis eros et dolor
11+
semper congue.</p>
12+
</blockquote>
13+
<p>Curabitur ac euismod turpis. Maecenas gravida viverra augue quis scelerisque. Vivamus quis massa elementum odio
14+
pharetra efficitur at eget nibh. Donec varius purus quis nisi gravida tristique. Quisque dictum justo nec nulla
15+
hendrerit aliquet.</p>
16+
<div>
17+
<img src="https://cloud.githubusercontent.com/assets/1424573/4785631/dc5ddcd2-5d82-11e4-88a2-06fdabbe4fb8.png">
18+
</div>
19+
<p>Duis ac ultrices nunc. Proin elit augue, fringilla at varius at, interdum ut justo. Sed sed eros a leo molestie
20+
bibendum. Nullam ac justo malesuada, euismod dui at, finibus purus. Sed mi risus, porta ac sem ac, commodo
21+
semper risus.</p>
22+
<h4>Some example code:</h4>
23+
<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>{
24+
gulp.watch(<span class="hljs-string">'*.md'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
25+
gulp.start(<span class="hljs-string">'md'</span>, <span class="hljs-string">'html'</span>);
26+
});
27+
28+
gulp.watch(<span class="hljs-string">'*.css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
29+
gulp.start(<span class="hljs-string">'css'</span>);
30+
});
31+
});
32+
</code></pre>
33+
<h4>Lists</h4>
34+
<ul>
35+
<li>Apples</li>
36+
<li>Citrus
37+
<ul>
38+
<li>Oranges</li>
39+
<li>Grapefruit</li>
40+
</ul></li>
41+
<li>Potatoes</li>
42+
<li>Milk</li>
43+
</ul>
44+
<ol>
45+
<li>Mow the lawn</li>
46+
<li>Feed the dog</li>
47+
<li>Dance</li>
48+
</ol>
49+
<p>Crafted with &lt;3 by <a href="http://johnotander.com">John Otander</a>(<a href="https://twitter.com/4lpine">@4lpine</a>).</p>

‎example/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Modest</title>
6+
<link rel="stylesheet" href="css/modest.css">
7+
</head>
8+
<body>
9+
<!--#insert file="-markdown.html" -->
10+
</body>
11+
</html>

‎gulpfile.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var gulp = require('gulp'),
2+
name = require('gulp-rename'),
3+
rework = require('gulp-rework'),
4+
reworkNPM = require('rework-npm'),
5+
reworkVars = require('rework-vars'),
6+
includer = require('gulp-htmlincluder'),
7+
classPrefix = require('rework-class-prefix'),
8+
media = require('rework-custom-media'),
9+
size = require('gulp-size'),
10+
md = require('gulp-remarkable');
11+
12+
gulp.task('md', function() {
13+
return gulp.src('modest.md')
14+
.pipe(md({ html: true }))
15+
.pipe(name('-markdown.html'))
16+
.pipe(gulp.dest('example'));
17+
});
18+
19+
gulp.task('html', ['md', 'css'], function() {
20+
return gulp.src('example/*.html')
21+
.pipe(includer())
22+
.pipe(gulp.dest('./'));
23+
});
24+
25+
gulp.task('css', function() {
26+
return gulp.src('index.css')
27+
.pipe(rework(reworkNPM(), classPrefix('modest-'), media(), reworkVars()))
28+
.pipe(size({ gzip: true, showFiles: true }))
29+
.pipe(name('modest.css'))
30+
.pipe(gulp.dest('css'));
31+
});
32+
33+
gulp.task('watch', function() {
34+
gulp.watch(['*.md', '*.css'], function() {
35+
gulp.start('default');
36+
});
37+
});
38+
39+
gulp.task('default', ['md', 'css', 'html', 'watch']);

‎index.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import "furtive-print";
2+
@import "furtive-code";
3+
@import "furtive-links";
4+
@import "furtive-typescale";
5+
@import "furtive-responsive-utils";
6+
7+
html {
8+
font-size: 18px;
9+
max-width: 100%;
10+
}
11+
12+
body {
13+
color: #444;
14+
font-family: 'Merriweather', Georgia, serif;
15+
margin: 0;
16+
max-width: 100%;
17+
}

0 commit comments

Comments
 (0)