improving aesthetics

_includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="footer">
+<footer class="footer dark_bg">
 
   <div class="container-fluid">
 

_includes/header.html

@@ -1,24 +1,31 @@
-<nav class="navbar navbar-default navbar-static-top">
+<nav class="navbar navbar-default navbar-fixed-top">
 
   <div class="container-fluid">
 
     <div class="navbar-header">
-
       <a class="navbar-brand" href="/">
         <img alt="Logo" src="/assets/scope_logo.png">
       </a>
-
     </div>
 
-    <div class="navbar-options">
+    <!-- Collect the nav links, forms, and other content for toggling -->
-
+    <div class="collapse navbar-collapse">
-      {% for page in site.pages %}
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Sessions <span class="caret"></span></a>
+          <ul class="dropdown-menu" role="menu">
+            {% for post in site.posts %}
+              <li><a href="{{post.url}}">{{post.title}}</a></li>
+            {% endfor %}
+          </ul>
+        </li>
+        {% for page in site.pages %}
         {% if page.title %}
-          <a class="button hvr-sweep-to-top" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+        <li><a class="button hvr-sweep-to-top" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
         {% endif %}
-      {% endfor %}
+        {% endfor %}
-
+      </ul>
-    </div>
+    </div><!-- /.navbar-collapse -->
 
   </div>
 

_layouts/page.html

@@ -5,9 +5,9 @@ layout: default
 
   <div class="wrapper">
 
-    <header class="post-header">
+    <!-- <header class="post-header">
       <h1 class="post-title">{{ page.title }}</h1>
-    </header>
+    </header> -->
 
     <article class="post-content">
       {{ content }}

_posts/2014-03-20-Scope30.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title: "Scope 30 @ B-Seite Mannheim / March 20th, 2014"
+title: "Scope 30 @ B-Seite Mannheim"
-number: 030
+number: 30
-date: 2014-03-20
+date_text: "March 20th, 2014"
+date_yyy_mm_dd: "2014-03-20"
 topics:
 location: "Cinema Quadrat"
 location_website: "http://jetztkultur.de/bseite/b-seite/en/"

_posts/2014-04-10-Scope31.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title: "Scope 31 / April 10th, 2014"
+title: "Scope 31"
-number: 031
+number: 31
-date: 2014-04-10
+date_text: "April 10th, 2014"
+date_yyy_mm_dd: "2014-04-10"
 topics:
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-05-08-Scope32.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title: "Scope 32 / May 8th, 2014"
+title: "Scope 32"
-number: 032
+number: 32
-date: 2014-05-08
+date_text: "May 8th, 2014"
+date_yyy_mm_dd: "2014-05-08"
 topics: "Light,Science,Mapping"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-06-12-Scope33.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title:  "Scope 33 / June 12th, 2014"
+title:  "Scope 33"
-number: 033
+number: 33
-date:   2014-06-12
+date_text: "June 12th, 2014"
+date_yyy_mm_dd: "2014-06-12"
 topics: "Analog film,Hacking,VGA,Science,Universe"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-07-10-Scope34.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title:  "Scope 34 / July 10th, 2014"
+title:  "Scope 34"
-number: 034
+number: 34
-date:   2014-07-10
+date_text: "July 10th, 2014"
+date_yyy_mm_dd: "2014-07-10"
 topics: "Installation,Patching,Biodynamics,Vjing"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-09-11-Scope35.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title:  "Scope 35 / September 11th, 2014"
+title:  "Scope 35"
-number: 035
+number: 35
-date:   2014-09-11
+date_text: "September 11th, 2014"
+date_yyy_mm_dd: "2014-09-11"
 topics: "Media archaeology,Science,Interaction"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-10-09-Scope36.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title:  "Scope 36 / October 9th, 2014"
+title:  "Scope 36"
-number: 036
+number: 36
-date:   2014-10-09
+date_text: "October 9th, 2014"
+date_yyy_mm_dd: "2014-10-09"
 topics: "Analog,Celluloid,Film archivism,Glitch,Error"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-11-13-Scope37.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title:  "Scope 37 / November 13th, 2014"
+date_text:  "Scope 37"
-number: 037
+number: 37
-date:   2014-11-13
+date_text: "November 13th, 2014"
+date_yyy_mm_dd: "2014-11-13"
 topics: "Surveillance,Hacktivism,Internet"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

_posts/2014-12-11-Scope38.markdown

@@ -1,8 +1,9 @@
 ---
 layout: event
-title: "Scope 38 / December 11th, 2014"
+title: "Scope 38"
-number: 038
+number: 38
-date: 2014-11-13
+date_text: "December 11th, 2014"
+date_yyy_mm_dd: "2014-11-13"
 topics: "Creative coding,Vjing,Performance,Randomness"
 location: "Panke"
 location_website: "http://www.pankeculture.com"

about.html

@@ -8,7 +8,7 @@ permalink: /about/
 
   <div class="row">
 
-    <div class="col-md-8 col-md-offset-2">
+    <div class="dark_bg col-md-8 col-md-offset-2">
 
       <p>Scope is a monthly event happening every 2nd thursday a month in Berlin/DE.
         Scope is an artist-run initiative without financial benefits.

archive.html

@@ -11,7 +11,7 @@ permalink: /archive/
     {% for event in site.posts %}
       {% for talk in event.talks %}
 
-        <div class="col-md-3">
+        <div class="dark_bg col-md-3">
 
           <div class="artist-media">
             {% if {{talk.media_artist_url}} %}

