From bd268036ed4fd111f0ae3156c324acbf4d2707e7 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Tue, 21 May 2013 11:18:04 -0400 Subject: 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). --- static/media/css/custom.css | 11 ----- static/media/css/grimoire.css | 107 ++++++++++++++++++++++++++++++++++++++++++ static/media/css/reset.css | 48 +++++++++++++++++++ 3 files changed, 155 insertions(+), 11 deletions(-) delete mode 100644 static/media/css/custom.css create mode 100644 static/media/css/grimoire.css create mode 100644 static/media/css/reset.css (limited to 'static') 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; +} -- cgit v1.2.3