i forgot that you could make stylus look good, oops

src/app/article/article.component.styl

@@ -8,17 +8,18 @@
   height: auto
   width: 100%
 
-.image-wrapper img
-  position: absolute
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
+  img
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
 
-.tags li
-  display: inline-block
-  padding: 5px 10px
-  color: #fff
-  background: #ff57a2
-  border-radius: 99px
-  margin-right: 10px
+.tags
+  li
+    display: inline-block
+    padding: 5px 10px
+    color: #fff
+    background: #ff57a2
+    border-radius: 99px
+    margin-right: 10px

src/app/list/list.component.styl

@@ -1,49 +1,50 @@
+table
+  p
+    font-size: 16px
+    margin: 0
 
-table td, table th
-  padding: 10px
-  border-bottom: 1px solid #ccc
+  td, th
+    padding: 10px
+    border-bottom: 1px solid #ccc
 
-table tr:last-child td
-  border-bottom: none
+  th
+    font-family: Booster
+    color: #ff57a2
+    text-transform: uppercase
+    font-weight: 900
+    text-align: left
+    cursor: pointer
 
-table th
-  font-family: Booster
-  color: #ff57a2
-  text-transform: uppercase
-  font-weight: 900
-  text-align: left
-  cursor: pointer
+  tr
+    &.active td
+      background: #ff57a2
+      color: #fff
 
-table tr.active td
-  background: #ff57a2
-  color: #fff
+    &:last-child td
+      border-bottom: none
 
-table tr.clickable:hover
-  color: #ff57a2
+    &.clickable:hover
+      color: #ff57a2
 
-table .person-info
-  display: flex
-  align-items: flex-start
+  .person-info
+    display: flex
+    align-items: flex-start
 
-table .person-info .image
-  height: auto
-  width: 25%
-  flex-shrink: 0
+    .image
+      height: auto
+      width: 25%
+      flex-shrink: 0
 
-table .person-info .image-wrapper
-  position: relative
-  padding-bottom: 60%
+    .detail
+      padding: 0 0 0 20px
 
-table .person-info .image-wrapper img
-  position: absolute
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
+    .image-wrapper
+      position: relative
+      padding-bottom: 60%
 
-table .person-info .detail
-  padding: 0 0 0 20px
-
-table p
-  font-size: 16px
-  margin: 0
+      img
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%

src/styles.styl

@@ -1,5 +1,8 @@
 @import('/assets/stylus/_fonts.styl')
 
+html
+  overflow-y: scroll
+
 html, body
   width: 100%
   height: 100%
@@ -41,11 +44,6 @@ h2
   color: #14cc76
   text-align: center
 
-ul
-  list-style: none
-  margin: 0
-  padding: 0
-
 a
   outline-style: none
 
@@ -61,21 +59,27 @@ a
 .flex-col
   flex-direction: column
 
-ul a
-  display: block
-  text-decoration: none
-  line-height: 120%
-  color: #333
-  position: relative
-  text-align: right
-  overflow: hidden
-  font-size: 24px
-  padding: 15px 35px
-  text-transform: uppercase
 
-ul a.active, ul a:hover
-  color: #14cc76
-  font-weight: 700
+ul
+  list-style: none
+  margin: 0
+  padding: 0
+
+  a
+    display: block
+    text-decoration: none
+    line-height: 120%
+    color: #333
+    position: relative
+    text-align: right
+    overflow: hidden
+    font-size: 24px
+    padding: 15px 35px
+    text-transform: uppercase
+
+    &.active, &:hover
+      color: #14cc76
+      font-weight: 700
 
 .page-wrapper
   max-width: 1200px