From db9d27b49f808228f3385cfcdc1c034f76c6b8da Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Fri, 13 Apr 2012 18:49:50 -0700 Subject: Slides sliding in is oldschool. We now fade between slides --- theme/css/default.css | 404 ++++++++++++++++++++---------------------------- theme/sass/default.scss | 81 ++++++---- 2 files changed, 220 insertions(+), 265 deletions(-) (limited to 'theme') diff --git a/theme/css/default.css b/theme/css/default.css index bb77b38..a6c1826 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -214,28 +214,15 @@ slide.fill img { /* line 87, ../sass/default.scss */ body { - background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf)); - background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); - background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); - background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); - background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); - background-image: radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); - background-attachment: fixed; + background: black; } -/* line 93, ../sass/default.scss */ +/* line 95, ../sass/default.scss */ slides > slide { display: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 26px; color: #797979; - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); - background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); - background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); - background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); - background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); - background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); - background-color: white; width: 900px; height: 700px; margin-left: -450px; @@ -246,101 +233,52 @@ slides > slide { -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; - -webkit-box-shadow: 5px 5px 20px #515151; - -moz-box-shadow: 5px 5px 20px #515151; - box-shadow: 5px 5px 20px #515151; - -webkit-transition: all 0.3s ease-out; - -moz-transition: all 0.3s ease-out; - -ms-transition: all 0.3s ease-out; - -o-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; -} -/* line 114, ../sass/default.scss */ + -webkit-transition: all 0.6s ease-out; + -moz-transition: all 0.6s ease-out; + -ms-transition: all 0.6s ease-out; + -o-transition: all 0.6s ease-out; + transition: all 0.6s ease-out; +} +/* line 116, ../sass/default.scss */ slides > slide.far-past { - display: block; - -webkit-transform: translate(-2040px); - -moz-transform: translate(-2040px); - -ms-transform: translate(-2040px); - -o-transform: translate(-2040px); - transform: translate(-2040px); - -webkit-transform: translate3d(-2040px, 0, 0); - -moz-transform: translate3d(-2040px, 0, 0); - -ms-transform: translate3d(-2040px, 0, 0); - -o-transform: translate3d(-2040px, 0, 0); - transform: translate3d(-2040px, 0, 0); -} -/* line 120, ../sass/default.scss */ + display: none; +} +/* line 123, ../sass/default.scss */ slides > slide.past { display: block; - -webkit-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -ms-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); - -moz-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); - -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); - -o-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); - transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); -} -/* line 126, ../sass/default.scss */ + opacity: 0; +} +/* line 130, ../sass/default.scss */ slides > slide.current { display: block; - -webkit-transform: translate(0); - -moz-transform: translate(0); - -ms-transform: translate(0); - -o-transform: translate(0); - transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + opacity: 1; } -/* line 131, ../sass/default.scss */ +/* line 136, ../sass/default.scss */ slides > slide.current .auto-fadein { opacity: 1; } -/* line 135, ../sass/default.scss */ +/* line 140, ../sass/default.scss */ slides > slide.current .gdbar { -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } -/* line 140, ../sass/default.scss */ +/* line 145, ../sass/default.scss */ slides > slide.next { display: block; - -webkit-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -ms-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); - -moz-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); - -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); - -o-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); - transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); -} -/* line 146, ../sass/default.scss */ + opacity: 0; + pointer-events: none; +} +/* line 153, ../sass/default.scss */ slides > slide.far-next { - display: block; - -webkit-transform: translate(2040px); - -moz-transform: translate(2040px); - -ms-transform: translate(2040px); - -o-transform: translate(2040px); - transform: translate(2040px); - -webkit-transform: translate3d(2040px, 0, 0); - -moz-transform: translate3d(2040px, 0, 0); - -ms-transform: translate3d(2040px, 0, 0); - -o-transform: translate3d(2040px, 0, 0); - transform: translate3d(2040px, 0, 0); -} -/* line 152, ../sass/default.scss */ + display: none; +} +/* line 160, ../sass/default.scss */ slides > slide.dark { background: #515151; } -/* line 160, ../sass/default.scss */ +/* line 168, ../sass/default.scss */ slides > slide:not(.fill):not(.nobackground):before { font-size: 12pt; content: "#io2012"; @@ -356,7 +294,7 @@ slides > slide:not(.fill):not(.nobackground):before { height: 30px; line-height: 1.9; } -/* line 172, ../sass/default.scss */ +/* line 180, ../sass/default.scss */ slides > slide:not(.fill):not(.nobackground):after { font-size: 12pt; content: attr(data-slide-num) "/" attr(data-total-slides); @@ -365,7 +303,7 @@ slides > slide:not(.fill):not(.nobackground):after { right: 60px; line-height: 1.9; } -/* line 183, ../sass/default.scss */ +/* line 191, ../sass/default.scss */ slides > slide.title-slide:after { content: ''; background: url(../../images/io2012_logo.png) no-repeat 100% 50%; @@ -379,34 +317,51 @@ slides > slide.title-slide:after { width: 100%; height: 60px; } -/* line 195, ../sass/default.scss */ +/* line 203, ../sass/default.scss */ +slides > slide.backdrop { + z-index: -1; + display: block !important; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); + background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background-color: white; +} +/* line 209, ../sass/default.scss */ +slides > slide.backdrop:after, slides > slide.backdrop:before { + display: none; +} +/* line 214, ../sass/default.scss */ slides > slide > hgroup + article { margin-top: 45px; } -/* line 198, ../sass/default.scss */ +/* line 217, ../sass/default.scss */ slides > slide > hgroup + article p { margin-bottom: 1em; } -/* line 203, ../sass/default.scss */ +/* line 222, ../sass/default.scss */ slides > slide > article:only-child > iframe { height: 100%; } -/* line 208, ../sass/default.scss */ +/* line 227, ../sass/default.scss */ slides.layout-faux-widescreen > slide { padding: 40px 160px; } -/* line 217, ../sass/default.scss */ +/* line 236, ../sass/default.scss */ slides.layout-widescreen > slide, slides.layout-faux-widescreen > slide { margin-left: -550px; width: 1100px; } -/* line 222, ../sass/default.scss */ +/* line 241, ../sass/default.scss */ slides.layout-widescreen > slide.far-past, slides.layout-faux-widescreen > slide.far-past { display: block; + display: none; -webkit-transform: translate(-2260px); -moz-transform: translate(-2260px); -ms-transform: translate(-2260px); @@ -418,55 +373,30 @@ slides.layout-faux-widescreen > slide.far-past { -o-transform: translate3d(-2260px, 0, 0); transform: translate3d(-2260px, 0, 0); } -/* line 228, ../sass/default.scss */ +/* line 248, ../sass/default.scss */ slides.layout-widescreen > slide.past, slides.layout-faux-widescreen > slide.past { display: block; - -webkit-transform: translate(-1130px); - -moz-transform: translate(-1130px); - -ms-transform: translate(-1130px); - -o-transform: translate(-1130px); - transform: translate(-1130px); - -webkit-transform: translate3d(-1130px, 0, 0); - -moz-transform: translate3d(-1130px, 0, 0); - -ms-transform: translate3d(-1130px, 0, 0); - -o-transform: translate3d(-1130px, 0, 0); - transform: translate3d(-1130px, 0, 0); -} -/* line 234, ../sass/default.scss */ + opacity: 0; +} +/* line 255, ../sass/default.scss */ slides.layout-widescreen > slide.current, slides.layout-faux-widescreen > slide.current { display: block; - -webkit-transform: translate(0); - -moz-transform: translate(0); - -ms-transform: translate(0); - -o-transform: translate(0); - transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + opacity: 1; } -/* line 240, ../sass/default.scss */ +/* line 262, ../sass/default.scss */ slides.layout-widescreen > slide.next, slides.layout-faux-widescreen > slide.next { display: block; - -webkit-transform: translate(1130px); - -moz-transform: translate(1130px); - -ms-transform: translate(1130px); - -o-transform: translate(1130px); - transform: translate(1130px); - -webkit-transform: translate3d(1130px, 0, 0); - -moz-transform: translate3d(1130px, 0, 0); - -ms-transform: translate3d(1130px, 0, 0); - -o-transform: translate3d(1130px, 0, 0); - transform: translate3d(1130px, 0, 0); -} -/* line 246, ../sass/default.scss */ + opacity: 0; + pointer-events: none; +} +/* line 270, ../sass/default.scss */ slides.layout-widescreen > slide.far-next, slides.layout-faux-widescreen > slide.far-next { display: block; + display: none; -webkit-transform: translate(2260px); -moz-transform: translate(2260px); -ms-transform: translate(2260px); @@ -478,40 +408,40 @@ slides.layout-faux-widescreen > slide.far-next { -o-transform: translate3d(2260px, 0, 0); transform: translate3d(2260px, 0, 0); } -/* line 252, ../sass/default.scss */ +/* line 277, ../sass/default.scss */ slides.layout-widescreen #prev-slide-area, slides.layout-faux-widescreen #prev-slide-area { margin-left: -650px; } -/* line 256, ../sass/default.scss */ +/* line 281, ../sass/default.scss */ slides.layout-widescreen #next-slide-area, slides.layout-faux-widescreen #next-slide-area { margin-left: 550px; } -/* line 261, ../sass/default.scss */ +/* line 286, ../sass/default.scss */ b { font-weight: 600; } -/* line 265, ../sass/default.scss */ +/* line 290, ../sass/default.scss */ a { color: #2a7cdf; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(42, 124, 223, 0.5); } -/* line 271, ../sass/default.scss */ +/* line 296, ../sass/default.scss */ a:hover { color: black !important; } -/* line 276, ../sass/default.scss */ +/* line 301, ../sass/default.scss */ h1, h2, h3 { font-weight: 600; } -/* line 280, ../sass/default.scss */ +/* line 305, ../sass/default.scss */ h2 { font-size: 45px; line-height: 45px; @@ -519,7 +449,7 @@ h2 { color: #515151; } -/* line 287, ../sass/default.scss */ +/* line 312, ../sass/default.scss */ h3 { font-size: 30px; letter-spacing: -1px; @@ -528,39 +458,39 @@ h3 { color: #797979; } -/* line 295, ../sass/default.scss */ +/* line 320, ../sass/default.scss */ ul { margin-left: 1.2em; margin-bottom: 1em; position: relative; } -/* line 300, ../sass/default.scss */ +/* line 325, ../sass/default.scss */ ul li { margin-bottom: 0.5em; } -/* line 303, ../sass/default.scss */ +/* line 328, ../sass/default.scss */ ul li ul { margin-left: 2em; margin-bottom: 0; } -/* line 307, ../sass/default.scss */ +/* line 332, ../sass/default.scss */ ul li ul li:before { content: '-'; font-weight: 600; } -/* line 314, ../sass/default.scss */ +/* line 339, ../sass/default.scss */ ul > li:before { content: '·'; margin-left: -1em; position: absolute; font-weight: 600; } -/* line 321, ../sass/default.scss */ +/* line 346, ../sass/default.scss */ ul ul { margin-top: .5em; } -/* line 328, ../sass/default.scss */ +/* line 353, ../sass/default.scss */ .highlight-code slide.current pre > * { opacity: 0.25; -webkit-transition: opacity 0.5s ease-in; @@ -569,12 +499,12 @@ ul ul { -o-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } -/* line 332, ../sass/default.scss */ +/* line 357, ../sass/default.scss */ .highlight-code slide.current b { opacity: 1; } -/* line 337, ../sass/default.scss */ +/* line 362, ../sass/default.scss */ pre { font-family: 'Inconsolata', 'Courier New', monospace; font-size: 20px; @@ -591,7 +521,7 @@ pre { box-sizing: border-box; /*overflow: hidden;*/ } -/* line 351, ../sass/default.scss */ +/* line 376, ../sass/default.scss */ pre:after { content: attr(data-lang); background-color: #a9a9a9; @@ -604,14 +534,14 @@ pre:after { text-transform: uppercase; } -/* line 364, ../sass/default.scss */ +/* line 389, ../sass/default.scss */ code { font-size: 95%; font-family: 'Inconsolata', 'Courier New', monospace; color: black; } -/* line 370, ../sass/default.scss */ +/* line 395, ../sass/default.scss */ iframe { width: 100%; height: 530px; @@ -622,12 +552,12 @@ iframe { box-sizing: border-box; } -/* line 378, ../sass/default.scss */ +/* line 403, ../sass/default.scss */ dt { font-weight: bold; } -/* line 382, ../sass/default.scss */ +/* line 407, ../sass/default.scss */ button { display: inline-block; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3)); @@ -654,12 +584,12 @@ button { font-size: 10pt; } -/* line 397, ../sass/default.scss */ +/* line 422, ../sass/default.scss */ button:hover { border-color: black; } -/* line 401, ../sass/default.scss */ +/* line 426, ../sass/default.scss */ button:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); @@ -669,87 +599,87 @@ button:active { background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); } -/* line 405, ../sass/default.scss */ +/* line 430, ../sass/default.scss */ .blue { color: #4387fd; } -/* line 408, ../sass/default.scss */ +/* line 433, ../sass/default.scss */ .blue2 { color: #3c8ef3; } -/* line 411, ../sass/default.scss */ +/* line 436, ../sass/default.scss */ .blue3 { color: #2a7cdf; } -/* line 414, ../sass/default.scss */ +/* line 439, ../sass/default.scss */ .yellow { color: #ffd14d; } -/* line 417, ../sass/default.scss */ +/* line 442, ../sass/default.scss */ .yellow2 { color: #f9cc46; } -/* line 420, ../sass/default.scss */ +/* line 445, ../sass/default.scss */ .yellow3 { color: #f6c000; } -/* line 423, ../sass/default.scss */ +/* line 448, ../sass/default.scss */ .green { color: #0da861; } -/* line 426, ../sass/default.scss */ +/* line 451, ../sass/default.scss */ .green2 { color: #00a86d; } -/* line 429, ../sass/default.scss */ +/* line 454, ../sass/default.scss */ .green3 { color: #009f5d; } -/* line 432, ../sass/default.scss */ +/* line 457, ../sass/default.scss */ .red { color: #f44a3f; } -/* line 435, ../sass/default.scss */ +/* line 460, ../sass/default.scss */ .red2 { color: #e0543e; } -/* line 438, ../sass/default.scss */ +/* line 463, ../sass/default.scss */ .red3 { color: #d94d3a; } -/* line 441, ../sass/default.scss */ +/* line 466, ../sass/default.scss */ .gray { color: #e6e6e6; } -/* line 444, ../sass/default.scss */ +/* line 469, ../sass/default.scss */ .gray2 { color: #a9a9a9; } -/* line 447, ../sass/default.scss */ +/* line 472, ../sass/default.scss */ .gray3 { color: #797979; } -/* line 450, ../sass/default.scss */ +/* line 475, ../sass/default.scss */ .gray4 { color: #515151; } -/* line 454, ../sass/default.scss */ +/* line 479, ../sass/default.scss */ .columns-2 { -webkit-column-count: 2; -moz-column-count: 2; @@ -757,7 +687,7 @@ button:active { column-count: 2; } -/* line 458, ../sass/default.scss */ +/* line 483, ../sass/default.scss */ table { width: 100%; border-collapse: -moz-initial; @@ -765,16 +695,16 @@ table { border-spacing: 2px; border-bottom: 1px solid #797979; } -/* line 465, ../sass/default.scss */ +/* line 490, ../sass/default.scss */ table tr > td:first-child, table th { font-weight: 600; color: #515151; } -/* line 470, ../sass/default.scss */ +/* line 495, ../sass/default.scss */ table tr:nth-child(odd) { background-color: #e6e6e6; } -/* line 474, ../sass/default.scss */ +/* line 499, ../sass/default.scss */ table th { color: white; font-size: 18px; @@ -785,12 +715,12 @@ table th { background: -ms-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; } -/* line 480, ../sass/default.scss */ +/* line 505, ../sass/default.scss */ table td, table th { font-size: 18px; padding: 1em 0.5em; } -/* line 485, ../sass/default.scss */ +/* line 510, ../sass/default.scss */ table td.highlight { color: #515151; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat; @@ -800,31 +730,31 @@ table td.highlight { background: -ms-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; } -/* line 490, ../sass/default.scss */ +/* line 515, ../sass/default.scss */ table.rows { border-bottom: none; border-right: 1px solid #797979; } -/* line 496, ../sass/default.scss */ +/* line 521, ../sass/default.scss */ q { font-size: 45px; line-height: 72px; } -/* line 500, ../sass/default.scss */ +/* line 525, ../sass/default.scss */ q:before { content: '“'; position: absolute; margin-left: -0.5em; } -/* line 505, ../sass/default.scss */ +/* line 530, ../sass/default.scss */ q:after { content: '”'; position: absolute; margin-left: 0.1em; } -/* line 512, ../sass/default.scss */ +/* line 537, ../sass/default.scss */ slide.fill { -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -832,7 +762,7 @@ slide.fill { -o-border-radius: 5px; border-radius: 5px; } -/* line 515, ../sass/default.scss */ +/* line 540, ../sass/default.scss */ slide.fill h3 { background: rgba(255, 255, 255, 0.75); padding-top: .2em; @@ -843,7 +773,7 @@ slide.fill h3 { margin-right: -60px; padding-right: 60px; } -/* line 526, ../sass/default.scss */ +/* line 551, ../sass/default.scss */ slide.fill h4 { display: inline; position: absolute; @@ -852,34 +782,34 @@ slide.fill h4 { } /* Size variants */ -/* line 537, ../sass/default.scss */ +/* line 562, ../sass/default.scss */ article.smaller p, article.smaller ul { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 543, ../sass/default.scss */ +/* line 568, ../sass/default.scss */ article.smaller table td, article.smaller table th { font-size: 14px; } -/* line 547, ../sass/default.scss */ +/* line 572, ../sass/default.scss */ article.smaller pre { font-size: 15px; line-height: 20px; letter-spacing: 0; } -/* line 552, ../sass/default.scss */ +/* line 577, ../sass/default.scss */ article.smaller q { font-size: 40px; line-height: 48px; } -/* line 556, ../sass/default.scss */ +/* line 581, ../sass/default.scss */ article.smaller q:before, article.smaller q:after { font-size: 60px; } /* Builds */ -/* line 565, ../sass/default.scss */ +/* line 590, ../sass/default.scss */ .build > * { -webkit-transition: opacity 0.5s ease-in-out 0.2s; -moz-transition: opacity 0.5s ease-in-out 0.2s; @@ -887,55 +817,55 @@ article.smaller q:before, article.smaller q:after { -o-transition: opacity 0.5s ease-in-out 0.2s; transition: opacity 0.5s ease-in-out 0.2s; } -/* line 569, ../sass/default.scss */ +/* line 594, ../sass/default.scss */ .build .to-build { opacity: 0; } -/* line 573, ../sass/default.scss */ +/* line 598, ../sass/default.scss */ .build .build-fade { opacity: 0.3; } -/* line 576, ../sass/default.scss */ +/* line 601, ../sass/default.scss */ .build .build-fade:hover { opacity: 1.0; } /* Pretty print */ -/* line 585, ../sass/default.scss */ +/* line 610, ../sass/default.scss */ .prettyprint .str, .prettyprint .atv { /* a markup attribute value */ color: #009f5d; } -/* line 589, ../sass/default.scss */ +/* line 614, ../sass/default.scss */ .prettyprint .kwd, .prettyprint .tag { /* a markup tag name */ color: #0066cc; } -/* line 592, ../sass/default.scss */ +/* line 617, ../sass/default.scss */ .prettyprint .com { /* a comment */ color: #797979; font-style: italic; } -/* line 596, ../sass/default.scss */ +/* line 621, ../sass/default.scss */ .prettyprint .lit { /* a literal value */ color: #7f0000; } -/* line 601, ../sass/default.scss */ +/* line 626, ../sass/default.scss */ .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #515151; } -/* line 607, ../sass/default.scss */ +/* line 632, ../sass/default.scss */ .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, @@ -944,12 +874,12 @@ article.smaller q:before, article.smaller q:after { color: #d94d3a; } -/* line 610, ../sass/default.scss */ +/* line 635, ../sass/default.scss */ .prettyprint .pln { color: #515151; } -/* line 616, ../sass/default.scss */ +/* line 641, ../sass/default.scss */ .with-notes slide.current { -webkit-transform: rotateY(180deg) !important; -moz-transform: rotateY(180deg) !important; @@ -957,7 +887,7 @@ article.smaller q:before, article.smaller q:after { -o-transform: rotateY(180deg) !important; transform: rotateY(180deg) !important; } -/* line 619, ../sass/default.scss */ +/* line 644, ../sass/default.scss */ .with-notes .note { opacity: 1; -webkit-transform: rotateY(180deg); @@ -968,7 +898,7 @@ article.smaller q:before, article.smaller q:after { pointer-events: auto; } -/* line 626, ../sass/default.scss */ +/* line 651, ../sass/default.scss */ .note { position: absolute; z-index: 100; @@ -1007,7 +937,7 @@ article.smaller q:before, article.smaller q:after { -o-border-radius: 5px; border-radius: 5px; } -/* line 642, ../sass/default.scss */ +/* line 667, ../sass/default.scss */ .note > section { background: #fff; -webkit-border-radius: 5px; @@ -1022,7 +952,7 @@ article.smaller q:before, article.smaller q:after { padding: 2em; } -/* line 651, ../sass/default.scss */ +/* line 676, ../sass/default.scss */ input, button { vertical-align: middle; } @@ -1038,7 +968,7 @@ input, button { -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); }*/ -/* line 667, ../sass/default.scss */ +/* line 692, ../sass/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -1047,7 +977,7 @@ input, button { display: box !important; } -/* line 671, ../sass/default.scss */ +/* line 696, ../sass/default.scss */ .flexbox.vcenter { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1065,7 +995,7 @@ input, button { width: 100%; } -/* line 677, ../sass/default.scss */ +/* line 702, ../sass/default.scss */ .flexbox.vleft { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1083,7 +1013,7 @@ input, button { width: 100%; } -/* line 683, ../sass/default.scss */ +/* line 708, ../sass/default.scss */ .auto-fadein { -webkit-transition: opacity 0.6s ease-in 1s; -moz-transition: opacity 0.6s ease-in 1s; @@ -1094,7 +1024,7 @@ input, button { } /* Clickable/tappable areas */ -/* line 689, ../sass/default.scss */ +/* line 714, ../sass/default.scss */ .slide-area { z-index: 1000; position: absolute; @@ -1108,59 +1038,59 @@ input, button { margin-top: -350px; } -/* line 706, ../sass/default.scss */ +/* line 731, ../sass/default.scss */ #prev-slide-area { margin-left: -550px; } -/* line 711, ../sass/default.scss */ +/* line 736, ../sass/default.scss */ #next-slide-area { margin-left: 450px; } /* ===== SLIDE CONTENT ===== */ -/* line 719, ../sass/default.scss */ +/* line 744, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 725, ../sass/default.scss */ +/* line 750, ../sass/default.scss */ .segue { padding: 60px 120px; } -/* line 728, ../sass/default.scss */ +/* line 753, ../sass/default.scss */ .segue h2 { color: #e6e6e6; font-size: 60px; } -/* line 732, ../sass/default.scss */ +/* line 757, ../sass/default.scss */ .segue h3 { color: #e6e6e6; line-height: 2.8; } -/* line 736, ../sass/default.scss */ +/* line 761, ../sass/default.scss */ .segue hgroup { position: absolute; bottom: 225px; } -/* line 742, ../sass/default.scss */ +/* line 767, ../sass/default.scss */ .thank-you-slide { background: #4387fd; color: white; } -/* line 746, ../sass/default.scss */ +/* line 771, ../sass/default.scss */ .thank-you-slide h2 { font-size: 60px; color: inherit; } -/* line 751, ../sass/default.scss */ +/* line 776, ../sass/default.scss */ .thank-you-slide article > p { margin-top: 2em; font-size: 20pt; } -/* line 756, ../sass/default.scss */ +/* line 781, ../sass/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1168,7 +1098,7 @@ input, button { line-height: 1.3; } -/* line 764, ../sass/default.scss */ +/* line 789, ../sass/default.scss */ aside.gdbar { height: 97px; width: 215px; @@ -1197,7 +1127,7 @@ aside.gdbar { transition: all 0.5s ease-out 0.5s; /* Better to transition only on background-size, but not sure how to do that with the mixin. */ } -/* line 775, ../sass/default.scss */ +/* line 800, ../sass/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; @@ -1210,7 +1140,7 @@ aside.gdbar.right { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 782, ../sass/default.scss */ +/* line 807, ../sass/default.scss */ aside.gdbar.right img { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); @@ -1218,13 +1148,13 @@ aside.gdbar.right img { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 787, ../sass/default.scss */ +/* line 812, ../sass/default.scss */ aside.gdbar.bottom { top: -moz-initial; top: initial; bottom: 60px; } -/* line 793, ../sass/default.scss */ +/* line 818, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1233,24 +1163,24 @@ aside.gdbar img { margin: 8px 15px; } -/* line 804, ../sass/default.scss */ +/* line 829, ../sass/default.scss */ .title-slide hgroup { bottom: 100px; } -/* line 807, ../sass/default.scss */ +/* line 832, ../sass/default.scss */ .title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 814, ../sass/default.scss */ +/* line 839, ../sass/default.scss */ .title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 820, ../sass/default.scss */ +/* line 845, ../sass/default.scss */ .title-slide hgroup p { font-size: 20px; color: #797979; @@ -1258,11 +1188,11 @@ aside.gdbar img { margin-top: 2em; } -/* line 829, ../sass/default.scss */ +/* line 854, ../sass/default.scss */ .quote { color: #e6e6e6; } -/* line 832, ../sass/default.scss */ +/* line 857, ../sass/default.scss */ .quote .author { font-size: 24px; position: absolute; @@ -1270,12 +1200,12 @@ aside.gdbar img { line-height: 1.4; } -/* line 841, ../sass/default.scss */ +/* line 866, ../sass/default.scss */ [data-config-contact] a { color: white; border-bottom: none; } -/* line 845, ../sass/default.scss */ +/* line 870, ../sass/default.scss */ [data-config-contact] span { width: 115px; display: inline-block; diff --git a/theme/sass/default.scss b/theme/sass/default.scss index 89d38d0..a5d9c69 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -85,9 +85,11 @@ $article-content-top-padding: 45px; } body { - @include background-image(radial-gradient(50% 50%, #b1dfff 0%, - $brand-blue-secondary2 600px)); - background-attachment: fixed; + //@include background-image(radial-gradient(50% 50%, #b1dfff 0%, + // $brand-blue-secondary2 600px)); + //background-attachment: fixed; + //@include background(linear-gradient(white, white 85%, $gray-1)); + background: black; } slides > slide { @@ -95,8 +97,8 @@ slides > slide { font-family: 'Open Sans', Arial, sans-serif; font-size: 26px; color: $gray-3; - @include background(linear-gradient(white, white 85%, $gray-1)); - background-color: white; + //@include background(linear-gradient(white, white 85%, $gray-1)); + //background-color: white; width: $slide-width; height: $slide-height; margin-left: -$slide-width / 2; @@ -104,29 +106,32 @@ slides > slide { padding: $slide-top-bottom-padding $slide-left-right-padding; @include border-radius($slide-border-radius); - @include box-shadow(5px 5px 20px $gray-4); - @include transition(all 0.3s ease-out); + //@include box-shadow(5px 5px 20px $gray-4); + @include transition(all 0.6s ease-out); - $translateX: 1020px; - $rotateY: 30deg; - $rotateX: 45deg; + //$translateX: 1020px; + //$rotateY: 30deg; + //$rotateX: 45deg; &.far-past { - display: block; - @include transform(translate(-$translateX * 2)); - @include transform(translate3d(-$translateX * 2, 0, 0)); + //display: block; + display: none; + //@include transform(translate(-$translateX * 2)); + //@include transform(translate3d(-$translateX * 2, 0, 0)); } &.past { display: block; - @include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX)); - @include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX)); + //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX)); + //@include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX)); + opacity: 0; } &.current { display: block; - @include transform(translate(0)); - @include transform(translate3d(0, 0, 0)); + //@include transform(translate(0)); + //@include transform(translate3d(0, 0, 0)); + opacity: 1; .auto-fadein { opacity: 1; @@ -139,14 +144,17 @@ slides > slide { &.next { display: block; - @include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX)); - @include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX)); + //@include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX)); + //@include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX)); + opacity: 0; + pointer-events: none; } &.far-next { - display: block; - @include transform(translate($translateX * 2)); - @include transform(translate3d($translateX * 2, 0, 0)); + //display: block; + display: none; + //@include transform(translate($translateX * 2)); + //@include transform(translate3d($translateX * 2, 0, 0)); } &.dark { @@ -192,6 +200,17 @@ slides > slide { } } + &.backdrop { + z-index: -1; + display: block !important; + @include background(linear-gradient(white, white 85%, $gray-1)); + background-color: white; + + &:after, &:before { + display: none; + } + } + > hgroup + article { margin-top: $article-content-top-padding; @@ -221,30 +240,36 @@ slides.layout-faux-widescreen { > slide.far-past { display: block; + display: none; @include transform(translate(-$translateX * 2)); @include transform(translate3d(-$translateX * 2, 0, 0)); } > slide.past { display: block; - @include transform(translate(-$translateX)); - @include transform(translate3d(-$translateX, 0, 0)); + //@include transform(translate(-$translateX)); + //@include transform(translate3d(-$translateX, 0, 0)); + opacity: 0; } > slide.current { display: block; - @include transform(translate(0)); - @include transform(translate3d(0, 0, 0)); + //@include transform(translate(0)); + //@include transform(translate3d(0, 0, 0)); + opacity: 1; } > slide.next { display: block; - @include transform(translate($translateX)); - @include transform(translate3d($translateX, 0, 0)); + //@include transform(translate($translateX)); + //@include transform(translate3d($translateX, 0, 0)); + opacity: 0; + pointer-events: none; } > slide.far-next { display: block; + display: none; @include transform(translate($translateX * 2)); @include transform(translate3d($translateX * 2, 0, 0)); } -- cgit v1.2.3