sliding top menu
This commit is contained in:
Open-Steps.org
parent
057a63d15e
commit
7dcbe77c2d
24 changed files with 918 additions and 123 deletions
|
|
@ -4,28 +4,18 @@
|
|||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-5 col-md-offset-3">
|
||||
<h4>{{ site.title }}</h4>
|
||||
<p>{{ site.description }}</p>
|
||||
<div class="col-md-7 col-md-offset-3">
|
||||
<div class="footer-social">
|
||||
<ul>
|
||||
<li><a class="button hvr-sweep-to-top" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
|
||||
<li><a class="button hvr-sweep-to-top" href="{{ "/feed.xml" | prepend: site.baseurl }}">RSS</a></li>
|
||||
<li><a class="button hvr-sweep-to-top" href="{{site.facebook_link}}">Facebook</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<h4>Supported by</h4>
|
||||
<div class="footer-supporters">
|
||||
<ul>
|
||||
<li><h4>Support from</h4></li>
|
||||
<li><a href="http://pankeculture.com" target="_blank"><img src="/assets/panke_logo.png"></img></a></li>
|
||||
<li><a href="http://pankeculture.com" target="_blank"><img src="/assets/troika_logo.png"></img></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
<script src="/bower_components/vegas/dist/jquery.vegas.min.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript" src="/js/custom.js"></script>
|
||||
<script type="text/javascript" src="/js/jquery.blImageCenter.js"></script>
|
||||
<script type="text/javascript" src="/js/scrollit.js-master/scrollit.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
|
@ -35,9 +37,9 @@
|
|||
});
|
||||
});
|
||||
|
||||
$( document ).ready(function() {
|
||||
$('.artist-media').imagefill();
|
||||
});
|
||||
// $( document ).ready(function() {
|
||||
$('.artist_media').centerImage('inside');
|
||||
// });
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,12 @@
|
|||
<div class="">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Jump to session<span class="caret"></span></a>
|
||||
<a href="#" class="navigator-toggle button hvr-sweep-to-top">More</a>
|
||||
<!-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Jump to session<span class="caret"></span></a> -->
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
{% for post in site.posts %}
|
||||
<li><a href="{{post.url}}">{{post.title}} / {{post.date_text}}</a></li>
|
||||
{% assign pos = 39 | minus: post.number %}
|
||||
<li><a data-scroll-nav="{{pos}}">#{{post.number}}: {{post.topics}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -24,9 +26,30 @@
|
|||
<li><a class="button hvr-sweep-to-top" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li><a href="#" data-scroll-nav="0" class="button hvr-sweep-to-top">TOP</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid navigator">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<h4>Browse by content</h4>
|
||||
|
||||
{% for post in site.posts %}
|
||||
{% assign pos = 39 | minus: post.number %}
|
||||
{% for topic in post.topics | split:"," %}
|
||||
<a class="button hvr-sweep-to-top" data-scroll-nav="{{pos}}">{{topic}}</a>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>Upcoming session</h4>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@ layout: default
|
|||
|
||||
<div class="talk col-md-{{col_width}}">
|
||||
|
||||
<div class="artist-media">
|
||||
<div class="artist_media">
|
||||
{% if {{talk.media_artist_url}} %}
|
||||
<img src={{talk.media_artist_url}}></img>
|
||||
<img class="artist_media" src={{talk.media_artist_url}}></img>
|
||||
{% else %}
|
||||
<img class="artist_media" src="/assets/no_artist_media.png"></img>
|
||||
{% endif %}
|
||||
|
|
|
|||
43
about.html
43
about.html
|
|
@ -17,22 +17,39 @@ permalink: /about/
|
|||
|
||||
<div class="about dark_bg col-md-7">
|
||||
|
||||
<p>Scope is a monthly event happening every 2nd thursday a month in Berlin/DE.
|
||||
Scope is an artist-run initiative without financial benefits.
|
||||
Entrance is based on donations.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>{{ site.title }}</h5>
|
||||
<p>{{ site.description }}</p>
|
||||
|
||||
<P>Doors open from 19:00 Uhr / 7pm
|
||||
Programme starting 20:00 Uhr / 8pm</p>
|
||||
<p>Doors open from 7pm - Programme starting 8pm</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>How to find us</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<h5>How to find us</h5>
|
||||
|
||||
<p>S-Bahn: S41/S42 (Ring) Wedding
|
||||
U-Bahn: U6 Wedding, U8 Gesundbrunnen
|
||||
Bus: M27 Wedding</p>
|
||||
<p>S-Bahn: S41/S42 (Ring) Wedding
|
||||
U-Bahn: U6 Wedding, U8 Gesundbrunnen
|
||||
Bus: M27 Wedding</p>
|
||||
|
||||
<p>Panke e.V.
|
||||
Gerichtstr. 23, Hof 5
|
||||
13347 Berlin Wedding</p>
|
||||
<p>Panke e.V.
|
||||
Gerichtstr. 23, Hof 5
|
||||
13347 Berlin Wedding</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<h5>Supported by</h5>
|
||||
<div class="supporters">
|
||||
<p>Thanks <a class="button hvr-sweep-to-top" href="http://pankeculture.com"target="_blank">Panke</a> and <a class="button hvr-sweep-to-top" href="http://www.troikaranch.org/"target="_blank">Troika Ranch</a> for the valuable support</p>
|
||||
<ul>
|
||||
<li><a href="http://pankeculture.com" target="_blank"><img src="/assets/panke_logo.png"></img></a></li>
|
||||
<li><a href="http://www.troikaranch.org/" target="_blank"><img src="/assets/troika_logo.png"></img></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Team</h5>
|
||||
|
||||
|
|
@ -53,7 +70,7 @@ permalink: /about/
|
|||
|
||||
<li><p><a class="button hvr-sweep-to-top" target="_blank" href="http://alexcorbi.com">Alex Corbi aka Axel Orbit</a></br>programming, app development</p></li>
|
||||
|
||||
<li><p><a class="button hvr-sweep-to-top" target="_blank" href="http://aude-f.com/">Aude François aka Auderose</a></br>projection services, event management</p></li>
|
||||
<li><p><a class="button hvr-sweep-to-top" target="_blank" href="http://aude-f.com/">Aude François aka Auderose</a></br>video, performance, photography</p></li>
|
||||
|
||||
<li><p><a class="button hvr-sweep-to-top" target="_blank" href="http://kiritanflux.de/">Tobias Last aka Kiritan Flux</a></br>visualist, media artist, cultural manager</p></li>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,8 @@ permalink: /artists/
|
|||
<div class="row">
|
||||
|
||||
<div class="page-title col-md-2 col-md-offset-1">
|
||||
|
||||
<h3>{{page.title}}</h3>
|
||||
<a class="highlight button hvr-sweep-to-top" href="/">Back to home</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="about dark_bg col-md-7">
|
||||
|
|
@ -28,9 +26,9 @@ permalink: /artists/
|
|||
|
||||
<div class="dark_bg col-md-3">
|
||||
|
||||
<div class="artist-media">
|
||||
<div class="artist_media">
|
||||
{% if {{talk.media_artist_url}} %}
|
||||
<img src={{talk.media_artist_url}}></img>
|
||||
<img class="artist_media" src={{talk.media_artist_url}}></img>
|
||||
{% else %}
|
||||
<img class="artist_media" src="/assets/no_artist_media.png"></img>
|
||||
{% endif %}
|
||||
|
|
@ -38,7 +36,7 @@ permalink: /artists/
|
|||
|
||||
<div class="talk_detail">
|
||||
<h4>{{talk.artist}}</h4>
|
||||
<p>{{talk.artist_bio}}</p>
|
||||
<!-- <p>{{talk.artist_bio}}</p> -->
|
||||
<a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
/*blue 2098d1
|
||||
lila 9775af*/
|
||||
|
||||
body{
|
||||
color:#fff;
|
||||
font-family: 'Abel', sans-serif;
|
||||
|
|
@ -18,7 +21,7 @@ a:hover{
|
|||
}
|
||||
|
||||
.button{
|
||||
|
||||
|
||||
}
|
||||
|
||||
.navbar-header{
|
||||
|
|
@ -46,6 +49,23 @@ a:hover{
|
|||
color:#000;
|
||||
}
|
||||
|
||||
.navigator{
|
||||
padding:20px;
|
||||
background: #fff;
|
||||
margin-top:40px;
|
||||
border-top: 1px solid #333;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.navigator li{
|
||||
float: left;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.navigator h4{
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.site-header{
|
||||
background:#fff;
|
||||
}
|
||||
|
|
@ -64,7 +84,7 @@ a:hover{
|
|||
}
|
||||
|
||||
.event-date a{
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.event-date p{
|
||||
|
|
@ -84,6 +104,7 @@ a:hover{
|
|||
|
||||
.event-date li{
|
||||
list-style:none;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.artist-media {
|
||||
|
|
@ -92,12 +113,17 @@ a:hover{
|
|||
background: #000;
|
||||
}
|
||||
|
||||
.artist-media img {
|
||||
width: 100%;
|
||||
.artist_media{
|
||||
background: #000;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.artist_media img{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.event{
|
||||
padding:10px;
|
||||
#padding:10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +134,7 @@ a:hover{
|
|||
}
|
||||
|
||||
.dark_bg{
|
||||
padding: 10px;
|
||||
#padding: 10px;
|
||||
background: rgb(0, 0, 0) transparent;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
|
||||
|
|
@ -121,14 +147,14 @@ a:hover{
|
|||
}
|
||||
|
||||
.talk{
|
||||
padding:0px;
|
||||
padding:20px 5px;
|
||||
}
|
||||
|
||||
.talk :hover{
|
||||
}
|
||||
|
||||
.talk_detail{
|
||||
padding:10px;
|
||||
|
||||
}
|
||||
|
||||
.talk_detail h3{
|
||||
|
|
@ -215,6 +241,7 @@ a:hover{
|
|||
|
||||
.footer{
|
||||
margin-top:10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.footer li{
|
||||
|
|
@ -230,10 +257,16 @@ a:hover{
|
|||
padding: 4px;
|
||||
}
|
||||
|
||||
.footer-supporters li img{
|
||||
height: 90px;
|
||||
.supporters li{
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer-social li{
|
||||
|
||||
.supporters li img{
|
||||
height: 60px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.footer-social li img{
|
||||
height:40px;
|
||||
}
|
||||
|
|
|
|||
108
css/hover.css
108
css/hover.css
|
|
@ -1391,7 +1391,7 @@
|
|||
transition-property: color, background-color;
|
||||
}
|
||||
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
|
||||
background-color: #2098d1;
|
||||
background-color: #9775af;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -1419,7 +1419,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 0 50%;
|
||||
|
|
@ -1463,7 +1463,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
|
|
@ -1507,7 +1507,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: 50% 0;
|
||||
|
|
@ -1551,7 +1551,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
|
|
@ -1595,7 +1595,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 0 50%;
|
||||
|
|
@ -1641,7 +1641,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
|
|
@ -1687,7 +1687,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: 50% 0;
|
||||
|
|
@ -1733,7 +1733,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
|
|
@ -1781,7 +1781,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
border-radius: 100%;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
|
|
@ -1812,7 +1812,7 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -1856,7 +1856,7 @@
|
|||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: relative;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -1913,7 +1913,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transition-property: transform;
|
||||
|
|
@ -1942,7 +1942,7 @@
|
|||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: relative;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -2001,7 +2001,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 50%;
|
||||
|
|
@ -2032,7 +2032,7 @@
|
|||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: relative;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -2091,7 +2091,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: 50%;
|
||||
|
|
@ -2130,7 +2130,7 @@
|
|||
/* Hack to improve aliasing on mobile/tablet devices */
|
||||
}
|
||||
.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active {
|
||||
box-shadow: inset 0 0 0 4px #2098d1, 0 0 1px rgba(0, 0, 0, 0);
|
||||
box-shadow: inset 0 0 0 4px #9775af, 0 0 1px rgba(0, 0, 0, 0);
|
||||
/* Hack to improve aliasing on mobile/tablet devices */
|
||||
}
|
||||
|
||||
|
|
@ -2388,7 +2388,7 @@
|
|||
left: 0;
|
||||
right: 100%;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transition-property: right;
|
||||
transition-property: right;
|
||||
|
|
@ -2421,7 +2421,7 @@
|
|||
left: 50%;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transition-property: left, right;
|
||||
transition-property: left, right;
|
||||
|
|
@ -2455,7 +2455,7 @@
|
|||
left: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transition-property: left;
|
||||
transition-property: left;
|
||||
|
|
@ -2488,7 +2488,7 @@
|
|||
left: 0;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transition-property: right;
|
||||
transition-property: right;
|
||||
|
|
@ -2521,7 +2521,7 @@
|
|||
left: 50%;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transition-property: left, right;
|
||||
transition-property: left, right;
|
||||
|
|
@ -2555,7 +2555,7 @@
|
|||
left: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transition-property: left;
|
||||
transition-property: left;
|
||||
|
|
@ -2589,7 +2589,7 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-color: #2098d1;
|
||||
border-color: #9775af;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
-webkit-transition-property: border-width;
|
||||
|
|
@ -2625,7 +2625,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
|
|
@ -2661,7 +2661,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #2098d1;
|
||||
background: #9775af;
|
||||
height: 4px;
|
||||
-webkit-transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
|
|
@ -3171,7 +3171,7 @@
|
|||
position: absolute;
|
||||
left: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
|
|
@ -3206,7 +3206,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
|
|
@ -3270,7 +3270,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -3332,7 +3332,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -3363,7 +3363,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transition-duration: 1s;
|
||||
transition-duration: 1s;
|
||||
-webkit-transition-property: transform;
|
||||
|
|
@ -3430,7 +3430,7 @@
|
|||
right: 1em;
|
||||
opacity: 1;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -3470,7 +3470,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.5s;
|
||||
|
|
@ -3525,7 +3525,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
}
|
||||
.hvr-icon-float-away:after {
|
||||
opacity: 0;
|
||||
|
|
@ -3584,7 +3584,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -3622,7 +3622,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3657,7 +3657,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3714,7 +3714,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
|
|
@ -3763,7 +3763,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
|
|
@ -3814,7 +3814,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
|
|
@ -3867,7 +3867,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3922,7 +3922,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3963,7 +3963,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -4000,7 +4000,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -4035,7 +4035,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -4070,7 +4070,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -4105,7 +4105,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -4188,7 +4188,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -4277,7 +4277,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -4382,7 +4382,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -4481,7 +4481,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -4540,7 +4540,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -4679,7 +4679,7 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
font-family: 'Abel', sans-serif;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
|
|||
16
index.html
16
index.html
|
|
@ -3,9 +3,11 @@ layout: default
|
|||
---
|
||||
<div class="content container-fluid">
|
||||
|
||||
{% for post in paginator.posts %}
|
||||
{% for post in site.posts %}
|
||||
|
||||
<div class="row">
|
||||
{% assign pos = 39 | minus: post.number %}
|
||||
|
||||
<div data-scroll-index="{{pos}}" class="row">
|
||||
|
||||
<div class="event-date col-md-2 col-md-offset-1">
|
||||
|
||||
|
|
@ -38,11 +40,11 @@ layout: default
|
|||
|
||||
<div class="talk col-md-{{col_width}}">
|
||||
|
||||
<div class="artist-media">
|
||||
<div class="artist_media">
|
||||
{% if {{talk.media_artist_url}} %}
|
||||
<img src={{talk.media_artist_url}}></img>
|
||||
<img src={{talk.media_artist_url}}></img>
|
||||
{% else %}
|
||||
<img class="artist_media" src="/assets/no_artist_media.png"></img>
|
||||
<img src="/assets/no_artist_media.png"></img>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
@ -72,7 +74,7 @@ layout: default
|
|||
|
||||
{% endfor %}
|
||||
|
||||
<div class="row">
|
||||
<!-- <div class="row">
|
||||
|
||||
<div class="nav_bottom dark_bg col-md-3 col-md-offset-3">
|
||||
{% if paginator.previous_page_path %}
|
||||
|
|
@ -84,7 +86,7 @@ layout: default
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
34
js/custom.js
34
js/custom.js
|
|
@ -1,20 +1,28 @@
|
|||
var scrolling = false;
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
var currentEvent = "038";
|
||||
$(function(){
|
||||
$.scrollIt();
|
||||
});
|
||||
|
||||
$('.event-'+currentEvent).show();
|
||||
|
||||
$('.event-selector li').on("mouseover",function(){
|
||||
$(this).attr("text-size","40px");
|
||||
});
|
||||
|
||||
$('.event-selector li').on("click",function(){
|
||||
var number = $(this).text();
|
||||
console.log(number);
|
||||
});
|
||||
|
||||
function loadEvent(eventNumber){
|
||||
|
||||
$(".navigator-toggle").click(function() {
|
||||
if (!scrolling){
|
||||
scrolling = true;
|
||||
$(".navigator").slideDown( "slow", function() {
|
||||
scrolling = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(".navbar").mouseover(function() {
|
||||
if (!scrolling){
|
||||
scrolling = true;
|
||||
$('.navigator').slideUp( "slow", function() {
|
||||
scrolling = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
106
js/jquery.blImageCenter.js
Executable file
106
js/jquery.blImageCenter.js
Executable file
|
|
@ -0,0 +1,106 @@
|
|||
/**
|
||||
* bl-jquery-image-center jQuery Plugin
|
||||
*
|
||||
* @copyright Boxlight Media Ltd. 2012
|
||||
* @license MIT License
|
||||
* @description Centers an image by moving, cropping and filling spaces inside it's parent container. Call
|
||||
* this on a set of images to have them fill their parent whilst maintaining aspect ratio
|
||||
* @author Robert Cambridge
|
||||
*
|
||||
* Usage: See documentation at http://boxlight.github.com/bl-jquery-image-center
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.centerImage = function(method, callback) {
|
||||
callback = callback || function() {};
|
||||
var els = this;
|
||||
var remaining = $(this).length;
|
||||
method = method == 'inside';
|
||||
|
||||
// execute this on an individual image element once it's loaded
|
||||
var fn = function(img) {
|
||||
var $img = $(img);
|
||||
var $div = $img.parent();
|
||||
// parent CSS should be in stylesheet, but to reinforce:
|
||||
$div.css({
|
||||
overflow: 'hidden',
|
||||
position: $div.css('position') == 'absolute' ? 'absolute' : 'relative'
|
||||
});
|
||||
|
||||
// temporarily set the image size naturally so we can get the aspect ratio
|
||||
$img.css({
|
||||
'position': 'static',
|
||||
'width': 'auto',
|
||||
'height': 'auto',
|
||||
'max-width': '100%',
|
||||
'max-height': '100%'
|
||||
});
|
||||
|
||||
// now resize
|
||||
var div = { w: $div.width(), h: $div.height(), r: $div.width() / $div.height() };
|
||||
var img = { w: $img.width(), h: $img.height(), r: $img.width() / $img.height() };
|
||||
$img.css({
|
||||
'max-width': 'none',
|
||||
'max-height': 'none',
|
||||
'width': Math.round((div.r > img.r) ^ method ? '100%' : div.h / img.h * img.w),
|
||||
'height': Math.round((div.r < img.r) ^ method ? '100%' : div.w / img.w * img.h)
|
||||
});
|
||||
|
||||
// now center - but portrait images need to be centered slightly above halfway (33%)
|
||||
var div = { w: $div.width(), h: $div.height() };
|
||||
var img = { w: $img.width(), h: $img.height() };
|
||||
$img.css({
|
||||
'position': 'absolute',
|
||||
'left': Math.round((div.w - img.w) / 2),
|
||||
'top': Math.round((div.h - img.h) / 3)
|
||||
});
|
||||
|
||||
callbackWrapped(img)
|
||||
};
|
||||
|
||||
var callbackWrapped = function(img) {
|
||||
remaining--;
|
||||
callback.apply(els, [ img, remaining ]);
|
||||
};
|
||||
|
||||
// iterate through elements
|
||||
return els.each(function(i) {
|
||||
if (this.complete || this.readyState === 'complete') {
|
||||
// loaded already? run fn
|
||||
// when binding, we can tell whether image loaded or not.
|
||||
// not if it's already failed though :(
|
||||
(function(el) {
|
||||
// use setTimeout to prevent browser locking up
|
||||
setTimeout(function() { fn(el) }, 1);
|
||||
})(this);
|
||||
} else {
|
||||
// not loaded? bind to load
|
||||
(function(el) {
|
||||
$(el)
|
||||
.one('load', function() {
|
||||
// use setTimeout to prevent browser locking up
|
||||
setTimeout(function() {
|
||||
fn(el);
|
||||
}, 1);
|
||||
})
|
||||
.one('error', function() {
|
||||
// the image did not load
|
||||
callbackWrapped(el)
|
||||
})
|
||||
.end();
|
||||
|
||||
// IE9/10 won't always trigger the load event. fix it.
|
||||
if (navigator.userAgent.indexOf("Trident/5") >= 0 || navigator.userAgent.indexOf("Trident/6")) {
|
||||
el.src = el.src;
|
||||
}
|
||||
})(this);
|
||||
}
|
||||
});
|
||||
};
|
||||
// Alias functions which often better describe the use case
|
||||
$.fn.imageCenterResize = function(callback) {
|
||||
return $(this).centerImage('inside', callback);
|
||||
};
|
||||
$.fn.imageCropFill = function(callback) {
|
||||
return $(this).centerImage('outside', callback);
|
||||
};
|
||||
})(jQuery);
|
||||
3
js/scrollIt.js-master/.gitignore
vendored
Executable file
3
js/scrollIt.js-master/.gitignore
vendored
Executable file
|
|
@ -0,0 +1,3 @@
|
|||
*.swp
|
||||
*.sassc
|
||||
.DS_Store
|
||||
5
js/scrollIt.js-master/AUTHORS.txt
Executable file
5
js/scrollIt.js-master/AUTHORS.txt
Executable file
|
|
@ -0,0 +1,5 @@
|
|||
Authors ordered by first contribution
|
||||
|
||||
Chris Polis <cmpolis@gmail.com>
|
||||
Adam Merrifield <macagp@gmail.com>
|
||||
Frank S
|
||||
22
js/scrollIt.js-master/LICENSE.txt
Executable file
22
js/scrollIt.js-master/LICENSE.txt
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Chris Polis
|
||||
https://github.com/cmpolis/scrollIt.js/blob/master/AUTHORS.txt
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
67
js/scrollIt.js-master/README.md
Executable file
67
js/scrollIt.js-master/README.md
Executable file
|
|
@ -0,0 +1,67 @@
|
|||
### [Demo and more information](http://bytemuse.com/scrollIt.js)
|
||||
|
||||
## About
|
||||
ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages. This is why it rocks:
|
||||
|
||||
- **Easy to implement:** One JS call, just put data- attributes on the DOM
|
||||
- **Lightweight:** ~1kb minified
|
||||
- **Active Class:** Your navigation is updated automatically
|
||||
- **Configurable:** Set the animation easing, duration, callbacks and more
|
||||
- **Keyboard Navigation:** Press the up and down keys to move...
|
||||
|
||||
## Usage
|
||||
|
||||
1. Include jQuery and scrollIt.js
|
||||
```html
|
||||
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
|
||||
<script src="scrollIt.js" type="text/javascript"></script>
|
||||
```
|
||||
|
||||
2. Put a data-scroll-index attribute on each section
|
||||
```html
|
||||
<div data-scroll-index="0">..content..</div>
|
||||
<div data-scroll-index="1">...</div>
|
||||
<div data-scroll-index="2">...</div>
|
||||
```
|
||||
|
||||
3. Put corresponding data-scroll-nav attributes on each nav
|
||||
```html
|
||||
<a data-scroll-nav="0">About</a>
|
||||
<a data-scroll-nav="1">Usage</a>
|
||||
<a data-scroll-nav="2">Options</a>
|
||||
```
|
||||
|
||||
4. For links to sections, put on a data-scroll-goto attribute
|
||||
```html
|
||||
<a data-scroll-goto="0">Back to top</a>
|
||||
```
|
||||
|
||||
5. Call scrollIt()
|
||||
```JavaScript
|
||||
$(function(){
|
||||
$.scrollIt();
|
||||
});
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
To customize scrollIt.js, simply pass in an options object: (defaults shown)
|
||||
|
||||
```JavaScript
|
||||
$.scrollIt({
|
||||
upKey: 38, // key code to navigate to the next section
|
||||
downKey: 40, // key code to navigate to the previous section
|
||||
easing: 'linear', // the easing function for animation
|
||||
scrollTime: 600, // how long (in ms) the animation takes
|
||||
activeClass: 'active', // class given to the active nav element
|
||||
onPageChange: null, // function(pageIndex) that is called when page is changed
|
||||
topOffset: 0 // offste (in px) for fixed top navigation
|
||||
});
|
||||
```
|
||||
|
||||
## Credit
|
||||
Created by [@ChrisPolis](http://twitter.com/chrispolis), *[blog](http://bytemuse.com)*
|
||||
|
||||
Feel free to use, share and fork.
|
||||
|
||||
Enjoy!
|
||||
42
js/scrollIt.js-master/ScrollIt.jquery.json
Executable file
42
js/scrollIt.js-master/ScrollIt.jquery.json
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "ScrollIt",
|
||||
"title": "ScrollIt",
|
||||
"description": "ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages.",
|
||||
"keywords": [
|
||||
"page",
|
||||
"scroll",
|
||||
"navigation",
|
||||
"keydown",
|
||||
"keyboard"
|
||||
],
|
||||
"version": "1.0.3",
|
||||
"author": {
|
||||
"name": "Chris Polis, Adam Merrifield and Frank S",
|
||||
"url": "https://github.com/cmpolis/scrollIt.js/blob/master/AUTHORS.txt"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Chris Polis",
|
||||
"email": "cmpolis@gmail.com",
|
||||
"url": "http://ByteMuse.com"
|
||||
},
|
||||
{
|
||||
"name": "Adam Merrifield",
|
||||
"email": "macagp@gmail.com",
|
||||
"url": "http://adam.merrifield.ca"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/cmpolis/scrollIt.js/blob/master/LICENSE.txt"
|
||||
}
|
||||
],
|
||||
"bugs": "https://github.com/cmpolis/scrollIt.js/issues",
|
||||
"homepage": "https://github.com/cmpolis/scrollIt.js",
|
||||
"docs": "https://github.com/cmpolis/scrollIt.js",
|
||||
"download": "https://github.com/cmpolis/scrollIt.js/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
}
|
||||
}
|
||||
8
js/scrollIt.js-master/bower.json
Executable file
8
js/scrollIt.js-master/bower.json
Executable file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "ScrollIt",
|
||||
"version": "1.0.0",
|
||||
"main": "./scrollIt.js",
|
||||
"dependencies": {
|
||||
"jquery": "~1.10.2"
|
||||
}
|
||||
}
|
||||
71
js/scrollIt.js-master/demo/index.haml
Executable file
71
js/scrollIt.js-master/demo/index.haml
Executable file
|
|
@ -0,0 +1,71 @@
|
|||
!!!
|
||||
%html(xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en')
|
||||
%head
|
||||
%title ScrollIt.js - easy vertical scrolling
|
||||
%script(type='text/javascript' src='jquery-1.10.2.min.js')
|
||||
%script(type='text/javascript' src='../scrollIt.min.js')
|
||||
%link(href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css')
|
||||
%link(rel='stylesheet' href='style.css')
|
||||
%script $(function() { $.scrollIt(); });
|
||||
%body
|
||||
.nav-container
|
||||
%nav
|
||||
%ul
|
||||
%li
|
||||
%a.active(data-scroll-nav='0') About
|
||||
%li
|
||||
%a(data-scroll-nav='1') Usage
|
||||
%li
|
||||
%a(data-scroll-nav='2') Options
|
||||
%li
|
||||
%a(data-scroll-nav='3') Credit
|
||||
|
||||
%section(data-scroll-index='0')
|
||||
.content
|
||||
%h1 ScrollIt.js
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="ScrollIt.js - easy vertical scrolling" data-via="ChrisPolis">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
%h2 About
|
||||
%p ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a>
|
||||
%h4 This is why it rocks:
|
||||
%ul.why-list
|
||||
%li <b>Easy to implement:</b> One JS call, just put data- attributes on the DOM
|
||||
%li <b>Lightweight:</b> ~1kb minified
|
||||
%li <b>Active Class:</b> Your navigation is updated automatically
|
||||
%li <b>Configurable:</b> Set the animation easing, duration, callbacks and more
|
||||
%li <b>Keyboard Navigation:</b> Press the up and down keys to move...
|
||||
%section(data-scroll-index='1')
|
||||
.content
|
||||
%h2 Usage
|
||||
%p
|
||||
1) Include jQuery and scrollIt.js
|
||||
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
||||
%p
|
||||
2) Put a <i>data-scroll-index</i> attribute on each section
|
||||
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
||||
%p
|
||||
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
||||
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
||||
%p
|
||||
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
||||
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
||||
|
||||
%p
|
||||
5) Call <i>scrollIt()</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
||||
%p <i>View the source of this page for an example</i>
|
||||
%section(data-scroll-index='2')
|
||||
.content
|
||||
%h2 Options
|
||||
%p To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
||||
%section(data-scroll-index='3')
|
||||
.content
|
||||
%h2 Credit
|
||||
%p ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.
|
||||
%p Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a>
|
||||
|
||||
%p Enjoy!
|
||||
%p.bottom-link
|
||||
%a(data-scroll-goto='0') Back to top
|
||||
93
js/scrollIt.js-master/demo/index.html
Executable file
93
js/scrollIt.js-master/demo/index.html
Executable file
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<title>ScrollIt.js by @ChrisPolis</title>
|
||||
<script src='jquery-1.10.2.min.js' type='text/javascript'></script>
|
||||
<script src='../scrollIt.min.js' type='text/javascript'></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
|
||||
<link href='style.css' rel='stylesheet'>
|
||||
<script>$(function() { $.scrollIt(); });</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class='nav-container'>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a class='active' data-scroll-nav='0'>About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='1'>Usage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='2'>Options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='3'>Credit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<section data-scroll-index='0'>
|
||||
<div class='content'>
|
||||
<h1>ScrollIt.js</h1>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out this jQuery plugin - ScrollIt.js" data-via="ChrisPolis">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
<h2>About</h2>
|
||||
<p>ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a></p>
|
||||
<h4>This is why it rocks:</h4>
|
||||
<ul class='why-list'>
|
||||
<li><b>Easy to implement:</b> One JS call, just put data- attributes on the DOM</li>
|
||||
<li><b>Lightweight:</b> ~1kb minified</li>
|
||||
<li><b>Active Class:</b> Your navigation is updated automatically</li>
|
||||
<li><b>Configurable:</b> Set the animation easing, duration, callbacks and more</li>
|
||||
<li><b>Keyboard Navigation:</b> Press the up and down keys to move...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='1'>
|
||||
<div class='content'>
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
1) Include jQuery and scrollIt.js
|
||||
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
2) Put a <i>data-scroll-index</i> attribute on each section
|
||||
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
||||
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
||||
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
5) Call <i>scrollIt()</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
||||
</p>
|
||||
<p><i>View the source of this page for an example</i></p>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='2'>
|
||||
<div class='content'>
|
||||
<h2>Options</h2>
|
||||
<p>To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i></p>
|
||||
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='3'>
|
||||
<div class='content'>
|
||||
<h2>Credit</h2>
|
||||
<p>ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.</p>
|
||||
<p>Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a></p>
|
||||
<p>Enjoy!</p>
|
||||
<p class='bottom-link'>
|
||||
<a data-scroll-goto='0'>Back to top</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
6
js/scrollIt.js-master/demo/jquery-1.10.2.min.js
vendored
Executable file
6
js/scrollIt.js-master/demo/jquery-1.10.2.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
87
js/scrollIt.js-master/demo/style.css
Executable file
87
js/scrollIt.js-master/demo/style.css
Executable file
|
|
@ -0,0 +1,87 @@
|
|||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Open Sans", sans-serif; }
|
||||
|
||||
h1, h2, h4, nav li a {
|
||||
font-family: "Headland One", Georgia, serif; }
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 10px;
|
||||
color: #002e40; }
|
||||
|
||||
h2 {
|
||||
margin-top: 80px;
|
||||
font-size: 28px; }
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.why-list {
|
||||
margin-top: 0px; }
|
||||
.why-list li {
|
||||
line-height: 28px; }
|
||||
|
||||
a {
|
||||
cursor: pointer; }
|
||||
|
||||
ul {
|
||||
list-style: none; }
|
||||
|
||||
.nav-container {
|
||||
background-color: #002e40;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0px; }
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
width: 640px;
|
||||
margin: 0px auto; }
|
||||
nav ul {
|
||||
padding: 0px; }
|
||||
nav li {
|
||||
width: 24%;
|
||||
display: inline-block; }
|
||||
nav li a {
|
||||
font-size: 15px;
|
||||
color: white; }
|
||||
nav li a.active {
|
||||
color: #aaaaaa; }
|
||||
@media screen and (max-width: 640px) {
|
||||
nav {
|
||||
width: 90%; }
|
||||
nav li a {
|
||||
font-size: 18px; } }
|
||||
|
||||
section {
|
||||
padding-top: 40px;
|
||||
height: 1200px;
|
||||
width: 100%; }
|
||||
section .content {
|
||||
margin: 0px auto;
|
||||
max-width: 640px; }
|
||||
@media screen and (max-width: 640px) {
|
||||
section .content {
|
||||
width: 90%; } }
|
||||
section .content a {
|
||||
color: #002e40; }
|
||||
|
||||
section:nth-child(odd) {
|
||||
background-color: #002e40;
|
||||
color: white; }
|
||||
section:nth-child(odd) a {
|
||||
color: white; }
|
||||
|
||||
.bottom-link {
|
||||
margin-top: 80px;
|
||||
font-style: italic; }
|
||||
|
||||
.gist-meta {
|
||||
display: none; }
|
||||
|
||||
.file-data {
|
||||
font-size: 14px; }
|
||||
82
js/scrollIt.js-master/demo/style.sass
Executable file
82
js/scrollIt.js-master/demo/style.sass
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
$pageWidth: 640px
|
||||
$responsiveWidth: 90%
|
||||
$primary: #fff
|
||||
$secondary: #002E40
|
||||
|
||||
body
|
||||
padding: 0px
|
||||
margin: 0px
|
||||
font-family: 'Open Sans', sans-serif
|
||||
|
||||
h1, h2, h4, nav li a
|
||||
font-family: 'Headland One', Georgia, serif
|
||||
h1
|
||||
font-size: 48px
|
||||
margin-top: 80px
|
||||
margin-bottom: 10px
|
||||
color: $secondary
|
||||
h2
|
||||
margin-top: 80px
|
||||
font-size: 28px
|
||||
h4
|
||||
font-size: 20px
|
||||
margin-bottom: 10px
|
||||
.why-list
|
||||
margin-top: 0px
|
||||
li
|
||||
line-height: 28px
|
||||
a
|
||||
cursor: pointer
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
.nav-container
|
||||
background-color: $secondary
|
||||
width: 100%
|
||||
position: fixed
|
||||
left: 0px
|
||||
nav
|
||||
text-align: center
|
||||
width: $pageWidth
|
||||
margin: 0px auto
|
||||
ul
|
||||
padding: 0px
|
||||
li
|
||||
width: 24%
|
||||
display: inline-block
|
||||
a
|
||||
font-size: 15px
|
||||
color: $primary
|
||||
a.active
|
||||
color: #aaa
|
||||
@media screen and (max-width: $pageWidth)
|
||||
width: $responsiveWidth
|
||||
li
|
||||
a
|
||||
font-size: 18px
|
||||
|
||||
section
|
||||
padding-top: 40px
|
||||
height: 1200px
|
||||
width: 100%
|
||||
.content
|
||||
margin: 0px auto
|
||||
max-width: $pageWidth
|
||||
@media screen and (max-width: $pageWidth)
|
||||
width: $responsiveWidth
|
||||
a
|
||||
color: $secondary
|
||||
section:nth-child(odd)
|
||||
background-color: $secondary
|
||||
color: $primary
|
||||
a
|
||||
color: $primary
|
||||
|
||||
.bottom-link
|
||||
margin-top: 80px
|
||||
font-style: italic
|
||||
|
||||
.gist-meta
|
||||
display: none
|
||||
.file-data
|
||||
font-size: 14px
|
||||
129
js/scrollIt.js-master/scrollIt.js
Executable file
129
js/scrollIt.js-master/scrollIt.js
Executable file
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* ScrollIt
|
||||
* ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages.
|
||||
*
|
||||
* Latest version: https://github.com/cmpolis/scrollIt.js
|
||||
*
|
||||
* License <https://github.com/cmpolis/scrollIt.js/blob/master/LICENSE.txt>
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var pluginName = 'ScrollIt',
|
||||
pluginVersion = '1.0.3';
|
||||
|
||||
/*
|
||||
* OPTIONS
|
||||
*/
|
||||
var defaults = {
|
||||
upKey: 38,
|
||||
downKey: 40,
|
||||
easing: 'linear',
|
||||
scrollTime: 600,
|
||||
activeClass: 'active',
|
||||
onPageChange: null,
|
||||
topOffset : 0
|
||||
};
|
||||
|
||||
$.scrollIt = function(options) {
|
||||
|
||||
/*
|
||||
* DECLARATIONS
|
||||
*/
|
||||
var settings = $.extend(defaults, options),
|
||||
active = 0,
|
||||
lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');
|
||||
|
||||
/*
|
||||
* METHODS
|
||||
*/
|
||||
|
||||
/**
|
||||
* navigate
|
||||
*
|
||||
* sets up navigation animation
|
||||
*/
|
||||
var navigate = function(ndx) {
|
||||
if(ndx < 0 || ndx > lastIndex) return;
|
||||
|
||||
var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
|
||||
$('html,body').animate({
|
||||
scrollTop: targetTop,
|
||||
easing: settings.easing
|
||||
}, settings.scrollTime);
|
||||
};
|
||||
|
||||
/**
|
||||
* doScroll
|
||||
*
|
||||
* runs navigation() when criteria are met
|
||||
*/
|
||||
var doScroll = function (e) {
|
||||
var target = $(e.target).closest("[data-scroll-nav]").attr('data-scroll-nav') ||
|
||||
$(e.target).closest("[data-scroll-goto]").attr('data-scroll-goto');
|
||||
navigate(parseInt(target));
|
||||
};
|
||||
|
||||
/**
|
||||
* keyNavigation
|
||||
*
|
||||
* sets up keyboard navigation behavior
|
||||
*/
|
||||
var keyNavigation = function (e) {
|
||||
var key = e.which;
|
||||
if($('html,body').is(':animated') && (key == settings.upKey || key == settings.downKey)) {
|
||||
return false;
|
||||
}
|
||||
if(key == settings.upKey && active > 0) {
|
||||
navigate(parseInt(active) - 1);
|
||||
return false;
|
||||
} else if(key == settings.downKey && active < lastIndex) {
|
||||
navigate(parseInt(active) + 1);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* updateActive
|
||||
*
|
||||
* sets the currently active item
|
||||
*/
|
||||
var updateActive = function(ndx) {
|
||||
if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);
|
||||
|
||||
active = ndx;
|
||||
$('[data-scroll-nav]').removeClass(settings.activeClass);
|
||||
$('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
|
||||
};
|
||||
|
||||
/**
|
||||
* watchActive
|
||||
*
|
||||
* watches currently active item and updates accordingly
|
||||
*/
|
||||
var watchActive = function() {
|
||||
var winTop = $(window).scrollTop();
|
||||
|
||||
var visible = $('[data-scroll-index]').filter(function(ndx, div) {
|
||||
return winTop >= $(div).offset().top + settings.topOffset &&
|
||||
winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
|
||||
});
|
||||
var newActive = visible.first().attr('data-scroll-index');
|
||||
updateActive(newActive);
|
||||
};
|
||||
|
||||
/*
|
||||
* runs methods
|
||||
*/
|
||||
$(window).on('scroll',watchActive).scroll();
|
||||
|
||||
$(window).on('keydown', keyNavigation);
|
||||
|
||||
$('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
|
||||
e.preventDefault();
|
||||
doScroll(e);
|
||||
});
|
||||
|
||||
};
|
||||
}(jQuery));
|
||||
1
js/scrollIt.js-master/scrollIt.min.js
vendored
Executable file
1
js/scrollIt.js-master/scrollIt.min.js
vendored
Executable file
|
|
@ -0,0 +1 @@
|
|||
(function(e){"use strict";var t="ScrollIt",n="1.0.3";var r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:0};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0||t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)
|
||||
Loading…
Add table
Add a link
Reference in a new issue