css/custom.css

@@ -13,7 +13,6 @@ a:hover{
 }
 
 .navbar-header{
-  height: 70px;
   padding-left: 20px;
 }
 
@@ -31,7 +30,7 @@ a:hover{
 }
 
 .navbar-brand img{
-  height: 40px;
+  height: 30px;
 }
 
 .navbar-header a{
@@ -46,6 +45,20 @@ a:hover{
   color: #fff;
 }
 
+.content{
+  margin-top: 40px;
+}
+
+.event-date h3{
+  font-size: 96px;
+  text-align: center;
+}
+
+.event-date h4{
+  font-size: 18px;
+  text-align: center;
+}
+
 .artist-media {
   width: 100%;
   max-height: 200px;
@@ -61,11 +74,6 @@ a:hover{
 .event{
   padding:10px;
   margin:10px;
-  display:none;
-  background: rgb(0, 0, 0) transparent;
-  background: rgba(0, 0, 0, 0.6);
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
 }
 
 .event h3{
@@ -74,6 +82,14 @@ a:hover{
   font-size: 32px;
 }
 
+.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);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
+}
+
 .upcoming{
   background: #ccc;
   display: normal;
@@ -124,10 +140,6 @@ a:hover{
 
 .footer{
   margin-top: 20px;
-  background: rgb(0, 0, 0) transparent;
-  background: rgba(0, 0, 0, 0.6);
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
 }
 
 .footer li{

index.html

@@ -1,11 +1,9 @@
 ---
 layout: default
 ---
-<div class="container-fluid">
+<div class="content container-fluid">
 
-  <div class="row">
+    <!-- <div class="event-selector col-md-2 col-md-offset-1">
-
-    <div class="event-selector col-md-2 col-md-offset-1">
       <ul>
         {% for post in site.posts %}
         <li><a href="#">{{post.number}}</a></li>
@@ -13,61 +11,81 @@ layout: default
       </ul>
     </div>
 
-    <div class="event-displayer col-md-7">
+    <div class="event-displayer col-md-7">-->
 
-      {% for post in site.posts %}
+      {% for post in paginator.posts %}
 
-        <div class="row event event-{{post.number}}">
+        <div class="row">
 
-          <a href={{post.url}}><h3>{{post.title}}</h3></a>
+          <div class="event-date col-md-2 col-md-offset-1">
 
-          {% for talk in post.talks %}
+            <a href={{post.url}}>
+              <h3>#{{post.number}}</h3>
+              <h4>{{post.date_text}}</h4>
+            </a>
 
-            <div class="talk col-md-4">
+          </div>
+
+          <!-- <div class="row event event-{{post.number}}"> -->
+
+          <div class="event event-{{post.number}} dark_bg col-md-7">
+
+            {% capture talks_number %}{{ post.talks | size }}{% endcapture %}
+            {% capture col_width %}{{ 12 | divided_by:talks_number }}{% endcapture %}
+
+            {% for talk in post.talks %}
+
+              <div class="talk col-md-{{col_width}}">
+
+                <div class="artist-media">
+                  {% if {{talk.media_artist_url}} %}
+                    <img  src={{talk.media_artist_url}}></img>
+                  {% else %}
+                    <img class="artist_media" src="/assets/no_artist_media.png"></img>
+                  {% endif %}
+                </div>
+
+                <div class="talk_detail">
+                  <h4>{{talk.artist}}: {{talk.title}}</h4>
+                  <p>{{talk.description}}</p>
+                  {% 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_url %}
+                    <a href={{talk.video_url}}>Video</a>
+                  {% endif %}
+                </div>
 
-              <div class="artist-media">
-                {% if {{talk.media_artist_url}} %}
-                  <img  src={{talk.media_artist_url}}></img>
-                {% else %}
-                  <img class="artist_media" src="/assets/no_artist_media.png"></img>
-                {% endif %}
               </div>
 
-              <div class="talk_detail">
+            {% endfor %}
-                <h3><a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist}}</a></h3>
-                <h4>{{talk.title}}</h4>
-                <p>{{talk.description}}</p>
-                <a href={{talk.video_url}}>Video</a>
-              </div>
 
-            </div>
+          </div>
-
-          {% endfor%}
 
         </div>
 
-      {% endfor%}
+      {% endfor %}
+
+      <div class="row">
+
+        <div class="col-md-2 col-md-offset-3">
+          {% if paginator.previous_page %}
+          <a href="{{ paginator.previous_page_path }}" class="previous">Previous</a>
+          {% else %}
+          <span class="previous">Previous</span>
+          {% endif %}
+          <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
+          {% if paginator.next_page %}
+          <a href="{{ paginator.next_page_path }}" class="next">Next</a>
+          {% else %}
+          <span class="next ">Next</span>
+          {% endif %}
+        </div>
+
+      </div>
 
     </div>
 
   </div>
 
-  <!-- <div class="row pagination">
-
-    <div class="pagination">
-      {% if paginator.previous_page %}
-      <a href="{{ paginator.previous_page_path }}" class="previous">Previous</a>
-      {% else %}
-      <span class="previous">Previous</span>
-      {% endif %}
-      <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
-      {% if paginator.next_page %}
-      <a href="{{ paginator.next_page_path }}" class="next">Next</a>
-      {% else %}
-      <span class="next ">Next</span>
-      {% endif %}
-    </div>
-
-  </div> -->
-
 </div>