Basic text formatting

This commit is contained in:
Eston Bond
2010-10-25 14:46:52 -07:00
parent 60901ddd75
commit 3b6b06a599
3 changed files with 225 additions and 1 deletions
+68
View File
@@ -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%;
}
+122
View File
@@ -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;
}
+35 -1
View File
@@ -1,7 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/gollum.css" media="all">
<link rel="stylesheet" type="text/css" href="css/template.css" media="all">
<title>Page Name &mdash; Site Name</title>
</head>
<body>
@@ -35,10 +37,16 @@
<ol>
<li>Ordered list 1</li>
<li>Ordered list 2</li>
<li>
<ol>
<li>Nest 1</li>
<li>Nest 2</li>
</ol>
</li>
<li>Ordered list 3</li>
</ol>
<p>
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 <code>sollicitudin massa</code>, vel vestibulum est lacinia sed.
</p>
<p>
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 @@
<p>
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.
</p>
<h3>Heading 3</h3>
<p>
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.
</p>
<p>
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.
</p>
<h4>Heading 4</h4>
<p>
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.
</p>
<h5>Heading 5</h5>
<p>
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.
</p>
<p>
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.
</p>
<h6>Heading 6</h6>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<p>
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.
</p>
</div>
</div>
<div id="wiki-rightbar">