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

demos/components.html

@@ -319,11 +319,7 @@
         <section>
           <div class="wrap">
             <h1>Navigation</h1>
-            <ul class="tabs">
+
-              <li class="tab current" data-tab="tab-1">ul.tabs</li>
-              <li class="tab" data-tab="tab-2">columns</li>
-            </ul>
-            <div id="tab-1" class="tab-content current">
               <nav role="navigation">
                 <ul>
                   <li><a href="">About</a></li>
@@ -372,9 +368,8 @@
                 </ul>
               </nav>
               <p>nav.navbar</p>
-            </div>
+            
-            <!-- end .tab-content -->
+            <hr>
-            <div id="tab-2" class="tab-content">
               <div class="grid">
                 <div class="column">
                   <h3>Company</h3>
@@ -435,8 +430,6 @@
                 <!-- .end .column -->
               </div>
               <!-- .end .grid -->
-            </div>
-            <!-- end .tab-content -->
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1803,49 +1796,8 @@
         <section class="aligncenter">
           <!--.wrap = container 1200px -->
           <div class="wrap">
-            <div id="tab-3" class="tab-content current">
+            <h1 class="text-landing">Tell a Story</h1>
-              <h1 class="text-landing">Tell a Story</h1>
+            <p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
-              <p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
-            </div>
-            <div id="tab-4" class="tab-content">
-              <ul class="flexblock features">
-                <li>
-                  <div>
-                    <svg class="fa-heart-o">
-                      <use xlink:href="#fa-heart-o"></use>
-                    </svg>
-                    <h2>Indexed content</h2>
-                    Sharing is caring.
-                  </div>
-                </li>
-                <li>
-                  <div>
-                    <h2>
-                      <svg class="fa-magic">
-                        <use xlink:href="#fa-magic"></use>
-                      </svg>
-                      Just essential features
-                    </h2>
-                    Keyboard navigation...
-                  </div>
-                </li>
-                <li>
-                  <div>
-                    <svg class="fa-bolt">
-                      <use xlink:href="#fa-bolt"></use>
-                    </svg>
-                    <h2>
-                      Prototype faster
-                    </h2>
-                    with clean code
-                  </div>
-                </li>
-              </ul>
-            </div>
-            <ul class="tabs">
-              <li class="tab current" data-tab="tab-3">Purpose</li>
-              <li class="tab" data-tab="tab-4">Benefits</li>
-            </ul>
           </div>
         </section>
         <section class="bg-black aligncenter">
@@ -3134,25 +3086,6 @@
     <script defer src="../static/js/svg-icons.js"></script>
     <script type="text/javascript">
       var slide = jQuery('#webslides').webslides();
-
-      jQuery(document).ready(function($){
-        // Tabs
-        jQuery('ul.tabs li').click(function(){
-            var $this = jQuery(this);
-            var tab_id = $this.attr('data-tab');
-            jQuery('ul.tabs li').removeClass('current');
-            jQuery('.tab-content').removeClass('current');
-            $this.addClass('current');
-            jQuery("#"+tab_id).addClass('current');
-        });
-      });
-
-      // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
-      jQuery(document).keypress(function(e) {
-        if(e.which == 13) {
-          jQuery('body').toggleClass('baseline').css('height', $(document).height());
-        }
-      });
     </script>
     
   </body>

static/css/base.css

@@ -25,7 +25,6 @@
 		3.1 Logo
 	4. Navigation 
 		4.1 Navbars
-		4.2 Tabs
 	5. SLIDES (vertically and horizontally centered)
 		5.1 Mini container & Alignment 
 		5.2 Counter / Navigation Slides 
@@ -303,8 +302,7 @@ body {
   overflow-x: hidden;
 }
 
-/* == Prototype faster - Vertical rhythm 
+/* == Prototype faster - Vertical rhythm  == */ 
-To show the grid/baseline.png, press ENTER key on keyboard == */ 
 
 body.baseline {
   background: url(../images/baseline.png) left top .8rem/.8rem;
@@ -1314,77 +1312,6 @@ nav.navbar li a{justify-content:flex-start;
  }
 }
 
-/*=== 4.2. Tabs === */
-
-ul.tabs {
-  display: inline-block;
-  margin-bottom: 3.2rem;
-}
-
-ul.tabs li {
-  position: relative;
-  display: table-cell;
-  /*ftext-transform: uppercase;
-	letter-spacing: .1rem;*/
-  padding: .8rem 2.4rem;
-  cursor: pointer;
-}
-
-.tabs li:before {
-  position: absolute;
-  content: "";
-  display: table;
-  clear: both;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 3px;
-  -webkit-transition: width 200ms ease, opacity 200ms ease;
-  transition: width 200ms ease, opacity 200ms ease;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-}
-
-.tabs li.current:before {
-  opacity: 1;
-  width: 100%;
-}
-
-ul.tabs li.current {
-  font-weight: 600;
-}
-/*.tabs li:after{
-	position: relative;
-	right: -2.8rem;
-	font-size:1.6rem;
-	font-weight:300;
-	content: "*";
-
-}
-.tabs li:last-child:after {
-  display: none;
-}
-
-*/
-
-.tab-content {
-  display: none;
-}
-
-.tab-content.current {
-  display: inherit;
-  -webkit-animation: fadeIn ease-in 1;
-  animation: fadeIn ease-in 1;
-  -webkit-animation-duration: .3s;
-  animation-duration: .3s;
-}
-
-@media (max-width: 400px) {
-  .tabs li {
-    display: block;
-  }
-}
-
 /*============================================
 5. SLIDES (Full Screen)
 Vertically and horizontally centered 

static/css/colors.css

@@ -363,31 +363,6 @@ nav li.email a:hover {
   background: #dd4b39;
 }
 
-
-/*=========================================
-Tabs
-=========================================== */
-
-
-ul.tabs li {
-  border: 1px solid rgba(0, 20, 80, 0.1);
-  border-right: none;
-}
-
-ul.tabs li:last-child {
-  border-right: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-ul.tabs li.current {
-  background: rgba(255, 255, 255, 0.09);
-}
-
-ul.tabs li:before {
-  background-color: #44d;
-}
-
-
-
 /*===================================================
 .flexblock li hover/active
 ===================================================== */