vuejs
diff --git a/‎README.md
Lines changed: 12 additions & 2 deletions b/‎README.md
Lines changed: 12 additions & 2 deletions
diff --git a/‎css/style.css
Lines changed: 49 additions & 18 deletions b/‎css/style.css
Lines changed: 49 additions & 18 deletions
diff --git a/‎css/style.styl
Lines changed: 43 additions & 18 deletions b/‎css/style.styl
Lines changed: 43 additions & 18 deletions
@@ -1,5 +1,15 @@
 # Vue.js HackerNews clone
 
-[See it here](http://yyx990803.github.io/vue-hackernews/)
+[Live demo](http://yyx990803.github.io/vue-hackernews/)
 
-Built with [Vue.js](http://vuejs.org) and the HackerNews Firebase API. Very much a proof of concept hack at the moment - will organize the code a bit when I get time later.
+Built with [Vue.js](http://vuejs.org) and the official [HackerNews API](https://github.com/HackerNews/API), with pagination, comments, user profile, realtime updates, responsive layout, totaling ~140 SLOC JavaScript excluding comments.
+
+## Notes
+
+- I've intentionally avoided using build tools because the whole thing is pretty simple.
+
+- The HN API currently only provides the top 100 stories, hence there are only 4 pages available.
+
+- The HN API doesn't provide the recursive comments count for each story, so it's not displayed.
+
+- There's no login functionality, i.e. it's view-only mode.
@@ -10,6 +10,7 @@ ul {
   margin: 5px 0;
 }
 a {
+  color: #000;
   cursor: pointer;
   text-decoration: none;
 }
@@ -36,9 +37,6 @@ a {
   vertical-align: middle;
   margin: 0;
 }
-#header h1 a {
-  color: #000;
-}
 #yc {
   border: 1px solid #fff;
   margin: 2px;
@@ -57,41 +55,41 @@ a {
   color: #fff;
   margin-right: 10px;
 }
-li.story {
+.story {
   padding: 2px 0 2px 40px;
   position: relative;
   transition: background-color 0.2s ease;
 }
-li.story p {
+.story p {
   margin: 2px 0;
 }
-li.story .title {
-  color: #000;
-}
-li.story .title:visited {
+.story .title:visited {
   color: #828282;
 }
-li.story .index {
+.story .index {
   color: #828282;
   position: absolute;
   width: 30px;
   text-align: right;
   left: 0;
   top: 4px;
 }
-li.story .domain,
-li.story .subtext {
-  font-size: 0.75em;
+.story .domain,
+.story .subtext {
+  font-size: 11px;
   color: #828282;
 }
-li.story .subtext a:hover {
+.story .domain a,
+.story .subtext a {
+  color: #828282;
+}
+.story .subtext a:hover {
   text-decoration: underline;
 }
-li.story.current {
+.story.current {
   background-color: #ededdf;
 }
 .sidebar {
-  color: #828282;
   transition: all 0.3s ease;
   position: fixed;
   right: 0;
@@ -100,7 +98,7 @@ li.story.current {
   background-color: #f6f6ef;
   box-shadow: 0 0 8px rgba(0,0,0,0.15);
   overflow-y: scroll;
-  width: 500px;
+  width: 600px;
   box-sizing: border-box;
   padding: 10px 30px;
 }
@@ -109,12 +107,16 @@ li.story.current {
   top: 0;
   right: 0;
   padding: 10px;
+  font-size: 20px;
 }
 .sidebar.v-enter,
 .sidebar.v-leave {
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
 }
+.sidebar.user {
+  color: #828282;
+}
 .sidebar.user li {
   margin: 5px 0;
 }
@@ -125,7 +127,36 @@ li.story.current {
 .sidebar.user .about {
   margin-top: 1em;
 }
-@media screen and (max-width: 500px) {
+.sidebar.user .links a {
+  text-decoration: underline;
+}
+.sidebar.comments .story {
+  padding-left: 0;
+  margin-bottom: 30px;
+}
+.sidebar.comments .story .index,
+.sidebar.comments .story .comments-link {
+  display: none;
+}
+.sidebar.comments .comhead {
+  color: #828282;
+  font-size: 11px;
+  margin-bottom: 8px;
+}
+.sidebar.comments .comhead a {
+  color: #828282;
+}
+.sidebar.comments .comment {
+  margin-bottom: 20px;
+}
+.sidebar.comments .comment p {
+  margin: 8px 0 0;
+  font-size: 12px;
+}
+.sidebar.comments .child-comments {
+  margin: 8px 0 8px 20px;
+}
+@media screen and (max-width: 600px) {
   .sidebar {
     width: 100%;
   }
 
@@ -12,6 +12,7 @@ ul
   margin 5px 0
 
 a
+  color #000
   cursor pointer
   text-decoration none
 
@@ -36,8 +37,6 @@ a
     display inline-block
     vertical-align middle
     margin 0
-    a
-      color #000
 
 #yc
   border 1px solid #fff
@@ -55,15 +54,13 @@ a
     color #fff
     margin-right 10px
 
-li.story
+.story
   padding 2px 0 2px 40px
   position relative
   transition background-color .2s ease
   p
     margin 2px 0
-  .title
-    color #000
-    &:visited
+  .title:visited
       color $gray
   .index
     color $gray
@@ -73,15 +70,16 @@ li.story
     left 0
     top 4px
   .domain, .subtext
-    font-size .75em
+    font-size 11px
     color $gray
+    a
+      color $gray
   .subtext a:hover
       text-decoration underline
   &.current
     background-color darken($bg, 5%)
 
 .sidebar
-  color $gray
   transition all .3s ease
   position fixed
   right 0
@@ -90,26 +88,53 @@ li.story
   background-color $bg
   box-shadow 0 0 8px rgba(0,0,0,.15)
   overflow-y scroll
-  width 500px
+  width 600px
   box-sizing border-box
   padding 10px 30px
   .close
     position absolute
     top 0
     right 0
     padding 10px
+    font-size 20px
   &.v-enter, &.v-leave
     -webkit-transform translate3d(100%,0,0)
     transform translate3d(100%,0,0)
-  &.user
-    li
-      margin 5px 0
-    .label
-      display inline-block
-      min-width 60px
-    .about
-      margin-top 1em
 
-@media screen and (max-width:500px)
+.sidebar.user
+  color $gray
+  li
+    margin 5px 0
+  .label
+    display inline-block
+    min-width 60px
+  .about
+    margin-top 1em
+  .links a
+    text-decoration underline
+
+.sidebar.comments
+  .story
+    padding-left 0
+    margin-bottom 30px
+    .index, .comments-link
+      display none
+  .comhead
+    color $gray
+    font-size 11px
+    margin-bottom 8px
+    a
+      color $gray
+  .comment
+    margin-bottom 20px
+    p
+      margin 8px 0 0
+      font-size 12px
+  .child-comments
+    margin 8px 0 8px 20px
+    
+
+
+@media screen and (max-width:600px)
   .sidebar
     width 100%