diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..48b9fe4 Binary files /dev/null and b/.DS_Store differ diff --git a/_site/assets/The_Parthenon_in_Athens.jpg b/_site/assets/The_Parthenon_in_Athens.jpg new file mode 100644 index 0000000..4ce341e Binary files /dev/null and b/_site/assets/The_Parthenon_in_Athens.jpg differ diff --git a/_site/assets/application.css b/_site/assets/application.css index 6e14d53..818fe05 100644 --- a/_site/assets/application.css +++ b/_site/assets/application.css @@ -180,31 +180,39 @@ h1, h2, h3, li, p { font-size: 60px; } /* 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 { 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 { width: 450px !important; 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 { 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 { 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 { 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 { 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 { padding-top: 30px; font-size: 30px; @@ -212,11 +220,15 @@ h1, h2, h3, li, p { margin: 0 auto; 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 { 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 { background-color: #dddddd; font-size: 90%; @@ -224,17 +236,17 @@ h1, h2, h3, li, p { padding: 2px 10px; 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 { 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 { color: red; 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 { 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%); @@ -252,3 +264,18 @@ h1, h2, h3, li, p { height: 500px; 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; +} diff --git a/_site/assets/diagonal.png b/_site/assets/diagonal.png new file mode 100644 index 0000000..d0a0323 Binary files /dev/null and b/_site/assets/diagonal.png differ diff --git a/_site/assets/fancy-buttons.png b/_site/assets/fancy-buttons.png new file mode 100644 index 0000000..18b1f60 Binary files /dev/null and b/_site/assets/fancy-buttons.png differ diff --git a/_site/assets/horizontal.png b/_site/assets/horizontal.png new file mode 100644 index 0000000..057568e Binary files /dev/null and b/_site/assets/horizontal.png differ diff --git a/_site/assets/iPad-eBook-Reader.jpg b/_site/assets/iPad-eBook-Reader.jpg new file mode 100644 index 0000000..d8fd2f1 Binary files /dev/null and b/_site/assets/iPad-eBook-Reader.jpg differ diff --git a/_site/assets/play_button.png b/_site/assets/play_button.png new file mode 100644 index 0000000..9974c8c Binary files /dev/null and b/_site/assets/play_button.png differ diff --git a/_site/assets/rhythm_layout.png b/_site/assets/rhythm_layout.png new file mode 100644 index 0000000..6a99d3c Binary files /dev/null and b/_site/assets/rhythm_layout.png differ diff --git a/_site/assets/smart.png b/_site/assets/smart.png new file mode 100644 index 0000000..7fe102a Binary files /dev/null and b/_site/assets/smart.png differ diff --git a/_site/assets/vert.png b/_site/assets/vert.png new file mode 100644 index 0000000..dde31b0 Binary files /dev/null and b/_site/assets/vert.png differ diff --git a/_site/assets/vert_rhythm_bad.jpg b/_site/assets/vert_rhythm_bad.jpg new file mode 100644 index 0000000..5fefb54 Binary files /dev/null and b/_site/assets/vert_rhythm_bad.jpg differ diff --git a/_site/index.html b/_site/index.html index 1885972..7063739 100644 --- a/_site/index.html +++ b/_site/index.html @@ -132,18 +132,22 @@

Inheritance

a {
-
   color : $link-color;
 
   &:hover {
     color : $link-hover-color;
   }
-
 }
+
a { color : blue; }
+a:hover { color : red; }
+
+
+ +
@@ -256,12 +260,12 @@

Variables Definitions

-
// There are 100 lines before this
+
$height : 2px;
+// There are 100 lines before this
 .content_head {
   @include clearfix;
   
   .hr { 
-    $height       : 2px;
     padding-top   : (rhythm(1) / 2) - $height;
     width         : 100%;
     border-bottom : $height solid $secondary-accent-color;
@@ -289,30 +293,19 @@
 
    
 
  • Easy to find
    • 
 
  • Easy to update
    • 
-
  • No suprises
    • 
+
  • No surprises
    •
-
/* Local Variaibles */
-$release-content-width       : 760px;
-$release-content-border-size : 6px;
-$release-content-top-margin  : 9px;
+
/* Local Variables */
 $release-content-height      : rhythm(2);
