A thorough revamp of grimoire.ca's look and feel.

The new look is based, loosely, on print aesthetics, and uses Baskerville (and
Menlo, for code) throughout, with Google's Buenard as a fallback for Windows
and Linux users.

I've retained the basic visual flow, but reworked it to be both more visible
and more readable, and to have less-crazy layout rules (no more
borders-as-gaps).

3 files changed, 155 insertions, 11 deletions

diff --git a/static/media/css/custom.css b/static/media/css/custom.css
deleted file mode 100644
index a19c798..0000000
--- a/static/media/css/custom.css
+++ /dev/null
@@ -1,11 +0,0 @@
-body #comments {
-    background-color: white;
-    clear: both;
-    float: left;
-    overflow: hidden;
-    border-top: 8px solid #f6f6f6;
-    padding: 15px 20px;
-    width: 610px; }
-
-a[href^="https:"] {
-    text-decoration: underline; }
diff --git a/static/media/css/grimoire.css b/static/media/css/grimoire.css
new file mode 100644
index 0000000..b680007
--- /dev/null
+++ b/static/media/css/grimoire.css
@@ -0,0 +1,107 @@
+/* typography */
+body {
+	font-family: 'Baskerville', 'Buenard', serif;
+	font-size: 20px;
+	line-height: 30px;
+}
+
+code {
+	font-family: 'Menlo', monospace;
+	font-size: 80%;
+}
+
+em {
+	font-style: italic;
+}
+
+strong {
+	font-weight: bold;
+}
+
+blockquote {
+	margin-left: 40px;
+	color: #555;
+}
+
+:link {
+	text-decoration: none;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid #AAA;
+	margin-left: 80px;
+	margin-right: 80px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: bold;
+}
+
+h1 {
+	font-size: 40px;
+	line-height: 60px;
+	margin-bottom: 15px;
+}
+h2 {
+	font-size: 30px;
+	line-height: 45px;
+	margin-bottom: 15px;
+}
+h3 {
+	font-size: 20px;
+	line-height: 30px;
+	margin-bottom: 15px;
+}
+
+/* layout */
+#shell {
+	margin-left: auto;
+	margin-right: auto;
+	width: 840px;
+}
+
+#shell > * {
+	margin-top: 15px;
+	margin-bottom: 15px;
+	padding: 0 10px;
+}
+
+#article,
+#listing {
+	padding-left: 50px;
+}
+h1, h2, h3, h4, h5, h6 {
+	margin-left: -40px;
+}
+
+#article p,
+#article pre,
+#article ul,
+#article ol,
+#listing ul {
+	margin-bottom: 15px;
+}
+
+#article pre {
+	margin-left: 40px;
+}
+
+#article ul {
+	list-style-type: disc;
+}
+#article ol {
+	list-style-type: decimal;
+}
+
+#article ul,
+#article ol {
+	padding-left: 40px;
+}
+
+#breadcrumbs li {
+	display: inline-block;
+}
+#breadcrumbs li.not-last:after {
+	content: '•';
+}
\ No newline at end of file
diff --git a/static/media/css/reset.css b/static/media/css/reset.css
new file mode 100644
index 0000000..e29c0f5
--- /dev/null
+++ b/static/media/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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 {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}