mawww/kakoune
1
1
Fork 0
mirror of https://github.com/mawww/kakoune.git synced 2024-11-22 22:55:26 +03:00
Code Issues Projects Releases Wiki Activity

Add a carousel with demo clips

Browse Source
This commit is contained in:
Frank LENORMAND 2015-10-10 11:26:20 +03:00
parent b023d50d51
commit 65817e64af
2 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/default.css
View File

@ -57,6 +57,11 @@ a:hover {
background-color: #FAFAFA;
}
#kak-demos {
background-color: #EEE;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15) inset;
}
#footer {
margin-top: 1em;
padding: .5em;
@ -84,6 +89,32 @@ a:hover {
font-weight: bold;
}
#carousel-demos .carousel-inner .item > video {
display: block;
margin: 1em auto;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
#carousel-demos .carousel-control.left,
#carousel-demos .carousel-control.right {
background-image: none;
}
#carousel-demos ul.carousel-indicators,
#carousel-demos ol.carousel-indicators {
margin-bottom: 5%;
}
#carousel-demos ul.carousel-indicators li.active,
#carousel-demos ol.carousel-indicators li.active {
border: none;
border-radius: none;
width: 16px;
height: 16px;
background-image: url(../img/kakoune_logo_32.png);
background-size: cover;
}
.navbar-default {
border-color: #ACACAC;
}
@ -112,6 +143,13 @@ a:hover {
margin-bottom: 1em;
}
.demo-caption {
font-size: 1.1em;
font-style: italic;
text-align: center;
margin-bottom: 1em;
}
.screenshot-title {
font-size: 1.2em;
margin-bottom: .5em;

72
index.html
View File

@ -140,6 +140,75 @@
</div>
</div>
<div class="row-fluid">
<div id="kak-demos" class="col-sm-10 col-sm-offset-1">
<div id="carousel-demos" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel-demos" data-slide-to="0" class="active"></li>
<li data-target="#carousel-demos" data-slide-to="1"></li>
<li data-target="#carousel-demos" data-slide-to="2"></li>
<li data-target="#carousel-demos" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<video autoplay loop>
<source src="video/align.webm" type="video/webm">
Your browser does not support the <code>video</code> element.
</video>
<div class="demo-caption">
Automatically indent symbols, by aligning the cursors of the splitted selections
</div>
</div>
<div class="item">
<video autoplay loop>
<source src="video/gather.webm" type="video/webm">
Your browser does not support the <code>video</code> element.
</video>
<div class="demo-caption">
Predicated selection of text, saved into the internal buffer for further manipulation
</div>
</div>
<div class="item">
<video autoplay loop>
<source src="video/rename.webm" type="video/webm">
Your browser does not support the <code>video</code> element.
</video>
<div class="demo-caption">
Visual and interactive text replace within a selection
</div>
</div>
<div class="item">
<video autoplay loop>
<source src="video/swap.webm" type="video/webm">
Your browser does not support the <code>video</code> element.
</video>
<div class="demo-caption">
Rotation of multiple selections, splitted by a custom delimiter
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-demos" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-demos" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-12">
@ -180,5 +249,8 @@
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>