├── .gitignore
├── LICENSE
├── README.md
├── css
    └── modest.css
├── example
    ├── -markdown.html
    └── index.html
├── gulpfile.js
├── index.css
├── index.html
├── modest.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014-2015 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Modest
 2 | 
 3 | A [markdown theme](https://markdowncss.github.io) 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)).
50 | 


--------------------------------------------------------------------------------
/css/modest.css:
--------------------------------------------------------------------------------
  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 | @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
175 | 
176 | @import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic);
177 | 
178 | html {
179 |   font-size: 18px;
180 |   max-width: 100%;
181 | }
182 | 
183 | body {
184 |   color: #444;
185 |   font-family: 'Open Sans Condensed', sans-serif;
186 |   font-weight: 300;
187 |   margin: 0 auto;
188 |   max-width: 48rem;
189 |   line-height: 1.45;
190 |   padding: .25rem;
191 | }
192 | 
193 | h1,
194 | h2,
195 | h3,
196 | h4,
197 | h5,
198 | h6 {
199 |   font-family: Arimo, Helvetica, sans-serif;
200 | }
201 | 
202 | h1,
203 | h2,
204 | h3 {
205 |   border-bottom: 2px solid #fafafa;
206 |   margin-bottom: 1.15rem;
207 |   padding-bottom: .5rem;
208 |   text-align: center;
209 | }
210 | 
211 | blockquote {
212 |   border-left: 8px solid #fafafa;
213 |   padding: 1rem;
214 | }
215 | 
216 | pre,
217 | code {
218 |   background-color: #fafafa;
219 | }


--------------------------------------------------------------------------------
/example/-markdown.html:
--------------------------------------------------------------------------------
 1 | <h1>Modest</h1>
 2 | <p><a href="https://github.com/markdowncss/modest">Modest</a> is the fourth 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>
50 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 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:
--------------------------------------------------------------------------------
 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']);
40 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | @import "furtive-print";
 2 | @import "furtive-code";
 3 | @import "furtive-links";
 4 | @import "furtive-typescale";
 5 | @import "furtive-responsive-utils";
 6 | 
 7 | @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
 8 | @import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic);
 9 | 
10 | html {
11 |   font-size: 18px;
12 |   max-width: 100%;
13 | }
14 | 
15 | body {
16 |   color: #444;
17 |   font-family: 'Open Sans Condensed', sans-serif;
18 |   font-weight: 300;
19 |   margin: 0 auto;
20 |   max-width: 48rem;
21 |   line-height: 1.45;
22 |   padding: .25rem;
23 | }
24 | 
25 | h1,
26 | h2,
27 | h3,
28 | h4,
29 | h5,
30 | h6 {
31 |   font-family: Arimo, Helvetica, sans-serif;
32 | }
33 | 
34 | h1,
35 | h2,
36 | h3 {
37 |   border-bottom: 2px solid #fafafa;
38 |   margin-bottom: 1.15rem;
39 |   padding-bottom: .5rem;
40 |   text-align: center;
41 | }
42 | 
43 | blockquote {
44 |   border-left: 8px solid #fafafa;
45 |   padding: 1rem;
46 | }
47 | 
48 | pre,
49 | code {
50 |   background-color: #fafafa;
51 | }
52 | 


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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "markdown-modest",
 3 |   "version": "0.0.1",
 4 |   "description": "A modest markdown CSS theme.",
 5 |   "main": "gulpfile.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/markdowncss/modest.git"
12 |   },
13 |   "keywords": [
14 |     "markdown",
15 |     "css",
16 |     "modest",
17 |     "theme"
18 |   ],
19 |   "author": "John Otander <johnotander@gmail.com> (http://johnotander.com/)",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/markdowncss/modest/issues"
23 |   },
24 |   "homepage": "https://github.com/markdowncss/modest",
25 |   "dependencies": {
26 |     "furtive-code": "0.0.1",
27 |     "furtive-links": "0.0.2",
28 |     "furtive-print": "0.0.1",
29 |     "furtive-responsive-utils": "0.0.1",
30 |     "furtive-typescale": "0.0.4",
31 |     "gulp": "^3.8.9",
32 |     "gulp-htmlincluder": "^0.1.0",
33 |     "gulp-remarkable": "0.0.5",
34 |     "gulp-rename": "^1.2.0",
35 |     "gulp-rework": "^1.0.2",
36 |     "gulp-size": "^1.1.0",
37 |     "rework-class-prefix": "0.0.2",
38 |     "rework-custom-media": "^0.2.0",
39 |     "rework-npm": "^1.0.0",
40 |     "rework-vars": "^3.1.1"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------