Blog initialized with first post.

Author: RanzQ

_config.yml

@@ -12,7 +12,39 @@ vimeo_username: codercoded
 # Build settings
 markdown: kramdown
 
+gems: [jekyll/responsive_image]
+
+responsive_image:
+  # [Required]
+  # Path to the image template.
+  template: _includes/blog-image-medium.html
+
+
+  # [Optional, Default: []]
+  # An array of resize configuration objects. Each object must contain at least
+  # a `width` value.
+
+  # Use always 3 sizes, since we use static indexes
+  sizes:
+    - width: 480  # [Required] How wide the resized image will be.
+    - width: 800
+    - width: 1400
+
+  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
+  # The template used when generating filenames for resized images. Must be a
+  # relative path.
+  #
+  # Parameters available are:
+  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)
+  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)
+  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)
+  #   %{width}       Width of the resized image
+  #   %{height}      Height of the resized image
+  #
+  output_path_format: images/resized/%{width}/%{basename}
+
+
 # Serve settings
 host: 0.0.0.0
 
-production: true
+production: false

_includes/blog-image-medium.html

@@ -0,0 +1,4 @@
+<div class="image">
+  <a href="/{{ original.path }}" target="_blank"><img src="/{{ resized[1].path }}"></a>
+  <div class="caption">{{ title }}</div>
+</div>

_includes/blog-image-small.html

@@ -0,0 +1 @@
+<img src="/images/resized/{{resized[0].width}}/{{ resized[0].path }}" href="{{ original.path }}" target="_blank">

_includes/nav.html

@@ -4,6 +4,6 @@
 		<li><a href="#work">Work</a></li>
 		<li><a href="#references">References</a></li>
 		<li><a href="#contact">Contact</a></li>
-		<!-- <li><a href="/blog/">Blog</a></li> -->
+		<li><a href="/blog/">Blog</a></li>
 	</ul>
 </nav>

_includes/nav_blog.html

@@ -5,6 +5,6 @@
 		<li><a href="/#work">Work</a></li>
 		<li><a href="/#references">References</a></li>
 		<li><a href="/#contact">Contact</a></li>
-		<!-- <li><a href="/blog/">Blog</a></li> -->
+		<li><a href="/blog/">Blog</a></li>
 	</ul>
 </nav>

_includes/responsive-image.html

@@ -0,0 +1,7 @@
+{% capture srcset %}
+    {% for i in resized %}
+        /{{ i.path }} {{ i.width }}w,
+    {% endfor %}
+{% endcapture %}
+
+<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">

_layouts/blog.html

@@ -7,7 +7,45 @@
 
     {% include nav_blog.html %}
 
-    {{ content }}
+
+    <div class="wrapper">
+      <article class="blog container">
+        <div class="row">
+          <div class="8u 12u$(mobile)">
+
+            {{ content }}
+
+          </div>
+
+          <div class="4u 12u$(mobile)">
+            <div id="sidebar">
+
+              <!-- Sidebar -->
+                <section>
+                  <h3>Coder Coded Blog</h3>
+                  <p>This blog is for posting news about our work and stuff we encounter during hacking.</p>
+                  <footer>
+                    <a href="/#work" class="button">Check out what we do</a>
+                  </footer>
+                </section>
+
+                <section>
+                  <h3>Latest posts</h3>
+                  <ul class="style2">
+                    {% for post in site.posts limit:10 %}  
+                       <li>
+                         <span>{{ post.date | date: "%b %d, %Y" }}</span> &raquo; <a href="{{ post.url }}"> {{ post.title }}</a>  
+                       </li>
+                    {% endfor %}
+                  </ul>
+                </section>
+
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+
 
     {% include footer.html %}
 

_layouts/post.html

@@ -1,15 +1,33 @@
 ---
-layout: base
+layout: blog
 ---
-<div class="post">
 
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
-    <p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
-  </header>
+<div class="post-content">
+
+  <div class="date">{{ page.date | date: "%b %d, %Y" }}</div>
+
+  <article class="box">
+
+    {% assign path = images/{{ page.image }} %}
+
+    {% if page.image %}
+      {% responsive_image_block %}
+        path: images/{{ page.image }}
+        alt: {{ page.image_alt }}
+        title: {{ page.image_alt }}
+      {% endresponsive_image_block %}
+    {% endif %}
+
+    <h2 class="title">{{ page.title }}</h2>
+
+    {% if page.subtitle %}
+      <h3>{{ page.subtitle }}</h3>
+    {% endif %}
 
-  <article class="post-content">
     {{ content }}
+
+    <!-- <a href="{{ page.url }}">Read more</a>  -->
+
   </article>
 
-</div>
+</div>

_posts/2015-10-15-welcome-to-jekyll.markdown

