aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
authorEric Bidelman2012-04-08 18:39:24 -0700
committerEric Bidelman2012-04-08 18:39:24 -0700
commitd370b1d98b2a3375cb6093d70fcbf791c867b46d (patch)
tree46bb07c49ac509b92d89b8c7431fe2105f0f25f9 /theme/sass
parent79c730f664bd8bda196c13282c5650f4ab282b25 (diff)
downloadio-slides-remote-d370b1d98b2a3375cb6093d70fcbf791c867b46d.tar.gz
Segue slides animate on ever slide enter
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/default.scss43
1 files changed, 36 insertions, 7 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index f1088ba..647671e 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -165,6 +165,10 @@ slides > slide {
165 @include transform(translate3d($translateX * 2, 0, 0)); 165 @include transform(translate3d($translateX * 2, 0, 0));
166 } 166 }
167 167
168 &.dark {
169 background: $gray-4;
170 }
171
168 hgroup + article { 172 hgroup + article {
169 margin-top: 1.5em; 173 margin-top: 1.5em;
170 } 174 }
@@ -603,22 +607,38 @@ input, button {
603 607
604/* ===== SLIDE CONTENT ===== */ 608/* ===== SLIDE CONTENT ===== */
605.logoslide { 609.logoslide {
606 &.dark {
607 background: $gray-4;
608 }
609
610 img { 610 img {
611 width: 383px; 611 width: 383px;
612 height: 92px; 612 height: 92px;
613 } 613 }
614} 614}
615 615
616.segue {
617 h2 {
618 color: $gray-1;
619 font-size: 60px;
620 }
621 h3 {
622 color: $gray-1;
623 line-height: 2.8;
624 }
625 hgroup {
626 opacity: 0;
627 @include transition(opacity 0.6s ease-in 1s);
628
629 &.on {
630 opacity: 1;
631 }
632 }
633}
634
616.thank-you-slide { 635.thank-you-slide {
617 background: $brand-blue; 636 background: $brand-blue;
618 color: white; 637 color: white;
619 638
620 h1 { 639 h2 {
621 font-size: 60px; 640 font-size: 60px;
641 color: inherit;
622 } 642 }
623 643
624 section > p { 644 section > p {
@@ -644,7 +664,7 @@ aside.gdbar {
644 @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat); 664 @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat);
645 @include background-size(100% 100%); 665 @include background-size(100% 100%);
646 background-size: 100% 100%; 666 background-size: 100% 100%;
647 @include transition(all 0.5s ease-out 0.6s); /* Better to transition only on background-size, but not sure how to do that with the mixin. */ 667 @include 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. */
648 668
649 &.to-build { 669 &.to-build {
650 background-size: 0 100%; 670 background-size: 0 100%;
@@ -654,7 +674,7 @@ aside.gdbar {
654 right: 0; 674 right: 0;
655 left: -moz-initial; 675 left: -moz-initial;
656 left: initial; 676 left: initial;
657 top: ($slide-height / 2) - 96; /* 96 is height of gray icon bar */ 677 top: ($slide-height / 2) - 96 + 10; /* 96 is height of gray icon bar */
658 @include transform(rotateZ(180deg)); 678 @include transform(rotateZ(180deg));
659 679
660 img { 680 img {
@@ -672,6 +692,7 @@ aside.gdbar {
672} 692}
673 693
674#title-slide { 694#title-slide {
695
675 hgroup { 696 hgroup {
676 position: absolute; 697 position: absolute;
677 bottom: 150px; 698 bottom: 150px;
@@ -697,3 +718,11 @@ aside.gdbar {
697 } 718 }
698 } 719 }
699} 720}
721
722#title-slide, .thank-you-slide, .segue {
723 padding: $slide-left-right-padding $slide-left-right-padding * 2;
724
725 aside {
726 width: 215px;
727 }
728}