sass_compass_unleashed/assets/stylesheets/application.css.scss

155 lines
2.5 KiB
SCSS
Raw Normal View History

2012-03-13 03:06:01 +00:00
@import 'attentive';
@import 'compass';
//@import 'syntax';
2012-03-14 15:55:13 +00:00
$dark-gray : rgb(33,33,33);
$red : rgb(255, 0, 0);
$white : white;
$lighter-gray : lighten(mix($dark-gray, $white), 30%);
$body-color : $dark-gray;
$code-background : $lighter-gray;
$important-color : $red;
$compass-logo : 'dark-logo.png';
$sass-logo : 'sass.gif';
2012-03-13 03:06:01 +00:00
body {
background-color: $body-color;
}
@mixin show-logo($logo) {
background-image : image-url($logo);
background-repeat : no-repeat;
width : image-width($logo);
height : image-height($logo);
}
.compass {
position : absolute;
bottom : 0;
left : 20px;
2012-03-14 15:55:13 +00:00
@include show-logo($compass-logo);
2012-03-13 03:06:01 +00:00
}
.sass {
position : absolute;
bottom : 10px;
right : 20px;
2012-03-14 15:55:13 +00:00
@include show-logo($sass-logo);
2012-03-13 03:06:01 +00:00
}
2012-03-14 15:55:13 +00:00
//extendables
2012-03-13 15:49:37 +00:00
2012-03-14 15:55:13 +00:00
.rounded {
@include border-radius(10px);
2012-03-13 15:49:37 +00:00
}
2012-03-14 15:55:13 +00:00
// syntax overrides
2012-03-13 03:06:01 +00:00
.na {
color : #19177C;
}
.err {
color : #008000;
border : none;
}
h1, h2, h3, li, p {
font-family : Nunito, sans-serif;
color : white;
}
#slides {
@include transition-duration(0.5s);
.highlight {
@extend .rounded;
background-color : $code-background;
width : 90%;
margin : 0 auto;
margin-top : 20px;
}
.slide {
opacity : 0.4;
&.active { opacity : 1.0 }
}
2012-03-14 15:55:13 +00:00
.style-big-list li {
font-size : 60px;
}
.style-sprite-layout ul {
width : 500px !important;
}
.style-variable-why ul {
width : 450px !important;
margin : 0 auto;
}
2012-03-13 03:06:01 +00:00
.style-better .highlight {
width : 800px;
}
.style-bad .highlight, .style-pallet .highlight {
width : 700px;
}
.style-variables .highlight {
width : 500px;
}
.style-mixins .highlight {
width : 900px;
}
ul {
padding-top: 30px;
font-size : 30px;
width : 50%;
margin : 0 auto;
text-align : left;
li {
padding-top : 10px;
}
}
code {
@extend .rounded;
background-color : $code-background;
font-size : 90%;
font-weight : bold;
padding : 2px 10px;
color : $body-color;
}
.style-long {
h1 {
font-size : 60px !important;
}
}
.style-important {
h1 {
2012-03-14 15:55:13 +00:00
color : $important-color;
2012-03-13 03:06:01 +00:00
font-weight : normal;
}
}
}
2012-03-14 15:55:13 +00:00
.grid {
background-color : $code-background;
margin : 0 auto;
height : 500px;
width : 700px;
@include grid-background(16, 20px, 10px, 20px, 5px, $force-fluid: true);
}