122 lines
1.9 KiB
SCSS
122 lines
1.9 KiB
SCSS
|
@import 'attentive';
|
||
|
@import 'compass';
|
||
|
//@import 'syntax';
|
||
|
|
||
|
$body-color : rgb(33,33,33);
|
||
|
$code-background : lighten(mix($body-color, white), 30%);
|
||
|
|
||
|
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;
|
||
|
@include show-logo('dark-logo.png');
|
||
|
}
|
||
|
|
||
|
.sass {
|
||
|
position : absolute;
|
||
|
bottom : 10px;
|
||
|
right : 20px;
|
||
|
@include show-logo('sass.gif');
|
||
|
}
|
||
|
|
||
|
.na {
|
||
|
color : #19177C;
|
||
|
}
|
||
|
|
||
|
.err {
|
||
|
color : #008000;
|
||
|
border : none;
|
||
|
}
|
||
|
|
||
|
.rounded {
|
||
|
@include border-radius(10px);
|
||
|
}
|
||
|
|
||
|
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 }
|
||
|
}
|
||
|
|
||
|
|
||
|
.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 {
|
||
|
color : rgb(255, 0, 0);
|
||
|
font-weight : normal;
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|