💄 Site > Improve viewer style

site/src/components/application/style.styl

@@ -0,0 +1,115 @@
+// App
+#application
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    overflow hidden
+
+// Reset
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video
+    margin 0
+    padding 0
+    border 0
+    font-size 100%
+    font inherit
+    vertical-align baseline
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section
+    display block
+
+body
+    line-height 1
+    -webkit-text-size-adjust 100%
+    -moz-text-size-adjust 100%
+    text-size-adjust 100%
+
+ol, ul
+    list-style none
+
+blockquote, q
+    quotes none
+
+blockquote:before, blockquote:after,
+q:before, q:after
+    content ''
+    content none
+
+table
+    border-collapse collapse
+    border-spacing 0
+    th
+        text-align left
+
+*,*::before,*::after,*:before,*:after
+    -moz-box-sizing border-box
+    -webkit-box-sizing border-box
+    box-sizing border-box
+
+input,button,textarea,select
+    color inherit
+    font-size inherit
+    font-style inherit
+    font-family inherit
+    -webkit-border-radius 0
+    border-radius 0
+    -webkit-padding-start 0
+    align-items flex-start
+    text-index 0
+    border none
+    outline none
+    background none
+    padding 0
+    margin 0
+    width auto
+    height auto
+    line-height 1em
+
+input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],
+input[type=submit],input[type=reset],input[type=color],input[type=file],
+button,textarea,select
+    height 1em
+    -webkit-appearance none
+    -moz-appearance none
+    appearance none
+
+input[type=color]
+    width 1em
+
+input
+    &::-ms-clear
+        display none
+
+details, summary
+    -webkit-appearance none
+    -moz-appearance none
+    appearance none
+
+mark
+    background none
+
+hr
+    height 1px
+    margin 0
+    padding 0
+
+u
+    text-decoration none
+
+a
+    color inherit
+    outline none

site/src/components/viewer/style.styl

@@ -1,20 +1,62 @@
+// Fonts
+@font-face
+    font-family 'Inconsolata'
+    font-weight normal
+    font-style normal
+    src url('../../../static/fonts/Inconsolata-Regular.ttf')
+    
+@font-face
+    font-family 'Inconsolata'
+    font-weight bold
+    font-style normal
+    src url('../../../static/fonts/Inconsolata-Bold.ttf')
+
+// Viewer
 .viewer
     position absolute
     top 30px
     right 0
     width 75%
     height 100%
-    background rgba(0, 0, 255, 0.3)
+    font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
+    line-height 20px
+    letter-spacing 0.5px
+    font-size 15px
+    background #2d2d49
+    overflow scroll
+    
+.lines
+    position absolute
+    top 0
+    left 0
+    pointer-events none
+    
+    .line
+        color #abb2bf
+        opacity 0.75
+        letter-spacing -1px
+        padding-left 25px
+    
+.code
+    position absolute
+    top 0
+    left 70px
+    right 0
+    height 100%
+    outline none
+    ::-moz-selection
+        background #bdb9bf
+    ::selection
+        background #bdb9bf
 
+// Highlight js
 .hljs-title
     color red
 
 .hljs
     display block
     overflow-x auto
-    padding 0.5em
     color #abb2bf
-    background #2d2d49
 
 .hljs-comment
 .hljs-quote

site/src/components/viewer/template.html

@@ -1,6 +1,6 @@
 <div class="viewer" v-if="version">
-    <pre v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
+    <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
     <div class="lines">
-        <div class="line" v-for="i in linesCount">{{ i }}</div>
+        <div class="line" v-for="i in linesCount">{{ i }}.</div>
     </div>
 </div>