mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
design improvements to demo page
This commit is contained in:
Lokesh Dhakar
278
css/app.css
278
css/app.css
@@ -63,11 +63,35 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* float clearing for IE6 */
|
||||
/* line 17, ../sass/_base.sass */
|
||||
* html .clearfix {
|
||||
height: 1%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* float clearing for IE7 */
|
||||
/* line 23, ../sass/_base.sass */
|
||||
* + html .clearfix {
|
||||
min-height: 1%;
|
||||
}
|
||||
|
||||
/* float clearing for everyone else */
|
||||
/* line 28, ../sass/_base.sass */
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* =Global */
|
||||
/* line 9, ../sass/app.sass */
|
||||
body, input, textarea {
|
||||
margin: 40px;
|
||||
color: #aaaaaa;
|
||||
color: #888888;
|
||||
background: #222222;
|
||||
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -76,99 +100,151 @@ body, input, textarea {
|
||||
|
||||
/* line 18, ../sass/app.sass */
|
||||
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;
|
||||
}
|
||||
|
||||
/* line 24, ../sass/app.sass */
|
||||
/* line 25, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
line-height: 0.5em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
/* line 28, ../sass/app.sass */
|
||||
/* line 29, ../sass/app.sass */
|
||||
h1 small {
|
||||
font-size: 20px;
|
||||
}
|
||||
/* line 31, ../sass/app.sass */
|
||||
h1 span {
|
||||
-moz-transition: color 1s;
|
||||
-webkit-transition: color 1s;
|
||||
-o-transition: color 1s;
|
||||
transition: color 1s;
|
||||
}
|
||||
/* line 34, ../sass/app.sass */
|
||||
h1:hover .char1 {
|
||||
color: greenyellow;
|
||||
}
|
||||
/* line 33, ../sass/app.sass */
|
||||
h1:hover .char2 {
|
||||
color: indianred;
|
||||
}
|
||||
/* line 35, ../sass/app.sass */
|
||||
h1:hover .char3 {
|
||||
color: khaki;
|
||||
-moz-transition: color 0.2s;
|
||||
-webkit-transition: color 0.2s;
|
||||
-o-transition: color 0.2s;
|
||||
transition: color 0.2s;
|
||||
color: red;
|
||||
}
|
||||
/* line 37, ../sass/app.sass */
|
||||
h1:hover .char4 {
|
||||
color: lightsteelblue;
|
||||
h1:hover .char2 {
|
||||
-moz-transition: color 0.2s 0.1s;
|
||||
-webkit-transition: color 0.2s 0.1s;
|
||||
-o-transition: color 0.2s 0.1s;
|
||||
transition: color 0.2s 0.1s;
|
||||
color: orange;
|
||||
}
|
||||
/* line 39, ../sass/app.sass */
|
||||
h1:hover .char5 {
|
||||
color: violet;
|
||||
}
|
||||
/* line 41, ../sass/app.sass */
|
||||
h1:hover .char6 {
|
||||
color: skyblue;
|
||||
/* line 40, ../sass/app.sass */
|
||||
h1:hover .char3 {
|
||||
-moz-transition: color 0.2s 0.2s;
|
||||
-webkit-transition: color 0.2s 0.2s;
|
||||
-o-transition: color 0.2s 0.2s;
|
||||
transition: color 0.2s 0.2s;
|
||||
color: yellow;
|
||||
}
|
||||
/* line 43, ../sass/app.sass */
|
||||
h1:hover .char7 {
|
||||
color: lightseagreen;
|
||||
h1:hover .char4 {
|
||||
-moz-transition: color 0.2s 0.3s;
|
||||
-webkit-transition: color 0.2s 0.3s;
|
||||
-o-transition: color 0.2s 0.3s;
|
||||
transition: color 0.2s 0.3s;
|
||||
color: green;
|
||||
}
|
||||
/* line 45, ../sass/app.sass */
|
||||
h1:hover .char8 {
|
||||
color: tan;
|
||||
}
|
||||
/* line 47, ../sass/app.sass */
|
||||
h1:hover .char9 {
|
||||
color: darkmagenta;
|
||||
/* line 46, ../sass/app.sass */
|
||||
h1:hover .char5 {
|
||||
-moz-transition: color 0.2s 0.4s;
|
||||
-webkit-transition: color 0.2s 0.4s;
|
||||
-o-transition: color 0.2s 0.4s;
|
||||
transition: color 0.2s 0.4s;
|
||||
color: blue;
|
||||
}
|
||||
/* line 49, ../sass/app.sass */
|
||||
h1:hover .char10 {
|
||||
color: tomato;
|
||||
h1:hover .char6 {
|
||||
-moz-transition: color 0.2s 0.5s;
|
||||
-webkit-transition: color 0.2s 0.5s;
|
||||
-o-transition: color 0.2s 0.5s;
|
||||
transition: color 0.2s 0.5s;
|
||||
color: indigo;
|
||||
}
|
||||
/* line 51, ../sass/app.sass */
|
||||
/* line 52, ../sass/app.sass */
|
||||
h1:hover .char7 {
|
||||
-moz-transition: color 0.2s 0.6s;
|
||||
-webkit-transition: color 0.2s 0.6s;
|
||||
-o-transition: color 0.2s 0.6s;
|
||||
transition: color 0.2s 0.6s;
|
||||
color: violet;
|
||||
}
|
||||
/* line 55, ../sass/app.sass */
|
||||
h1:hover .char8 {
|
||||
-moz-transition: color 0.2s 0.7s;
|
||||
-webkit-transition: color 0.2s 0.7s;
|
||||
-o-transition: color 0.2s 0.7s;
|
||||
transition: color 0.2s 0.7s;
|
||||
color: red;
|
||||
}
|
||||
/* line 58, ../sass/app.sass */
|
||||
h1:hover .char9 {
|
||||
-moz-transition: color 0.2s 0.8s;
|
||||
-webkit-transition: color 0.2s 0.8s;
|
||||
-o-transition: color 0.2s 0.8s;
|
||||
transition: color 0.2s 0.8s;
|
||||
color: orange;
|
||||
}
|
||||
/* line 61, ../sass/app.sass */
|
||||
h1:hover .char10 {
|
||||
-moz-transition: color 0.2s 0.9s;
|
||||
-webkit-transition: color 0.2s 0.9s;
|
||||
-o-transition: color 0.2s 0.9s;
|
||||
transition: color 0.2s 0.9s;
|
||||
color: yellow;
|
||||
}
|
||||
/* line 64, ../sass/app.sass */
|
||||
h1:hover .char11 {
|
||||
color: goldenrod;
|
||||
-moz-transition: color 0.2s 1s;
|
||||
-webkit-transition: color 0.2s 1s;
|
||||
-o-transition: color 0.2s 1s;
|
||||
transition: color 0.2s 1s;
|
||||
color: green;
|
||||
}
|
||||
|
||||
/* line 55, ../sass/app.sass */
|
||||
/* line 69, ../sass/app.sass */
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
line-height: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* line 60, ../sass/app.sass */
|
||||
/* line 74, ../sass/app.sass */
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* line 65, ../sass/app.sass */
|
||||
/* line 79, ../sass/app.sass */
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
/* line 69, ../sass/app.sass */
|
||||
/* line 83, ../sass/app.sass */
|
||||
p {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
/* line 73, ../sass/app.sass */
|
||||
/* line 86, ../sass/app.sass */
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
/* line 79, ../sass/app.sass */
|
||||
/* line 92, ../sass/app.sass */
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
textarea {
|
||||
@@ -187,88 +263,128 @@ textarea {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* line 90, ../sass/app.sass */
|
||||
/* line 103, ../sass/app.sass */
|
||||
input[type=text]:focus,
|
||||
textarea:focus {
|
||||
color: #373737;
|
||||
}
|
||||
|
||||
/* line 94, ../sass/app.sass */
|
||||
/* line 107, ../sass/app.sass */
|
||||
textarea {
|
||||
padding-left: 3px;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
/* line 98, ../sass/app.sass */
|
||||
/* line 111, ../sass/app.sass */
|
||||
input[type=text] {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
/* line 102, ../sass/app.sass */
|
||||
/* line 115, ../sass/app.sass */
|
||||
a {
|
||||
color: #5f92aa;
|
||||
color: #09a1ec;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* line 105, ../sass/app.sass */
|
||||
/* line 118, ../sass/app.sass */
|
||||
a:hover {
|
||||
color: #afc8d4;
|
||||
color: #7fd2fa;
|
||||
}
|
||||
|
||||
/* line 109, ../sass/app.sass */
|
||||
/* line 122, ../sass/app.sass */
|
||||
#container {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* line 126, ../sass/app.sass */
|
||||
header {
|
||||
padding-bottom: 40px;
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* line 113, ../sass/app.sass */
|
||||
.imageSection {
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
margin-bottom: 80px;
|
||||
/* line 132, ../sass/app.sass */
|
||||
.medianCutPalette h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
/* line 116, ../sass/app.sass */
|
||||
|
||||
/* line 135, ../sass/app.sass */
|
||||
.imageSection {
|
||||
margin-bottom: 80px;
|
||||
background: #111111;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-khtml-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* line 139, ../sass/app.sass */
|
||||
.imageSection .imageWrap {
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-o-border-top-left-radius: 10px;
|
||||
-ms-border-top-left-radius: 10px;
|
||||
-khtml-border-top-left-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
-moz-border-radius-bottomleft: 10px;
|
||||
-webkit-border-bottom-left-radius: 10px;
|
||||
-o-border-bottom-left-radius: 10px;
|
||||
-ms-border-bottom-left-radius: 10px;
|
||||
-khtml-border-bottom-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
border: 1px solid #444444;
|
||||
background: url(../img/dark_checkered_bg.png);
|
||||
}
|
||||
/* line 124, ../sass/app.sass */
|
||||
/* line 146, ../sass/app.sass */
|
||||
.imageSection .imageWrap .targetImage {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
margin-top: -150px;
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-o-border-top-left-radius: 10px;
|
||||
-ms-border-top-left-radius: 10px;
|
||||
-khtml-border-top-left-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
-moz-border-radius-bottomleft: 10px;
|
||||
-webkit-border-bottom-left-radius: 10px;
|
||||
-o-border-bottom-left-radius: 10px;
|
||||
-ms-border-bottom-left-radius: 10px;
|
||||
-khtml-border-bottom-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
/* line 131, ../sass/app.sass */
|
||||
/* line 148, ../sass/app.sass */
|
||||
.imageSection .colors {
|
||||
margin-top: 20px;
|
||||
width: 400px;
|
||||
float: left;
|
||||
}
|
||||
/* line 134, ../sass/app.sass */
|
||||
/* line 152, ../sass/app.sass */
|
||||
.imageSection .colors .function {
|
||||
clear: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* line 138, ../sass/app.sass */
|
||||
/* line 156, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 0 4px 4px 0;
|
||||
margin-right: 2px;
|
||||
background: #dddddd;
|
||||
float: left;
|
||||
-moz-transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-moz-transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
/* line 145, ../sass/app.sass */
|
||||
/* line 163, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch:hover {
|
||||
-moz-transition: none;
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
-moz-transform: scale(1.2, 1.2);
|
||||
-webkit-transform: scale(1.2, 1.2);
|
||||
-o-transform: scale(1.2, 1.2);
|
||||
@@ -279,7 +395,7 @@ header {
|
||||
-o-box-shadow: 0 1px 10px black;
|
||||
box-shadow: 0 1px 10px black;
|
||||
}
|
||||
/* line 148, ../sass/app.sass */
|
||||
/* line 167, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch:first-child {
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
@@ -294,7 +410,7 @@ header {
|
||||
-khtml-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
/* line 150, ../sass/app.sass */
|
||||
/* line 169, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch:last-child {
|
||||
-moz-border-radius-topright: 4px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
@@ -310,7 +426,21 @@ header {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* line 153, ../sass/app.sass */
|
||||
/* Hardcoding the offset for the FB icon example */
|
||||
/* line 175, ../sass/app.sass */
|
||||
.fbIcon .imageWrap .targetImage {
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-o-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
-khtml-border-radius: 0;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
top: 142px;
|
||||
left: 192px;
|
||||
}
|
||||
|
||||
/* line 182, ../sass/app.sass */
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
BIN
img/10.jpg
BIN
img/10.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
BIN
img/logo1.png
Normal file
BIN
img/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
48
index.html
48
index.html
@@ -47,56 +47,68 @@
|
||||
|
||||
<!-- Using Mustache templating -->
|
||||
<script id='template' type='text/x-mustache'>
|
||||
{{#files}}
|
||||
<div class="imageSection">
|
||||
{{#images}}
|
||||
<div class="imageSection clearfix {{class}} ">
|
||||
<div class="imageWrap">
|
||||
<img class="targetImage" src="img/{{.}}" />
|
||||
<img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
|
||||
</div>
|
||||
<div class="colors">
|
||||
<div class="function dominantColor">
|
||||
<div class="function dominantColor clearfix">
|
||||
<h3>Dominant Color</h3>
|
||||
<div class="swatches"></div>
|
||||
<div class="swatches clearfix"></div>
|
||||
</div>
|
||||
<div class="function medianCutPalette">
|
||||
<div class="function medianCutPalette clearfix">
|
||||
<h3>Palette</h3>
|
||||
<div class="swatches"></div>
|
||||
<div class="swatches clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/files}}
|
||||
{{/images}}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
// Use mustache.js templating to create layout
|
||||
var images = { files: [ "1.jpg", "10.jpg", "2.jpg", "icon1.png"] };
|
||||
var html = Mustache.to_html($('#template').html(), images);
|
||||
|
||||
var imageArray = { images: [
|
||||
{"file": "3.jpg"},
|
||||
{"file": "4.jpg"},
|
||||
{"file": "5.jpg"},
|
||||
{"file": "logo1.png"},
|
||||
{"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
|
||||
]};
|
||||
|
||||
var html = Mustache.to_html($('#template').html(), imageArray);
|
||||
$('#main').append(html);
|
||||
|
||||
// Use lettering.js to give letter by letter styling control for the h1 title
|
||||
$("h1").lettering();
|
||||
|
||||
|
||||
// Once images are loaded, loop through each one, getting dominant color
|
||||
// and palette and displaying them.
|
||||
$('img').imagesLoaded(function(){
|
||||
// Once images are loaded, loop through each one, getting dominant color
|
||||
// and palette and displaying them.
|
||||
$('img').imagesLoaded(function(){
|
||||
|
||||
$('img').each(function(index){
|
||||
$('img').each(function(index){
|
||||
|
||||
// Get the dominant color and palette for this image
|
||||
var dominantColor = getDominantColor(this),
|
||||
medianPalette = createPalette(this, 10),
|
||||
imageSection = $(this).closest('.imageSection'),
|
||||
var imageSection = $(this).closest('.imageSection'),
|
||||
swatchEl;
|
||||
|
||||
// Dominant Color
|
||||
var dominantColor = getDominantColor(this);
|
||||
|
||||
swatchEl = $('<div>', {
|
||||
'class': 'swatch'
|
||||
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
|
||||
imageSection.find('.dominantColor .swatches').append(swatchEl);
|
||||
|
||||
|
||||
|
||||
// Palette
|
||||
var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
|
||||
var medianPalette = createPalette(this, colorCount);
|
||||
|
||||
var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
|
||||
$.each(medianPalette, function(index, value){
|
||||
swatchEl = $('<div>', {
|
||||
|
||||
@@ -81,9 +81,11 @@ function getDominantColor(sourceImage){
|
||||
// Store the RGB values in an array format suitable for quantize function
|
||||
var pixelArray = [];
|
||||
for (var i = 0; i < pixelCount; i++) {
|
||||
// If pixel is mostly opaque
|
||||
// If pixel is mostly opaque and not white
|
||||
if(pixels[i*4+3] >= 125){
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
if(!(pixels[i*4] > 250 && pixels[i*4+1] > 250 && pixels[i*4+2] > 250)){
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -101,7 +103,7 @@ function getDominantColor(sourceImage){
|
||||
|
||||
|
||||
/*
|
||||
* createPalette(sourceImage)
|
||||
* createPalette(sourceImage, colorCount)
|
||||
* returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
||||
*
|
||||
* Use the median cut algorithm provided by quantize.js to cluster similar
|
||||
@@ -122,9 +124,11 @@ function createPalette(sourceImage, colorCount){
|
||||
// Store the RGB values in an array format suitable for quantize function
|
||||
var pixelArray = [];
|
||||
for (var i = 0; i < pixelCount; i++) {
|
||||
// If pixel is mostly opaque
|
||||
// If pixel is mostly opaque and not white
|
||||
if(pixels[i*4+3] >= 125){
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
if(!(pixels[i*4] > 250 && pixels[i*4+1] > 250 && pixels[i*4+2] > 250)){
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
36
sass/_base.sass
Normal file
36
sass/_base.sass
Normal file
@@ -0,0 +1,36 @@
|
||||
$bgColor: #222
|
||||
$color: #888
|
||||
$headingColor: #fff
|
||||
$altColor: scale-color($color, $lightness: 50%)
|
||||
$lightGray: #eee
|
||||
$blue: #09a1ec
|
||||
$orange: #e83
|
||||
$green: #6bb445
|
||||
|
||||
$radius: 4px
|
||||
|
||||
@import "compass/reset"
|
||||
@import "compass/css3"
|
||||
|
||||
|
||||
/* float clearing for IE6 */
|
||||
* html .clearfix
|
||||
height: 1%
|
||||
overflow: visible
|
||||
|
||||
|
||||
/* float clearing for IE7 */
|
||||
*+html .clearfix
|
||||
min-height: 1%
|
||||
|
||||
|
||||
/* float clearing for everyone else */
|
||||
.clearfix:after
|
||||
clear: both
|
||||
content: "."
|
||||
display: block
|
||||
height: 0
|
||||
visibility: hidden
|
||||
font-size: 0
|
||||
|
||||
|
||||
183
sass/app.sass
Normal file
183
sass/app.sass
Normal file
@@ -0,0 +1,183 @@
|
||||
@import "base"
|
||||
|
||||
|
||||
|
||||
|
||||
/* =Global */
|
||||
|
||||
|
||||
body, input, textarea
|
||||
margin: 40px
|
||||
color: $color
|
||||
background: $bgColor
|
||||
font: 16px/1.625em 'Varela Round',"lucida grande",tahoma,sans-serif
|
||||
font-weight: 400
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
|
||||
h1,h2,h3,h4,h5,h6
|
||||
color: $headingColor
|
||||
font-family: 'Terminal Dosis', 'lucida grande', tahoma, sans-serif
|
||||
line-height: 1em
|
||||
font-weight: 600
|
||||
margin-bottom: .5em
|
||||
|
||||
h1
|
||||
font-size: 72px
|
||||
line-height: .5em
|
||||
margin-bottom: .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],
|
||||
input[type=password],
|
||||
textarea
|
||||
background: #fafafa
|
||||
+box-shadow(inset 0 1px 1px rgba(0,0,0,0.1))
|
||||
border: 1px solid #ddd
|
||||
color: #888
|
||||
+border-radius($radius)
|
||||
|
||||
|
||||
|
||||
input[type=text]:focus,
|
||||
textarea:focus
|
||||
color: #373737
|
||||
|
||||
textarea
|
||||
padding-left: 3px
|
||||
width: 98%
|
||||
|
||||
input[type=text]
|
||||
padding: 3px
|
||||
|
||||
/* Links */
|
||||
a
|
||||
color: $blue
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: scale-color($blue, $lightness: 50%)
|
||||
|
||||
|
||||
#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: #111
|
||||
+border-radius(10px)
|
||||
.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
|
||||
.swatches
|
||||
.swatch
|
||||
width: 40px
|
||||
height: 20px
|
||||
margin-right: 2px
|
||||
background: #ddd
|
||||
float: left
|
||||
+transition(all .5s)
|
||||
&:hover
|
||||
+transition(none)
|
||||
+scale(1.2, 1.2)
|
||||
+box-shadow(0 1px 10px rgba(0,0,0,1))
|
||||
&:first-child
|
||||
+border-left-radius($radius)
|
||||
&:last-child
|
||||
+border-right-radius($radius)
|
||||
|
||||
/* Hardcoding the offset for the FB icon example */
|
||||
.fbIcon
|
||||
.imageWrap
|
||||
.targetImage
|
||||
+border-radius(0)
|
||||
position: relative
|
||||
top: 142px
|
||||
left: 192px
|
||||
|
||||
|
||||
canvas
|
||||
display: none
|
||||
Reference in New Issue
Block a user