@@ -0,0 +1,31 @@
+---
+layout: post
+title:  "Our winning hack - Fear of Flying"
+subtitle: "Junction 2015 hackathon winner of .AERO track"
+date:   2015-11-09 11:48:00
+categories: blog
+image: fear-of-flying.jpg
+image_alt: "Fear of Flying - Apps and ideas to beat aviophobia."
+---
+
+30% of people are anxious about flying (at least in some point of their lives). About 6% do not fly at all. _Fear of flying_ or _aviophobia_ is a problem that is recognized, but currently only a handful of innovations exist to cope with it. Some airlines provide hands-on courses a couple of times in a year to cope with aviophobia. These courses cost money, but are highly popular. We realized that there is practically zero content available for aviophobic people during flights.
+
+### What it does
+New airplanes have a web server and a wi-fi access point for passengers. We designed a set of apps that utilize an accelerometer attached to the web server and the in-flight portal that provides the landing page for passengers using the airplane wi-fi. We have produced 4 different apps to give you an idea.
+
+### Turbulence meter
+
+Airplanes can take much more than what people experience during turbulence. This meter displays the "safe zone" for airplane and plots the currently experienced g-forces. Demo online [here](http://aero.codercoded.com/turbulence/), *emulate accelerometer from devtools, or view with mobile device.*
+
+### Mood meter
+
+Passengers can now communicate their level of anxiety to the cabin crew by using the passenger mood-meter. It is embarrassing to talk directly to flight attendants about your fears when other people are listening. The mood-meter is a very subtle way to inform cabin crew about the level of anxiety of the passenger, and also the reason - another passenger makes you feel uncomfortable, or you're afraid of current flight conditions. Check out the [cabin crew view](http://aero.codercoded.com/seatmap/) or [passenger app](http://aero.codercoded.com/slider/) demos online.
+
+Cabin crew view shows a "seatmap heatmap" of passenger anxiety levels, making it possible for cabin crew to react in situations during flight.
+
+### Airplane soundtrack
+A lot of people think that the airplane makes sounds that are not normal. This app plays the passenger all the normal sounds that airplane makes during flights. This way they can reassure themselves that the sounds they're hearing are perfectly normal
+
+### Fun in the turbulence
+
+We think that turbulence should be _anticipated_ by the passengers. It is our job to come up with ideas that get into life only during turbulence. There could be games or similar that provide rewards during it, or something like we envisioned with wobbly faces / things. Couple of demos: [Kekkonen](http://aero.codercoded.com/fun/) and an [NSFW](http://aero.codercoded.com/boobs/) version.

_posts/2015-11-09-fear-of-flying.md

@@ -9,20 +9,30 @@
     position: relative;
   }
 
+  .title {
+    font-weight: bold;
+  }
+
   .box {
     display: block;
     text-align: left;
     @media screen and (max-width: 1600px) {
       padding-top: 3.5em;
     }
+  }
 
+  .image {
+    @media screen and (max-width: 1600px) {
+      margin-top: -1.5em;
+    }
   }
 
   .date {
     padding: 0.5em 1em;
     color: $gray-lightest;
     background-color: $gray-darkest;
     position: absolute;
+    z-index: 100;
     top: 16px;
     left: -140px;
     width: 154px;
@@ -31,8 +41,8 @@
 
     @media screen and (max-width: 1600px) {
       left: auto;
-      top: 4px;
-      right: 4px;
+      top: 1em;
+      right: 1em;
       text-align: right;
 
     }
@@ -41,6 +51,22 @@
 
 }
 
+.image {
+  margin-bottom: 32px;
+
+  img {
+    border: 1px solid $gray-lightest;
+  }
+
+  .caption {    
+    padding: 4px;
+    font-weight: 300;
+    font-style: italic;
+  }
+
+}
+
+
 .blog-nav {
   .logo img {
     height: 42px;
@@ -72,6 +98,10 @@
 
 @include breakpoint(mobile) {
 
+  .box {
+    padding: 12px;
+  }
+
   .blog-nav {
     .logo img {
       display: none;
@@ -81,7 +111,13 @@
   .blog {
     .date {
       width: 120px;
+      top: 0.5em;
+      right: 0.5em;
     }
   }
 
+  .image {
+    margin-top: -2.5em;
+  }
+
 }

_sass/_blog.scss

@@ -8,6 +8,31 @@
     box-shadow: none;
   }
 
+  &.news {
+
+    text-align: left;
+
+    padding: 2em 0 2em 0;
+
+    h1, h2 {
+      font-weight: bold;
+      line-height: 1em;
+      margin-bottom: 0.3em;
+    }
+
+    header {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    .news-image {
+      width: 256px;
+      float: right;
+      border: 1px solid $gray-lighter;
+    }
+  }
+
   &.style1 {
     background-color: #303030;
     background-image: url('/images/bg.jpg');
@@ -601,6 +626,10 @@
     }
   }
 
+  #news {
+    padding: 2em;
+  }
+
   /* Nav */
   #nav {
     a {