Permalink
Browse files

Final feature list with almost final style

  • Loading branch information...
Divya Manian
Divya Manian committed Apr 16, 2010
1 parent f515752 commit 2e02ad5f42617bd6832cad78741d1f5f9c1104f1
Showing with 329 additions and 154 deletions.
  1. BIN assets/clip.png
  2. BIN assets/clip.psd
  3. +11 −0 config.rb
  4. +1 −15 css/print.css
  5. +85 −110 css/style.css
  6. +30 −29 index.html
  7. +21 −0 js/script.js
  8. +6 −0 src/ie.sass
  9. +6 −0 src/print.sass
  10. +169 −0 src/style.sass
View
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,11 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "src"
+images_dir = "assets"
+javascripts_dir = "javascripts"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+output_style = :compact
+line_comments = false
View
@@ -1,15 +1 @@
-* { background:transparent !important; color:#444 !important; text-shadow:none; }
-
-a, a:visited { color:#444 !important; text-decoration:underline; }
-
-a:after { content:" (" attr(href) ")"; }
-
-abbr:after { content: " (" attr(title) ")"; }
-
-pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
-
-@page { margin: 0.5cm; }
-
-p, h2, h3 { orphans:3; widows:3; }
-
-h2, h3{ page-break-after:avoid; }
+/* 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" /> */
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -61,48 +61,49 @@ <h1>HTML5</h1>
<li><b class="ie9"></b> IE 9</li>
<li><b class="sa"></b> Safari 4</li>
<li><b class="ch"></b> Chrome 4</li>
- <li><b class="ff36"></b> Firefox 3.6</li>
+ <li><b class="ff35"></b> Firefox 3.5</li>
<li><b class="ff37"></b> Firefox 3.7</li>
<li><b class="op"></b> Opera</li>
</ul>
</div>
<div id="body">
<div class="css-chart">
- <p class="ray-1"><b class="ff36"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Multiple Backgrounds</i></p>
- <p class="ray-2"><b class="ff36"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Media Queries</i></p>
- <p class="ray-3"><b class="ie9"></b><b class="ff36"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Border Radius</i></p>
- <p class="ray-4"><b class="ff36"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Border Image</i></p>
- <p class="ray-5"><b class="ie7"></b><b class="ie8"></b><b class="ie9"></b><b class="ff36"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>@font-face</i></p>
- <p class="ray-6"><b class="ff36"></b><b class="ff37"></b></b><b class="sa"></b><b class="ch"></b><i>Flex Box Layout</i></p>
- <p class="ray-7"><b class="ff36"></b><b class="ff37"></b></b><b class="sa"></b><b class="ch"></b><i>Multiple Column Layout</i></p>
- <p class="ray-8"><b class="ff36"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Transforms</i></p>
- <p class="ray-9"><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>SVG as Background</i></p>
- <p class="ray-10"><b class="sa"></b><b class="ch"></b><i>Animations</i></p>
- <span></span>
+ <p class="ray-1 css3"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Multiple Backgrounds</i></p>
+ <p class="ray-2 css3"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Media Queries</i></p>
+ <p class="ray-3 css3"><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Border Radius</i></p>
+ <p class="ray-4 css3"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Border Image</i></p>
+ <p class="ray-5 css3"><b class="ie7"></b><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>@font-face</i></p>
+ <p class="ray-6 css3"><b class="ff35"></b><b class="ff37"></b><b class="sa"></b><b class="ch"></b><i>Flex Box Layout</i></p>
+ <p class="ray-7 css3"><b class="ff35"></b><b class="ff37"></b><b class="sa"></b><b class="ch"></b><i>Multiple Column Layout</i></p>
+ <p class="ray-8 css3"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Transforms</i></p>
+ <p class="ray-9 css3"><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>SVG as Background</i></p>
+ <p class="ray-10 css3"><b class="sa"></b><b class="ch"></b><i>Animations</i></p>
+ <p class="ray-11 css3"><b class="sa"></b><i>3D Transforms</i></p>
+ <p class="ray-12 css3"><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Data URIs</i></p>
+ <p class="ray-13 css3"><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Generated Content</i></p>
+ <p class="ray-14 css3"><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Table Display</i></p>
+ <p class="ray-15 css3"><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>querySelector</i></p>
+ <p class="ray-16"><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Web Storage</i></p>
+ <p class="ray-17"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Audio</i></p>
+ <p class="ray-18"><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Video</i></p>
+ <p class="ray-19"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Canvas</i></p>
+ <p class="ray-20"><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Drag and Drop</i></p>
+ <p class="ray-21"><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Web Workers</i></p>
+ <p class="ray-22"><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Web SQL Database</i></p>
+ <p class="ray-23"><b class="op"></b><b class="sa"></b><b class="ch"></b><i>Forms</i></p>
+ <p class="ray-24"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><i>SVG Filters</i></p>
+ <p class="ray-25"><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="ch"></b><i>Geolocation</i></p>
+ <p class="ray-26"><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>SVG</i></p>
+ <p class="ray-27"><b class="ie7"></b><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="op"></b><b class="sa"></b><b class="ch"></b><i>ContentEditable</i></p>
+ <p class="ray-28"><b class="ie8"></b><b class="ie9"></b><b class="ff35"></b><b class="ff37"></b><b class="sa"></b><b class="ch"></b><i>CORS</i></p>
</div>
</div>
<div id="footer">
-
+ <p>From the asylum run by Paul Irish and Divya Manian</p>
</div>
</div>
-
-
-
-
<!-- JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/script.js"></script>
- <!--[if lt IE 7 ]>
- <script type="text/javascript" src="js/dd_belatedpng.js" ></script>
- <![endif]-->
-
- <!-- yui profiler and profileviewer - remove for production -->
-
- <script type="text/javascript" src="js/profiling/yahoo-profiling.min.js"></script>
- <script type="text/javascript" src="js/profiling/config.js"></script>
- <!-- end profiling code -->
-
-
</body>
</html>
View
@@ -0,0 +1,21 @@
+jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
+
+ return();
+ var newval,
+ num = $('div.css-chart p').css('padding-left');
+
+ delta = delta || e.detail || e.wheelDelta;
+
+ if (delta > 0 || e.which == 38) {
+ newval = parseFloat(num) + 5 * (e.shiftKey ? .1 : 1);
+ } else if (delta < 0 || e.which == 40) {
+ newval = parseFloat(num) - 5 * (e.shiftKey ? .1 : 1);
+ } else {
+ return true;
+ }
+
+ $('div.css-chart p').css('padding-left',newval + 'px');
+
+ e.preventDefault();
+
+})
View
@@ -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]-->
View
@@ -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" />
+
+
View
@@ -0,0 +1,169 @@
+=transform($deg, $x, $y)
+ -webkit-transform: rotate($deg)
+ -o-transform: rotate($deg)
+ -moz-transform: rotate($deg)
+ +transform-origin($x, $y)
+
+=transform-origin($x, $y)
+ -webkit-transform-origin: $x $y
+ -moz-transform-origin: $x $y
+ -o-transform-origin: $x $y
+
+=border-radius($rad)
+ border-radius: $rad
+ -webkit-border-radius: $rad
+ -moz-border-radius: $rad
+
+$barheight = 23px
+
+body
+ background: #78909c
+ background-image: -moz-linear-gradient(top, #51545b, #78909c)
+ /* FF3.6
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #51545b), color-stop(1, #78909c))
+ /* Saf4+, Chrome
+ color: #f2efde
+
+div.css-chart p
+ display: block
+ position: absolute
+ bottom: 30px
+ left: 482px
+ background: rgba(74, 65, 70, 0.1)
+ width: 282px
+ height: $barheight
+ padding-left: 200px
+ border: 0
+ -webkit-transition: background 0.2s ease-out
+ &:hover
+ background: rgba(74, 65, 70, 1)
+
+ &.css3
+ background: rgba(63, 50, 30, 0.1)
+ &:hover
+ background: rgba(63, 50, 30, 1)
+
+ i
+ opacity: 0
+ position: absolute
+ top: 0
+ right: 284px
+ width: 400px
+ z-index: 4
+ display: block
+ height: auto
+ color: #f2efde
+ padding: 10px
+ text-align: center
+ +border-radius(0.5em)
+ text-shadow: 1px 1px 1px #000
+ -webkit-transition: opacity 0.2s ease-out
+ text-transform: uppercase
+ font-size: 18px
+
+ &:hover i,
+ &:focus i
+ opacity: 1
+
+ b
+ width: 12.5%
+ display: block
+ height: $barheight
+ float: left
+
+
+div.css-chart
+ background-image: -webkit-gradient(radial, 482 482, 250, 480 484, 400, from(rgba(90, 100, 112, 0.5)), to(rgba(0, 0, 0, 0)))
+ margin: 5em auto 0 auto
+ width: 964px
+ height: 494px
+ position: relative
+ overflow: hidden
+ margin-bottom: 15em
+
+
+b
+ &.ie7
+ background: rgba(222, 146, 159, 0.6)
+ &.ie8
+ background: rgba(131, 72, 92, 0.6)
+ &.ie9
+ background: rgba(233, 83, 120, 0.6)
+ &.ff35
+ background: rgba(130, 197, 216, 0.6)
+ &.ff37
+ background: rgba(69, 167, 203, 0.6)
+ &.op
+ background: rgba(226, 79, 45, 0.6)
+ &.ch
+ background: rgba(245, 155, 58, 0.6)
+ &.sa
+ background: rgba(251, 231, 98, 0.6)
+
+ul
+ position: fixed
+ top: 40px
+ left: 40px
+ width: 400px
+ li
+ list-style: none
+ padding: 0 0 0.5em 0
+ width: 200px
+ float: left
+
+li b
+ display: inline-block
+ width: 20px
+ height: 20px
+ +border-radius(20em)
+
+
+@for $i from 1 to 29
+ .ray-#{$i}
+ +transform((-6.7deg*($i - 1)), 0%, 50%)
+
+ i
+ +transform((6.7deg*($i - 1)), 50%, 50%)
+
+#header
+ h1
+ text-align: center
+ text-transform: uppercase
+ font-size: 2em
+ font-weight: bold
+ margin: 1em
+
+#footer
+ position: fixed
+ bottom: 10px
+ left: 0
+ width: 100%
+ p
+ text-align: center
+ text-transform: uppercase
+
+\:
+ &:-moz-selection, &:selection
+ background: #ff5e99
+ color: white
+ text-shadow: none
+
+/* http://twitter.com/miketaylr/status/12228805301
+/* http://j.mp/webkit-tap-highlight-color
+
+a:link
+ -webkit-tap-highlight-color: #ff5e99
+
+@media all and (orientation:portrait)
+ /* Style adjustments for portrait mode goes here
+
+
+@media all and (orientation:landscape)
+ /* Style adjustments for landscape mode goes here
+
+
+@media screen and (max-device-width: 480px)
+ /* All Capable Mobile Browser (Opera Mobile, iPhone Safari, Android Chrome) CSS goes here
+ html
+ -webkit-text-size-adjust: none
+ /* Prevent iPhone from adjusting font size

0 comments on commit 2e02ad5

Please sign in to comment.