first approach of posts

Kikobeats · Oct 28, 2015 · c33125d · c33125d
1 parent 4747b0a
commit c33125d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 56 deletions.
diff --git a/assets/scss/components/_post.scss b/assets/scss/components/_post.scss
@@ -1,64 +1,39 @@
 .posts {
+
   padding: 0;
   margin: 0;
 
   list-style-type: none;
 
-  text-align: left;
-
   > li {
-    > a {
-      > h2 {
-        margin-bottom: 1rem;
-
-        line-height: 3rem;
-
-        transition: all $aside-animation-time;
-
-        &:hover {
-          transition: all $aside-animation-time;
+    margin-bottom: 1.25rem;
 
-          color: $hover-color;
-        }
-        &:first-child {
-          margin-top: 0;
-        }
-      }
+    &:first-child {
+      margin-top: 4.6875rem;
     }
-  }
-}
-
-#post-content {
-  a {
-    padding: 0 .2em;
-
-    transition: all .5s;
-
-    &::after {
-      position: absolute;
-      bottom: -.5px;
-      left: 0;
 
-      width: 100%;
-      height: 0;
-
-      content: "";
-
-      border-bottom: 1px dashed $primary-color;
+    &:last-child {
+      margin-bottom: 4.6875rem;
     }
-    &:hover {
-      color: $white;
-      border-color: $hover-color;
-      background: $primary-color;
+
+    > time {
+      float: right;
+      text-transform: uppercase;
+      color: #777;
+      font-size: 10px;
+      letter-spacing: 2px;
     }
 
-    &:hover,
-    &:active {
-      outline: 0;
+    > a {
+      @extend %dotted-link;
     }
   }
 }
 
+#post-content a {
+  @extend %dotted-link;
+}
+
 .post {
   > p {
     > img {
@@ -93,7 +68,12 @@
   }
   &.tags {
     > a {
-      padding: .167rem .25rem;
+
+      &:first-child {
+        margin-left: .55rem;
+      }
+
+      padding: .15rem .25rem;
 
       font-size: .55rem;
 
@@ -102,7 +82,8 @@
 
       color: $gray-lightest;
       border-radius: .25rem;
-      background-color: rgba($primary-color, .7);
+      background-color: rgba($primary-color, .45);
+      bottom: 4px;
 
       &:hover {
         background-color: rgba($primary-color, 1);

diff --git a/assets/scss/modules/_utils.scss b/assets/scss/modules/_utils.scss
@@ -1,12 +1,10 @@
 %dotted-link {
-  padding-right: 0.2rem;
-  padding-left: 0.2rem;
-  padding-bottom: 2px;
+  padding: 3px;
   transition: all .5s;
 
   &::after {
     position: absolute;
-    bottom: -.5px;
+    bottom: 0px;
     left: 0;
 
     width: 100%;

diff --git a/index.hbs b/index.hbs
@@ -1,17 +1,24 @@
 {{!< default}}
+
+<h2 class="fun-line">Writtings</h2>
 <ol class="posts">
   {{#foreach posts}}
   <li>
-    <a href="{{url}}" title="link to {{{title}}}">
+    <time datetime="{{date format="DD MMM YYYY"}}">{{date format="DD MMM YYYY"}}</time>
+    <a href="{{url}}" title="link to {{{title}}}">{{title}}</a>
+    <span class="post tags">{{tags separator=" "}}</span>
+  </li>
+  {{/foreach}}
+</ol>
+{{pagination}}
+
+
+{{!-- <a href="{{url}}" title="link to {{{title}}}">
       <h2>{{{title}}}</h2>
       <p class="post description">{{excerpt}}&hellip;</p>
     </a>
     <div class="post meta">
       <time datetime="{{date format="DD MMM YYYY"}}">{{date format="DD MMM YYYY"}}</time>
       <span class="post tags">{{tags prefix="on " separator=" "}}</span>
     </div>
-    <hr class="divider post" />
-  </li>
-  {{/foreach}}
-</ol>
-{{pagination}}
+    <hr class="divider post" /> --}}