Merge branch 'master' of https://github.com/jlantunez/webslides

README.md

@@ -1,14 +1,14 @@
 # WebSlides = Good Karma
 Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos). 
 
-A new release every 8th day of the month. Version 0.1 (Jan 8, 2017).
+A new release (at least) every 8th day of the month. Version 0.1: Jan 8, 2017.
 
 ### Why WebSlides?
 Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
 
 ### Features
 
-- Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe.
+- Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
 - Slide counter.
 - Permalinks: go to a specific slide.
 - Simple CSS alignments. Put content wherever you want (vertical centering...)

demos/index.html

@@ -92,7 +92,7 @@
     </header>
 
     <main role="main">
-      <article>  <!-- Slideshow? id="webslides" -->
+      <article id="webslides" class="vertical">
 
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
@@ -107,7 +107,7 @@
             <h1><strong>WebSlides Demos</strong></h1>
             <p class="text-intro">All of these presentations are free and responsive.<br>
               40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
-            <p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
+            <p>Share your slides using <a target="_blank" href="https://twitter.com/search?f=tweets&q=%23webslides&src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -225,6 +225,10 @@
     <!-- jQuery (required for slides to work) -->
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
     <script src="../static/js/webslides.js"></script>
+    
+    <script type="text/javascript">
+      var slide = jQuery('#webslides').webslides();
+    </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>

static/css/base.css

@@ -2904,34 +2904,19 @@ input[type="checkbox"] {
   height: auto;
   padding: 4px;
 }
-
-button {
-  width: auto;
-}
-
-button[type="submit"] {
+button[type="submit"],textarea {
   width: 100%;
 }
-
-/*input:hover, textarea:hover, select:hover {
--webkit-transform: translateY(-.2rem);
-transform: translateY(-.2rem);
-}*/
-
-input:focus,
-textarea:focus,
-select:focus {
-  border-width: 1px;
-}
-
 textarea {
   padding: .7rem;
 }
 
 button {
+  width: auto;
   text-align: center;
   cursor: pointer;
 }
+
 .button {
   display: inline-block;
   line-height: 4.8rem;
@@ -2984,6 +2969,12 @@ legend {
   letter-spacing:.1rem;
   font-weight: 400;
 }
+/*=== Focus === */
+input:focus,
+textarea:focus,
+select:focus {
+  border-width: 1px;
+}
 
 /*=== App Store Badges === */
 /* Change width and height: 216x64px, 162x48px, 135x40... */