Permalink
Browse files

Quick example

  • Loading branch information...
1 parent a1cbd7f commit 3952b9d465845198436c31b1799f750694ff87b5 @jakearchibald committed Apr 6, 2012
View
@@ -19,7 +19,7 @@
font-size: 0.68em;
}
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
font-size: 55px;
}
View
@@ -15,7 +15,7 @@
line-height: 1.3;
}
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
font-size: 33px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
View
@@ -34,7 +34,7 @@
@include transform( rotate(-2.6deg) translate(18px,0) );
}
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
height: 182px;
background-image: url(imgs/heading/bg@hd.jpg);
margin: 0 0 33px;
View
@@ -31,7 +31,7 @@
width: 1024px;
height: 768px;
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
width: 1920px;
height: 1080px;
}
View
@@ -82,7 +82,7 @@ $overlay-bg: #333;
}
}
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
left: 1072px;
}
View
@@ -9,7 +9,7 @@
user-select: none;
-webkit-perspective: 823;
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
-webkit-perspective: 1200;
}
}
@@ -28,7 +28,7 @@
//@include transform-style(preserve-3d);
}
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1919px) {
.presentation {
width: 1920px;
height: 1080px;
View
@@ -51,7 +51,7 @@
}
}
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1919px) {
.mankini-section-title {
background-image: url(imgs/section-title/bg@hd.jpg);
View
@@ -6,10 +6,9 @@
top: 0;
z-index: 1;
background: url('imgs/slide/bg.jpg');
- background-size: 100% 100%;
overflow: hidden;
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
background-image: url('imgs/slide/bg@hd.jpg');
}
View
@@ -3,7 +3,7 @@
overflow: hidden;
font-size: 30px;
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
font-size: 50px;
}
View
@@ -2,7 +2,7 @@
text-align: center;
opacity: 0;
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
font-size: 24px;
}
View
@@ -17,7 +17,7 @@
}
}
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1919px) {
.mankini-title {
background-image: url('imgs/title/bg@hd.jpg');
View
@@ -17,7 +17,7 @@
border: 0;
}
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
margin: 0 346px 20px;
box-shadow: 0 9px 16px rgba(0, 0, 0, 0.3);
@@ -79,7 +79,7 @@
background-image: url(imgs/web-view/reload.png);
}
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
border-width: 2px 0;
font-size: 25px;
View
@@ -209,7 +209,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
-ms-user-select: none;
user-select: none;
-webkit-perspective: 823; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _presentation.scss */
.presentation {
-webkit-perspective: 1200; } }
@@ -226,7 +226,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
top: 0;
left: 0; }
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1919px) {
/* line 32, _presentation.scss */
.presentation {
width: 1920px;
@@ -240,13 +240,12 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
top: 0;
z-index: 1;
background: url("imgs/slide/bg.jpg");
- background-size: 100% 100%;
overflow: hidden; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _slide.scss */
.slide {
background-image: url("imgs/slide/bg@hd.jpg"); } }
- /* line 16, _slide.scss */
+ /* line 15, _slide.scss */
.slide.white {
background: #fff; }
@@ -330,7 +329,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
/* line 80, _notes.scss */
.mankini-notes-in-page .index li {
margin: 13px 0; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 69, _notes.scss */
.mankini-notes-in-page {
left: 1072px; } }
@@ -355,7 +354,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
left: -1.58em;
top: 0.3em;
font-size: 0.68em; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 5, _bullets.scss */
.mankini-bullet {
font-size: 55px; } }
@@ -452,7 +451,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
-ms-transform: rotate(-2.6deg) translate(18px, 0);
-o-transform: rotate(-2.6deg) translate(18px, 0);
transform: rotate(-2.6deg) translate(18px, 0); }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _heading.scss */
.mankini-heading {
height: 182px;
@@ -501,7 +500,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
padding: 0.9em 1em 0.75em;
font-family: consolas, monospace;
line-height: 1.3; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _code.scss */
.mankini-code {
font-size: 33px;
@@ -583,7 +582,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
-o-transform: none;
transform: none; }
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1919px) {
/* line 55, _section-title.scss */
.mankini-section-title {
background-image: url(imgs/section-title/bg@hd.jpg); }
@@ -625,7 +624,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
display: block;
background: #fff;
border: 0; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _web-view.scss */
.mankini-web-view {
margin: 0 346px 20px;
@@ -692,7 +691,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
/* line 78, _web-view.scss */
.mankini-toolbar .refresh div {
background-image: url(imgs/web-view/reload.png); }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 38, _web-view.scss */
.mankini-toolbar {
border-width: 2px 0;
@@ -748,7 +747,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
text-align: right;
line-height: 1; }
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1919px) {
/* line 21, _title.scss */
.mankini-title {
background-image: url("imgs/title/bg@hd.jpg"); }
@@ -792,7 +791,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
vertical-align: middle;
width: 1024px;
height: 768px; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 27, _image.scss */
.mankini-image-inner {
width: 1920px;
@@ -802,7 +801,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
.mankini-supported {
text-align: center;
opacity: 0; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _supported.scss */
.mankini-supported {
font-size: 24px; } }
@@ -889,7 +888,7 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
margin: 0 1.5em 0.3em;
overflow: hidden;
font-size: 30px; }
- @media screen and (min-width: 1025px) {
+ @media screen and (min-width: 1919px) {
/* line 1, _sub-heading.scss */
.mankini-sub-heading {
font-size: 50px; } }
View
@@ -2,6 +2,11 @@
************* Global functions *************
********************************************/
/* line 3, core.scss */
+body {
+ width: 1024px;
+ margin: 0 auto; }
+
+/* line 8, core.scss */
.test-arrow {
top: 271px;
left: 340px;
@@ -10,8 +15,3 @@
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg); }
-
-/* line 9, core.scss */
-.paper-test {
- background: url(../../css/imgs/paper.png);
- background-size: 100% 100%; }
View
@@ -1,12 +1,12 @@
@import '../../css/utils';
+body {
+ width: 1024px;
+ margin: 0 auto;
+}
+
.test-arrow {
top: 271px;
left: 340px;
@include transform( rotate(36deg) );
-}
-
-.paper-test {
- background: url(../../css/imgs/paper.png);
- background-size: 100% 100%;
}
View
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="css/core.css">
</head>
<body>
+ <div class="presentation"></div>
<script src="../js/all.js"></script>
<script src="main.js" defer></script>
</body>
View
@@ -1,58 +1,37 @@
(function() {
- var presentation = new mankini.Presentation( document.body );
+ var presentation = new mankini.Presentation( '.presentation' );
presentation.builder
- .slide()
- .state("SVG Test")
- .action(function(animate, $slide) {
- $slide.addClass('paper-test');
- $container = $('<div/>').appendTo( $slide ).css({
- position: 'absolute',
- top: 0,
- left: 0
- });
-
- $.ajax('/2012appcachedouche/image%20originals/appcache-diagram-optim.svg').done(function(result) {
- $( result.documentElement ).appendTo( $container );
- });
- })
+ .slideTitle("A Presentation")
+ .notes(
+ "Notes will appear in a popup",
+ "This means I can move them to my laptop screen while presenting"
+ )
+ .transition('fadeBlack')
.slideSectionTitle('Testing', 'Hope this works properly')
+ .notes(
+ "Notes can change on a slide by slide basis"
+ )
.transition('fade')
.slideHeading('Iframe test')
- .webView('http://localhost/sprite-cow/www/')
+ .webView('http://www.spritecow.com')
.state('Arrow')
.arrow(1, 'test-arrow')
.transition('cubeSpin')
.slideSectionTitle('Again', 'With the testing')
.transition('fade')
.slideHeading('Hello everyone!')
.state('Code')
- .newCode('example.css').showCode(0, 3)
- .stateBullets("This is a point I'm trying to make")
+ .subHeading("Example Code")
+ .newCode('example.css').showCode(1, 3)
.stateBullets("This is a point I'm trying to make")
+ .stateBullets("This is another point I'm trying to make")
.state('Hi')
- .showCode()
- .transition('cubeSpin')
- .slideHeading("Another slide!")
- .stateBullets("Hello", "World")
- .transition('fade')
- .slideHeading("One more")
-
- /* TODOs
- .slideTitle(mainTitle, subTitle)
- .state(name)
- .video( url, classNames )
- .videoPlay( pauseAtOptional )
- .videoSeek( time )
- .setActionContainer( $elm ) // stuff goes in here from now on ($elm created & inserted in a custom action)
-
- // Port glow2 property animation stuff over, but use raf, for transforming svg
- // Browser iframe for demos - need button icons & server toggle
- // Lanyrd logo
- // Slide selector in notes pane
- // Need to capture hiding the pointer in iframes - this should focus out of iframe too
- */
-
+ .showCode(1, 7)
+ .state("Image")
+ .image("http://farm7.staticflickr.com/6041/6322978069_042b1f1337_z.jpg")
+ .transition("fadeBlack")
+ .slideSectionTitle("That's...", "...all folks")
;presentation.start();
})();

0 comments on commit 3952b9d

Please sign in to comment.