Permalink
Browse files

Compressing CSS. Closes #2.

  • Loading branch information...
Aupajo committed Dec 30, 2010
1 parent 4ad0304 commit 9959e51638e2f34f03e46ea7719c1bb229c6d489
Showing with 158 additions and 140 deletions.
  1. +19 −2 README.textile
  2. +138 −0 sass/textile-reference.scss
  3. +1 −138 textile-reference/stylesheets/textile-reference.css
View
@@ -2,12 +2,29 @@ h1. Human Textile Reference
The Human Textile Reference is a set of short, easy to understand HTML pages you can include in any project that uses Textile.
-You can view a demo on the "labs page":http://labs.metanation.com/human-textile-reference/.
+*Important:* This is not designed to be a complete reference. Just a quick guide for the layman.
-*Important:* It's not designed to be a complete reference. Just a quick guide for the layman.
+You can view a demo on the "labs page":http://labs.metanation.com/human-textile-reference/.
It's perfect for including as a pop-up help window next to your textarea.
+h2. Notes
+
+h3. JavaScript
+
+The guide uses JavaScript to toggle the different categories. If the browser's JavaScript is disabled, every category will be shown expanded, which is fine.
+
+h3. Sass
+Included stylesheet is compiled using "Sass":http://sass-lang.com/. If you want to make modifications, alter @sass/textile-reference.css@. You can output the compressed version with:
+
+<pre>
+<code>
+sass sass/textile-reference.scss textile-reference/stylesheets/textile-reference.css -t compressed
+</code>
+</pre>
+
+If you're developing, you can use Sass' @--watch@ option.
+
h2. How To Use
Clone the repository or "download":http://github.com/Aupajo/human-textile-reference/downloads.
View
@@ -0,0 +1,138 @@
+/* General */
+
+body, input, textarea, select {
+ color: #222;
+ font: 9pt "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
+}
+
+body {
+ background-color: #d1d7e2;
+ line-height: 1.6em;
+ margin: 0;
+}
+
+/* Formatting */
+
+p {
+ margin-top: 0;
+}
+
+/* Headings */
+
+h1, h2, h3 {
+ margin: 0;
+}
+
+h1 {
+ font-size: 1.6em;
+}
+
+h2 {
+ font-size: 1.4em;
+}
+
+h3 {
+ font-size: 1.2em;
+}
+
+/* Lists */
+
+ul, ol {
+ margin: 0;
+ padding-left: 1.5em;
+}
+
+/* Links */
+
+a {
+ &:link, &:visited {
+ color: #376bd5;
+}
+ &:hover {
+ color: #ff5c07;
+}
+ &:active {
+ color: #910;
+}
+ img {
+ border-style: none;
+}
+}
+
+/* Tables */
+
+table {
+ border-top: 1px solid #fff;
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td {
+ border-left: 1px solid #d9d9d9;
+ padding: 5px 10px;
+ width: 50%;
+}
+
+th {
+ border-left: 1px solid #d9d9d9;
+ padding: 5px 10px;
+ width: 50%;
+ background-color: #eee;
+ border-bottom: 1px solid #d9d9d9;
+ text-align: left;
+}
+
+tr.alternate {
+ background-color: #f1f5fa;
+}
+
+table table {
+ margin: 10px 0;
+ width: auto;
+ th, td {
+ background-color: #fff;
+ border: 1px solid #d9d9d9;
+ padding: 0.2em 0.5em;
+ width: auto;
+}
+}
+
+/* Forms */
+
+form {
+ border-top: 1px solid #ccc;
+ padding: 1em;
+ margin-top: 1em;
+}
+
+/* Special */
+
+#title {
+ background-color: #a1adcb;
+ border-bottom: 1px solid #b8bdc7;
+ color: #444;
+ padding: 10px 10px;
+ text-shadow: 0px 1px 0px #cdd9fd;
+}
+
+.section-name {
+ background: url('../images/arrow_down.gif') no-repeat center left;
+ color: #525252;
+ cursor: pointer;
+ display: block;
+ font-size: 1em;
+ padding: 5px 10px 5px 16px;
+ text-shadow: 0 1px 0 #fff;
+ text-transform: uppercase;
+}
+
+.deselected {
+ background-image: url('../images/arrow_right.gif');
+}
+
+.section {
+ border-color: #b8bdc7;
+ border-style: solid;
+ border-width: 1px 0;
+ background-color: white;
+}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 9959e51

Please sign in to comment.