From 3b6b06a5992a7c98236a32191eaaf58efd5f3a02 Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Mon, 25 Oct 2010 14:46:52 -0700 Subject: [PATCH] Basic text formatting --- scratch/css/gollum.css | 68 ++++++++++++++++++++++ scratch/css/template.css | 122 +++++++++++++++++++++++++++++++++++++++ scratch/page.html | 36 +++++++++++- 3 files changed, 225 insertions(+), 1 deletion(-) create mode 100644 scratch/css/template.css diff --git a/scratch/css/gollum.css b/scratch/css/gollum.css index e69de29b..c163e95e 100644 --- a/scratch/css/gollum.css +++ b/scratch/css/gollum.css @@ -0,0 +1,68 @@ +/* + gollum.css + A basic stylesheet for Gollum +*/ + +/* @section core */ +body, html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 10px; /* -> 1em */ + margin: 0; + padding: 0; +} + +#wiki-wrapper { + margin: 0 auto; + overflow: visible; + width: 80%; +} + + +/* @section head */ +#head { + border-bottom: 1px solid #ccc; + margin: 4.5em 0 0.5em; + padding: 0.5em 0; + overflow: hidden; +} + + #head h1 { + font-size: 3.3em; + float: left; + line-height: normal; + margin: 0; + padding: 0; + } + + #head ul.actions { + display: block; + float: right; + list-style-type: none; + overflow: hidden; + padding: 0.6em 0 0; + } + + #head ul.actions li { + float: left; + font-size: 1.2em; + margin-left: 0.6em; + } + + +/* @section content */ +#wiki-content { + height: 1%; + overflow: visible; +} + + /* @section comments */ + #wiki-body #inline-comment { + display: none; /* todo */ + } + + /* @section body */ + #wiki-body { + float: left; + margin-right: 5%; + width: 70%; + } diff --git a/scratch/css/template.css b/scratch/css/template.css new file mode 100644 index 00000000..db1a333e --- /dev/null +++ b/scratch/css/template.css @@ -0,0 +1,122 @@ +/* + template.css + Wiki content formatting +*/ + +#template { + margin-bottom: 4em; /* Give it some breathing room */ +} + +#template p { + font-size: 1.4em; + line-height: 1.6em; +} + + /* See http://webtypography.net/Rhythm_and_Proportion/ */ + #template p + p { + margin: -0.75em 0 0; + text-indent: 1em; + } + + /* Everybody loves type ornaments */ + #template p:last-child:after { + color: #999; + content: " ❈"; + font-size: 0.8em; + } + + +#template ul, #template ol { + margin: 1.0em 0; + padding: 0; +} + +#template p + ul, #template p + ol, +#template ul li > ul, #template ol li > ol { + margin: 0; +} + + #template ul { + list-style-type: square; + } + + #template ol li > ol li { + font-size: 1.0em !important; + list-style-type: lower-roman; + list-style-position: inside; + } + + #template ol li > ol li > ol li { + list-style-type: lower-alpha; + } + + #template ol li > ol li > ol li > ol li { + list-style-type: lower-greek; + } + +#template ul li, #template ol li { + font-size: 1.4em; + line-height: 1.6em; + padding-top: 0.1em; /* Line up ordinals */ +} + +#template blockquote { + margin: 0 4.0em 0 2.0em; + padding: 0; +} + + #template blockquote p { + color: #888; + font-style: italic; + } + + +/* Headings */ +#template h1, #template h2, #template h3, +#template h4, #template h5, #template h6 { + margin: 0; + padding: 0.5em 0 0; +} + +#template h1 { + font-size: 2.6em; + font-weight: bold; +} + +#template h2 { + font-size: 2.2em; + font-weight: bold; +} + +#template h3 { + font-size: 2.0em; + font-weight: bold; +} + +#template h4 { + font-size: 1.8em; + font-weight: bold; +} + +#template h5 { + font-size: 1.6em; + font-weight: bold; + +} + +#template h6 { + font-size: 1.4em; + font-weight: bold; + margin-top: 1.0em; + text-transform: uppercase; /* all caps */ +} + + +/* Code-related */ +#template p code { + background-color: #f7f7f7; + border: 1px solid #ddd; + color: #222; /* This is a little heavy when #000 */ + font-family: Consolas, Monaco, "Courier New", monospace; + padding: 0.15em 0.3em; +} \ No newline at end of file diff --git a/scratch/page.html b/scratch/page.html index 9a3741f2..8eb96cc5 100644 --- a/scratch/page.html +++ b/scratch/page.html @@ -1,7 +1,9 @@ + + Page Name — Site Name @@ -35,10 +37,16 @@
  1. Ordered list 1
  2. Ordered list 2
    3. +
  3. +
      +
    1. Nest 1
      2. +
    2. Nest 2
      3. +
    +
  4. Ordered list 3

