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"
@@ -21,7 +22,7 @@ talks:
   artist: "Mahir Duman"
   speakers: "Mahir Duman"
   artist_bio: "Mahir Duman is a visual artist born in Ordu, Turkey. He studied in Istanbul and lives and works in Berlin since 2011. As a VJ, Mahir is doing interactive live performances and installations for clubs, special events and art galleries. He works with video, short film, music clips and lots of different media sets, mixed and synchronized with sound and the rhythm of action. He describes his imagery as unrealistic and surreal, that question human perception and the interplay between subjects."
-  description: 
+  description:
   artist_website: "http://www.popkinsart.com/"
   media_artist_url:
   video_artist_url:

_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>