Added an example for the unobtrusive logo.

2009-03-12 09:52:11 -07:00 · 2009-03-12 09:52:11 -07:00 · 619afebdc5
commit 619afebdc5
parent 6280f97071
4 changed files with 73 additions and 0 deletions
--- a/examples/logo/logo.html
+++ b/examples/logo/logo.html
@ -0,0 +1,32 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">
+  </head>
+  <body>
+    <div id="logo-large">
+      <span class="selector">un</span>
+      <span class="brace">{</span>
+      <span class="rule">ob:tru-sive;</span>
+      <span class="brace">}</span>
+    </div>
+    <div id="logo-medium">
+      <span class="selector">un</span>
+      <span class="brace">{</span>
+      <span class="rule">ob:tru-sive;</span>
+      <span class="brace">}</span>
+    </div>
+    <div id="logo">
+      <span class="selector">un</span>
+      <span class="brace">{</span>
+      <span class="rule">ob:tru-sive;</span>
+      <span class="brace">}</span>
+    </div>
+    <div id="logo-small">
+      <span class="selector">un</span>
+      <span class="brace">{</span>
+      <span class="rule">ob:tru-sive;</span>
+      <span class="brace">}</span>
+    </div>
+  </body>
+</html>
+
--- a/examples/logo/src/ie.sass
+++ b/examples/logo/src/ie.sass
@ -0,0 +1,6 @@
+/*
+  Welcome to Compass. Use this file to write IE specific override styles.
+  Import this file using the following HTML or equivalent:
+  <!--[if IE]>
+    <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <![endif]-->
--- a/examples/logo/src/print.sass
+++ b/examples/logo/src/print.sass
@ -0,0 +1,6 @@
+/*
+  Welcome to Compass. Use this file to define print styles.
+  Import this file using the following HTML or equivalent:
+  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
+  
+
--- a/examples/logo/src/screen.sass
+++ b/examples/logo/src/screen.sass
@ -0,0 +1,29 @@
+/*
+  Welcome to Compass.
+  In this file you should write your main styles. (or centralize your imports)
+  Import this file using the following HTML or equivalent:
+  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
+
+@import compass/reset.sass
+@import compass/misc.sass
+
+#logo-large,
+#logo-medium,
+#logo,
+#logo-small
+  :text-align center
+  :margin
+    :bottom 40px
+
+#logo-large
+  +unobtrusive-logo(3em)
+  :margin-top 20px
+
+#logo-medium
+  +unobtrusive-logo(2em)
+
+#logo
+  +unobtrusive-logo
+
+#logo-small
+  +unobtrusive-logo(0.5em)