Fixed menu on mobile devices

Added more background pics
Now embedding vimeo players on evetn site

1_callfortalks.html

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Call for talks
+icon: sign-in
 permalink: /call-for-talks/
 ---
 

2_artists.html

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Artists
+icon: user
 permalink: /artists/
 ---
 

3_about.html

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: About
+icon: info
 permalink: /about/
 ---
 

_config.yml

@@ -13,4 +13,4 @@ paginate_path: "page:num/"
 markdown: kramdown
 facebook_link: https://www.facebook.com/scopesessions
 github_link: https://github.com/ScopeSessions
-# gems: [unique_array.rb]
+# gems: [sort_for.rb]

_includes/header.html

@@ -6,32 +6,51 @@
    <a class="navbar-brand" href="/">
     <img alt="Logo" src="/assets/scope_logo.png">
    </a>
-  </div>
 
-  <div>
+   <!-- For desktop -->
-   <ul class="nav navbar-nav navbar-center">
+   <div class="hidden-xs">
+
     {% if page.home == true %}
-    <li><a href="#" class="navigator-toggle"><i class="fa fa-bars"></i> Upcoming session and more</a>
+     <a href="#" class="menu-icon navbar-text left navigator-toggle"><i class="fa fa-bars"></i> Upcoming session and more</a>
-    </li>
     {% else %}
-    <li><a href="/"><i class="fa fa-angle-left"></i> Back</a>
+     <a href="/" class="menu-icon-big navbar-text left"><i class="fa fa-angle-left"></i> Back</a>
-    </li>
     {% endif %}
-   </ul>
+
+    <!-- Up button -->
+    <a class="top-button navbar-text right button hvr-sweep-to-top" data-scroll-nav="1"><i class="fa fa-arrow-up"></i></a>
+
+    <!-- Pages -->
+    {% for page in site.pages %}
+     {% if page.title %}
+      <a class="header-btn navbar-text right button menu-icon hvr-sweep-to-top" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+     {% endif %}
+    {% endfor %}
+
+   </div>
+
+   <!-- For mobile -->
+   <div class="visible-xs-inline">
+
+    {% if page.home == true %}
+     <!-- <a href="#" class="navigator-toggle navbar-btn"><i class="fa fa-bars"></i></a> -->
+    {% else %}
+     <a href="/" class="menu-icon-big navbar-text left "><i class="fa fa-angle-left"></i> Back</a>
+    {% endif %}
+
+    <!-- Up button -->
+    <a class="top-button menu-icon-big navbar-text right" data-scroll-nav="1"><i class="fa fa-arrow-up"></i></a>
+
+    <!-- Pages -->
+    {% assign sorted_pages = (site.pages | sort: 'order') %}
+    {% for page in sorted_pages %}
+     {% if page.title %}
+      <a class="menu-icon-big navbar-text right button hvr-sweep-to-top" href="{{ page.url | prepend: site.baseurl }}"><i class="fa fa-{{ page.icon}}"></i></a>
+     {% endif %}
+    {% endfor %}
+
    </div>
 
-  <!-- Collect the nav links, forms, and other content for toggling -->
-  <div>
-   <ul class="nav navbar-nav navbar-right">
-    {% for page in site.pages %} {% if page.title %}
-    <li><a class="header-btn" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-    </li>
-    {% endif %} {% endfor %}
-    <li><a class="top-button" data-scroll-nav="1">TOP</a>
-    </li>
-   </ul>
   </div>
-  <!-- /.navbar-collapse -->
 
  </div>
 

_layouts/event.html

@@ -64,12 +64,24 @@ layout: default
       {% endif %} {% if talk.artist_bio %}
       <h5>About {{talk.artist}}</h5>
       <p>{{talk.artist_bio}}</p>
