basic typography, styling of buttons on presentation page

client/stylesheets/style.css

@@ -7,7 +7,7 @@
     margin-top: 25%;
 }
 
-body, html, .container, .container-fluid, .col-xs-10, .row, .row-fluid, .viewer {
+body, html, .container, .container-fluid, .col-xs-10, .row, .viewer {
     height: 100%;
 }
 
@@ -17,21 +17,73 @@ body, html, .container, .container-fluid, .col-xs-10, .row, .row-fluid, .viewer
 
 /* Typography */
 
+body {
+  font-family: "freight-sans-pro", helvetica, sans-serif;
+}
+
+.headline {
+  font-weight: lighter;
+  text-align: center;
+}
+
+.headline h1 {
+  font-size: 72px;
+}
+
+.headline h3 {
+  font-size: 30px;
+}
+
 /* Bootstrap adjustments */
 
-.presentation-btn {
+.btn-presentation {
   height: 100%;
   width: 100%;
+  border: none;
 }
 
-.btn {
-  white-space: normal;
+.btn-left {
+  background: url(/left-arrow.png) no-repeat;
+  background-position: 50% 50%;
+}
+
+.btn-right {
+  background: url(/right-arrow.png) no-repeat;
+  background-position: 50% 50%;
+}
+
+.btn-left:active {
+  background: url(/left-arrow.png) no-repeat;
+  background-color: rgba(235, 235, 235, .8);
+  background-position: 50% 50%;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.btn-right:active {
+  background: url(/right-arrow.png) no-repeat;
+  background-color: rgba(235, 235, 235, .8);
+  background-position: 50% 50%;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.btn-huge {
+  height: 90px;
+  font-size: 24px;
 }
 
 .btn:focus, .btn:active:focus {
   outline: none;
 }
 
+.btn {
+  white-space: normal;
+  font-weight: bold;
+}
+
 .row-fluid {
   padding: 10% 10%;
 }
@@ -40,7 +92,7 @@ body, html, .container, .container-fluid, .col-xs-10, .row, .row-fluid, .viewer
 
 /* animations? */
 
-.not-visible {
+.transparent {
   opacity: 0;
 }
 
@@ -67,3 +119,15 @@ body, html, .container, .container-fluid, .col-xs-10, .row, .row-fluid, .viewer
    @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
      @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
         @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
+
+.fade-switch {
+  -webkit-animation: fadeSwitch .8s;
+     -moz-animation: fadeSwitch .8s;
+       -o-animation: fadeSwitch .8s;
+          animation: fadeSwitch .8s;
+}
+
+@-webkit-keyframes fadeSwitch { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }
+   @-moz-keyframes fadeSwitch { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }
+     @-o-keyframes fadeSwitch { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }
+        @keyframes fadeSwitch { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }

client/views/main.html

@@ -2,4 +2,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
     <title>Broadcast</title>
-</head>
+    <script type="text/javascript" src="//use.typekit.net/lzt3wqe.js"></script>
+	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+</head>

client/views/presentations/presentation.html

@@ -2,15 +2,15 @@
     <div class="row">
         <div class="col-xs-1 full-height">
             {{#if isPresenter}}
-            <button type="button" id="previous" class="btn presentation-btn btn-default btn-lg pull-right"><span class="glyphicon glyphicon-chevron-left"></span></button>
+            <button type="button" id="previous" class="btn btn-presentation btn-left btn-default btn-lg pull-right"></button>
             {{/if}}
         </div>
-        <div class="col-xs-10">
-            <div class="viewer crocodoc-presentation transition not-visible"></div>
+        <div class="col-xs-10 full-height">
+            <div class="viewer crocodoc-presentation transition transparent full-height"></div>
         </div>
         <div class="col-xs-1 full-height">
             {{#if isPresenter}}
-            <button type="button" id="next" class="btn presentation-btn btn-default btn-lg pull-left"><span class="glyphicon glyphicon-chevron-right"></span></button>
+            <button type="button" id="next" class="btn btn-presentation btn-right btn-default btn-lg pull-left"></button>
             {{/if}}
         </div>
     </div>
@@ -20,13 +20,13 @@
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h4 class="modal-title">Share this link with people you want to present to!</h4>
+            <h4 class="modal-title">Share this link with people you want to present to:</h4>
           </div>
           <div class="modal-body">
             <p><a href="{{pathFor 'viewer'}}" target="_blank">{{baseUrl}}{{pathFor 'viewer'}}</a></p>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-lg btn-block btn-primary" data-dismiss="modal">Take me to my presentation...</button>
+            <button type="button" class="btn btn-lg btn-block btn-primary" data-dismiss="modal">Take me to my presentation!</button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->

client/views/presentations/upload.html

@@ -1,7 +1,13 @@
 <template name="upload">
+	<div class="row-fluid headline">
+		<div class="col-xs-offset-3 col-xs-6">
+			<h1>Broadcast</h1>
+			<h3>The fastest, easiest way to share a presentation online</h3>
+		</div>
+	</div>
 	<div class="row-fluid">
 		<div class="col-xs-offset-4 col-xs-4">
-			<button type="button" id="upload" class="btn btn-lg btn-primary">Upload a Presentation</button>
+			<button type="button" id="upload" class="btn btn-huge btn-primary btn-block">Share Your Presentation</button>
 		</div>
 	</div>
 </template>

client/views/presentations/upload.js

@@ -1,7 +1,7 @@
 Template.upload.events({
     'click #upload': function(e) {
         e.preventDefault();
-        $('#upload').addClass('fade-out');
+        $('#upload, h1, h3').addClass('fade-out ');
         filepicker.setKey('A3UuvGmumRN273ixbsJnVz');
         var pickerOptions = {
             extension: ['.pdf', '.ppt', '.pptx'],