- Tempus a consequat ut, accumsan vitae tellus. Nunc aliquet tempus lectus, non accumsan elit gravida faucibus. Proin in imperdiet ligula. Mauris nec posuere felis. Etiam tempus sollicitudin massa, vel vestibulum est lacinia sed. + Tempus a consequat ut, accumsan vitae tellus. Nunc aliquet tempus lectus, non accumsan elit gravida faucibus. Proin in imperdiet ligula. Mauris nec posuere felis. Etiam tempus sollicitudin massa, vel vestibulum est lacinia sed.

Nam iaculis volutpat dolor, laoreet blandit felis scelerisque sagittis. Suspendisse pretium lorem in nunc interdum vel malesuada ante pretium. Nam consectetur tortor scelerisque mi congue rhoncus. Curabitur vulputate nunc non urna condimentum in consequat elit lobortis. Etiam eu purus mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet arcu enim, id iaculis tortor. @@ -51,6 +59,32 @@

In urna dolor, pulvinar nec porttitor vitae, varius quis sem. Nulla at nisl nisl. In lobortis enim lacinia lectus semper fermentum id sit amet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

+

Heading 3

+

+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent leo neque, lacinia vitae posuere sed, adipiscing vitae massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi felis sem, dictum ut interdum sit amet, tincidunt at tellus. +

+

+ Duis convallis, mauris in ultrices convallis, ligula arcu laoreet dolor, in elementum justo lorem et magna. Sed posuere est at ante aliquam hendrerit. Ut porta ipsum a neque porta at gravida lacus dictum. Cras at cursus massa. Aliquam dignissim sagittis augue, non pellentesque massa adipiscing sit amet. Donec at faucibus massa. Etiam hendrerit accumsan rutrum. Mauris venenatis justo nec sem tincidunt gravida. Quisque ut lacus mi, at iaculis urna. Sed id libero neque. +

+

Heading 4

+

+ Nulla facilisi. Duis sem risus, malesuada eget tempor eu, elementum sed mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo libero ac risus hendrerit gravida. Nullam id orci nulla, nec pulvinar dui. Donec elit odio, pulvinar ut cursus id, rhoncus eu urna. Aliquam molestie interdum aliquam. +

+
Heading 5
+

+ Vestibulum sed neque mauris, quis imperdiet lorem. Fusce id sollicitudin est. Vivamus porta blandit nibh, ultricies ultricies tortor scelerisque nec. Aliquam et ipsum ut neque aliquet accumsan at eu ante. Donec velit turpis, feugiat non venenatis at, rutrum cursus neque. Integer nunc purus, porta vel semper et, venenatis a nisi. +

+

+ Nunc malesuada, diam nec euismod tristique, lacus nibh ornare dolor, eleifend rhoncus nunc enim nec nisi. Nulla neque tellus, scelerisque porttitor commodo vitae, euismod vitae est. Sed adipiscing metus vitae nisi sodales porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a urna massa. Vestibulum ac sapien urna. +

+
Heading 6
+ +

+ Sed sit amet arcu lectus, eu hendrerit eros. Pellentesque at neque sed justo luctus mattis. Maecenas egestas, urna sit amet pulvinar dictum, nisl urna consequat purus, at consectetur eros metus eu ligula. Mauris sed magna sed risus commodo faucibus. Etiam sit amet dui id urna mollis pretium. Nam dolor augue, bibendum sit amet congue eget, lacinia at dolor. Vestibulum id quam sed dolor laoreet pellentesque eget ut leo. +