mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 21:03:23 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Luis
2017-02-11 17:01:15 +01:00
parent 4ba677b799 8b44dcf718
commit f6c430a77f
3 changed files with 7 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
demos/components.html
View File

@@ -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 -->
<div id="tab-2" class="tab-content">
<hr>
<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>
<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>
<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>
</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>

75
static/css/base.css
View File

@@ -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
To show the grid/baseline.png, press ENTER key on keyboard == */
/* == Prototype faster - Vertical rhythm == */
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

25
static/css/colors.css
View File

@@ -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
===================================================== */