Permalink
Browse files

build

  • Loading branch information...
1 parent 2d89a52 commit 09df74c31d8d8c5564242ac0f6f6ba946fea4277 @tj tj committed May 2, 2012
Showing with 74 additions and 13 deletions.
  1. +61 −0 index.html
  2. +13 −13 main.css
View
@@ -0,0 +1,61 @@
+<!DOCTYPE html><html><head><title>Stylus</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="main.css"></head><body><div id="container"><h1> <a href="http://learnboost.github.com/stylus">Stylus</a></h1><p class="tagline"> <em class="expressive">Expressive, </em><em class="dynamic">dynamic, </em><em class="robust">robust </em><em class="css">CSS</em></p><ul id="menu"><li><a href="docs/selectors.html">Selectors</a></li><li><a href="docs/variables.html">Variables</a></li><li><a href="docs/interpolation.html">Interpolation</a></li><li><a href="docs/operators.html">Operators</a></li><li><a href="docs/mixins.html">Mixins</a></li><li><a href="docs/functions.html">Functions</a></li><li><a href="docs/kwargs.html">Keyword Arguments</a></li><li><a href="docs/bifs.html">Built-in Functions</a></li><li><a href="docs/vargs.html">Rest Params</a></li><li><a href="docs/comments.html">Comments</a></li><li><a href="docs/conditionals.html">Conditionals</a></li><li><a href="docs/iteration.html">Iteration</a></li><li><a href="docs/import.html">@import</a></li><li><a href="docs/media.html">@media</a></li><li><a href="docs/font-face.html">@font-face</a></li><li><a href="docs/keyframes.html">@keyframes</a></li><li><a href="docs/extend.html">@extend</a></li><li><a href="docs/functions.url.html">url()</a></li><li><a href="docs/literal.html">CSS Literal</a></li><li><a href="docs/css-style.html">CSS Style Syntax</a></li><li><a href="docs/escape.html">Char Escaping</a></li><li><a href="docs/executable.html">Executable</a></li><li><a href="docs/error-reporting.html">Error Reporting</a></li><li><a href="docs/middleware.html">Connect Middleware</a></li><li><a href="docs/introspection.html">Introspection API</a></li><li><a href="docs/js.html">JavaScript API</a></li><li><a href="http://github.com/visionmedia/nib">CSS3 Extensions with Nib</a></li><li><a href="try.html">Try Stylus Online!</a></li></ul><div id="ribbon"><a href="http://github.com/learnboost/stylus">Fork me on GitHub</a></div><div id="content"><div class="example"><h2>CSS needs a hero</h2><pre>body {
+ font: 12px Helvetica, Arial, sans-serif;
+}
+a.button {
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}</pre></div><div class="example"><h2>What if we could omit braces?</h2><pre>body
+ font: 12px Helvetica, Arial, sans-serif;
+
+a.button
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;</pre></div><div class="example"><h2>How about semi-colons?</h2><pre>body
+ font: 12px Helvetica, Arial, sans-serif
+
+a.button
+ -webkit-border-radius: 5px
+ -moz-border-radius: 5px
+ border-radius: 5px</pre></div><div class="example"><h2>Why stop there, drop the colons</h2><pre>body
+ font 12px Helvetica, Arial, sans-serif
+
+a.button
+ -webkit-border-radius 5px
+ -moz-border-radius 5px
+ border-radius 5px</pre></div><div class="example"><h2>Keep things DRY</h2><pre>border-radius()
+ -webkit-border-radius arguments
+ -moz-border-radius arguments
+ border-radius arguments
+
+body
+ font 12px Helvetica, Arial, sans-serif
+
+a.button
+ border-radius(5px)</pre></div><div class="example"><h2>How about transparent mixins?</h2><pre>border-radius()
+ -webkit-border-radius arguments
+ -moz-border-radius arguments
+ border-radius arguments
+
+body
+ font 12px Helvetica, Arial, sans-serif
+
+a.button
+ border-radius 5px</pre></div><div class="example"><h2>Create &amp; Share</h2><pre>@import 'vendor'
+
+body
+ font 12px Helvetica, Arial, sans-serif
+
+a.button
+ border-radius 5px</pre></div><div class="example"><h2>Even in-language functions!</h2><pre>sum(nums...)
+ sum = 0
+ sum += n for n in nums
+
+sum(1 2 3 4)
+// =&gt; 10</pre></div><div class="example"><h2>What if it were all optional?</h2><pre>fonts = helvetica, arial, sans-serif
+
+body {
+ padding: 50px;
+ font: 14px/1.4 fonts;
+}</pre></div><div class="example closing"><h2>Get styling with Stylus</h2><pre class="terminal">$ npm install stylus</pre><p>If you want an expressive css language for nodejs with these
+features or the features listed below, head over to<a href="http://github.com/learnboost/stylus">GitHub </a>for more information.</p><div class="features"><h3>Features</h3><ul><li>Optional colons </li><li>Optional semi-colons </li><li>Optional commas </li><li>Optional braces </li><li>Variables </li><li>Interpolation</li><li>Mixins</li><li>Arithmetic</li><li>Type coercion</li><li>Dynamic importing</li><li>Conditionals</li><li>Iteration</li><li>Nested selectors</li><li>Parent referencing</li><li>Variable function calls</li><li>Lexical scoping</li><li>Built-in functions (over 25)</li><li>In-language functions</li><li>Optional compression</li><li>Optional image inlining</li><li>Stylus executable</li><li>Robust error reporting</li><li>Single-line and multi-line comments</li><li>CSS literal for those tricky times</li><li>Character escaping</li><li>TextMate bundle</li><li>and more!</li></ul></div></div></div></div></body></html>
View
@@ -86,11 +86,11 @@ ul li {
right: 60px;
margin: 0;
padding: 15px 0 10px 5px;
- background: rgba(255,255,255,0.30);
+ background: rgba(255,255,255,0.3);
border: 1px solid #ddd;
- -moz-box-shadow: inset rgba(34,34,34,0.10) 0 4px 4px;
- -webkit-box-shadow: inset rgba(34,34,34,0.10) 0 4px 4px;
- box-shadow: inset rgba(34,34,34,0.10) 0 4px 4px;
+ -moz-box-shadow: inset rgba(34,34,34,0.1) 0 4px 4px;
+ -webkit-box-shadow: inset rgba(34,34,34,0.1) 0 4px 4px;
+ box-shadow: inset rgba(34,34,34,0.1) 0 4px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
@@ -120,9 +120,9 @@ pre {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
- -moz-box-shadow: rgba(34,34,34,0.10) -1px -1px;
- -webkit-box-shadow: rgba(34,34,34,0.10) -1px -1px;
- box-shadow: rgba(34,34,34,0.10) -1px -1px;
+ -moz-box-shadow: rgba(34,34,34,0.1) -1px -1px;
+ -webkit-box-shadow: rgba(34,34,34,0.1) -1px -1px;
+ box-shadow: rgba(34,34,34,0.1) -1px -1px;
}
pre.terminal {
width: 360px;
@@ -141,9 +141,9 @@ p code {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
- -moz-box-shadow: rgba(34,34,34,0.10) -1px -1px;
- -webkit-box-shadow: rgba(34,34,34,0.10) -1px -1px;
- box-shadow: rgba(34,34,34,0.10) -1px -1px;
+ -moz-box-shadow: rgba(34,34,34,0.1) -1px -1px;
+ -webkit-box-shadow: rgba(34,34,34,0.1) -1px -1px;
+ box-shadow: rgba(34,34,34,0.1) -1px -1px;
}
#ribbon {
position: absolute;
@@ -154,9 +154,9 @@ p code {
background-color: #a00;
padding: 1px 0;
overflow: hidden;
- -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.30);
- -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.30);
- box-shadow: 1px 1px 3px rgba(0,0,0,0.30);
+ -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+ -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+ box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
#ribbon a {
color: #fff;

0 comments on commit 09df74c

Please sign in to comment.