style.styl

*
  box-sizing border-box

html, body
  margin 0
  padding 0
  font-family sans-serif
  background-color #f1f1f1

a
  color inherit

h1, h2, h3, h4, h5, h6
  padding 0 20px
  font-family Bangers, monospace
  font-weight normal

  a
    text-decoration none

h4, h5, h6
  font-family monospace
  font-weight normal

.humane-flatty
  pre, code
    white-space pre-wrap
    word-break break-word

#landing
  font-family Bangers, sans-serif

  a
    color #ff8282

.nav
  display flex
  justify-content space-between
  background #5e5e95
  color white

  a
    cursor pointer
    display inline-block
    padding 5px 12px
    margin 0 9px
    border-radius 3px
    text-decoration none

    &:hover
      background whitesmoke
      color: #747474

  .logo
    display flex
    flex-grow 3

    & > *
      display flex
      flex-direction column
      justify-content center

    img
      width 50px
      height 50px

  .clone, .user
    display flex
    padding 12px 18px
    justify-content flex-end
    font-size 110%
    font-family monospace

    & > *
      display flex
      flex-direction column
      justify-content center

  .clone
    a
      padding 2px 4px
      background rgba(255, 255, 255, 0.4)
      border 2px solid black
      color black

      &:hover
        background rgba(255, 255, 255, 0.8)
        color #929292

  .user
    img
      border-radius 50%
      border 3px solid #b0b0b0
      padding 2px
      margin 2px
      width 70px
      height 70px

#profile
  display flex
  justify-content space-evenly
  margin 20px 12px

  .avatar
    width 100px
    height 100px

  .forms
    display flex
    flex-direction column

    & > div
      padding 15px 15px
      opacity 0.6
      background white
      margin 10px 0
      border-radius 3px

      &:hover
        opacity 1

      a:hover
        color #555

    code
      overflow hidden
      text-overflow ellipsis
      padding 10px 2px
      display block
      max-height 180px
      white-space pre-wrap

#Entries
  white-space pre-wrap

  table
    width 100%

    tr
      cursor pointer

      &:hover
        background-color #eee

    td
      padding 3px 7px
  
      &:not(:first-child)
        white-space pre-wrap
        word-break break-all

    .entry
      font-family monospace 

  .controls
    margin 20px 10px
    display flex

    button
      margin 0 10px
      padding 9px 16px
      border 0
      border-radius 4px
      cursor pointer

      background #e7e3e3

      &.save
        color white
        background #5e5e95

      &.delete
        color white
        background #d74343

.CodeMirror
  height auto

.view-splitter  .view-splitter .layout-pane-primary
  height 100%

#View
  --color-1 orange
  --color-2 #35dc9b
  --color-3 #1aaf75
  --color-4 #b83e0b
  --font Ubuntu, Helvetica, sans-serif

  height 100%
  padding 0 10px
  font-family var(--font)

  h1, h2, h3, h4, h5, h6
    color var(--color-4)
    font-family var(--font)
    padding 0 20px

  input.mixinTab
    display none

  label.mixinTab
    display inline-block
    margin 0 0 -1px
    padding 15px 25px
    font-weight 600
    text-align center
    color #bbb
    border 1px solid transparent

    &:hover
      color #888
      cursor pointer

  input.mixinTab:checked + label.mixinTab
    color #555
    border 1px solid #ddd
    border-top 2px solid var(--color-1)
    border-bottom 1px solid #fff

  section.mixinSection
    display none
    padding 20px
    border-top 1px solid 

  #mixinTab1:checked ~ #mixinSection1
  #mixinTab2:checked ~ #mixinSection2
  #mixinTab3:checked ~ #mixinSection3
  #mixinTab4:checked ~ #mixinSection4
  #mixinTab5:checked ~ #mixinSection5
  #mixinTab6:checked ~ #mixinSection6
  #mixinTab7:checked ~ #mixinSection7
  #mixinTab8:checked ~ #mixinSection8
  #mixinTab9:checked ~ #mixinSection9
  #mixinTab10:checked ~ #mixinSection10
  #mixinTab11:checked ~ #mixinSection11
  #mixinTab12:checked ~ #mixinSection12
  #mixinTab13:checked ~ #mixinSection13
    display block

  table.mixinTable
    width 100%
    font-size 110%

    td
      padding 3px 20px

    th
      padding 6px 30px
      text-align left
      font-weight normal
      border-bottom 2px solid var(--color-2)
      text-transform uppercase

    tbody
      tr
        &:first-child td
          padding-top 10px

        &:hover
          color white
          background-color var(--color-3)

  form
    display flex
    flex-wrap wrap
    margin 20px auto

  input[type="submit"] 
  button
    transition all 0.2s ease-in-out
    font 18px Helvetica, Arial, sans-serif
    border none
    background var(--color-3)
    color #fff
    padding 11px 30px
    
    &:hover 
      opacity 0.8

  form label,
  label.mixinField
    position relative
    display block
    
  form label input,
  div.mixinBox
    font 18px Helvetica, Arial, sans-serif
    box-sizing border-box
    display block
    border none
    padding 20px
    width 300px
    margin-bottom 20px
    font-size 18px
    outline none
    transition all 0.2s ease-in-out
    
    &::placeholder 
      transition all 0.2s ease-in-out
      color #999
      font 18px Helvetica, Arial, sans-serif
    
    &:focus, &.populated 
      padding-top 28px
      padding-bottom 12px
      
      &::placeholder 
        color transparent
      
      & + span 
        opacity 1
        top 10px
  
  span 
    color var(--color-2)
    font 13px Helvetica, Arial, sans-serif
    position absolute
    top 0px
    left 20px
    opacity 0
    transition all 0.2s ease-in-out