git.fiddlerwoaroof.com
Browse code

initial commit

fiddlerwoaroof authored on 14/07/2014 19:51:21
Showing 13 changed files
.gitignore
History View file @ de46cc7
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,3 @@
1 
+.*.swp
2 
+*.pyc
3 
+__pycache__
__init__.py
History View file @ de46cc7
0 4 
new file mode 100644
__main__.py
History View file @ de46cc7
1 5 
new file mode 100644
... ... 
@@ -0,0 +1,32 @@
1 
+from flask import Flask, url_for, redirect, request
2 
+import mako.template as mako
3 
+import logging
4 
+
5 
+app = Flask(__name__)
6 
+
7 
+articles = [
8 
+    dict(
9 
+        articleid = 0,
10 
+        title = 'The title',
11 
+        body = 'The Body'*50,
12 
+        comments = []
13 
+    )
14 
+] * 12
15 
+
16 
+
17 
+@app.route("/")
18 
+def main(idx=0):
19 
+    article = articles[idx]
20 
+    print('pre-template')
21 
+    template = mako.Template(open('main.mako').read())
22 
+    print('pre-render')
23 
+    result = template.render(maintitle="test", **article)
24 
+    print('rendered')
25 
+    return result
26 
+
27 
+@app.route("/addcomment", methods=['POST'])
28 
+def addcomment():
29 
+    print(request.form['articleid'], request.form['comment'])
30 
+    return redirect(url_for('main'))
31 
+
32 
+app.run('172.16.1.2', debug=True)
index.html
History View file @ de46cc7
0 33 
new file mode 100644
... ... 
@@ -0,0 +1,76 @@
1 
+<!DOCTYPE html>
2 
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
3 
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
4 
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
5 
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
6 
+<head>
7 
+
8 
+	<!-- Basic Page Needs
9 
+  ================================================== -->
10 
+	<meta charset="utf-8">
11 
+	<title>Your Page Title Here :)</title>
12 
+	<meta name="description" content="">
13 
+	<meta name="author" content="">
14 
+
15 
+	<!-- Mobile Specific Metas
16 
+  ================================================== -->
17 
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
18 
+
19 
+	<!-- CSS
20 
+  ================================================== -->
21 
+	<link rel="stylesheet" href="stylesheets/base.css">
22 
+	<link rel="stylesheet" href="stylesheets/skeleton.css">
23 
+	<link rel="stylesheet" href="stylesheets/layout.css">
24 
+
25 
+	<!--[if lt IE 9]>
26 
+		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
27 
+	<![endif]-->
28 
+
29 
+	<!-- Favicons
30 
+	================================================== -->
31 
+	<link rel="shortcut icon" href="images/favicon.ico">
32 
+	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
33 
+	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
34 
+	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
35 
+
36 
+</head>
37 
+<body>
38 
+
39 
+
40 
+
41 
+	<!-- Primary Page Layout
42 
+	================================================== -->
43 
+
44 
+	<!-- Delete everything in this .container and get started on your own site! -->
45 
+
46 
+	<div class="container">
47 
+		<div class="sixteen columns">
48 
+			<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
49 
+			<h5>Version 1.2</h5>
50 
+			<hr />
51 
+		</div>
52 
+		<div class="one-third column">
53 
+			<h3>About Skeleton?</h3>
54 
+			<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
55 
+		</div>
56 
+		<div class="one-third column">
57 
+			<h3>Three Core Principles</h3>
58 
+			<p>Skeleton is built on three core principles:</p>
59 
+			<ul class="square">
60 
+				<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
61 
+				<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
62 
+				<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
63 
+			</ul>
64 
+		</div>
65 
+		<div class="one-third column">
66 
+			<h3>Docs &amp; Support</h3>
67 
+			<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
68 
+		</div>
69 
+
70 
+	</div><!-- container -->
71 
+
72 
+
73 
+<!-- End Document
74 
+================================================== -->
75 
+</body>
76 
+</html>
0 77 
\ No newline at end of file
main.mako
History View file @ de46cc7
1 78 
new file mode 100644
... ... 
@@ -0,0 +1,75 @@
1 
+<!DOCTYPE html>
2 
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
3 
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
4 
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
5 
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
6 
+<head>
7 
+
8 
+	<!-- Basic Page Needs
9 
+  ================================================== -->
10 
+	<meta charset="utf-8">
11 
+	<title>Your Page Title Here :)</title>
12 
+	<meta name="description" content="">
13 
+	<meta name="author" content="">
14 
+
15 
+	<!-- Mobile Specific Metas
16 
+  ================================================== -->
17 
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
18 
+
19 
+	<!-- CSS
20 
+  ================================================== -->
21 
+	<link rel="stylesheet" href="static/stylesheets/base.css">
22 
+	<link rel="stylesheet" href="static/stylesheets/skeleton.css">
23 
+	<link rel="stylesheet" href="static/stylesheets/layout.css">
24 
+	<link rel="stylesheet" href="static/stylesheets/mystyles.css">
25 
+
26 
+	<!--[if lt IE 9]>
27 
+		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
28 
+	<![endif]-->
29 
+
30 
+	<!-- Favicons
31 
+	================================================== -->
32 
+	<link rel="shortcut icon" href="static/images/favicon.ico">
33 
+	<link rel="apple-touch-icon" href="static/images/apple-touch-icon.png">
34 
+	<link rel="apple-touch-icon" sizes="72x72" href="static/images/apple-touch-icon-72x72.png">
35 
+	<link rel="apple-touch-icon" sizes="114x114" href="static/images/apple-touch-icon-114x114.png">
36 
+
37 
+</head>
38 
+<body>
39 
+
40 
+
41 
+
42 
+	<!-- Primary Page Layout
43 
+	================================================== -->
44 
+
45 
+	<!-- Delete everything in this .container and get started on your own site! -->
46 
+
47 
+	<div class="container">
48 
+		<article>
49 
+			<header class="sixteen columns">
50 
+				<h1>${title}</h1>
51 
+			</header>
52 
+			<p class="abody ten columns" style="background:red" data-articleid="${articleid}">${body}</p>
53 
+			<footer>
54 
+				<section class="comments six columns clearfix">
55 
+					<form action="/addcomment" method="POST">
56 
+						<input type="hidden" name="articleid" value="${articleid}" />
57 
+						<textarea name="comment" class="six columns"></textarea>
58 
+						<input type="submit" class="six columns" />
59 
+					</form>
60 
+				% for comment in comments:
61 
+					<article class="comment six columns">
62 
+						<p class="comment">${comment}</p>
63 
+					</article>
64 
+				% endfor
65 
+				</section>
66 
+			</footer>
67 
+
68 
+		</article>
69 
+	</div><!-- container -->
70 
+
71 
+
72 
+<!-- End Document
73 
+================================================== -->
74 
+</body>
75 
+</html>
static/images/apple-touch-icon-114x114.png
History View file @ de46cc7
0 76 
new file mode 100644
1 77 
Binary files /dev/null and b/static/images/apple-touch-icon-114x114.png differ
static/images/apple-touch-icon-72x72.png
History View file @ de46cc7
2 78 
new file mode 100644
3 79 
Binary files /dev/null and b/static/images/apple-touch-icon-72x72.png differ
static/images/apple-touch-icon.png
History View file @ de46cc7
4 80 
new file mode 100644
5 81 
Binary files /dev/null and b/static/images/apple-touch-icon.png differ
static/images/favicon.ico
History View file @ de46cc7
6 82 
new file mode 100644
7 83 
Binary files /dev/null and b/static/images/favicon.ico differ
static/stylesheets/base.css
History View file @ de46cc7
8 84 
new file mode 100644
... ... 
@@ -0,0 +1,269 @@
1 
+/*
2 
+* Skeleton V1.2
3 
+* Copyright 2011, Dave Gamache
4 
+* www.getskeleton.com
5 
+* Free to use under the MIT license.
6 
+* http://www.opensource.org/licenses/mit-license.php
7 
+* 6/20/2012
8 
+*/
9 
+
10 
+
11 
+/* Table of Content
12 
+==================================================
13 
+	#Reset & Basics
14 
+	#Basic Styles
15 
+	#Site Styles
16 
+	#Typography
17 
+	#Links
18 
+	#Lists
19 
+	#Images
20 
+	#Buttons
21 
+	#Forms
22 
+	#Misc */
23 
+
24 
+
25 
+/* #Reset & Basics (Inspired by E. Meyers)
26 
+================================================== */
27 
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
28 
+		margin: 0;
29 
+		padding: 0;
30 
+		border: 0;
31 
+		font-size: 100%;
32 
+		font: inherit;
33 
+		vertical-align: baseline; }
34 
+	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
35 
+		display: block; }
36 
+	body {
37 
+		line-height: 1; }
38 
+	ol, ul {
39 
+		list-style: none; }
40 
+	blockquote, q {
41 
+		quotes: none; }
42 
+	blockquote:before, blockquote:after,
43 
+	q:before, q:after {
44 
+		content: '';
45 
+		content: none; }
46 
+	table {
47 
+		border-collapse: collapse;
48 
+		border-spacing: 0; }
49 
+
50 
+
51 
+/* #Basic Styles
52 
+================================================== */
53 
+	body {
54 
+		background: #fff;
55 
+		font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
56 
+		color: #444;
57 
+		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
58 
+		-webkit-text-size-adjust: 100%;
59 
+ }
60 
+
61 
+
62 
+/* #Typography
63 
+================================================== */
64 
+	h1, h2, h3, h4, h5, h6 {
65 
+		color: #181818;
66 
+		font-family: "Georgia", "Times New Roman", serif;
67 
+		font-weight: normal; }
68 
+	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
69 
+	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
70 
+	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
71 
+	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
72 
+	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
73 
+	h5 { font-size: 17px; line-height: 24px; }
74 
+	h6 { font-size: 14px; line-height: 21px; }
75 
+	.subheader { color: #777; }
76 
+
77 
+	p { margin: 0 0 20px 0; }
78 
+	p img { margin: 0; }
79 
+	p.lead { font-size: 21px; line-height: 27px; color: #777;  }
80 
+
81 
+	em { font-style: italic; }
82 
+	strong { font-weight: bold; color: #333; }
83 
+	small { font-size: 80%; }
84 
+
85 
+/*	Blockquotes  */
86 
+	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
87 
+	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
88 
+	blockquote cite { display: block; font-size: 12px; color: #555; }
89 
+	blockquote cite:before { content: "\2014 \0020"; }
90 
+	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
91 
+
92 
+	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
93 
+
94 
+
95 
+/* #Links
96 
+================================================== */
97 
+	a, a:visited { color: #333; text-decoration: underline; outline: 0; }
98 
+	a:hover, a:focus { color: #000; }
99 
+	p a, p a:visited { line-height: inherit; }
100 
+
101 
+
102 
+/* #Lists
103 
+================================================== */
104 
+	ul, ol { margin-bottom: 20px; }
105 
+	ul { list-style: none outside; }
106 
+	ol { list-style: decimal; }
107 
+	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
108 
+	ul.square { list-style: square outside; }
109 
+	ul.circle { list-style: circle outside; }
110 
+	ul.disc { list-style: disc outside; }
111 
+	ul ul, ul ol,
112 
+	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
113 
+	ul ul li, ul ol li,
114 
+	ol ol li, ol ul li { margin-bottom: 6px; }
115 
+	li { line-height: 18px; margin-bottom: 12px; }
116 
+	ul.large li { line-height: 21px; }
117 
+	li p { line-height: 21px; }
118 
+
119 
+/* #Images
120 
+================================================== */
121 
+
122 
+	img.scale-with-grid {
123 
+		max-width: 100%;
124 
+		height: auto; }
125 
+
126 
+
127 
+/* #Buttons
128 
+================================================== */
129 
+
130 
+	.button,
131 
+	button,
132 
+	input[type="submit"],
133 
+	input[type="reset"],
134 
+	input[type="button"] {
135 
+		background: #eee; /* Old browsers */
136 
+		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
137 
+		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
138 
+		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
139 
+		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
140 
+		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
141 
+		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
142 
+	  border: 1px solid #aaa;
143 
+	  border-top: 1px solid #ccc;
144 
+	  border-left: 1px solid #ccc;
145 
+	  -moz-border-radius: 3px;
146 
+	  -webkit-border-radius: 3px;
147 
+	  border-radius: 3px;
148 
+	  color: #444;
149 
+	  display: inline-block;
150 
+	  font-size: 11px;
151 
+	  font-weight: bold;
152 
+	  text-decoration: none;
153 
+	  text-shadow: 0 1px rgba(255, 255, 255, .75);
154 
+	  cursor: pointer;
155 
+	  margin-bottom: 20px;
156 
+	  line-height: normal;
157 
+	  padding: 8px 10px;
158 
+	  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
159 
+
160 
+	.button:hover,
161 
+	button:hover,
162 
+	input[type="submit"]:hover,
163 
+	input[type="reset"]:hover,
164 
+	input[type="button"]:hover {
165 
+		color: #222;
166 
+		background: #ddd; /* Old browsers */
167 
+		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
168 
+		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
169 
+		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
170 
+		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
171 
+		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
172 
+		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
173 
+	  border: 1px solid #888;
174 
+	  border-top: 1px solid #aaa;
175 
+	  border-left: 1px solid #aaa; }
176 
+
177 
+	.button:active,
178 
+	button:active,
179 
+	input[type="submit"]:active,
180 
+	input[type="reset"]:active,
181 
+	input[type="button"]:active {
182 
+		border: 1px solid #666;
183 
+		background: #ccc; /* Old browsers */
184 
+		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
185 
+		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
186 
+		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
187 
+		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
188 
+		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
189 
+		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
190 
+
191 
+	.button.full-width,
192 
+	button.full-width,
193 
+	input[type="submit"].full-width,
194 
+	input[type="reset"].full-width,
195 
+	input[type="button"].full-width {
196 
+		width: 100%;
197 
+		padding-left: 0 !important;
198 
+		padding-right: 0 !important;
199 
+		text-align: center; }
200 
+
201 
+	/* Fix for odd Mozilla border & padding issues */
202 
+	button::-moz-focus-inner,
203 
+	input::-moz-focus-inner {
204 
+    border: 0;
205 
+    padding: 0;
206 
+	}
207 
+
208 
+
209 
+/* #Forms
210 
+================================================== */
211 
+
212 
+	form {
213 
+		margin-bottom: 20px; }
214 
+	fieldset {
215 
+		margin-bottom: 20px; }
216 
+	input[type="text"],
217 
+	input[type="password"],
218 
+	input[type="email"],
219 
+	textarea,
220 
+	select {
221 
+		border: 1px solid #ccc;
222 
+		padding: 6px 4px;
223 
+		outline: none;
224 
+		-moz-border-radius: 2px;
225 
+		-webkit-border-radius: 2px;
226 
+		border-radius: 2px;
227 
+		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
228 
+		color: #777;
229 
+		margin: 0;
230 
+		width: 210px;
231 
+		max-width: 100%;
232 
+		display: block;
233 
+		margin-bottom: 20px;
234 
+		background: #fff; }
235 
+	select {
236 
+		padding: 0; }
237 
+	input[type="text"]:focus,
238 
+	input[type="password"]:focus,
239 
+	input[type="email"]:focus,
240 
+	textarea:focus {
241 
+		border: 1px solid #aaa;
242 
+ 		color: #444;
243 
+ 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
244 
+		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
245 
+		box-shadow:  0 0 3px rgba(0,0,0,.2); }
246 
+	textarea {
247 
+		min-height: 60px; }
248 
+	label,
249 
+	legend {
250 
+		display: block;
251 
+		font-weight: bold;
252 
+		font-size: 13px;  }
253 
+	select {
254 
+		width: 220px; }
255 
+	input[type="checkbox"] {
256 
+		display: inline; }
257 
+	label span,
258 
+	legend span {
259 
+		font-weight: normal;
260 
+		font-size: 13px;
261 
+		color: #444; }
262 
+
263 
+/* #Misc
264 
+================================================== */
265 
+	.remove-bottom { margin-bottom: 0 !important; }
266 
+	.half-bottom { margin-bottom: 10px !important; }
267 
+	.add-bottom { margin-bottom: 20px !important; }
268 
+
269 
+
static/stylesheets/layout.css
History View file @ de46cc7
0 270 
new file mode 100644
... ... 
@@ -0,0 +1,58 @@
1 
+/*
2 
+* Skeleton V1.2
3 
+* Copyright 2011, Dave Gamache
4 
+* www.getskeleton.com
5 
+* Free to use under the MIT license.
6 
+* http://www.opensource.org/licenses/mit-license.php
7 
+* 6/20/2012
8 
+*/
9 
+
10 
+/* Table of Content
11 
+==================================================
12 
+	#Site Styles
13 
+	#Page Styles
14 
+	#Media Queries
15 
+	#Font-Face */
16 
+
17 
+/* #Site Styles
18 
+================================================== */
19 
+
20 
+/* #Page Styles
21 
+================================================== */
22 
+
23 
+/* #Media Queries
24 
+================================================== */
25 
+
26 
+	/* Smaller than standard 960 (devices and browsers) */
27 
+	@media only screen and (max-width: 959px) {}
28 
+
29 
+	/* Tablet Portrait size to standard 960 (devices and browsers) */
30 
+	@media only screen and (min-width: 768px) and (max-width: 959px) {}
31 
+
32 
+	/* All Mobile Sizes (devices and browser) */
33 
+	@media only screen and (max-width: 767px) {}
34 
+
35 
+	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
36 
+	@media only screen and (min-width: 480px) and (max-width: 767px) {}
37 
+
38 
+	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
39 
+	@media only screen and (max-width: 479px) {}
40 
+
41 
+
42 
+/* #Font-Face
43 
+================================================== */
44 
+/* 	This is the proper syntax for an @font-face file
45 
+		Just create a "fonts" folder at the root,
46 
+		copy your FontName into code below and remove
47 
+		comment brackets */
48 
+
49 
+/*	@font-face {
50 
+	    font-family: 'FontName';
51 
+	    src: url('../fonts/FontName.eot');
52 
+	    src: url('../fonts/FontName.eot?iefix') format('eot'),
53 
+	         url('../fonts/FontName.woff') format('woff'),
54 
+	         url('../fonts/FontName.ttf') format('truetype'),
55 
+	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
56 
+	    font-weight: normal;
57 
+	    font-style: normal; }
58 
+*/
0 59 
\ No newline at end of file
static/stylesheets/mystyles.css
History View file @ de46cc7
1 60 
new file mode 100644
... ... 
@@ -0,0 +1,7 @@
1 
+article > header > h1 {
2 
+	text-align: center;
3 
+}
4 
+
5 
+p.comment {
6 
+	text-align: justify;
7 
+}
static/stylesheets/skeleton.css
History View file @ de46cc7
0 8 
new file mode 100644
... ... 
@@ -0,0 +1,242 @@
1 
+/*
2 
+* Skeleton V1.2
3 
+* Copyright 2011, Dave Gamache
4 
+* www.getskeleton.com
5 
+* Free to use under the MIT license.
6 
+* http://www.opensource.org/licenses/mit-license.php
7 
+* 6/20/2012
8 
+*/
9 
+
10 
+
11 
+/* Table of Contents
12 
+==================================================
13 
+    #Base 960 Grid
14 
+    #Tablet (Portrait)
15 
+    #Mobile (Portrait)
16 
+    #Mobile (Landscape)
17 
+    #Clearing */
18 
+
19 
+
20 
+
21 
+/* #Base 960 Grid
22 
+================================================== */
23 
+
24 
+    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
25 
+    .container .column,
26 
+    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
27 
+    .row                                        { margin-bottom: 20px; }
28 
+
29 
+    /* Nested Column Classes */
30 
+    .column.alpha, .columns.alpha               { margin-left: 0; }
31 
+    .column.omega, .columns.omega               { margin-right: 0; }
32 
+
33 
+    /* Base Grid */
34 
+    .container .one.column,
35 
+    .container .one.columns                     { width: 40px;  }
36 
+    .container .two.columns                     { width: 100px; }
37 
+    .container .three.columns                   { width: 160px; }
38 
+    .container .four.columns                    { width: 220px; }
39 
+    .container .five.columns                    { width: 280px; }
40 
+    .container .six.columns                     { width: 340px; }
41 
+    .container .seven.columns                   { width: 400px; }
42 
+    .container .eight.columns                   { width: 460px; }
43 
+    .container .nine.columns                    { width: 520px; }
44 
+    .container .ten.columns                     { width: 580px; }
45 
+    .container .eleven.columns                  { width: 640px; }
46 
+    .container .twelve.columns                  { width: 700px; }
47 
+    .container .thirteen.columns                { width: 760px; }
48 
+    .container .fourteen.columns                { width: 820px; }
49 
+    .container .fifteen.columns                 { width: 880px; }
50 
+    .container .sixteen.columns                 { width: 940px; }
51 
+
52 
+    .container .one-third.column                { width: 300px; }
53 
+    .container .two-thirds.column               { width: 620px; }
54 
+
55 
+    /* Offsets */
56 
+    .container .offset-by-one                   { padding-left: 60px;  }
57 
+    .container .offset-by-two                   { padding-left: 120px; }
58 
+    .container .offset-by-three                 { padding-left: 180px; }
59 
+    .container .offset-by-four                  { padding-left: 240px; }
60 
+    .container .offset-by-five                  { padding-left: 300px; }
61 
+    .container .offset-by-six                   { padding-left: 360px; }
62 
+    .container .offset-by-seven                 { padding-left: 420px; }
63 
+    .container .offset-by-eight                 { padding-left: 480px; }
64 
+    .container .offset-by-nine                  { padding-left: 540px; }
65 
+    .container .offset-by-ten                   { padding-left: 600px; }
66 
+    .container .offset-by-eleven                { padding-left: 660px; }
67 
+    .container .offset-by-twelve                { padding-left: 720px; }
68 
+    .container .offset-by-thirteen              { padding-left: 780px; }
69 
+    .container .offset-by-fourteen              { padding-left: 840px; }
70 
+    .container .offset-by-fifteen               { padding-left: 900px; }
71 
+
72 
+
73 
+
74 
+/* #Tablet (Portrait)
75 
+================================================== */
76 
+
77 
+    /* Note: Design for a width of 768px */
78 
+
79 
+    @media only screen and (min-width: 768px) and (max-width: 959px) {
80 
+        .container                                  { width: 768px; }
81 
+        .container .column,
82 
+        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
83 
+        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
84 
+        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
85 
+        .alpha.omega                                { margin-left: 0; margin-right: 0; }
86 
+
87 
+        .container .one.column,
88 
+        .container .one.columns                     { width: 28px; }
89 
+        .container .two.columns                     { width: 76px; }
90 
+        .container .three.columns                   { width: 124px; }
91 
+        .container .four.columns                    { width: 172px; }
92 
+        .container .five.columns                    { width: 220px; }
93 
+        .container .six.columns                     { width: 268px; }
94 
+        .container .seven.columns                   { width: 316px; }
95 
+        .container .eight.columns                   { width: 364px; }
96 
+        .container .nine.columns                    { width: 412px; }
97 
+        .container .ten.columns                     { width: 460px; }
98 
+        .container .eleven.columns                  { width: 508px; }
99 
+        .container .twelve.columns                  { width: 556px; }
100 
+        .container .thirteen.columns                { width: 604px; }
101 
+        .container .fourteen.columns                { width: 652px; }
102 
+        .container .fifteen.columns                 { width: 700px; }
103 
+        .container .sixteen.columns                 { width: 748px; }
104 
+
105 
+        .container .one-third.column                { width: 236px; }
106 
+        .container .two-thirds.column               { width: 492px; }
107 
+
108 
+        /* Offsets */
109 
+        .container .offset-by-one                   { padding-left: 48px; }
110 
+        .container .offset-by-two                   { padding-left: 96px; }
111 
+        .container .offset-by-three                 { padding-left: 144px; }
112 
+        .container .offset-by-four                  { padding-left: 192px; }
113 
+        .container .offset-by-five                  { padding-left: 240px; }
114 
+        .container .offset-by-six                   { padding-left: 288px; }
115 
+        .container .offset-by-seven                 { padding-left: 336px; }
116 
+        .container .offset-by-eight                 { padding-left: 384px; }
117 
+        .container .offset-by-nine                  { padding-left: 432px; }
118 
+        .container .offset-by-ten                   { padding-left: 480px; }
119 
+        .container .offset-by-eleven                { padding-left: 528px; }
120 
+        .container .offset-by-twelve                { padding-left: 576px; }
121 
+        .container .offset-by-thirteen              { padding-left: 624px; }
122 
+        .container .offset-by-fourteen              { padding-left: 672px; }
123 
+        .container .offset-by-fifteen               { padding-left: 720px; }
124 
+    }
125 
+
126 
+
127 
+/*  #Mobile (Portrait)
128 
+================================================== */
129 
+
130 
+    /* Note: Design for a width of 320px */
131 
+
132 
+    @media only screen and (max-width: 767px) {
133 
+        .container { width: 300px; }
134 
+        .container .columns,
135 
+        .container .column { margin: 0; }
136 
+
137 
+        .container .one.column,
138 
+        .container .one.columns,
139 
+        .container .two.columns,
140 
+        .container .three.columns,
141 
+        .container .four.columns,
142 
+        .container .five.columns,
143 
+        .container .six.columns,
144 
+        .container .seven.columns,
145 
+        .container .eight.columns,
146 
+        .container .nine.columns,
147 
+        .container .ten.columns,
148 
+        .container .eleven.columns,
149 
+        .container .twelve.columns,
150 
+        .container .thirteen.columns,
151 
+        .container .fourteen.columns,
152 
+        .container .fifteen.columns,
153 
+        .container .sixteen.columns,
154 
+        .container .one-third.column,
155 
+        .container .two-thirds.column  { width: 300px; }
156 
+
157 
+        /* Offsets */
158 
+        .container .offset-by-one,
159 
+        .container .offset-by-two,
160 
+        .container .offset-by-three,
161 
+        .container .offset-by-four,
162 
+        .container .offset-by-five,
163 
+        .container .offset-by-six,
164 
+        .container .offset-by-seven,
165 
+        .container .offset-by-eight,
166 
+        .container .offset-by-nine,
167 
+        .container .offset-by-ten,
168 
+        .container .offset-by-eleven,
169 
+        .container .offset-by-twelve,
170 
+        .container .offset-by-thirteen,
171 
+        .container .offset-by-fourteen,
172 
+        .container .offset-by-fifteen { padding-left: 0; }
173 
+
174 
+    }
175 
+
176 
+
177 
+/* #Mobile (Landscape)
178 
+================================================== */
179 
+
180 
+    /* Note: Design for a width of 480px */
181 
+
182 
+    @media only screen and (min-width: 480px) and (max-width: 767px) {
183 
+        .container { width: 420px; }
184 
+        .container .columns,
185 
+        .container .column { margin: 0; }
186 
+
187 
+        .container .one.column,
188 
+        .container .one.columns,
189 
+        .container .two.columns,
190 
+        .container .three.columns,
191 
+        .container .four.columns,
192 
+        .container .five.columns,
193 
+        .container .six.columns,
194 
+        .container .seven.columns,
195 
+        .container .eight.columns,
196 
+        .container .nine.columns,
197 
+        .container .ten.columns,
198 
+        .container .eleven.columns,
199 
+        .container .twelve.columns,
200 
+        .container .thirteen.columns,
201 
+        .container .fourteen.columns,
202 
+        .container .fifteen.columns,
203 
+        .container .sixteen.columns,
204 
+        .container .one-third.column,
205 
+        .container .two-thirds.column { width: 420px; }
206 
+    }
207 
+
208 
+
209 
+/* #Clearing
210 
+================================================== */
211 
+
212 
+    /* Self Clearing Goodness */
213 
+    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
214 
+
215 
+    /* Use clearfix class on parent to clear nested columns,
216 
+    or wrap each row of columns in a <div class="row"> */
217 
+    .clearfix:before,
218 
+    .clearfix:after,
219 
+    .row:before,
220 
+    .row:after {
221 
+      content: '\0020';
222 
+      display: block;
223 
+      overflow: hidden;
224 
+      visibility: hidden;
225 
+      width: 0;
226 
+      height: 0; }
227 
+    .row:after,
228 
+    .clearfix:after {
229 
+      clear: both; }
230 
+    .row,
231 
+    .clearfix {
232 
+      zoom: 1; }
233 
+
234 
+    /* You can also use a <br class="clear" /> to clear columns */
235 
+    .clear {
236 
+      clear: both;
237 
+      display: block;
238 
+      overflow: hidden;
239 
+      visibility: hidden;
240 
+      width: 0;
241 
+      height: 0;
242 
+    }