-      {% endif %} {% if talk.artist_website || talk.video_artist_url || talk.video_url %} {% if talk.artist_website %}
+      {% endif %}
-      <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a> {% endif %} {% if talk.video_artist_url %}
+      {% if talk.artist_website || talk.video_artist_url || talk.video_url %}
-      <br>
+       {% if talk.artist_website %}
-      <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank">Artist's Video</a> {% endif %} {% if talk.talk_video_url %}
+        <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank"><i class="fa fa-link"></i> Website</a>
-      <br>
+       {% endif %}
-      <a class="button hvr-sweep-to-top" href={{talk.talk_video_url}} target="_blank">Talk's Video</a> {% endif %} {% endif %}
+       {% if talk.video_artist_url %}
+        <p>Artist's Video</p>
+        <iframe src="//player.vimeo.com/video/{{(talk.video_artist_url | split:"/") | last}}" width="100%" height="140" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <!-- <br>
+        <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank">Artist's Video</a> -->
+       {% endif %}
+       {% if talk.talk_video_url %}
+        <p>Talk's Video</p>
+        <iframe src="//player.vimeo.com/video/{{(talk.talk_video_url | split:"/") | last}}" width="100%" height="140" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <!-- <br>
+        <a class="button hvr-sweep-to-top" href={{talk.talk_video_url}} target="_blank">Talk's Video</a>  -->
+       {% endif %}
+      {% endif %}
      </div>
 
     </div>

_posts/2015-03-12-Scope040.markdown

@@ -16,7 +16,7 @@ talks:
   artist_bio: "The Berlin based artists Malte Steiner and Wolfgang Spahn are exploring the artistic potential of embedded open source systems. These small-sized computing platforms gives the possibility to combine a multitude of independent devices to create a more powerful system than most single computers can provide. Based on the idea of free tools for free art, all hard- and software is open source and can be used, modified and improved by all other artists. Instead of using one high tech super computer for multiprojection Spahn and Steiner developed and share a system which allows theoreticaly the connection of thousands of independent embedded platforms for one gigantic multivision show and still keep the costs low by using the cheap mini computer Raspberry Pi, a platform originally designed for eductional purposes."
   description: "In this talk Spahn and Steiner introduce their open source Embedded Artist System and talk about its capabilities, the motivation behind it and the development process."
   artist_website: "http://embeddedartist.dernulleffekt.de/doku.php"
-  media_artist_url: "/images/fetch.php"
+  media_artist_url: "/images/fetch.png"
   video_artist_url: "https://vimeo.com/112580876"
   talk_video_url:
 - title: "The Sea: Art, Technology and Environment"

_posts/2015-03-12-Scope041.markdown

@@ -17,7 +17,7 @@ talks:
   description: "EDMT is an interactive audio visual app designed by media artist Fader. He's combining years of his experience as a visual and software designer into one amazing app. It allows you to 'play' with your phone and tablet to create wonderful visuals and make beautiful sounds. There are several engaging scenes to choose from, where you can explore and discover exciting new audio visual environments. In this presentation Tilman and Fader will show the current work-in-progress version of EDMT App for Android and discuss future plans."
   artist_website: "http://www.vjfader.com/fader-bio/"
   media_artist_url: "/images/EDMT-Nexus_7-mockup-13.png"
-  video_artist_url: "/images/EDMT-Nexus_7-mockup-13.png"
+  video_artist_url: "https://vimeo.com/113488501"
   talk_video_url:
 - title: "Intuitive Journeys"
   topics: "Video,Meditation"

_posts/2015-04-09-Scope042.markdown

@@ -26,7 +26,7 @@ talks:
   artist_bio: "Nenad Popov is a media anarchist with a focus on live cinema pieces, sound installations, film installations, weird sound making contraptions and occasional parasitism on public cultural funds. He has collaborated with artists such as Daan Brinkmann, Electronic Opera, Erfan Abdi, Klara Ravat, Lillevan and his works have been exhibited at Sonic Acts, Dis-Patch, TodaysArt, E-Pulse, Share and Ars Electronica."
   description: "Reflection on the State festival. Inspiration through science. Towards embedding citizen science in artistic practice."
   artist_website: "http://morphogenesis.eu"
-  media_artist_url: "http://www.morphogenesis.eu/nesolito.jpg"
+  media_artist_url: "/images/nesolito.jpg"
   video_artist_url: "https://vimeo.com/35430604"
   talk_video_url:
 - title: "19th century maladies vs. 'the wonders of science' calendar syndrome"

css/custom.css

