Skip to content

Instantly share code, notes, and snippets.

@frankinedinburgh
Created June 4, 2015 17:20
Show Gist options
  • Save frankinedinburgh/a4268ae26bf248527926 to your computer and use it in GitHub Desktop.
Save frankinedinburgh/a4268ae26bf248527926 to your computer and use it in GitHub Desktop.
SCSS Color Chart
#container
%h1 color mixing with SCSS
- 50.times do
.mixing
$(document).ready(function(){
$('#container').scrollLeft();
$('h1').mouseenter(function(){
$(this).css('color','rgba(255,255,255,1)')
});
$('h1').mouseleave(function(){
$(this).css('color','rgba(255,255,255,0)')
});
/*..............................................*/
var cycle;
$("div").each(function(){
var vh = window.innerHeight;
$(this).animate({
height: vh,
width: '100%',
opacity: "toggle"
},
10000, "linear",
function() {
animate();
});
});
/*----------------------------------------------------*/
});
/*.animate( properties [, duration ] [, easing ] [, complete ] )*/
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "compass/css3";
$color:#A3005C;
$color2: #D9D9A8;
$color3:#8C8CC7;
$defaultWidth:52px;
$defaultHeight:350px;
$display:inline-block;
$margin:0 auto;
$widthOuter:850px;
$float:left;
$borderRadius:550%;
$textSize:50px;
$textWeight:bold;
$textShadow:2px 2px 2px rgba(0,0,0,0.5),-2px 16px 2px rgba(0,0,0,0.2);
//Our Break points
@mixin breakpoint($point) {
@if $point == desktop {
@media (min-width: 70em) { @content ; }
}
@else if $point == laptop {
@media (min-width: 64em) { @content ; }
}
@else if $point == tablet {
@media (min-width: 50em) { @content ; }
}
@else if $point == phablet {
@media (min-width: 37.5em) { @content ; }
}
@else if $point == mobileonly {
@media (max-width: 37.5em) { @content ; }
}
}
body{
margin:4rem auto;
background-color:adjust-hue(tint($color, 50%), 5%);
}
div#container{
background-color:lighten($color, 45%);
margin:$margin;
width:$widthOuter;
@include breakpoint(mobileonly){
width: 100%;
}
border-radius:$borderRadius;
overflow:hidden;
height:$defaultHeight;
h1{
position: absolute;
z-index: +1;
top: 50%;
left: 30%;
color: lighten($color, 15%);
font:{
weight: $textWeight;
size: $textSize;
}
text:{
align: center;
shadow: $textShadow;
}
}
}
div.mixing{
height: $defaultHeight;
width: $defaultWidth;
display: $display;
float: $float;
background-color: $color3;
}
@for $i from 1 through 21{
div.mixing:nth-of-type(#{$i}){
background-color: lighten($color, 3% * $i);
transition: background-color 2s;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment