SCSS -> SASS

assets/static/sass/_blog.sass

@@ -1,19 +1,17 @@
-body.blog
+article.blog-post
-  &.post
+  h1
-    article
+    font-size: 1.8em
-      h1
+    margin-bottom: 0.3em
-        font-size: 1.8em
-        margin-bottom: 0.3em
 
-      .info
+  .info
-        font-size: 0.9em
+    font-size: 0.9em
 
-      .content
+  .content
-        margin-top: 1em
+    margin-top: 1em
 
-        img
+    img
-          display: block
+      display: block
-          margin: 0 auto
+      margin: 0 auto
 
-        img
+    img
-          box-shadow: 0 1px 3px rgba(0,0,0,0.2)
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)

assets/static/sass/_grid.sass

@@ -0,0 +1,43 @@
+*
+  +box-sizing(border-box)
+
+$pad: 20px
+
+.grid
+  background: white
+  margin: 0 0 $pad 0
+
+  &:after
+    /* Or @extend clearfix
+    content: ""
+    display: table
+    clear: both
+
+[class*='col-']
+  float: left
+  padding-right: $pad
+
+  .grid &:last-of-type
+    padding-right: 0
+
+.col-2-3
+  width: 66.66%
+
+.col-1-3
+  width: 33.33%
+
+.col-1-2
+  width: 50%
+
+.col-1-4
+  width: 25%
+
+.col-1-8
+  width: 12.5%
+
+/* Opt-in outside padding
+.grid-pad
+  padding: $pad 0 $pad $pad
+
+  [class*='col-']:last-of-type
+    padding-right: $pad

assets/static/sass/_grid.scss

@@ -1,48 +0,0 @@
-* {
-    @include box-sizing(border-box);
-}
-
-$pad: 20px;
-
-.grid {
-    background: white;
-    margin: 0 0 $pad 0;
-
-    &:after {
-        /* Or @extend clearfix */
-        content: "";
-        display: table;
-        clear: both;
-    }
-}
-
-[class*='col-'] {
-    float: left;
-    padding-right: $pad;
-    .grid &:last-of-type {
-        padding-right: 0;
-    }
-}
-.col-2-3 {
-    width: 66.66%;
-}
-.col-1-3 {
-    width: 33.33%;
-}
-.col-1-2 {
-    width: 50%;
-}
-.col-1-4 {
-    width: 25%;
-}
-.col-1-8 {
-    width: 12.5%;
-}
-
-/* Opt-in outside padding */
-.grid-pad {
-    padding: $pad 0 $pad $pad;
-    [class*='col-']:last-of-type {
-        padding-right: $pad;
-    }
-}

assets/static/sass/_layout.sass

@@ -0,0 +1,50 @@
+body
+  font-family: "Antic Slab"
+  font-size: 20px
+  line-height: 1.5em
+
+.center
+  margin: 0 auto
+  max-width: 920px
+
+a
+  text-decoration: underilne
+  color: #c24e4a
+
+img  max-width: 100%
+
+header
+  h1
+    font-size: 1.5em
+    margin-bottom: 0
+    text-align: right
+
+  h2
+    font-size: 0.8em
+    font-weight: normal
+    margin-top: 0
+    display: none
+
+nav.main-menu
+  text-align: right
+
+footer
+  font-size: 0.7em
+  padding-top: 1em
+
+hr.light
+  border: 0px
+  margin: 1em 0 1em 0
+  border-top: #CCC 1px solid
+
+p:first-child
+  margin-top: 0
+
+.text-center
+  text-align: center
+
+.text-right
+  text-align: right
+
+.float-right
+  float: right

assets/static/sass/_layout.scss

@@ -1,57 +0,0 @@
-body {
-    font-family: 'Antic Slab';
-    font-size: 20px;
-    line-height: 1.5em
-}
-
-.center {
-    margin: 0 auto;
-    max-width: 920px;
-}
-
-a {
-    text-decoration: underilne;
-    //color: inherit !important;
-    color: #c24e4a;
-    //color: #3da3b7;
-}
-
-img { max-width: 100%; }
-
-header {
-    h1 { margin-bottom: 0; font-size: 1.5em; text-align: right; }
-
-    h2 {
-        font-size: 0.8em;
-        font-weight: normal;
-        margin-top: 0;
-        display: none;
-    }
-}
-
-nav.main-menu {
-    text-align: right;
-}
-
-footer {
-    font-size: 0.7em;
-    padding-top: 1em;
-}
-
-hr.light {
-    border: 0px;
-    margin: 1em 0 1em 0;
-    border-top: #CCC 1px solid;
-}
-
-p:first-child {
-    margin-top: 0;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.float-right {
-    float: right;
-}

assets/static/sass/_mediaqueries.sass

@@ -0,0 +1,6 @@
+$desktop: "(max-width: 992px)"
+$until-desktop: "(min-width: 768px)"
+$tablet: "(max-width: 768px)"
+$until-tablet: "(min-width: 768px)"
+$mobile: "(max-width: 480px)"
+$until-mobile: "(min-width: 480px)"

assets/static/sass/_mediaqueries.scss

@@ -1,6 +0,0 @@
-$desktop: "(max-width: 992px)";
-$until-desktop: "(min-width: 768px)";
-$tablet: "(max-width: 768px)";
-$until-tablet: "(min-width: 768px)";
-$mobile: "(max-width: 480px)";
-$until-mobile: "(min-width: 480px)";

assets/static/sass/_mixins.sass

@@ -0,0 +1,4 @@
+=box-sizing($type)
+  -webkit-box-sizing: $type
+  -moz-box-sizing: $type
+  box-sizing: $type

assets/static/sass/_mixins.scss

@@ -1,5 +0,0 @@
-@mixin box-sizing($type) {
-  -webkit-box-sizing: $type;
-  -moz-box-sizing: $type;
-  box-sizing: $type;
-}

assets/static/sass/style.sass

@@ -0,0 +1,7 @@
+@import ./mediaqueries
+@import ./mixins
+@import ./grid
+@import ./layout
+@import ./blog
+@import ./table
+@import ./syntax

assets/static/sass/style.scss

@@ -1,7 +0,0 @@
-@import "./mediaqueries";
-@import "./mixins";
-@import "./grid";
-@import "./layout";
-@import "./blog";
-@import "./table";
-@import "./syntax";

content/blog/2016-04-27-penguin-trials-after-two-weeks/contents.lr

@@ -8,6 +8,8 @@ improvements to the workstation that made my life easier.
 
 After other two weeks I will post a summary with the good and bad parts.
 
+<!-- readmore -->
+
 ## Stuff fixed
 
 ### Lightdm black screen

templates/macros/blog.html

@@ -1,11 +1,18 @@
 {% macro render_blog_post(post, from_index=false) %}
-  <article class="center">
+  {% set summary = post.body.html.split('<!-- readmore -->') %}
+  <article class="blog-post center">
     <h1><a href="{{ post|url }}">{{ post.title }}</a></h1>
     <div class="info">
       Published on {{ post.pub_date }} with <a href="#">no comments.</a>
     </div>
     <div class="content">
-      {{ post.body }}
+      {% if from_index and summary|length > 1 %}
+        {{ summary[0] }}
+        <p class="text-right"><a href="{{ post|url }}">Read more</a></p>
+      {% else %}
+        {{ post.body }}
+      {% endif %}
     </div>
+    <hr class="light">
   </article>
 {% endmacro %}