Change example style

src/colors.json

@@ -0,0 +1,10 @@
+{
+  "red": "#D2134B",
+  "green": "#116e5e",
+  "blue": "#106a87",
+  "yellow": "#f8d139",
+  "cyan": "",
+  "magenta": "",
+  "color": "#2D8685",
+  "color2": "#caa455"
+}

src/example/Example.vue

@@ -1,18 +1,16 @@
 <template lang="pug">
   #app
-    bar-chart-example
-    .menu-container
-      //- Menu
-      .menu
-        .title
-          h1 {{ app.name }}
-          h2.subtitle {{ app.des }}
-    //-Links
-    ul.links
-        li
-          a(:href='app.repo')
-            .icon(v-html='icons.gitHub')
-
+    .header
+      .title
+        h1 {{ app.name }}
+      .subtitle
+        h2 {{ app.des }}
+    .row
+      bar-chart-example
+    .footer
+      .gh
+        a(:href='app.repo')
+          .icon(v-html='icons.gitHub')
 </template>
 
 <script>
@@ -35,77 +33,8 @@ export default {
 }
 </script>
 <style lang="stylus">
-@import '../vars.styl'
-@import './html.styl'
-  body
-    font-family: 'Asap', sans-serif
-    color: $darkness
-  #app
-    user-select: none
-  .menu-container
-    position:fixed
-    bottom: 0
-    z-index:50
-    margin: 5em
-    width: 25em
-    max-width: 25em
-
-    h1
-      font-size: 1.7em
-      letter-spacing: 0.0325em
-      color: $color2
-    div.menu
-      border: $dark 1px solid
-      border-top-width: 10px
-      border-bottom-width: 5px
-      padding: 1em 2em
-      background-color: $color
-      color: white
-      box-shadow: $sh
-      margin-top: 1em
-      text-align: center
-      .title
-        border: 1.5px $lightness
-        border-style: dotted none
-        padding: .5em 0
-
-      h1, h2
-        margin:0 0 .5em 0
-      h1
-        font-size: 1.7em
-        letter-spacing: 0.0325em
-        font-family: 'Belgrano', serif
-        text-shadow: $sh, $sh
-        color: $white
-      h2
-        font-size: 0.8em
-        font-style: italic
-       letter-spacing: 0.0625em
-
-  .links
-    margin: 1em 5em 0 0
-    position: absolute
-    list-style: none
-    top: 0
-    right: 0
-
-  .icon
-    svg
-      padding: 0.1em
-      background-color: white
-      border-radius: 50%
-      display: inline-block
-      width: 3em
-      height: 3em
-      fill: $color
-
-  .console
-    display: block
-    max-width: 20em
-    position: fixed
-    margin: 5em
-    right: 0
-    bottom: 0
-    color: $dark
+  @import '../vars.styl'
+  @import './html.styl'
+  @import './app.styl'
 
 </style>

src/example/app.styl

@@ -0,0 +1,70 @@
+  @import '../vars.styl'
+  .header
+    display block
+    margin 0 0 2em 0
+    .title
+      color color
+    .subtitle
+      font-size .625em
+      font-style italic
+      font-weight normal
+
+  .footer
+    display flex
+    flex 1
+    min-width 100%
+    margin 3em 0 0 0
+    justify-content center
+    align-items center
+    background $txt-color
+    div
+      display flex
+      justify-content center
+      align-items center
+
+  #app, .row
+    display flex
+    justify-content center
+    align-items center
+
+  #app
+    user-select none
+    flex-flow column wrap
+    min-height 100vh
+
+  .row
+    display flex
+    flex-flow row wrap
+    flex 1 1 100%
+    position relative
+
+  .links
+    display flex
+    list-style none
+    align-self flex-end
+    margin 0
+  .top
+    justify-content flex-end
+
+  .icon
+    svg
+      width 2em
+      height @width
+      fill $color
+      margin 0
+
+    &:hover
+      svg
+        fill $color2
+
+  a .icon 
+    display inline
+
+  .console
+    display block
+    max-width 20em
+    position fixed
+    margin 5em
+    right 0
+    bottom 0
+    color $dark

src/example/html.styl

@@ -1,21 +1,30 @@
+  @import '../vars.styl'
+
+  body,html
+    margin 0
+    padding 0
+    max-width 100%
+    width 100%
   body 
-    background-color: #e6ede9
+    background-color: $bg
     font-size: 16px
+    font-family 'Arial', sans-serif
+    color $txt-color
   label
     font-size: .8em
     display:block
     margin-bottom: .5em
   a
+   text-decoration none
    color: $color
-   &:hover
+   &:hover, &:visited:hover
     color:$color2
    &:visited
     color: $color
 
   button, select, option
     border: none
     box-shadow: none 
-    background-color: white
     outline: 0
     &:focus
       outline: 0
@@ -42,6 +51,11 @@
       1px 1.5em;
     background-repeat: no-repeat
 
+  textarea
+    background $bg
+    color $color
+    border 1px solid $txt-color
+
   button.btn 
     padding: .5em 2em
     font-size: 1em
@@ -53,3 +67,30 @@
     color: $color
     font-weight:bold
     background-color: white
+
+  h1,h2
+    margin 0
+
+// Scrolbars
+
+  $scrollbar-width = 8px
+
+::-webkit-scrollbar-track
+  box-shadow $inset-sh 
+  background-color $darkness
+
+::-webkit-scrollbar
+  width $scrollbar-width
+  background-color $gray
+
+
+::-webkit-scrollbar-thumb
+  // box-shadow $box-sh
+  // box-shadow 0px 0px 30px rgba(255,255,255,.5), 1px 1px 20px $color
+  background-color $color
+  border-radius ($scrollbar-width / 2)
+
+ ::-webkit-resizer
+   background-color $color
+   // box-shadow inset 1px 0px 1px rgba(0, 0, 0, 0.5)
+   background linear-gradient(135deg, $darkness 50%, $color 50%)

src/vars.styl

@@ -1,16 +1,16 @@
-$color2 = #caa455
-$color = #1aad8d
+json('../colors.json')
+$color2 = color2
+$color = color
 // $color2 = #E3A826
 $white = lightness($color, 92%)
 $dark = lightness($color, 27%)
 $darkness = #225057
-$bg = saturation(lightness($color,25%),30%)
-//$bg = saturation(lightness($color,30%),20%)
-$bg = saturation(lightness($color,80%),15%)
+$bg = lightness($color,6%)
 $bg-plus = saturation(lightness($color,75%),30%)
-$warn = #be385d   
+$warn =red   
 $light = #f5fffc
 $mid = lightness($color, 55%)
+$txt-color = $darkness
 
 $border = $color solid 2px
 $txt-sh = 1px 1px 1px  rgba(0,0,0,.5)