@@ -25,12 +25,28 @@ a:hover {
 .right{
  float:right;
 }
+.menu-icon{
+ font-size: 20px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+.menu-icon-big{
+ font-size: 24px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
 .top-button {
- display: none;
+ opacity:0.0;
+ -moz-opacity:0.0
+ filter:alpha(opacity=0.0);
  float: right;
+ margin-right: 10px;
 }
 .navbar-header {
- text-align: center;
+ width: 100%;
+ font-size: 20px;
+ margin-left:0px;
+ margin-right:0px;
 }
 .navbar-options {
  padding: 10px;
@@ -158,7 +174,6 @@ a:hover {
  width: 100%;
 }
 .event {
- #padding: 10px;
  margin-bottom: 10px;
 }
 .highlight {
@@ -167,7 +182,6 @@ a:hover {
  padding: 2px 10px;
 }
 .dark_bg {
- #padding: 10px;
  background: rgb(0, 0, 0) transparent;
  background: rgba(0, 0, 0, 0.6);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);

index.html

@@ -66,11 +66,21 @@ home: yes
        <p>{{talk.description}}</p>
       {% endif%}
      {% if talk.artist_website %}
-     <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a> {% endif %} {% if talk.video_artist_url %}
+      <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank"><i class="fa fa-link"></i> Website</a>
+      <!-- <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a> -->
+     {% endif %}
+     {% if talk.video_artist_url %}
       <br>
-     <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank">Artist's Video</a> {% endif %} {% if talk.talk_video_url %}
+      <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank"><i class="fa fa-video-camera"></i> Artist video</a>
+      <!-- <br>
+      <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank">Artist's Video</a> -->
+     {% endif %}
+     {% if talk.talk_video_url %}
       <br>
-     <a class="button hvr-sweep-to-top" href={{talk.talk_video_url}} target="_blank">Talk's Video</a> {% endif %}
+      <a class="button hvr-sweep-to-top" href={{talk.talk_video_url}} target="_blank"><i class="fa fa-video-camera"></i> Talk at Scope</a>
+      <!-- <br>
+      <a class="button hvr-sweep-to-top" href={{talk.talk_video_url}} target="_blank">Talk's Video</a> -->
+     {% endif %}
     </div>
 
    </div>

js/custom.js

@@ -1,6 +1,6 @@
 var scrolling = false;
 var navigatorOpen = false;
-var topButtonVisible = true;
+var topButtonVisible = false;
 
 $(document).ready(function() {
 
@@ -11,7 +11,7 @@ $(document).ready(function() {
  $(".artist-media img").imagefill();
  //$(".upcoming-media img").imagefill();
 
- var rnd = Math.floor(Math.random() * 6);
+ var rnd = Math.floor(Math.random() * 13);
 
  $(function() {
   $.vegas({
@@ -28,7 +28,6 @@ $(document).ready(function() {
   } else {
    openTopMenu();
   }
-  navigatorOpen = !navigatorOpen;
  });
 
  $(".topic").click(function() {
@@ -36,6 +35,7 @@ $(document).ready(function() {
  });
 
  function openTopMenu() {
+  console.log('openTopMenu');
   if (!scrolling && !navigatorOpen) {
    scrolling = true;
    $(".navigator").slideDown("slow", function() {
@@ -46,6 +46,7 @@ $(document).ready(function() {
  }
 
  function closeTopMenu() {
+  console.log('closeTopMenu');
   if (!scrolling && navigatorOpen) {
    scrolling = true;
    $('.navigator').slideUp("slow", function() {
@@ -58,7 +59,7 @@ $(document).ready(function() {
  function showTopButton() {
   console.log('showTopButton');
   if (!topButtonVisible) {
-   $('.top-button').show("slow", function() {
+   $('.top-button').fadeTo("slow",1.0, function() {
     topButtonVisible = true;
    });
   }
@@ -67,24 +68,33 @@ $(document).ready(function() {
  function hideTopButton() {
   console.log('hideTopButton');
   if (topButtonVisible) {
-   $('.top-button').hide("slow", function() {
+   $('.top-button').fadeTo("slow",0.0, function() {
     topButtonVisible = false;
    });
   }
  }
 
  var timeout = null;
- var navbarHeight = $('.navbar').height();
 
  $(window).scroll(function() {
+
+  var navbarHeight = $('.navbar').height();
+  if (navigatorOpen){
+   navbarHeight += $('.navigator').height() - 40;
+  }
+
+  console.log('scroll ' + $(window).scrollTop() + ' ' + navbarHeight);
   if (!timeout) {
    timeout = setTimeout(function() {
     clearTimeout(timeout);
     timeout = null;
     if ($(window).scrollTop() >= navbarHeight) {
+     if (navigatorOpen)
       closeTopMenu();
+     if (!topButtonVisible)
       showTopButton();
-    } else {
+    } else{
+     if (topButtonVisible)
       hideTopButton();
     }
    }, 250);