Reworked release page

pages/releases.vue

@@ -166,139 +166,100 @@
   }
 </script>
 
-<style scoped>
+<style lang="stylus" scoped>
+  @import '~stylus/functions'
+
   p
-  {
+    margin-bottom 0
-    margin-bottom: 0;
-  }
 
   div.input-group
-  {
+    padding-bottom 5px !important
-    padding-bottom: 5px !important;
+    padding-top 8px !important
-    padding-top: 8px !important;
-  }
 
   /* ----- Refresh button ----- */
   .refresh-button-container
-  {
+    display inline-block
-    display: inline-block;
+    text-align center
-    text-align: center;
+    padding 0
-    padding: 0;
+    align-self center
-    align-self: center;
-  }
 
   .time-container
-  {
+    height 70px
-    height: 70px;
+    display flex
-    display: flex;
+    align-items center
-    align-items: center;
-  }
 
   .update-time
-  {
+    padding-left 20px
-    padding-left: 20px;
+    font-weight 600
-    font-weight: 600;
+    font-size 16px
-    font-size: 16px;
+    font-style italic
-    font-style: italic;
-  }
 
   .elem
-  {
+    margin-bottom 10px
-    margin-bottom: 10px;
+    display inline-block
-    display: inline-block;
+    padding 1px 5px !important
-    padding: 1px 5px !important;
-  }
 
   .elem-content
-  {
+    background-color rgb(60, 60, 60)
-    background-color: rgb(60, 60, 60);
+    cursor default
-    cursor: default;
-  }
 
   .elem-content:hover
-  {
+    hover_background(0.4s)
-    transition: all 0.4s;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
-  }
 
   .elem-card
-  {
+    padding 0 10px 0 0
-    padding: 0 10px 0 0;
-  }
 
   .elem-card-layout
-  {
+    padding-left 1px
-    padding-left: 1px;
-  }
 
   .elem-title h6
-  {
+    padding-left 10px
-    padding-left: 10px;
+    margin-top 10px
-    margin-top: 10px;
+    margin-bottom 10px
-    margin-bottom: 10px;
+    line-height 26px
-    line-height: 26px;
+    white-space nowrap
-    white-space: nowrap;
+    text-overflow ellipsis
-    text-overflow: ellipsis;
+    overflow hidden
-    overflow: hidden;
-  }
 
   .elem-ep h6
-  {
+    margin-top 10px
-    margin-top: 10px;
+    white-space nowrap
-    white-space: nowrap;
+    text-overflow ellipsis
-    text-overflow: ellipsis;
+    overflow hidden
-    overflow: hidden;
-  }
 
   .elem-image
-  {
+    height 200px
-    height: 200px;
-  }
 
   .picture
-  {
+    max-width 95%
-    max-width: 95%;
-  }
 
   .elem-text-links
-  {
+    height 100%
-    height: 100%;
+    position relative
-    position: relative;
-  }
 
   .synopsis
-  {
+    text-align justify
-    text-align: justify;
+    display block
-    display: block;
+    text-overflow ellipsis
-    text-overflow: ellipsis;
+    word-wrap break-word
-    word-wrap: break-word;
+    overflow hidden
-    overflow: hidden;
+    max-height 9em
-    max-height: 9em;
+    line-height 1.5em
-    line-height: 1.5em;
-  }
 
   .links
-  {
+    height 25%
-    height: 25%;
+    position absolute
-    position: absolute;
+    bottom 5px
-    bottom: 5px;
+    right -2px
-    right: -2px;
+    display flex
-    display: flex;
-  }
 
   .download-button
-  {
+    text-decoration none
-    text-decoration: none;
+    margin-right 0
-    margin-right: 0;
-  }
 
   .subheading
-  {
+    padding 30px
-    padding: 30px;
+    text-align justify
-    text-align: justify;
+    text-align-last center
-    text-align-last: center;
+    white-space pre-wrap
-    white-space: pre-wrap;
-  }
 </style>