Prev camp button

_config.yml

@@ -1,6 +1,7 @@
 # Site settings
 title: CollabCamp
 keywords: "collaboration, sharing, openness, sharing economy, hacking, making the world a better place"
+left_button: "Previous Camps"
 description: > # this means to ignore newlines until the next key
   CollabCamp events bring together social entrepreneurs, sharers, hackers,
   government officials and citizens to collaboratively work on projects which
@@ -9,6 +10,14 @@ description: > # this means to ignore newlines until the next key
 baseurl: "" # the subpath of your site, e.g. /blog/
 url: "http://collab.camp" # the base hostname & protocol for your site
 
+camplinks:
+  - ams:
+    url: "camps/2014-10-amsterdam.html"
+    title: "Amsterdam 2014"
+  - par:
+    url: "camps/2015-05-paris.html"
+    title: "Paris 2015"
+
 social:
   facebook: collabcamp
   facebook_group: collabcamp
@@ -23,5 +32,6 @@ frontpage:
   video_url: "https://youtube.com/embed/TH1DUUjjuGY"
   #description: you may override the frontpage description here
 
+
 # Build settings
 markdown: kramdown

_sass/_base.scss

@@ -104,3 +104,55 @@ h1, h2, h3, h4 {
     vertical-align: baseline;
   }
 }
+
+.left-big-button {
+  font-size: 35px;
+  position: absolute;
+  left: -20px;
+  top: 20px;
+
+  -ms-transform: rotate(90deg); /* IE 9 */
+  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
+  transform: rotate(90deg);
+  -moz-transform-origin: 0% 100%;
+  -o-transform-origin: 0% 100%;
+  -webkit-transform-origin: 0% 100%;
+}
+
+.left-big-button:before {
+    content: "";
+}
+.left-big-button:focus {
+    /* clicking on label should toggle the menu */
+    pointer-events: none;
+}
+.left-big-button:focus .left-big-button-content {
+    /*  opacity is 1 in opened state (see below) */
+    opacity: 1;
+    visibility: visible;
+
+    /* don't let pointer-events affect descendant elements */
+    pointer-events: auto;
+}
+.left-big-button-content {
+    list-style-type: none;
+    position: absolute;
+    z-index: 1;
+
+    /* use opacity to fake immediate toggle */
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s;
+
+  -ms-transform: rotate(-90deg); /* IE 9 */
+  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
+  transform: rotate(-90deg);
+  -moz-transform-origin: 00% -50%;
+  -o-transform-origin: 0% 100%;
+  -webkit-transform-origin: 0% 100%;
+}
+
+.big-text {
+  font-size: 35px;
+}
+

index.html

@@ -14,6 +14,18 @@ <h1>{{ site.title }}</h1>
       <iframe src="{{ site.frontpage.video_url }}" width=640 height=360 frameborder=0 allowfullscreen class="video"></iframe>
     {% endif %}
   </div>
+
+  <div tabindex="0" class="left-big-button jumbotron">
+    <i class="fa fa-arrow-down"></i>
+    {{ site.left_button }}
+    <i class="fa fa-arrow-down"></i>
+
+    <ul class="left-big-button-content">
+      {% for camp in site.camplinks %}	
+        <li><a class="btn btn-default big-text"  href="{{ camp.url }}" role="button">{{ camp.title }}</a></li>
+      {% endfor %}	
+    </ul>
+  </div>
 
   <div class="col-md-2">
   </div>