working on the blog section

6 files changed, 85 insertions, 15 deletions

diff --git a/source/_article.html.erb b/source/_article.html.erb
index 4420bd9..bc462f8 100644
--- a/source/_article.html.erb
+++ b/source/_article.html.erb
@@ -1,4 +1,7 @@
-<div>
-  <h3><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></h3>
-  <%= article.body %>
-</div>
+<article>
+  <aside class="blog-date"><%= article.date.strftime('%e %b %Y') %></aside>
+  <div class="blog-inner">
+    <h3 class="blog-article-heading"><%= link_to article.title, article %></h3>
+    <%= article.body %>
+  </div>
+</article>
diff --git a/source/aktuelles/blog.html.erb b/source/aktuelles/blog.html.erb
index 3045c41..18666b9 100644
--- a/source/aktuelles/blog.html.erb
+++ b/source/aktuelles/blog.html.erb
@@ -4,17 +4,21 @@ per_page: 10
 section: "aktuelles"
 ---
 <% if paginate && num_pages > 1 %>
-  <p>Seite <%= page_number %> von <%= num_pages %></p>
 
-  <% if prev_page %>
-    <p><%= link_to 'Vorherige Seite', prev_page %></p>
-  <% end %>
+  <ul class="pager">
+    <li class="previous <%= prev_page ? "" : "disabled" %>"><%= link_to 'Vorherige Seite', prev_page %></li>
+    <li class="next <%= next_page ? "" : "disabled" %>"><%= link_to 'Nächste Seite', next_page %></li>
+  </ul>
+
 <% end %>
 
 <%= partial "article", collection: page_articles %>
 
-<% if paginate %>
-  <% if next_page %>
-    <p><%= link_to 'Nächste Seite', next_page %></p>
-  <% end %>
+<% if paginate && num_pages > 1 %>
+
+  <ul class="pager">
+    <li class="previous <%= prev_page ? "" : "disabled" %>"><%= link_to 'Vorherige Seite', prev_page %></li>
+    <li class="next <%= next_page ? "" : "disabled" %>"><%= link_to 'Nächste Seite', next_page %></li>
+  </ul>
+
 <% end %>
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index b2835f2..8c4fea3 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -35,9 +35,11 @@
     </nav>
 
     <!-- content -->
-    <section id="main">
-      <%= yield %>
-    </section>
+    <div id="content">
+      <section id="main">
+        <%= yield %>
+      </section>
+    </div>
 
   </body>
 </html>
diff --git a/source/stylesheets/_blog.scss b/source/stylesheets/_blog.scss
new file mode 100644
index 0000000..13db407
--- /dev/null
+++ b/source/stylesheets/_blog.scss
@@ -0,0 +1,17 @@
+article {
+  @extend .container-fluid;
+  margin-bottom: 30px;
+}
+
+aside.blog-date {
+  @extend .col-md-2;
+}
+
+div.blog-inner {
+  @extend .col-md-8;
+}
+
+h3.blog-article-heading {
+  margin-top: 0px;
+}
+
diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss
index c254708..4374425 100644
--- a/source/stylesheets/_variables.scss
+++ b/source/stylesheets/_variables.scss
@@ -139,3 +139,41 @@ $panel-warning-heading-bg:    $state-warning-bg;
 $panel-danger-text:           $state-danger-text;
 $panel-danger-border:         $state-danger-border;
 $panel-danger-heading-bg:     $state-danger-bg;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     #fff;
+$pagination-bg:                        $gray-darker;
+$pagination-border:                    $gray-dark;
+
+$pagination-hover-color:               #fff;
+$pagination-hover-bg:                  $component-active-bg;
+$pagination-hover-border:              transparent;
+
+$pagination-active-color:              #fff;
+$pagination-active-bg:                 $brand-primary;
+$pagination-active-border:             transparent;
+
+$pagination-disabled-color:            $gray-light;
+$pagination-disabled-bg:               $gray-darker;
+$pagination-disabled-border:           $gray-dark;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg;
+$pager-border:                         $pagination-border;
+$pager-border-radius:                  15px;
+
+$pager-hover-bg:                       $pagination-hover-bg;
+
+$pager-active-bg:                      $pagination-active-bg;
+$pager-active-color:                   $pagination-active-color;
+
+$pager-disabled-color:                 $gray-light;
+
diff --git a/source/stylesheets/base.css.scss b/source/stylesheets/base.css.scss
index 4f954be..6125efa 100644
--- a/source/stylesheets/base.css.scss
+++ b/source/stylesheets/base.css.scss
@@ -9,6 +9,10 @@ header {
   @extend .row;
 }
 
+#content {
+  @extend .row;
+}
+
 #main {
   @extend .col-sm-8;
   @extend .col-sm-offset-2;
@@ -35,3 +39,5 @@ nav ul {
 .navbar-collapse {
   @extend .col-sm-offset-2;
 }
+
+@import "blog";