-
-$section-side-width          : column-width(4);
-$section-side-height         : 24;
-$section-side-li-padding     : 10px; 
-
-$control-border-height       : 1px;
-$control-box-height          : 2;
-$control-top-box-leader      : 1;
-
+$section-side-width          : column-width(4) + $sidebar-width;
 $group-image-height          : rhythm(6);
 
-.contents .show {
+.show {
   h1 {
     @include header(3);
     @include trailer;
@@ -331,6 +324,9 @@

Almost every thing a designer does can be converted into some sort of mathmatical layout... ALMOST

+
+

+

Layout

@@ -378,6 +374,8 @@
+

+

Inheritance

@@ -387,10 +385,10 @@

-

+

-

Well you can but it gets messy

+

Well you can but it gets messy

.foo {
   width: 5px;
@@ -466,7 +464,7 @@

Sprites!

-
+
  • Fewer http requests.
  • You don't have a bunch of individual images to manage.
    • @@ -493,7 +491,9 @@ .my-icons-delete, .my-icons-edit, .my-icons-new, -.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } +.my-icons-save { + background: url('/images/my-icons-s34fe0604ab.png') no-repeat; +} .my-icons-delete { background-position: 0 0; } .my-icons-edit { background-position: 0 -32px; } @@ -505,16 +505,28 @@ -
-

Layouts

+
+

Sprite Layouts

-
    -
  • Vertical (default)
    • -
  • Horizontal
    • -
  • Diagonal
    • -
  • Smart
    • -
+
+

Vertical (default)

+

+ +
+

Horizontal

+ +

+ +
+

Diagonal

+ +

+ +
+

Smart

+ +

Magic Selectors

@@ -551,13 +563,13 @@ a { background-position: 0 0; } -a:hover, a.glossy_hover, a.glossy-hover { +a:hover, a.glossy-hover { background-position: 0 -40px; } -a:target, a.glossy_target, a.glossy-target { +a:target, a.glossy-target { background-position: 0 -60px; } -a:active, a.glossy_active, a.glossy-active { +a:active, a.glossy-active { background-position: 0 -20; } @@ -570,18 +582,48 @@

Beware of your file size!

-

We support all CSS3 properties with vendor prefix's and new ones are being added all the time.

+

We support most CSS3 properties with vendor prefix's.

+ +
+
    +
  • Gradients
    • +
  • Shadows
    • +
  • Box model
    • +
  • Transitions
    • +
  • Much more
    • +
+

Layout tools

    +
  • Grid
  • Vertical rhythm
    • -
  • Grids
  • And more!
+
+
+ + + + +
+ + +
.grid {
+  @include grid-background($total, $column, $gutter, $baseline, 
+                           $offset, $column-color, $gutter-color, 
+                           $baseline-color, $force-fluid)
+}
+
+
+ + + +

Vertical rhythm

@@ -598,6 +640,116 @@ +
+

+ +
+
    +
  • Height : rhythms
    • +
  • Width : columns
    • +
+ + +
+ + +
$release-content-height            : rhythm(2);
+
+$section-side-width                : column-width(4);
+
+$primary-image-caption-line-height : floor($base-line-height / 2); 
+
+$group-image-height                : rhythm(6);
+
+.contents .show {
+  h1 {
+    @include header(3);
+    @include padding-leader;
+    @include trailer;
+    color  : $primary-accent-color;
+  }
+// etc ...
+
+
+ + + + +
+

+ +

http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

+ +
+

Extensions

+ +
    +
  • fancy-buttons
    • +
  • sassy-buttons
    • +
  • susy
    • +
  • blueprint
    • +
  • twitter-bootstrap
    • +
  • etc...
    • +
+ + +
+

+ +
+

The future!

+ +
+

Sass

+ +
    +
  • Associative array data type (Hash)
    • +
  • Better list functions
    • +
  • @content
    • +
+ + +
+

@content

+ +
 @mixin do-something {
+  font-size : 12px;
+  color     : red;
+  @content;
+ }
+
+p {
+  @include do-something {
+    color : blue;
+  }
+}
+
+
+ + + + +
p {
+  font-size : 12px;
+  color : red;
+  color : blue;
+}
+
+
+ + + + +
+

Compass

+ +
    +
  • Media query framework
    • +
  • A css hacks library
    • +
  • Extract blueprint from compass to a stand alone framework
    • +
+ +

We need help!

@@ -610,15 +762,15 @@ -
+

Core Team

    -
  • Chris Eppstein
    • -
  • Scott Davis (me)
    • -
  • Brandon Mathis
    • -
  • Eirc Myer (The other one)
    • -
  • Anthony Short (newest member)
    • +
  • 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
@@ -629,6 +781,9 @@

Please donate - http://umdf.org/compass

+
+

Questions!

+
diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store new file mode 100644 index 0000000..74847aa Binary files /dev/null and b/assets/images/.DS_Store differ diff --git a/assets/images/The_Parthenon_in_Athens.jpg b/assets/images/The_Parthenon_in_Athens.jpg new file mode 100644 index 0000000..4ce341e Binary files /dev/null and b/assets/images/The_Parthenon_in_Athens.jpg differ diff --git a/assets/images/diagonal.png b/assets/images/diagonal.png new file mode 100644 index 0000000..d0a0323 Binary files /dev/null and b/assets/images/diagonal.png differ diff --git a/assets/images/fancy-buttons.png b/assets/images/fancy-buttons.png new file mode 100644 index 0000000..18b1f60 Binary files /dev/null and b/assets/images/fancy-buttons.png differ diff --git a/assets/images/horizontal.png b/assets/images/horizontal.png new file mode 100644 index 0000000..057568e Binary files /dev/null and b/assets/images/horizontal.png differ diff --git a/assets/images/iPad-eBook-Reader.jpg b/assets/images/iPad-eBook-Reader.jpg new file mode 100644 index 0000000..d8fd2f1 Binary files /dev/null and b/assets/images/iPad-eBook-Reader.jpg differ diff --git a/assets/images/play_button.png b/assets/images/play_button.png new file mode 100644 index 0000000..9974c8c Binary files /dev/null and b/assets/images/play_button.png differ diff --git a/assets/images/rhythm_layout.png b/assets/images/rhythm_layout.png new file mode 100644 index 0000000..6a99d3c Binary files /dev/null and b/assets/images/rhythm_layout.png differ diff --git a/assets/images/smart.png b/assets/images/smart.png new file mode 100644 index 0000000..7fe102a Binary files /dev/null and b/assets/images/smart.png differ diff --git a/assets/images/vert.png b/assets/images/vert.png new file mode 100644 index 0000000..dde31b0 Binary files /dev/null and b/assets/images/vert.png differ diff --git a/assets/images/vert_rhythm_bad.jpg b/assets/images/vert_rhythm_bad.jpg new file mode 100644 index 0000000..5fefb54 Binary files /dev/null and b/assets/images/vert_rhythm_bad.jpg differ diff --git a/presentation/09_future.slides b/presentation/09_future.slides new file mode 100644 index 0000000..60dcc47 --- /dev/null +++ b/presentation/09_future.slides @@ -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 \ No newline at end of file diff --git a/presentation/10_end.slides b/presentation/10_end.slides new file mode 100644 index 0000000..3471af2 --- /dev/null +++ b/presentation/10_end.slides @@ -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! \ No newline at end of file