├── README.md
├── markdown.css
└── example.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Markdown CSS
 2 | 
 3 | This is a simple style with normalized defaults, it should work on anything from a desktop, to a phone.
 4 | 
 5 | View the live preview here: http://simon.lc/sites/markdown/.
 6 | 
 7 | ## How to use
 8 | 
 9 | Add this to the top of your markdown file
10 | ```
11 | <link href="/path/to/markdown.css" rel="stylesheet"></link>
12 | ```
13 | ### Editing
14 | With Markdown CSS, I decided to base all the size off the body font-size. Simply changing the body font size will also change the heading's size, body width, etc.
15 | 
16 | Since the CSS also uses media queries, it might also be necessary to change the body font-size for your purposes. I do not have any cool phones or tablets, so the extent of my testing was done by resizing my browser window.
17 | 
18 | ## Print
19 | Also included is a printing media query. It has not been tested yet, and mainly uses HTML5 Boilerplate defaults.
20 | 
21 | 
22 | ## Credits
23 | - [HTML5 Boilerplate](http://h5bp.com) - For normalize.css and media queries.
24 | - Various other web resources for inspiration.
25 | 
26 | ## License
27 | 
28 | ![copyleft](http://unlicense.org/pd-icon.png)
29 | 
30 | [http://unlicense.org/](http://unlicense.org/)
31 | 


--------------------------------------------------------------------------------
/markdown.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-size: 100%;
  3 |   overflow-y: scroll;
  4 |   -webkit-text-size-adjust: 100%;
  5 |   -ms-text-size-adjust: 100%;
  6 | }
  7 | 
  8 | body {
  9 |   color: #444;
 10 |   font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
 11 |   font-size: 12px;
 12 |   line-height: 1.5em;
 13 |   padding: 1em;
 14 |   margin: auto;
 15 |   max-width: 42em;
 16 |   background: #fefefe;
 17 | }
 18 | 
 19 | a {
 20 |   color: #0645ad;
 21 |   text-decoration: none;
 22 | }
 23 | 
 24 | a:visited {
 25 |   color: #0b0080;
 26 | }
 27 | 
 28 | a:hover {
 29 |   color: #06e;
 30 | }
 31 | 
 32 | a:active {
 33 |   color: #faa700;
 34 | }
 35 | 
 36 | a:focus {
 37 |   outline: thin dotted;
 38 | }
 39 | 
 40 | a:hover,
 41 | a:active {
 42 |   outline: 0;
 43 | }
 44 | 
 45 | ::-moz-selection {
 46 |   background: rgba(255, 255, 0, 0.3);
 47 |   color: #000;
 48 | }
 49 | 
 50 | ::selection {
 51 |   background: rgba(255, 255, 0, 0.3);
 52 |   color: #000;
 53 | }
 54 | 
 55 | a::-moz-selection {
 56 |   background: rgba(255, 255, 0, 0.3);
 57 |   color: #0645ad;
 58 | }
 59 | 
 60 | a::selection {
 61 |   background: rgba(255, 255, 0, 0.3);
 62 |   color: #0645ad;
 63 | }
 64 | 
 65 | p {
 66 |   margin: 1em 0;
 67 | }
 68 | 
 69 | img {
 70 |   max-width: 100%;
 71 | }
 72 | 
 73 | h1,
 74 | h2,
 75 | h3,
 76 | h4,
 77 | h5,
 78 | h6 {
 79 |   font-weight: normal;
 80 |   color: #111;
 81 |   line-height: 1em;
 82 | }
 83 | 
 84 | h4,
 85 | h5,
 86 | h6 {
 87 |   font-weight: bold;
 88 | }
 89 | 
 90 | h1 {
 91 |   font-size: 2.5em;
 92 | }
 93 | 
 94 | h2 {
 95 |   font-size: 2em;
 96 | }
 97 | 
 98 | h3 {
 99 |   font-size: 1.5em;
100 | }
101 | 
102 | h4 {
103 |   font-size: 1.2em;
104 | }
105 | 
106 | h5 {
107 |   font-size: 1em;
108 | }
109 | 
110 | h6 {
111 |   font-size: 0.9em;
112 | }
113 | 
114 | blockquote {
115 |   color: #666666;
116 |   margin: 0;
117 |   padding-left: 3em;
118 |   border-left: 0.5em #eee solid;
119 | }
120 | 
121 | hr {
122 |   display: block;
123 |   border: 0;
124 |   border-top: 1px solid #aaa;
125 |   border-bottom: 1px solid #eee;
126 |   margin: 1em 0;
127 |   padding: 0;
128 | }
129 | 
130 | pre,
131 | code,
132 | kbd,
133 | samp {
134 |   color: #000;
135 |   font-family: monospace, monospace;
136 |   _font-family: 'courier new', monospace;
137 |   font-size: 0.98em;
138 | }
139 | 
140 | pre {
141 |   white-space: pre;
142 |   white-space: pre-wrap;
143 |   word-wrap: break-word;
144 | }
145 | 
146 | b,
147 | strong {
148 |   font-weight: bold;
149 | }
150 | 
151 | dfn {
152 |   font-style: italic;
153 | }
154 | 
155 | ins {
156 |   background: #ff9;
157 |   color: #000;
158 |   text-decoration: none;
159 | }
160 | 
161 | mark {
162 |   background: #ff0;
163 |   color: #000;
164 |   font-style: italic;
165 |   font-weight: bold;
166 | }
167 | 
168 | sub,
169 | sup {
170 |   font-size: 75%;
171 |   line-height: 0;
172 |   position: relative;
173 |   vertical-align: baseline;
174 | }
175 | 
176 | sup {
177 |   top: -0.5em;
178 | }
179 | 
180 | sub {
181 |   bottom: -0.25em;
182 | }
183 | 
184 | ul,
185 | ol {
186 |   margin: 1em 0;
187 |   padding: 0 0 0 2em;
188 | }
189 | 
190 | li p:last-child {
191 |   margin: 0;
192 | }
193 | 
194 | dd {
195 |   margin: 0 0 0 2em;
196 | }
197 | 
198 | img {
199 |   border: 0;
200 |   -ms-interpolation-mode: bicubic;
201 |   vertical-align: middle;
202 | }
203 | 
204 | table {
205 |   border-collapse: collapse;
206 |   border-spacing: 0;
207 | }
208 | 
209 | td {
210 |   vertical-align: top;
211 | }
212 | 
213 | @media only screen and (min-width: 480px) {
214 |   body {
215 |     font-size: 14px;
216 |   }
217 | }
218 | 
219 | @media only screen and (min-width: 768px) {
220 |   body {
221 |     font-size: 16px;
222 |   }
223 | }
224 | 
225 | @media print {
226 |   * {
227 |     background: transparent !important;
228 |     color: black !important;
229 |     filter: none !important;
230 |     -ms-filter: none !important;
231 |   }
232 | 
233 |   body {
234 |     font-size: 12pt;
235 |     max-width: 100%;
236 |   }
237 | 
238 |   a,
239 |   a:visited {
240 |     text-decoration: underline;
241 |   }
242 | 
243 |   hr {
244 |     height: 1px;
245 |     border: 0;
246 |     border-bottom: 1px solid black;
247 |   }
248 | 
249 |   a[href]:after {
250 |     content: " (" attr(href) ")";
251 |   }
252 | 
253 |   abbr[title]:after {
254 |     content: " (" attr(title) ")";
255 |   }
256 | 
257 |   .ir a:after,
258 |   a[href^="javascript:"]:after,
259 |   a[href^="#"]:after {
260 |     content: "";
261 |   }
262 | 
263 |   pre,
264 |   blockquote {
265 |     border: 1px solid #999;
266 |     padding-right: 1em;
267 |     page-break-inside: avoid;
268 |   }
269 | 
270 |   tr,
271 |   img {
272 |     page-break-inside: avoid;
273 |   }
274 | 
275 |   img {
276 |     max-width: 100% !important;
277 |   }
278 | 
279 |   @page :left {
280 |     margin: 15mm 20mm 15mm 10mm;
281 |   }
282 | 
283 |   @page :right {
284 |     margin: 15mm 10mm 15mm 20mm;
285 |   }
286 | 
287 |   p,
288 |   h2,
289 |   h3 {
290 |     orphans: 3;
291 |     widows: 3;
292 |   }
293 | 
294 |   h2,
295 |   h3 {
296 |     page-break-after: avoid;
297 |   }
298 | }
299 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <link href="markdown-css/markdown.css" rel="stylesheet"></link>
  2 | <h1>A First Level Header</h1>
  3 | 
  4 | <h2>A Second Level Header</h2>
  5 | 
  6 | <h3>A Third Level Header</h3>
  7 | 
  8 | <h4>A Fourth Level Header</h4>
  9 | 
 10 | <h5>A Fifth Level Header</h5>
 11 | 
 12 | <h6>A Sixed Level Header</h6>
 13 | 
 14 | <p>Now is the time for all good men to come to
 15 | the aid of their country. This is just a
 16 | regular paragraph.</p>
 17 | 
 18 | <p>The quick brown fox jumped over the lazy
 19 | dog's back.</p>
 20 | 
 21 | <hr />
 22 | 
 23 | <h3>Header 3</h3>
 24 | 
 25 | <blockquote>
 26 |   <p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
 27 | 
 28 |   <p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 29 |   id sem consectetuer libero luctus adipiscing.</p>
 30 | 
 31 |   <h2>This is an H2 in a blockquote</h2>
 32 | 
 33 |   <p>This is the first level of quoting.</p>
 34 | 
 35 |   <blockquote>
 36 |     <p>This is nested blockquote.</p>
 37 |   </blockquote>
 38 | 
 39 |   <p>Back to the first level.</p>
 40 | </blockquote>
 41 | 
 42 | <p>Some of these words <em>are emphasized</em>.</p>
 43 | 
 44 | <p>Use two asterisks for <strong>strong emphasis</strong>.
 45 | Or, if you prefer, <strong>use two underscores instead</strong>.</p>
 46 | 
 47 | <ul>
 48 | <li>Candy.</li>
 49 | <li>Gum.</li>
 50 | <li>Booze.</li>
 51 | <ul>
 52 | <li><p>A list item.</p>
 53 | <p>With multiple paragraphs.</p></li>
 54 | <li><p>Another item in the list.</p></li>
 55 | <li><p>This is a list item with two paragraphs. Lorem ipsum dolor
 56 | sit amet, consectetuer adipiscing elit. Aliquam hendrerit
 57 | mi posuere lectus.</p>
 58 | <p>Vestibulum enim wisi, viverra nec, fringilla in, laoreet
 59 | vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
 60 | sit amet velit.</p></li>
 61 | </ul>
 62 | <li><p>Suspendisse id sem consectetuer libero luctus adipiscing.</p></li>
 63 | <li><p>This is a list item with two paragraphs.</p>
 64 | <p>This is the second paragraph in the list item. You're
 65 | only required to indent the first line. Lorem ipsum dolor
 66 | sit amet, consectetuer adipiscing elit.</p></li>
 67 | <li><p>Another item in the same list.</p></li>
 68 | <li><p>A list item with a blockquote:</p>
 69 | <blockquote>
 70 |   <p>This is a blockquote inside a list item.</p>
 71 | </blockquote></li>
 72 | <li><p>A list item with a code block:</p>
 73 | <pre><code>&lt;code goes here&gt;
 74 | </code></pre></li>
 75 | </ul>
 76 | 
 77 | <p>Here is an example of AppleScript:</p>
 78 | 
 79 | <pre><code>tell application "Foo"
 80 |     beep
 81 | end tell
 82 | </code></pre>
 83 | 
 84 | <p>This is an <a href="http://example.com/">example link</a>.</p>
 85 | 
 86 | <p>I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from
 87 | <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>
 88 | 
 89 | <p>I start my morning with a cup of coffee and
 90 | <a href="http://www.nytimes.com/">The New York Times</a>.</p>
 91 | 
 92 | <p><img src="image.jpg" alt="alt text" title="Title" /></p>
 93 | 
 94 | <p><img src="image2.jpg" alt="alt text" title="Title" /></p>
 95 | 
 96 | <p>I strongly recommend against using any <code>&lt;blink&gt;</code> tags.</p>
 97 | 
 98 | <p>I wish SmartyPants used named entities like <code>&amp;mdash;</code>
 99 | instead of decimal-encoded entites like <code>&amp;#8212;</code>.</p>
100 | 
101 | <p>If you want your page to validate under XHTML 1.0 Strict,
102 | you've got to put paragraph tags in your blockquotes:</p>
103 | 
104 | <pre><code>&lt;blockquote&gt;
105 |     &lt;p&gt;For example.&lt;/p&gt;
106 | &lt;/blockquote&gt;
107 | </code></pre>
108 | 
109 | 
110 | 
111 | <h1>August 31, 2011</h1>
112 | 
113 | <p>Homework: Problems 2.10-2.19; complete registration system</p>
114 | 
115 | <hr />
116 | 
117 | <h2>Chapter 2</h2>
118 | 
119 | <h3>Phases of Software Development</h3>
120 | 
121 | <ol>
122 | <li>Analysis</li>
123 | <li>Design</li>
124 | <li>Implementation</li>
125 | </ol>
126 | 
127 | <h4>Analysis phase</h4>
128 | 
129 | <p><em>Requirements</em> -- what the customer wants or needs.  Understanding on needs expressed by:</p>
130 | 
131 | <ul>
132 | <li>Use cases can (can use UML)</li>
133 | <li>User manual style of analysis document</li>
134 | </ul>
135 | 
136 | <h4>Design phase</h4>
137 | 
138 | <p>Goals of OO design:</p>
139 | 
140 | <ol>
141 | <li>Identify classes -- things in the system</li>
142 | <li>Identify responsibilities of the classes</li>
143 | <li>Identify relationships between classes</li>
144 | </ol>
145 | 
146 | <p>Types of class relationships:</p>
147 | 
148 | <ol>
149 | <li>Dependency (<em>uses a</em>)</li>
150 | <li>Aggregation (<em>has a</em>)
151 | <ul><li>Aggregation -- 1:many</li>
152 | <li>Association -- 1:1</li>
153 | <li>Composition -- "<em>if I'm composed of other things, then I am considered
154 | responsible for the lifetime for those things</em>"</li></ul></li>
155 | <li>Inheritance (<em>is a</em>)</li>
156 | </ol>
157 | 
158 | <p>Classes and relationships are the basis for a UML class diagram.</p>
159 | 
160 | 


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