github-migration/sass_compass_unleashed
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pre-gh pages creation

Browse Source
This commit is contained in:
Scott Davis 2012-03-21 13:09:33 -04:00
parent 70b011e44a
commit 72bbbdb49e
26 changed files with 300 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
_site/assets/The_Parthenon_in_Athens.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

49
_site/assets/application.css
View File

@ -180,31 +180,39 @@ h1, h2, h3, li, p {
font-size: 60px; font-size: 60px;
} }
/* line 87, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 87, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-medium-list li {
font-size: 40px;
}
/* line 91, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-small-list li {
font-size: 20px;
}
/* line 95, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-sprite-layout ul { #slides .style-sprite-layout ul {
width: 500px !important; width: 500px !important;
} }
/* line 91, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 99, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-variable-why ul { #slides .style-variable-why ul {
width: 450px !important; width: 450px !important;
margin: 0 auto; margin: 0 auto;
} }
/* line 96, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 104, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-better .highlight { #slides .style-better .highlight {
width: 800px; width: 800px;
} }
/* line 100, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 108, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-bad .highlight, #slides .style-pallet .highlight { #slides .style-bad .highlight, #slides .style-pallet .highlight {
width: 700px; width: 700px;
} }
/* line 104, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 112, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-variables .highlight { #slides .style-variables .highlight {
width: 500px; width: 500px;
} }
/* line 108, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 116, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-mixins .highlight { #slides .style-mixins .highlight {
width: 900px; width: 900px;
} }
/* line 112, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 120, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides ul { #slides ul {
padding-top: 30px; padding-top: 30px;
font-size: 30px; font-size: 30px;
@ -212,11 +220,15 @@ h1, h2, h3, li, p {
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
} }
/* line 118, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 126, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides ul li { #slides ul li {
padding-top: 10px; padding-top: 10px;
} }
/* line 123, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 132, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-grid-slide-scss .highlight {
font-size: 16px !important;
}
/* line 137, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides code { #slides code {
background-color: #dddddd; background-color: #dddddd;
font-size: 90%; font-size: 90%;
@ -224,17 +236,17 @@ h1, h2, h3, li, p {
padding: 2px 10px; padding: 2px 10px;
color: #212121; color: #212121;
} }
/* line 134, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 148, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-long h1 { #slides .style-long h1 {
font-size: 60px !important; font-size: 60px !important;
} }
/* line 140, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 154, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
#slides .style-important h1 { #slides .style-important h1 {
color: red; color: red;
font-weight: normal; font-weight: normal;
} }
/* line 149, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */ /* line 165, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
.grid { .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-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: -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%);
@ -252,3 +264,18 @@ h1, h2, h3, li, p {
height: 500px; height: 500px;
width: 700px; width: 700px;
} }
/* line 175, /Users/sdavis/Work/sass_compass_unleashed/assets/stylesheets/application.css.scss */
.standard-grid {
background-image: -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(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(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(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(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(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-position: left top;
background-color: #dddddd;
margin: 0 auto;
height: 500px;
width: 700px;
}

BIN
_site/assets/diagonal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
_site/assets/fancy-buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
_site/assets/horizontal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
_site/assets/iPad-eBook-Reader.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
_site/assets/play_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
_site/assets/rhythm_layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

BIN
_site/assets/smart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
_site/assets/vert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
_site/assets/vert_rhythm_bad.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

239
_site/index.html
View File

@ -132,18 +132,22 @@
<h1>Inheritance</h1> <h1>Inheritance</h1>
<div class="highlight"><pre><span class="nt">a</span> <span class="p">{</span> <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="na">color</span><span class="o"> :</span> <span class="nv">$link-color</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">&amp;</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="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>
<span class="p">}</span> <span class="p">}</span>
</pre> </pre>
</div> </div>
<div class="highlight"><pre><span class="nt">a</span> <span class="p">{</span> <span class="k">color</span> <span class="o">:</span> <span class="nb">blue</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">color</span> <span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
</pre>
</div>
</div></div><div class="slide style-extend"><div class="content"> </div></div><div class="slide style-extend"><div class="content">
@ -256,12 +260,12 @@
<h1>Variables Definitions</h1> <h1>Variables Definitions</h1>
</div></div><div class="slide style-bad-variables"><div class="content"> </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> <div class="highlight"><pre><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="c1">// There are 100 lines before this</span>
<span class="nc">.content_head</span> <span class="p">{</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="k">@include</span><span class="nd"> clearfix</span><span class="p">;</span>
<span class="nc">.hr</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">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">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">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>
@ -289,30 +293,19 @@
<ul> <ul>
<li>Easy to find</li> <li>Easy to find</li>
<li>Easy to update</li> <li>Easy to update</li>
<li>No suprises</li> <li>No surprises</li>
</ul> </ul>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<div class="highlight"><pre><span class="cm">/* Local Variaibles */</span> <div class="highlight"><pre><span class="cm">/* Local Variables */</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">$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="o">+</span> <span class="nv">$sidebar-width</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="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="nc">.show</span> <span class="p">{</span>
<span class="nt">h1</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"> 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="k">@include</span><span class="nd"> trailer</span><span class="p">;</span>
@ -331,6 +324,9 @@
</div></div><div class="slide style-long"><div class="content"> </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> <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">
<p><img src='/assets/The_Parthenon_in_Athens.jpg' ></p>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Layout</h1> <h1>Layout</h1>
@ -378,6 +374,8 @@
</div> </div>
<p><img src='/assets/play_button.png' ></p>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Inheritance</h1> <h1>Inheritance</h1>
@ -387,10 +385,10 @@
<p><img src="/assets/InceptionArch_Slusher.jpg" width='800px'></p> <p><img src="/assets/InceptionArch_Slusher.jpg" width='800px'></p>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<p><img src='/assets/36kou7.jpg' height='700px'></p> <p><img src='/assets/36kou7.jpg' height='600px'></p>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Well you can but it gets messy</h1> <h2>Well you can but it gets messy</h2>
<div class="highlight"><pre><span class="nc">.foo</span> <span class="p">{</span> <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="na">width</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
@ -466,7 +464,7 @@
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Sprites!</h1> <h1>Sprites!</h1>
</div></div><div class="slide style-big-list"><div class="content"> </div></div><div class="slide style-medium-list"><div class="content">
<ul> <ul>
<li>Fewer http requests.</li> <li>Fewer http requests.</li>
<li>You don't have a bunch of individual images to manage.</li> <li>You don't have a bunch of individual images to manage.</li>
@ -493,7 +491,9 @@
<span class="nc">.my-icons-delete</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-edit</span><span class="o">,</span>
<span class="nc">.my-icons-new</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(&#39;/images/my-icons-s34fe0604ab.png&#39;)</span> <span class="no">no-repeat</span><span class="p">;</span> <span class="p">}</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(&#39;/images/my-icons-s34fe0604ab.png&#39;)</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-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-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>
@ -505,16 +505,28 @@
</div></div><div class="slide style-big-list style-sprite-layout"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Layouts</h1> <h1>Sprite Layouts</h1>
<ul> </div></div><div class="slide"><div class="content">
<li>Vertical (default)</li> <h2>Vertical (default)</h2>
<li>Horizontal</li>
<li>Diagonal</li>
<li>Smart</li>
</ul>
<p><img src='/assets/vert.png' ></p>
</div></div><div class="slide"><div class="content">
<h2>Horizontal</h2>
<p><img src='/assets/horizontal.png' ></p>
</div></div><div class="slide"><div class="content">
<h2>Diagonal</h2>
<p><img src='/assets/diagonal.png' ></p>
</div></div><div class="slide"><div class="content">
<h2>Smart</h2>
<p><img src='/assets/smart.png' ></p>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Magic Selectors</h1> <h1>Magic Selectors</h1>
@ -551,13 +563,13 @@
<span class="nt">a</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="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="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="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="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="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="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="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="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="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="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="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="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="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> <span class="p">}</span>
</pre> </pre>
@ -570,18 +582,48 @@
<h1>Beware of your file size!</h1> <h1>Beware of your file size!</h1>
</div></div><div class="slide"><div class="content"> </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> <h1>We support most CSS3 properties with vendor prefix's.</h1>
</div></div><div class="slide style-big-list"><div class="content">
<ul>
<li>Gradients</li>
<li>Shadows</li>
<li>Box model</li>
<li>Transitions</li>
<li>Much more</li>
</ul>
</div></div><div class="slide style-big-list"><div class="content"> </div></div><div class="slide style-big-list"><div class="content">
<h1>Layout tools</h1> <h1>Layout tools</h1>
<ul> <ul>
<li>Grid</li>
<li>Vertical rhythm</li> <li>Vertical rhythm</li>
<li>Grids</li>
<li>And more!</li> <li>And more!</li>
</ul> </ul>
</div></div><div class="slide"><div class="content">
<div class='standard-grid' ></div>
</div></div><div class="slide style-grid-slide-scss"><div class="content">
<div class="highlight"><pre><span class="nc">.grid</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> grid-background</span><span class="p">(</span><span class="nv">$total</span><span class="o">,</span> <span class="nv">$column</span><span class="o">,</span> <span class="nv">$gutter</span><span class="o">,</span> <span class="nv">$baseline</span><span class="o">,</span>
<span class="nv">$offset</span><span class="o">,</span> <span class="nv">$column-color</span><span class="o">,</span> <span class="nv">$gutter-color</span><span class="o">,</span>
<span class="nv">$baseline-color</span><span class="o">,</span> <span class="nv">$force-fluid</span><span class="p">)</span>
<span class="p">}</span>
</pre>
</div>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h1>Vertical rhythm</h1> <h1>Vertical rhythm</h1>
@ -598,6 +640,116 @@
</div></div><div class="slide"><div class="content">
<p><img src='/assets/rhythm_layout.png' width="700px"></p>
</div></div><div class="slide style-medium-list"><div class="content">
<ul>
<li>Height : rhythms</li>
<li>Width : columns</li>
</ul>
</div></div><div class="slide"><div class="content">
<div class="highlight"><pre><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">$primary-image-caption-line-height</span><span class="o"> :</span> <span class="nf">floor</span><span class="p">(</span><span class="nv">$base-line-height</span> <span class="o">/</span> <span class="mi">2</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"> padding-leader</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">// etc ...</span>
</pre>
</div>
</div></div><div class="slide"><div class="content">
<p><img src='/assets/vert_rhythm_bad.jpg' ></p>
<p>http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/</p>
</div></div><div class="slide"><div class="content">
<h1>Extensions</h1>
<ul>
<li>fancy-buttons</li>
<li>sassy-buttons</li>
<li>susy</li>
<li>blueprint</li>
<li>twitter-bootstrap</li>
<li>etc...</li>
</ul>
</div></div><div class="slide"><div class="content">
<p><img src='/assets/fancy-buttons.png' ></p>
</div></div><div class="slide"><div class="content">
<h1>The future!</h1>
</div></div><div class="slide style-medium-list"><div class="content">
<h1>Sass</h1>
<ul>
<li>Associative array data type (Hash)</li>
<li>Better list functions</li>
<li><code>@content</code></li>
</ul>
</div></div><div class="slide"><div class="content">
<h2>@content</h2>
<div class="highlight"><pre> <span class="k">@mixin</span><span class="nf"> do-something</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o"> :</span> <span class="mi">12</span><span class="kt">px</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="k">@content</span><span class="o">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> do-something</span> <span class="p">{</span>
<span class="na">color</span><span class="o"> :</span> <span class="nb">blue</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre>
</div>
<div class="highlight"><pre><span class="nt">p</span> <span class="p">{</span>
<span class="k">font-size</span> <span class="o">:</span> <span class="m">12px</span><span class="p">;</span>
<span class="k">color</span> <span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
<span class="k">color</span> <span class="o">:</span> <span class="nb">blue</span><span class="p">;</span>
<span class="p">}</span>
</pre>
</div>
</div></div><div class="slide style-medium-list"><div class="content">
<h1>Compass</h1>
<ul>
<li>Media query framework</li>
<li>A css hacks library</li>
<li>Extract blueprint from compass to a stand alone framework</li>
</ul>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide"><div class="content">
<h2>We need help!</h2> <h2>We need help!</h2>
@ -610,15 +762,15 @@
</ul> </ul>
</div></div><div class="slide"><div class="content"> </div></div><div class="slide style-small-list"><div class="content">
<h2>Core Team</h2> <h2>Core Team</h2>
<ul> <ul>
<li>Chris Eppstein</li> <li>Chris Eppstein - chriseppstein.github.com</li>
<li>Scott Davis (me)</li> <li>Scott Davis (me) - scottdavis.github.com</li>
<li>Brandon Mathis</li> <li>Brandon Mathis - brandonmathis.com</li>
<li>Eirc Myer (The other one)</li> <li>Eric Meyer (The other one) - eric.oddbird.net</li>
<li>Anthony Short (newest member)</li> <li>Anthony Short - anthonyshort.me</li>
</ul> </ul>
@ -629,6 +781,9 @@
<h3>Please donate - http://umdf.org/compass</h3> <h3>Please donate - http://umdf.org/compass</h3>
</div></div><div class="slide"><div class="content">
<h1>Questions!</h1>
</div></div></div> </div></div></div>
<div class='compass'></div> <div class='compass'></div>
<div class='sass'></div> <div class='sass'></div>

BIN
assets/images/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
assets/images/The_Parthenon_in_Athens.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
assets/images/diagonal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
assets/images/fancy-buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/images/horizontal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets/images/iPad-eBook-Reader.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
assets/images/play_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
assets/images/rhythm_layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

BIN
assets/images/smart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
assets/images/vert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
assets/images/vert_rhythm_bad.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

39
presentation/09_future.slides Normal file
View File

@ -0,0 +1,39 @@
!SLIDE
# The future!
!SLIDE medium-list
# Sass
* Associative array data type (Hash)
* Better list functions
* `@content`
!SLIDE
## @content
``` scss
@mixin do-something {
font-size : 12px;
color : red;
@content;
}
p {
@include do-something {
color : blue;
}
}
```
``` css
p {
font-size : 12px;
color : red;
color : blue;
}
```
!SLIDE medium-list
# Compass
* Media query framework
* A css hacks library
* Extract blueprint from compass to a stand alone framework

26
presentation/10_end.slides Normal file
View File

@ -0,0 +1,26 @@
!SLIDE
## We need help!
https://github.com/chriseppstein/compass
* Documentation
* Stylesheet cleanup
* Code Refactoring
!SLIDE small-list
## Core Team
* Chris Eppstein - chriseppstein.github.com
* Scott Davis (me) - scottdavis.github.com
* Brandon Mathis - brandonmathis.com
* Eric Meyer (The other one) - eric.oddbird.net
* Anthony Short - anthonyshort.me
!SLIDE
# Charity
### United Mitochondrial Disease Foundation
### Please donate - http://umdf.org/compass
!SLIDE
# Questions!