Update published site
This commit is contained in:
Scott Davis
commit
405a24d595
BIN
assets/36kou7.jpg
Normal file
BIN
assets/36kou7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
assets/InceptionArch_Slusher.jpg
Normal file
BIN
assets/InceptionArch_Slusher.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
288
assets/_syntax.scss
Normal file
288
assets/_syntax.scss
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
/* non highlighted code colors */
|
||||||
|
/* line 48, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre {
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
display: block;
|
||||||
|
padding: .8em !important;
|
||||||
|
overflow-x: auto;
|
||||||
|
line-height: 1.45em;
|
||||||
|
background: #002b36 "" !important;
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
/* Comment */
|
||||||
|
/* Comment.Multiline */
|
||||||
|
/* Comment.Preproc */
|
||||||
|
/* Comment.Single */
|
||||||
|
/* Comment.Special */
|
||||||
|
/* Error */
|
||||||
|
/* Keyword */
|
||||||
|
/* Operator */
|
||||||
|
/* Operator */
|
||||||
|
/* Operator.Word */
|
||||||
|
/* Generic.Deleted */
|
||||||
|
/* Generic.Deleted.Specific */
|
||||||
|
/* Generic.Emph */
|
||||||
|
/* Generic.Heading */
|
||||||
|
/* Generic.Inserted */
|
||||||
|
/* Generic.Inserted.Specific */
|
||||||
|
/* Generic.Strong */
|
||||||
|
/* Generic.Subheading */
|
||||||
|
/* Keyword.Constant */
|
||||||
|
/* Keyword.Declaration */
|
||||||
|
/* Keyword.Pseudo */
|
||||||
|
/* Keyword.Reserved */
|
||||||
|
/* Keyword.Type */
|
||||||
|
/* Name.Attribute */
|
||||||
|
/* Name.Builtin */
|
||||||
|
/* Name.Class */
|
||||||
|
/* Name.Constant */
|
||||||
|
/* Name.Exception */
|
||||||
|
/* Name.Function */
|
||||||
|
/* Name.Namespace */
|
||||||
|
/* Name.Tag */
|
||||||
|
/* Name.Variable.Global */
|
||||||
|
/* Name.Variable.Instance */
|
||||||
|
/* Name.Variable */
|
||||||
|
/* Literal.Number.Float */
|
||||||
|
/* Literal.Number */
|
||||||
|
/* Literal.Number.Hex */
|
||||||
|
/* Literal.Number.Integer */
|
||||||
|
/* Literal.String */
|
||||||
|
/* Literal.String.Doc */
|
||||||
|
/* Literal.String.Double */
|
||||||
|
/* Literal.String.Escape */
|
||||||
|
/* Literal.String.Interpol */
|
||||||
|
/* Literal.String.Regex */
|
||||||
|
/* Literal.String.Single */
|
||||||
|
}
|
||||||
|
/* line 58, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre span {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
}
|
||||||
|
/* line 59, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre span {
|
||||||
|
font-style: normal !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
}
|
||||||
|
/* line 61, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .c {
|
||||||
|
color: #586e75 !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
/* line 62, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .cm {
|
||||||
|
color: #586e75 !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
/* line 63, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .cp {
|
||||||
|
color: #586e75 !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
/* line 64, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .c1 {
|
||||||
|
color: #586e75 !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
/* line 65, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .cs {
|
||||||
|
color: #586e75 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
/* line 66, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .err {
|
||||||
|
color: #dc322f !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
/* line 67, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .k {
|
||||||
|
color: #cb4b16 !important;
|
||||||
|
}
|
||||||
|
/* line 68, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .o {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 69, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .p {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
}
|
||||||
|
/* line 70, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .ow {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 71, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gd {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
background-color: #372c34 !important;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
/* line 72, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gd .x {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
background-color: #4d2d33 !important;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
/* line 73, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .ge {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
/* line 75, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gh {
|
||||||
|
color: #586e75 !important;
|
||||||
|
}
|
||||||
|
/* line 76, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gi {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
background-color: #1a412b !important;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
/* line 77, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gi .x {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
background-color: #355720 !important;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
/* line 80, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gs {
|
||||||
|
color: #93a1a1 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 81, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .gu {
|
||||||
|
color: #6c71c4 !important;
|
||||||
|
}
|
||||||
|
/* line 83, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .kc {
|
||||||
|
color: #859900 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 84, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .kd {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 85, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .kp {
|
||||||
|
color: #cb4b16 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 86, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .kr {
|
||||||
|
color: #d33682 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 87, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .kt {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 88, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .n {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 89, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .na {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 90, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nb {
|
||||||
|
color: #859900 !important;
|
||||||
|
}
|
||||||
|
/* line 91, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nc {
|
||||||
|
color: #d33682 !important;
|
||||||
|
}
|
||||||
|
/* line 92, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .no {
|
||||||
|
color: #b58900 !important;
|
||||||
|
}
|
||||||
|
/* line 94, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nl {
|
||||||
|
color: #859900 !important;
|
||||||
|
}
|
||||||
|
/* line 95, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .ne {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 96, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nf {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 97, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nn {
|
||||||
|
color: #b58900 !important;
|
||||||
|
}
|
||||||
|
/* line 98, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nt {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
/* line 99, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nx {
|
||||||
|
color: #b58900 !important;
|
||||||
|
}
|
||||||
|
/* line 102, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .vg {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 103, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .vi {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 104, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .nv {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 106, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .mf {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 107, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .m {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 108, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .mh {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 109, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .mi {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 111, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .s {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 114, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .sd {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 115, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .s2 {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 116, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .se {
|
||||||
|
color: #dc322f !important;
|
||||||
|
}
|
||||||
|
/* line 118, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .si {
|
||||||
|
color: #268bd2 !important;
|
||||||
|
}
|
||||||
|
/* line 120, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .sr {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 121, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre .s1 {
|
||||||
|
color: #2aa198 !important;
|
||||||
|
}
|
||||||
|
/* line 124, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/_syntax.scss */
|
||||||
|
.highlight pre div .gd, .highlight pre div .gd .x, .highlight pre div .gi, .highlight pre div .gi .x {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
254
assets/application.css
Normal file
254
assets/application.css
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
/* line 4, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 9, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
.timer {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Courier New, monospace;
|
||||||
|
}
|
||||||
|
/* line 19, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
.timer.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* line 23, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
.timer.running {
|
||||||
|
color: #c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 28, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 36, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
body.loading .slide {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 41, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* line 46, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide {
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* line 51, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content {
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 5%;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
/* line 58, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content * {
|
||||||
|
line-height: 105%;
|
||||||
|
}
|
||||||
|
/* line 62, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content h1, #slides .slide .content h2, #slides .slide .content h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* line 66, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content h1 {
|
||||||
|
font-size: 6.5em;
|
||||||
|
}
|
||||||
|
/* line 70, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content h2 {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
/* line 74, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content h3 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
/* line 78, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content div.highlight {
|
||||||
|
text-align: left;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 160%;
|
||||||
|
}
|
||||||
|
/* line 85, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide .content div.highlight pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* line 92, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide.style-smaller div.highlight {
|
||||||
|
font-size: 125%;
|
||||||
|
}
|
||||||
|
/* line 98, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide.style-larger div.highlight {
|
||||||
|
font-size: 200%;
|
||||||
|
}
|
||||||
|
/* line 104, /Users/sdavis/Work/attentive/lib/assets/stylesheets/attentive.css.scss */
|
||||||
|
#slides .slide.style-even-larger div.highlight {
|
||||||
|
font-size: 250%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 17, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
body {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 28, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
.compass {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 20px;
|
||||||
|
background-image: url("/assets/dark-logo.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 414px;
|
||||||
|
height: 89px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 35, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
.sass {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 20px;
|
||||||
|
background-image: url("/assets/sass.gif");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 123px;
|
||||||
|
height: 51px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 44, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
.rounded, #slides .highlight, #slides code {
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-ms-border-radius: 10px;
|
||||||
|
-o-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 50, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
.na {
|
||||||
|
color: #19177C;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 54, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
.err {
|
||||||
|
color: #008000;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 59, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
h1, h2, h3, li, p {
|
||||||
|
font-family: Nunito, sans-serif;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 64, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides {
|
||||||
|
-webkit-transition-duration: 0.5s;
|
||||||
|
-moz-transition-duration: 0.5s;
|
||||||
|
-ms-transition-duration: 0.5s;
|
||||||
|
-o-transition-duration: 0.5s;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
}
|
||||||
|
/* line 68, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .highlight {
|
||||||
|
background-color: #dddddd;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
/* line 77, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .slide {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
/* line 80, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .slide.active {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
/* line 83, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-big-list li {
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
/* line 87, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-sprite-layout ul {
|
||||||
|
width: 500px !important;
|
||||||
|
}
|
||||||
|
/* line 91, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-variable-why ul {
|
||||||
|
width: 450px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
/* line 96, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-better .highlight {
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
/* line 100, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-bad .highlight, #slides .style-pallet .highlight {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
/* line 104, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-variables .highlight {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
/* line 108, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-mixins .highlight {
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
/* line 112, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides ul {
|
||||||
|
padding-top: 30px;
|
||||||
|
font-size: 30px;
|
||||||
|
width: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
/* line 118, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides ul li {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
/* line 123, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides code {
|
||||||
|
background-color: #dddddd;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 2px 10px;
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
/* line 134, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-long h1 {
|
||||||
|
font-size: 60px !important;
|
||||||
|
}
|
||||||
|
/* line 140, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
#slides .style-important h1 {
|
||||||
|
color: red;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 149, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
|
||||||
|
.grid {
|
||||||
|
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.042%, rgba(0, 0, 0, 0)), color-stop(1.042%, rgba(100, 100, 225, 0.25)), color-stop(5.208%, rgba(100, 100, 225, 0.25)), color-stop(5.208%, rgba(0, 0, 0, 0)), color-stop(7.292%, rgba(0, 0, 0, 0)), color-stop(7.292%, rgba(100, 100, 225, 0.25)), color-stop(11.458%, rgba(100, 100, 225, 0.25)), color-stop(11.458%, rgba(0, 0, 0, 0)), color-stop(13.542%, rgba(0, 0, 0, 0)), color-stop(13.542%, rgba(100, 100, 225, 0.25)), color-stop(17.708%, rgba(100, 100, 225, 0.25)), color-stop(17.708%, rgba(0, 0, 0, 0)), color-stop(19.792%, rgba(0, 0, 0, 0)), color-stop(19.792%, rgba(100, 100, 225, 0.25)), color-stop(23.958%, rgba(100, 100, 225, 0.25)), color-stop(23.958%, rgba(0, 0, 0, 0)), color-stop(26.042%, rgba(0, 0, 0, 0)), color-stop(26.042%, rgba(100, 100, 225, 0.25)), color-stop(30.208%, rgba(100, 100, 225, 0.25)), color-stop(30.208%, rgba(0, 0, 0, 0)), color-stop(32.292%, rgba(0, 0, 0, 0)), color-stop(32.292%, rgba(100, 100, 225, 0.25)), color-stop(36.458%, rgba(100, 100, 225, 0.25)), color-stop(36.458%, rgba(0, 0, 0, 0)), color-stop(38.542%, rgba(0, 0, 0, 0)), color-stop(38.542%, rgba(100, 100, 225, 0.25)), color-stop(42.708%, rgba(100, 100, 225, 0.25)), color-stop(42.708%, rgba(0, 0, 0, 0)), color-stop(44.792%, rgba(0, 0, 0, 0)), color-stop(44.792%, rgba(100, 100, 225, 0.25)), color-stop(48.958%, rgba(100, 100, 225, 0.25)), color-stop(48.958%, rgba(0, 0, 0, 0)), color-stop(51.042%, rgba(0, 0, 0, 0)), color-stop(51.042%, rgba(100, 100, 225, 0.25)), color-stop(55.208%, rgba(100, 100, 225, 0.25)), color-stop(55.208%, rgba(0, 0, 0, 0)), color-stop(57.292%, rgba(0, 0, 0, 0)), color-stop(57.292%, rgba(100, 100, 225, 0.25)), color-stop(61.458%, rgba(100, 100, 225, 0.25)), color-stop(61.458%, rgba(0, 0, 0, 0)), color-stop(63.542%, rgba(0, 0, 0, 0)), color-stop(63.542%, rgba(100, 100, 225, 0.25)), color-stop(67.708%, rgba(100, 100, 225, 0.25)), color-stop(67.708%, rgba(0, 0, 0, 0)), color-stop(69.792%, rgba(0, 0, 0, 0)), color-stop(69.792%, rgba(100, 100, 225, 0.25)), color-stop(73.958%, rgba(100, 100, 225, 0.25)), color-stop(73.958%, rgba(0, 0, 0, 0)), color-stop(76.042%, rgba(0, 0, 0, 0)), color-stop(76.042%, rgba(100, 100, 225, 0.25)), color-stop(80.208%, rgba(100, 100, 225, 0.25)), color-stop(80.208%, rgba(0, 0, 0, 0)), color-stop(82.292%, rgba(0, 0, 0, 0)), color-stop(82.292%, rgba(100, 100, 225, 0.25)), color-stop(86.458%, rgba(100, 100, 225, 0.25)), color-stop(86.458%, rgba(0, 0, 0, 0)), color-stop(88.542%, rgba(0, 0, 0, 0)), color-stop(88.542%, rgba(100, 100, 225, 0.25)), color-stop(92.708%, rgba(100, 100, 225, 0.25)), color-stop(92.708%, rgba(0, 0, 0, 0)), color-stop(94.792%, rgba(0, 0, 0, 0)), color-stop(94.792%, rgba(100, 100, 225, 0.25)), color-stop(98.958%, rgba(100, 100, 225, 0.25)), color-stop(98.958%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
|
||||||
|
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.042%, rgba(100, 100, 225, 0.25) 1.042%, rgba(100, 100, 225, 0.25) 5.208%, rgba(0, 0, 0, 0) 5.208%, rgba(0, 0, 0, 0) 7.292%, rgba(100, 100, 225, 0.25) 7.292%, rgba(100, 100, 225, 0.25) 11.458%, rgba(0, 0, 0, 0) 11.458%, rgba(0, 0, 0, 0) 13.542%, rgba(100, 100, 225, 0.25) 13.542%, rgba(100, 100, 225, 0.25) 17.708%, rgba(0, 0, 0, 0) 17.708%, rgba(0, 0, 0, 0) 19.792%, rgba(100, 100, 225, 0.25) 19.792%, rgba(100, 100, 225, 0.25) 23.958%, rgba(0, 0, 0, 0) 23.958%, rgba(0, 0, 0, 0) 26.042%, rgba(100, 100, 225, 0.25) 26.042%, rgba(100, 100, 225, 0.25) 30.208%, rgba(0, 0, 0, 0) 30.208%, rgba(0, 0, 0, 0) 32.292%, rgba(100, 100, 225, 0.25) 32.292%, rgba(100, 100, 225, 0.25) 36.458%, rgba(0, 0, 0, 0) 36.458%, rgba(0, 0, 0, 0) 38.542%, rgba(100, 100, 225, 0.25) 38.542%, rgba(100, 100, 225, 0.25) 42.708%, rgba(0, 0, 0, 0) 42.708%, rgba(0, 0, 0, 0) 44.792%, rgba(100, 100, 225, 0.25) 44.792%, rgba(100, 100, 225, 0.25) 48.958%, rgba(0, 0, 0, 0) 48.958%, rgba(0, 0, 0, 0) 51.042%, rgba(100, 100, 225, 0.25) 51.042%, rgba(100, 100, 225, 0.25) 55.208%, rgba(0, 0, 0, 0) 55.208%, rgba(0, 0, 0, 0) 57.292%, rgba(100, 100, 225, 0.25) 57.292%, rgba(100, 100, 225, 0.25) 61.458%, rgba(0, 0, 0, 0) 61.458%, rgba(0, 0, 0, 0) 63.542%, rgba(100, 100, 225, 0.25) 63.542%, rgba(100, 100, 225, 0.25) 67.708%, rgba(0, 0, 0, 0) 67.708%, rgba(0, 0, 0, 0) 69.792%, rgba(100, 100, 225, 0.25) 69.792%, rgba(100, 100, 225, 0.25) 73.958%, rgba(0, 0, 0, 0) 73.958%, rgba(0, 0, 0, 0) 76.042%, rgba(100, 100, 225, 0.25) 76.042%, rgba(100, 100, 225, 0.25) 80.208%, rgba(0, 0, 0, 0) 80.208%, rgba(0, 0, 0, 0) 82.292%, rgba(100, 100, 225, 0.25) 82.292%, rgba(100, 100, 225, 0.25) 86.458%, rgba(0, 0, 0, 0) 86.458%, rgba(0, 0, 0, 0) 88.542%, rgba(100, 100, 225, 0.25) 88.542%, rgba(100, 100, 225, 0.25) 92.708%, rgba(0, 0, 0, 0) 92.708%, rgba(0, 0, 0, 0) 94.792%, rgba(100, 100, 225, 0.25) 94.792%, rgba(100, 100, 225, 0.25) 98.958%, rgba(0, 0, 0, 0) 98.958%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.042%, rgba(100, 100, 225, 0.25) 1.042%, rgba(100, 100, 225, 0.25) 5.208%, rgba(0, 0, 0, 0) 5.208%, rgba(0, 0, 0, 0) 7.292%, rgba(100, 100, 225, 0.25) 7.292%, rgba(100, 100, 225, 0.25) 11.458%, rgba(0, 0, 0, 0) 11.458%, rgba(0, 0, 0, 0) 13.542%, rgba(100, 100, 225, 0.25) 13.542%, rgba(100, 100, 225, 0.25) 17.708%, rgba(0, 0, 0, 0) 17.708%, rgba(0, 0, 0, 0) 19.792%, rgba(100, 100, 225, 0.25) 19.792%, rgba(100, 100, 225, 0.25) 23.958%, rgba(0, 0, 0, 0) 23.958%, rgba(0, 0, 0, 0) 26.042%, rgba(100, 100, 225, 0.25) 26.042%, rgba(100, 100, 225, 0.25) 30.208%, rgba(0, 0, 0, 0) 30.208%, rgba(0, 0, 0, 0) 32.292%, rgba(100, 100, 225, 0.25) 32.292%, rgba(100, 100, 225, 0.25) 36.458%, rgba(0, 0, 0, 0) 36.458%, rgba(0, 0, 0, 0) 38.542%, rgba(100, 100, 225, 0.25) 38.542%, rgba(100, 100, 225, 0.25) 42.708%, rgba(0, 0, 0, 0) 42.708%, rgba(0, 0, 0, 0) 44.792%, rgba(100, 100, 225, 0.25) 44.792%, rgba(100, 100, 225, 0.25) 48.958%, rgba(0, 0, 0, 0) 48.958%, rgba(0, 0, 0, 0) 51.042%, rgba(100, 100, 225, 0.25) 51.042%, rgba(100, 100, 225, 0.25) 55.208%, rgba(0, 0, 0, 0) 55.208%, rgba(0, 0, 0, 0) 57.292%, rgba(100, 100, 225, 0.25) 57.292%, rgba(100, 100, 225, 0.25) 61.458%, rgba(0, 0, 0, 0) 61.458%, rgba(0, 0, 0, 0) 63.542%, rgba(100, 100, 225, 0.25) 63.542%, rgba(100, 100, 225, 0.25) 67.708%, rgba(0, 0, 0, 0) 67.708%, rgba(0, 0, 0, 0) 69.792%, rgba(100, 100, 225, 0.25) 69.792%, rgba(100, 100, 225, 0.25) 73.958%, rgba(0, 0, 0, 0) 73.958%, rgba(0, 0, 0, 0) 76.042%, rgba(100, 100, 225, 0.25) 76.042%, rgba(100, 100, 225, 0.25) 80.208%, rgba(0, 0, 0, 0) 80.208%, rgba(0, 0, 0, 0) 82.292%, rgba(100, 100, 225, 0.25) 82.292%, rgba(100, 100, 225, 0.25) 86.458%, rgba(0, 0, 0, 0) 86.458%, rgba(0, 0, 0, 0) 88.542%, rgba(100, 100, 225, 0.25) 88.542%, rgba(100, 100, 225, 0.25) 92.708%, rgba(0, 0, 0, 0) 92.708%, rgba(0, 0, 0, 0) 94.792%, rgba(100, 100, 225, 0.25) 94.792%, rgba(100, 100, 225, 0.25) 98.958%, rgba(0, 0, 0, 0) 98.958%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.042%, rgba(100, 100, 225, 0.25) 1.042%, rgba(100, 100, 225, 0.25) 5.208%, rgba(0, 0, 0, 0) 5.208%, rgba(0, 0, 0, 0) 7.292%, rgba(100, 100, 225, 0.25) 7.292%, rgba(100, 100, 225, 0.25) 11.458%, rgba(0, 0, 0, 0) 11.458%, rgba(0, 0, 0, 0) 13.542%, rgba(100, 100, 225, 0.25) 13.542%, rgba(100, 100, 225, 0.25) 17.708%, rgba(0, 0, 0, 0) 17.708%, rgba(0, 0, 0, 0) 19.792%, rgba(100, 100, 225, 0.25) 19.792%, rgba(100, 100, 225, 0.25) 23.958%, rgba(0, 0, 0, 0) 23.958%, rgba(0, 0, 0, 0) 26.042%, rgba(100, 100, 225, 0.25) 26.042%, rgba(100, 100, 225, 0.25) 30.208%, rgba(0, 0, 0, 0) 30.208%, rgba(0, 0, 0, 0) 32.292%, rgba(100, 100, 225, 0.25) 32.292%, rgba(100, 100, 225, 0.25) 36.458%, rgba(0, 0, 0, 0) 36.458%, rgba(0, 0, 0, 0) 38.542%, rgba(100, 100, 225, 0.25) 38.542%, rgba(100, 100, 225, 0.25) 42.708%, rgba(0, 0, 0, 0) 42.708%, rgba(0, 0, 0, 0) 44.792%, rgba(100, 100, 225, 0.25) 44.792%, rgba(100, 100, 225, 0.25) 48.958%, rgba(0, 0, 0, 0) 48.958%, rgba(0, 0, 0, 0) 51.042%, rgba(100, 100, 225, 0.25) 51.042%, rgba(100, 100, 225, 0.25) 55.208%, rgba(0, 0, 0, 0) 55.208%, rgba(0, 0, 0, 0) 57.292%, rgba(100, 100, 225, 0.25) 57.292%, rgba(100, 100, 225, 0.25) 61.458%, rgba(0, 0, 0, 0) 61.458%, rgba(0, 0, 0, 0) 63.542%, rgba(100, 100, 225, 0.25) 63.542%, rgba(100, 100, 225, 0.25) 67.708%, rgba(0, 0, 0, 0) 67.708%, rgba(0, 0, 0, 0) 69.792%, rgba(100, 100, 225, 0.25) 69.792%, rgba(100, 100, 225, 0.25) 73.958%, rgba(0, 0, 0, 0) 73.958%, rgba(0, 0, 0, 0) 76.042%, rgba(100, 100, 225, 0.25) 76.042%, rgba(100, 100, 225, 0.25) 80.208%, rgba(0, 0, 0, 0) 80.208%, rgba(0, 0, 0, 0) 82.292%, rgba(100, 100, 225, 0.25) 82.292%, rgba(100, 100, 225, 0.25) 86.458%, rgba(0, 0, 0, 0) 86.458%, rgba(0, 0, 0, 0) 88.542%, rgba(100, 100, 225, 0.25) 88.542%, rgba(100, 100, 225, 0.25) 92.708%, rgba(0, 0, 0, 0) 92.708%, rgba(0, 0, 0, 0) 94.792%, rgba(100, 100, 225, 0.25) 94.792%, rgba(100, 100, 225, 0.25) 98.958%, rgba(0, 0, 0, 0) 98.958%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.042%, rgba(100, 100, 225, 0.25) 1.042%, rgba(100, 100, 225, 0.25) 5.208%, rgba(0, 0, 0, 0) 5.208%, rgba(0, 0, 0, 0) 7.292%, rgba(100, 100, 225, 0.25) 7.292%, rgba(100, 100, 225, 0.25) 11.458%, rgba(0, 0, 0, 0) 11.458%, rgba(0, 0, 0, 0) 13.542%, rgba(100, 100, 225, 0.25) 13.542%, rgba(100, 100, 225, 0.25) 17.708%, rgba(0, 0, 0, 0) 17.708%, rgba(0, 0, 0, 0) 19.792%, rgba(100, 100, 225, 0.25) 19.792%, rgba(100, 100, 225, 0.25) 23.958%, rgba(0, 0, 0, 0) 23.958%, rgba(0, 0, 0, 0) 26.042%, rgba(100, 100, 225, 0.25) 26.042%, rgba(100, 100, 225, 0.25) 30.208%, rgba(0, 0, 0, 0) 30.208%, rgba(0, 0, 0, 0) 32.292%, rgba(100, 100, 225, 0.25) 32.292%, rgba(100, 100, 225, 0.25) 36.458%, rgba(0, 0, 0, 0) 36.458%, rgba(0, 0, 0, 0) 38.542%, rgba(100, 100, 225, 0.25) 38.542%, rgba(100, 100, 225, 0.25) 42.708%, rgba(0, 0, 0, 0) 42.708%, rgba(0, 0, 0, 0) 44.792%, rgba(100, 100, 225, 0.25) 44.792%, rgba(100, 100, 225, 0.25) 48.958%, rgba(0, 0, 0, 0) 48.958%, rgba(0, 0, 0, 0) 51.042%, rgba(100, 100, 225, 0.25) 51.042%, rgba(100, 100, 225, 0.25) 55.208%, rgba(0, 0, 0, 0) 55.208%, rgba(0, 0, 0, 0) 57.292%, rgba(100, 100, 225, 0.25) 57.292%, rgba(100, 100, 225, 0.25) 61.458%, rgba(0, 0, 0, 0) 61.458%, rgba(0, 0, 0, 0) 63.542%, rgba(100, 100, 225, 0.25) 63.542%, rgba(100, 100, 225, 0.25) 67.708%, rgba(0, 0, 0, 0) 67.708%, rgba(0, 0, 0, 0) 69.792%, rgba(100, 100, 225, 0.25) 69.792%, rgba(100, 100, 225, 0.25) 73.958%, rgba(0, 0, 0, 0) 73.958%, rgba(0, 0, 0, 0) 76.042%, rgba(100, 100, 225, 0.25) 76.042%, rgba(100, 100, 225, 0.25) 80.208%, rgba(0, 0, 0, 0) 80.208%, rgba(0, 0, 0, 0) 82.292%, rgba(100, 100, 225, 0.25) 82.292%, rgba(100, 100, 225, 0.25) 86.458%, rgba(0, 0, 0, 0) 86.458%, rgba(0, 0, 0, 0) 88.542%, rgba(100, 100, 225, 0.25) 88.542%, rgba(100, 100, 225, 0.25) 92.708%, rgba(0, 0, 0, 0) 92.708%, rgba(0, 0, 0, 0) 94.792%, rgba(100, 100, 225, 0.25) 94.792%, rgba(100, 100, 225, 0.25) 98.958%, rgba(0, 0, 0, 0) 98.958%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), linear-gradient(left, rgba(0, 0, 0, 0) 1.042%, rgba(100, 100, 225, 0.25) 1.042%, rgba(100, 100, 225, 0.25) 5.208%, rgba(0, 0, 0, 0) 5.208%, rgba(0, 0, 0, 0) 7.292%, rgba(100, 100, 225, 0.25) 7.292%, rgba(100, 100, 225, 0.25) 11.458%, rgba(0, 0, 0, 0) 11.458%, rgba(0, 0, 0, 0) 13.542%, rgba(100, 100, 225, 0.25) 13.542%, rgba(100, 100, 225, 0.25) 17.708%, rgba(0, 0, 0, 0) 17.708%, rgba(0, 0, 0, 0) 19.792%, rgba(100, 100, 225, 0.25) 19.792%, rgba(100, 100, 225, 0.25) 23.958%, rgba(0, 0, 0, 0) 23.958%, rgba(0, 0, 0, 0) 26.042%, rgba(100, 100, 225, 0.25) 26.042%, rgba(100, 100, 225, 0.25) 30.208%, rgba(0, 0, 0, 0) 30.208%, rgba(0, 0, 0, 0) 32.292%, rgba(100, 100, 225, 0.25) 32.292%, rgba(100, 100, 225, 0.25) 36.458%, rgba(0, 0, 0, 0) 36.458%, rgba(0, 0, 0, 0) 38.542%, rgba(100, 100, 225, 0.25) 38.542%, rgba(100, 100, 225, 0.25) 42.708%, rgba(0, 0, 0, 0) 42.708%, rgba(0, 0, 0, 0) 44.792%, rgba(100, 100, 225, 0.25) 44.792%, rgba(100, 100, 225, 0.25) 48.958%, rgba(0, 0, 0, 0) 48.958%, rgba(0, 0, 0, 0) 51.042%, rgba(100, 100, 225, 0.25) 51.042%, rgba(100, 100, 225, 0.25) 55.208%, rgba(0, 0, 0, 0) 55.208%, rgba(0, 0, 0, 0) 57.292%, rgba(100, 100, 225, 0.25) 57.292%, rgba(100, 100, 225, 0.25) 61.458%, rgba(0, 0, 0, 0) 61.458%, rgba(0, 0, 0, 0) 63.542%, rgba(100, 100, 225, 0.25) 63.542%, rgba(100, 100, 225, 0.25) 67.708%, rgba(0, 0, 0, 0) 67.708%, rgba(0, 0, 0, 0) 69.792%, rgba(100, 100, 225, 0.25) 69.792%, rgba(100, 100, 225, 0.25) 73.958%, rgba(0, 0, 0, 0) 73.958%, rgba(0, 0, 0, 0) 76.042%, rgba(100, 100, 225, 0.25) 76.042%, rgba(100, 100, 225, 0.25) 80.208%, rgba(0, 0, 0, 0) 80.208%, rgba(0, 0, 0, 0) 82.292%, rgba(100, 100, 225, 0.25) 82.292%, rgba(100, 100, 225, 0.25) 86.458%, rgba(0, 0, 0, 0) 86.458%, rgba(0, 0, 0, 0) 88.542%, rgba(100, 100, 225, 0.25) 88.542%, rgba(100, 100, 225, 0.25) 92.708%, rgba(0, 0, 0, 0) 92.708%, rgba(0, 0, 0, 0) 94.792%, rgba(100, 100, 225, 0.25) 94.792%, rgba(100, 100, 225, 0.25) 98.958%, rgba(0, 0, 0, 0) 98.958%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
-webkit-background-size: 100% 20px, auto;
|
||||||
|
-moz-background-size: 100% 20px, auto;
|
||||||
|
-o-background-size: 100% 20px, auto;
|
||||||
|
background-size: 100% 20px, auto;
|
||||||
|
background-position: left top;
|
||||||
|
background-color: #dddddd;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 500px;
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
1319
assets/application.js
Normal file
1319
assets/application.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
assets/dark-logo.png
Normal file
BIN
assets/dark-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
assets/inception_meme.gif
Normal file
BIN
assets/inception_meme.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
BIN
assets/rage-face.png
Normal file
BIN
assets/rage-face.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/sass.gif
Normal file
BIN
assets/sass.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/susy-compass-grid-example.jpg
Normal file
BIN
assets/susy-compass-grid-example.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
639
index.html
Normal file
639
index.html
Normal file
@ -0,0 +1,639 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>My presentation</title>
|
||||||
|
<script src='assets/application.js' type='text/javascript'></script>
|
||||||
|
<style type='text/css'>.hll { background-color: #ffffcc }
|
||||||
|
.c { color: #408080; font-style: italic } /* Comment */
|
||||||
|
.err { border: 1px solid #FF0000 } /* Error */
|
||||||
|
.k { color: #008000; font-weight: bold } /* Keyword */
|
||||||
|
.o { color: #666666 } /* Operator */
|
||||||
|
.cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
||||||
|
.cp { color: #BC7A00 } /* Comment.Preproc */
|
||||||
|
.c1 { color: #408080; font-style: italic } /* Comment.Single */
|
||||||
|
.cs { color: #408080; font-style: italic } /* Comment.Special */
|
||||||
|
.gd { color: #A00000 } /* Generic.Deleted */
|
||||||
|
.ge { font-style: italic } /* Generic.Emph */
|
||||||
|
.gr { color: #FF0000 } /* Generic.Error */
|
||||||
|
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||||
|
.gi { color: #00A000 } /* Generic.Inserted */
|
||||||
|
.go { color: #808080 } /* Generic.Output */
|
||||||
|
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||||
|
.gs { font-weight: bold } /* Generic.Strong */
|
||||||
|
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||||
|
.gt { color: #0040D0 } /* Generic.Traceback */
|
||||||
|
.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
|
||||||
|
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
|
||||||
|
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
|
||||||
|
.kp { color: #008000 } /* Keyword.Pseudo */
|
||||||
|
.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
|
||||||
|
.kt { color: #B00040 } /* Keyword.Type */
|
||||||
|
.m { color: #666666 } /* Literal.Number */
|
||||||
|
.s { color: #BA2121 } /* Literal.String */
|
||||||
|
.na { color: #7D9029 } /* Name.Attribute */
|
||||||
|
.nb { color: #008000 } /* Name.Builtin */
|
||||||
|
.nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
||||||
|
.no { color: #880000 } /* Name.Constant */
|
||||||
|
.nd { color: #AA22FF } /* Name.Decorator */
|
||||||
|
.ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||||
|
.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
||||||
|
.nf { color: #0000FF } /* Name.Function */
|
||||||
|
.nl { color: #A0A000 } /* Name.Label */
|
||||||
|
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
||||||
|
.nt { color: #008000; font-weight: bold } /* Name.Tag */
|
||||||
|
.nv { color: #19177C } /* Name.Variable */
|
||||||
|
.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
||||||
|
.w { color: #bbbbbb } /* Text.Whitespace */
|
||||||
|
.mf { color: #666666 } /* Literal.Number.Float */
|
||||||
|
.mh { color: #666666 } /* Literal.Number.Hex */
|
||||||
|
.mi { color: #666666 } /* Literal.Number.Integer */
|
||||||
|
.mo { color: #666666 } /* Literal.Number.Oct */
|
||||||
|
.sb { color: #BA2121 } /* Literal.String.Backtick */
|
||||||
|
.sc { color: #BA2121 } /* Literal.String.Char */
|
||||||
|
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
|
||||||
|
.s2 { color: #BA2121 } /* Literal.String.Double */
|
||||||
|
.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
||||||
|
.sh { color: #BA2121 } /* Literal.String.Heredoc */
|
||||||
|
.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
||||||
|
.sx { color: #008000 } /* Literal.String.Other */
|
||||||
|
.sr { color: #BB6688 } /* Literal.String.Regex */
|
||||||
|
.s1 { color: #BA2121 } /* Literal.String.Single */
|
||||||
|
.ss { color: #19177C } /* Literal.String.Symbol */
|
||||||
|
.bp { color: #008000 } /* Name.Builtin.Pseudo */
|
||||||
|
.vc { color: #19177C } /* Name.Variable.Class */
|
||||||
|
.vg { color: #19177C } /* Name.Variable.Global */
|
||||||
|
.vi { color: #19177C } /* Name.Variable.Instance */
|
||||||
|
.il { color: #666666 } /* Literal.Number.Integer.Long */</style>
|
||||||
|
<link href='assets/application.css' rel='stylesheet' type='text/css' />
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css' />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class='loading'>
|
||||||
|
<div id='slides-container'>
|
||||||
|
<div id='slides'><div class="slide"><div class="content">
|
||||||
|
<h1>Welcome</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Sass</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>What is Sass?</h1>
|
||||||
|
|
||||||
|
<h2>Its a preprocesor</h2>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>What does it do?</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Variables <code>$foo</code></li>
|
||||||
|
<li>Mixins <code>@mixin</code></li>
|
||||||
|
<li>Functions</li>
|
||||||
|
<li>Selector Inheritance <code>@extend, &</code></li>
|
||||||
|
<li>Control Directives <code>@if, @for, @each, @while</code></li>
|
||||||
|
<li>Its a language!</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-variables"><div class="content">
|
||||||
|
<h1>Variables</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre> <span class="nv">$foo</span><span class="o"> :</span> <span class="mh">#fffff</span><span class="p">;</span>
|
||||||
|
<span class="nv">$bar</span><span class="o"> :</span> <span class="p">(</span><span class="mi">1</span><span class="kt">px</span> <span class="o">*</span> <span class="mi">2</span><span class="kt">em</span><span class="p">)</span> <span class="o">/</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-mixins"><div class="content">
|
||||||
|
<h1>Functions and Mixins</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="k">@function</span> <span class="nt">get-stops</span><span class="o">(</span><span class="err">$</span><span class="nt">colors</span><span class="o">,</span> <span class="err">$</span><span class="nt">stops</span><span class="o">)</span> <span class="p">{</span>
|
||||||
|
<span class="nv">$out</span><span class="o">:</span><span class="p">();</span>
|
||||||
|
<span class="k">@each</span> <span class="err">$</span><span class="nt">color</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">colors</span> <span class="p">{</span>
|
||||||
|
<span class="nv">$i</span><span class="o">:</span> <span class="nf">index</span><span class="p">(</span><span class="nv">$colors</span><span class="o">,</span> <span class="nv">$color</span><span class="p">);</span>
|
||||||
|
<span class="nv">$stop</span><span class="o">:</span> <span class="mi">0</span><span class="kt">%</span> <span class="o">+</span> <span class="nf">nth</span><span class="p">(</span><span class="nv">$stops</span><span class="o">,</span> <span class="nv">$i</span><span class="p">);</span>
|
||||||
|
<span class="nv">$out</span><span class="o">:</span> <span class="nf">append</span><span class="p">(</span><span class="nv">$out</span><span class="o">,</span> <span class="nv">$color</span> <span class="nv">$stop</span><span class="o">,</span> <span class="s1">'</span><span class="s2">comma'</span><span class="p">);</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="k">@return</span> <span class="err">$</span><span class="nt">out</span><span class="o">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="k">@mixin</span><span class="nf"> menu-level2-active</span> <span class="p">{</span>
|
||||||
|
<span class="nv">$args</span><span class="o">:</span> <span class="nf">get-stops</span><span class="p">(</span><span class="nv">$menu-active-colors</span><span class="o">,</span> <span class="nv">$menu-active-stops</span><span class="p">);</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> background</span><span class="p">(</span><span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$menu-active-direction</span><span class="o">,</span> <span class="nv">$args</span><span class="p">));</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-inheritance"><div class="content">
|
||||||
|
<h1>Inheritance</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nt">a</span> <span class="p">{</span>
|
||||||
|
|
||||||
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$link-color</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
||||||
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$link-hover-color</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-extend"><div class="content">
|
||||||
|
<h2>Extend</h2>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.foo</span> <span class="p">{</span>
|
||||||
|
<span class="na">font-size</span><span class="o"> :</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nc">.bar</span> <span class="p">{</span>
|
||||||
|
<span class="k">@extend</span> <span class="nc">.foo</span><span class="o">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.foo</span><span class="o">,</span> <span class="nc">.bar</span> <span class="p">{</span>
|
||||||
|
<span class="k">font-size</span> <span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Best Practices</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Colors</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-bad"><div class="content">
|
||||||
|
<h1>This is bad</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nv">$orange</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="nv">$blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">89</span><span class="o">,</span><span class="mi">167</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$lighter-blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="nv">$gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$dark-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$light-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$lighter-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$lightest-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nc">.foo</span> <span class="p">{</span>
|
||||||
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$blue</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-better"><div class="content">
|
||||||
|
<h2>This is ok, but we can do better</h2>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="c1">// dark gray</span>
|
||||||
|
<span class="na">$text-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">// lightest gray</span>
|
||||||
|
<span class="na">$text-compliment-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">//h1, h2</span>
|
||||||
|
<span class="na">$title-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">// blue</span>
|
||||||
|
<span class="na">$primary-accent-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">89</span><span class="o">,</span><span class="mi">167</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">// blue on dark</span>
|
||||||
|
<span class="na">$primary-accent-compliment-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">//orange - link color</span>
|
||||||
|
<span class="na">$secondary-accent-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">199</span><span class="o">,</span> <span class="mi">105</span><span class="o">,</span> <span class="mi">0</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">// light gray</span>
|
||||||
|
<span class="na">$ancillary-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="c1">// lighter gray</span>
|
||||||
|
<span class="na">$ancillary-compliment-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-pallet"><div class="content">
|
||||||
|
<h1>Pallets</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="c1">// _pallet.scss</span>
|
||||||
|
<span class="nv">$orange</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="nv">$blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">89</span><span class="o">,</span><span class="mi">167</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$lighter-blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="nv">$gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$light-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$lighter-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
<span class="na">$lightest-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="c1">// _colors.scss</span>
|
||||||
|
<span class="c1">//text</span>
|
||||||
|
<span class="na">$text-color</span><span class="o"> :</span> <span class="nv">$dark-gray</span><span class="p">;</span>
|
||||||
|
<span class="na">$text-compliment-color</span><span class="o"> :</span> <span class="nv">$lightest-gray</span><span class="p">;</span>
|
||||||
|
<span class="na">$title-color</span><span class="o"> :</span> <span class="nv">$gray</span><span class="p">;</span>
|
||||||
|
<span class="na">$primary-accent-color</span><span class="o"> :</span> <span class="nv">$blue</span><span class="p">;</span>
|
||||||
|
<span class="na">$primary-accent-compliment-color</span><span class="o"> :</span> <span class="nv">$lighter-blue</span><span class="p">;</span>
|
||||||
|
<span class="na">$secondary-accent-color</span><span class="o"> :</span> <span class="nv">$orange</span><span class="p">;</span>
|
||||||
|
<span class="na">$ancillary-color</span><span class="o"> :</span> <span class="nv">$light-gray</span><span class="p">;</span>
|
||||||
|
<span class="na">$ancillary-compliment-color</span><span class="o"> :</span> <span class="nv">$lighter-gray</span><span class="p">;</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-important style-long"><div class="content">
|
||||||
|
<p><img src="/assets/rage-face.png"></p>
|
||||||
|
|
||||||
|
<h1>Only use your pallet colors to define your more descriptive color variables!</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-variable-layout"><div class="content">
|
||||||
|
<h1>Variables Definitions</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-bad-variables"><div class="content">
|
||||||
|
<div class="highlight"><pre><span class="c1">// There are 100 lines before this</span>
|
||||||
|
<span class="nc">.content_head</span> <span class="p">{</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> clearfix</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nc">.hr</span> <span class="p">{</span>
|
||||||
|
<span class="nv">$height</span><span class="o"> :</span> <span class="mi">2</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">padding-top</span><span class="o"> :</span> <span class="p">(</span><span class="nf">rhythm</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="nv">$height</span><span class="p">;</span>
|
||||||
|
<span class="na">width</span><span class="o"> :</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
|
||||||
|
<span class="na">border-bottom</span><span class="o"> :</span> <span class="nv">$height</span> <span class="no">solid</span> <span class="nv">$secondary-accent-color</span><span class="p">;</span>
|
||||||
|
<span class="na">margin-bottom</span><span class="o"> :</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">display</span><span class="o"> :</span> <span class="no">block</span><span class="p">;</span>
|
||||||
|
<span class="k">@extend</span> <span class="nc">.float-right</span><span class="o">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nc">.release_identifiers</span> <span class="p">{</span>
|
||||||
|
<span class="k">@extend</span> <span class="nc">.float-right</span><span class="o">;</span>
|
||||||
|
<span class="nt">text-align</span> <span class="nd">:</span> <span class="nt">right</span><span class="o">;</span>
|
||||||
|
<span class="nt">font-family</span> <span class="nd">:</span> <span class="err">$</span><span class="nt">ancillary-font</span><span class="o">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-important"><div class="content">
|
||||||
|
<h1>Always define your variables at the top of each file!</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-big-list style-variable-why"><div class="content">
|
||||||
|
<ul>
|
||||||
|
<li>Easy to find</li>
|
||||||
|
<li>Easy to update</li>
|
||||||
|
<li>No suprises</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="cm">/* Local Variaibles */</span>
|
||||||
|
<span class="na">$release-content-width</span><span class="o"> :</span> <span class="mi">760</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">$release-content-border-size</span><span class="o"> :</span> <span class="mi">6</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">$release-content-top-margin</span><span class="o"> :</span> <span class="mi">9</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">$release-content-height</span><span class="o"> :</span> <span class="nf">rhythm</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="na">$section-side-width</span><span class="o"> :</span> <span class="nf">column-width</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span>
|
||||||
|
<span class="na">$section-side-height</span><span class="o"> :</span> <span class="mi">24</span><span class="p">;</span>
|
||||||
|
<span class="na">$section-side-li-padding</span><span class="o"> :</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="na">$control-border-height</span><span class="o"> :</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">$control-box-height</span><span class="o"> :</span> <span class="mi">2</span><span class="p">;</span>
|
||||||
|
<span class="na">$control-top-box-leader</span><span class="o"> :</span> <span class="mi">1</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="na">$group-image-height</span><span class="o"> :</span> <span class="nf">rhythm</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="nc">.contents</span> <span class="nc">.show</span> <span class="p">{</span>
|
||||||
|
<span class="nt">h1</span> <span class="p">{</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> header</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> trailer</span><span class="p">;</span>
|
||||||
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$primary-accent-color</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="c1">// ... goes on for 100+ lines</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Math</h1>
|
||||||
|
|
||||||
|
<h2>Is your best friend</h2>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-long"><div class="content">
|
||||||
|
<h1><em>Almost</em> every thing a designer does can be converted into some sort of mathmatical layout... <em>ALMOST</em></h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Layout</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="na">$wrapper-width</span><span class="o"> :</span> <span class="mi">960</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">$sidebar-width</span><span class="o"> :</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="na">$main-content-width</span><span class="o"> :</span> <span class="nv">$wrapper</span> <span class="o">-</span> <span class="nv">$sidebar</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nc">.wrapper</span> <span class="p">{</span>
|
||||||
|
<span class="na">width</span><span class="o"> :</span> <span class="nv">$wrapper-width</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nc">.sidebar</span> <span class="p">{</span>
|
||||||
|
<span class="na">width</span><span class="o"> :</span> <span class="nv">$sidebar-width</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nc">.content</span> <span class="p">{</span>
|
||||||
|
<span class="na">width</span><span class="o"> :</span> <span class="nv">$main-content-width</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Ranges</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="k">@for</span> <span class="nv">$i</span> <span class="ow">from</span> <span class="mi">1</span> <span class="ow">through</span> <span class="mi">4</span> <span class="p">{</span>
|
||||||
|
<span class="nt">h</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">i</span><span class="p">}</span> <span class="p">{</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> header</span><span class="p">(</span><span class="nv">$i</span><span class="p">);</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Image demensions</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.play</span> <span class="p">{</span>
|
||||||
|
<span class="na">left</span><span class="o">:</span> <span class="p">(</span><span class="nv">$width</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="p">(</span><span class="nf">global-sprite-width</span><span class="p">(</span><span class="n">play_movie</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
|
||||||
|
<span class="na">top</span><span class="o">:</span> <span class="p">(</span><span class="nv">$height</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="p">(</span><span class="nf">global-sprite-height</span><span class="p">(</span><span class="n">play_movie</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Inheritance</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Inception rule!</h1>
|
||||||
|
|
||||||
|
<p><img src="/assets/InceptionArch_Slusher.jpg" width='800px'></p>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<p><img src='/assets/36kou7.jpg' height='700px'></p>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Well you can but it gets messy</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.foo</span> <span class="p">{</span>
|
||||||
|
<span class="na">width</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="nc">.bar</span> <span class="p">{</span>
|
||||||
|
<span class="na">height</span><span class="o">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="nc">.baz</span> <span class="p">{</span>
|
||||||
|
<span class="na">color</span><span class="o"> :</span> <span class="nb">red</span><span class="p">;</span>
|
||||||
|
<span class="nc">.what-comes-after-baz</span> <span class="p">{</span>
|
||||||
|
<span class="na">border</span><span class="o"> :</span> <span class="nb">green</span> <span class="no">solid</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="k">&</span><span class="nc">.something</span> <span class="p">{</span>
|
||||||
|
<span class="k">@extend</span> <span class="nc">.float-left</span><span class="o">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>And slow</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h2>Selector layout</h2>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.release_title</span> <span class="nt">a</span><span class="p">{</span>
|
||||||
|
<span class="k">@extend</span> <span class="nt">h3</span><span class="o">;</span>
|
||||||
|
<span class="o">@</span><span class="nt">include</span> <span class="nt">adjust-font-size-to</span><span class="o">(</span><span class="nt">20px</span><span class="o">,</span> <span class="nt">1</span><span class="o">);</span>
|
||||||
|
<span class="o">@</span><span class="nt">include</span> <span class="nt">trailer</span><span class="o">;</span>
|
||||||
|
|
||||||
|
<span class="nt">text-decoration</span> <span class="nd">:</span> <span class="nt">none</span><span class="o">;</span>
|
||||||
|
<span class="nt">display</span> <span class="nd">:</span> <span class="nt">block</span><span class="o">;</span>
|
||||||
|
|
||||||
|
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
||||||
|
<span class="na">color</span><span class="o">:</span><span class="nv">$hover-color</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Compass</h1>
|
||||||
|
|
||||||
|
<h2>http://compass-style.org</h2>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<ul>
|
||||||
|
<li>Stylesheet framework</li>
|
||||||
|
<li>Considered sass standard library</li>
|
||||||
|
<li>Standalone application</li>
|
||||||
|
<li>Has the ability to have application integrations (rails, django, etc.)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h2>Currently the only application integration supported by the core team is rails</h2>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-big-list"><div class="content">
|
||||||
|
<h2>Features</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Sprites</li>
|
||||||
|
<li>CSS3</li>
|
||||||
|
<li>Layout tools</li>
|
||||||
|
<li>And much more</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Sprites!</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-big-list"><div class="content">
|
||||||
|
<ul>
|
||||||
|
<li>Fewer http requests.</li>
|
||||||
|
<li>You don't have a bunch of individual images to manage.</li>
|
||||||
|
<li>Customizable</li>
|
||||||
|
<li>ITS EASY!</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>This EASY!</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="k">@import</span> <span class="s2">"my-icons/*.png"</span><span class="p">;</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> all-my-icons-sprites</span><span class="p">;</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h2>BAM!</h2>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.my-icons-sprite</span><span class="o">,</span>
|
||||||
|
<span class="nc">.my-icons-delete</span><span class="o">,</span>
|
||||||
|
<span class="nc">.my-icons-edit</span><span class="o">,</span>
|
||||||
|
<span class="nc">.my-icons-new</span><span class="o">,</span>
|
||||||
|
<span class="nc">.my-icons-save</span> <span class="p">{</span> <span class="na">background</span><span class="o">:</span> <span class="sx">url('/images/my-icons-s34fe0604ab.png')</span> <span class="no">no-repeat</span><span class="p">;</span> <span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nc">.my-icons-delete</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||||
|
<span class="nc">.my-icons-edit</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-32</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>
|
||||||
|
<span class="nc">.my-icons-new</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-64</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>
|
||||||
|
<span class="nc">.my-icons-save</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-96</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-big-list style-sprite-layout"><div class="content">
|
||||||
|
<h1>Layouts</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Vertical (default)</li>
|
||||||
|
<li>Horizontal</li>
|
||||||
|
<li>Diagonal</li>
|
||||||
|
<li>Smart</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Magic Selectors</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>my-buttons/glossy.png</li>
|
||||||
|
<li>my-buttons/glossy_hover.png</li>
|
||||||
|
<li>my-buttons/glossy_active.png</li>
|
||||||
|
<li>my-buttons/glossy_target.png</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Example</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="k">@import</span> <span class="s2">"my-buttons/*.png"</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nt">a</span> <span class="p">{</span>
|
||||||
|
<span class="k">@include</span><span class="nd"> my-buttons-sprite</span><span class="p">(</span><span class="n">glossy</span><span class="p">)</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>BAM!</h1>
|
||||||
|
|
||||||
|
<div class="highlight"><pre><span class="nc">.my-buttons-sprite</span><span class="o">,</span> <span class="nt">a</span> <span class="p">{</span>
|
||||||
|
<span class="na">background</span><span class="o">:</span> <span class="sx">url('/my-buttons-sedfef809e2.png')</span> <span class="no">no-repeat</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nt">a</span> <span class="p">{</span>
|
||||||
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="nt">a</span><span class="nd">:hover</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy_hover</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy-hover</span> <span class="p">{</span>
|
||||||
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-40</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="nt">a</span><span class="nd">:target</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy_target</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy-target</span> <span class="p">{</span>
|
||||||
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-60</span><span class="kt">px</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="nt">a</span><span class="nd">:active</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy_active</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy-active</span> <span class="p">{</span>
|
||||||
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-20</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide style-important"><div class="content">
|
||||||
|
<h1>Beware of your file size!</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>We support all CSS3 properties with vendor prefix's and new ones are being added all the time.</h1>
|
||||||
|
|
||||||
|
</div></div><div class="slide style-big-list"><div class="content">
|
||||||
|
<h1>Layout tools</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Vertical rhythm</li>
|
||||||
|
<li>Grids</li>
|
||||||
|
<li>And more!</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Vertical rhythm</h1>
|
||||||
|
|
||||||
|
<h2>The spacing and arrangement of text as the reader descends the page.</h2>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h2>"Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost." - 24ways.org</h2>
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
|
||||||
|
|
||||||
|
<div class='grid' ></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h2>We need help!</h2>
|
||||||
|
|
||||||
|
<p>https://github.com/chriseppstein/compass</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Documentation</li>
|
||||||
|
<li>Stylesheet cleanup</li>
|
||||||
|
<li>Code Refactoring</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h2>Core Team</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Chris Eppstein</li>
|
||||||
|
<li>Scott Davis (me)</li>
|
||||||
|
<li>Brandon Mathis</li>
|
||||||
|
<li>Eirc Myer (The other one)</li>
|
||||||
|
<li>Anthony Short (newest member)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div><div class="slide"><div class="content">
|
||||||
|
<h1>Charity</h1>
|
||||||
|
|
||||||
|
<h3>United Mitochondrial Disease Foundation</h3>
|
||||||
|
|
||||||
|
<h3>Please donate - http://umdf.org/compass</h3>
|
||||||
|
|
||||||
|
</div></div></div>
|
||||||
|
<div class='compass'></div>
|
||||||
|
<div class='sass'></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user