From 0043a335d8285eee3780149e5db2d4deaa086a48 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Mon, 23 Apr 2012 17:36:38 -0400 Subject: [PATCH] . --- .gitignore | 6 +- README.markdown | 2 +- css/app.css | 6 -- index.html | 2 +- sass/app.sass | 179 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 184 insertions(+), 11 deletions(-) create mode 100644 sass/app.sass diff --git a/.gitignore b/.gitignore index 3978972..5fe4ed6 100644 --- a/.gitignore +++ b/.gitignore @@ -36,6 +36,6 @@ Thumbs.db # App Files # ############# *.tmproj -*.css -*.sass-cache -*.sass \ No newline at end of file +.sass-cache/* +Rakefile +rsync-exclude \ No newline at end of file diff --git a/README.markdown b/README.markdown index 4e062d6..38bccc9 100644 --- a/README.markdown +++ b/README.markdown @@ -33,7 +33,7 @@ colors. ##License by Lokesh Dhakar | [lokeshdhakar.com](http://www.lokeshdhakar.com) | [twitter.com/lokeshdhakar](http://twitter.com/lokeshdhakar) -Thanks to [jfsiii](https://github.com/jfsiii) for a large number of code improvements and other for submitting issues and fixes. +Thanks to [jfsiii](https://github.com/jfsiii) for a large number of code improvements and others for submitting issues and fixes. Licensed under the [Creative Commons Attribution 2.5 License](http://creativecommons.org/licenses/by/2.5/) diff --git a/css/app.css b/css/app.css index 0014d7b..0b6b76d 100644 --- a/css/app.css +++ b/css/app.css @@ -449,9 +449,3 @@ header { canvas { display: none; } - -/* line 181, ../sass/app.sass */ -img { - width: 100px; - height: 100px; -} diff --git a/index.html b/index.html index 2b8e931..bc053b1 100755 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

by Lokesh Dhakar

A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.

-

Read more on my blog | Get the code on Github +

Read more on my blog | Get the code on Github

diff --git a/sass/app.sass b/sass/app.sass new file mode 100644 index 0000000..45c762b --- /dev/null +++ b/sass/app.sass @@ -0,0 +1,179 @@ +@import "compass/reset" +@import "compass/css3" +@import "compass/utilities/general/clearfix" + +body, input, textarea + margin: 40px + color: #888 + background: #222 + font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif + -wbkite-font-smoothing: antialiased + +h1, h2, h3, h4, h5, h6 + color: white + font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif + line-height: 1em + font-weight: 600 + margin-bottom: 0.5em + +h1 + font-size: 72px + line-height: 0.5em + margin-bottom: 0.3em + small + font-size: 20px + span + +transition( color 1s) + &:hover + .char1 + +transition( color .2s) + color: red + .char2 + +transition( color .2s .1s) + color: orange + .char3 + +transition( color .2s .2s) + color: yellow + .char4 + +transition( color .2s .3s) + color: green + .char5 + +transition( color .2s .4s) + color: blue + .char6 + +transition( color .2s .5s) + color: indigo + .char7 + +transition( color .2s .6s) + color: violet + .char8 + +transition( color .2s .7s) + color: red + .char9 + +transition( color .2s .8s) + color: orange + .char10 + +transition( color .2s .9s) + color: yellow + .char11 + +transition( color .2s 1s) + color: green + +h2 + font-size: 40px + line-height: 1.2em + text-align: center + +h3 + font-size: 16px + letter-spacing: 0.1em + text-transform: uppercase + +h4 + font-size: 20px + margin-bottom: 1.25em + +p + margin-bottom: 1.25em + + +strong + font-weight: bold + + +/* Forms */ +input + &[type=text], &[type=password] + background: #fafafa + +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1)) + border: 1px solid #dddddd + color: #888888 + +border-radius(4px) + +textarea + background: #fafafa + +box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.1)) + border: 1px solid #dddddd + color: #888888 + +border-radius(4px) + +input[type=text]:focus + color: #373737 + +textarea + &:focus + color: #373737 + padding-left: 3px + width: 98% + +input[type=text] + padding: 3px + + +/* Links */ +a + color: #09a1ec + text-decoration: none + &:hover + color: #7fd2fa + +#container + width: 900px + margin: 0 auto + +header + padding-bottom: 40px + text-align: center + width: 600px + margin: 0 auto + +.medianCutPalette h3 + margin-top: 20px + +.imageSection + margin-bottom: 80px + background: #111111 + +border-radius(10px) + +pie-clearfix + .imageWrap + +border-left-radius(10px) + width: 400px + height: 300px + float: left + margin-right: 20px + background: url(../img/dark_checkered_bg.png) + .targetImage + +border-left-radius(10px) + .colors + margin-top: 20px + width: 400px + float: left + .function + clear: left + margin-bottom: 10px + +pie-clearfix + .swatches .swatch + width: 40px + height: 20px + margin-right: 2px + background: #dddddd + float: left + +transition( all .5s) + &:hover + +transition( none) + +scale(1.2, 1.2) + +box-shadow( 0 1px 10px black) + &:first-child + +border-left-radius(4px) + &:last-child + +border-right-radius(4px) + +/* Hardcoding the offset for the FB icon example +.fbIcon .imageWrap .targetImage + +border-radius(0) + position: relative + top: 142px + left: 192px + +canvas + display: none \ No newline at end of file