Add underscore sass

docs/.gitignore

@@ -9,7 +9,6 @@ npm-debug.log
 
 # Folders
 .sass-cache
-/_sass
 /bulma
 /fontawesome
 /styles/node_modules

docs/_sass/bsa.sass

@@ -0,0 +1,73 @@
+.bsa
+  padding: 2rem
+
+.bsa-cpc
+  min-height: 1px
+
+#_default_
+  .default-ad
+    background-color: rgba(black, 0.3)
+    border-radius: 2px
+    color: $white
+    display: inline-block
+    font-size: 10px
+    font-weight: bold
+    padding: 0 4px
+    text-transform: uppercase
+    vertical-align: top
+  & > a
+    background-color: $white
+    border-radius: $radius-large
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+    color: $text
+    display: block
+    line-height: 1.375
+    margin-top: 15px
+    min-height: 70px
+    padding: 15px
+    padding-left: 70px
+    position: relative
+    &:hover,
+    &:focus
+      box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+    &:active
+      box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+    span
+      display: block
+    .default-image
+      display: block
+      left: 15px
+      height: 40px
+      position: absolute
+      top: 15px
+      width: 40px
+      img
+        display: block
+        height: 40px
+        width: 40px
+    .default-title
+      color: $text-strong
+      display: inline
+      font-weight: $weight-bold
+      &:after
+        content: " — "
+    .default-description
+      display: inline
+
++tablet
+  .bsa
+    .columns
+      min-height: 120px
+  #_default_
+    display: flex
+    justify-content: center
+    position: relative
+    .default-ad
+      left: 100%
+      margin-left: 2rem
+      position: absolute
+      top: 0
+    & > a
+      margin: 0
+      &:not(:nth-child(2))
+        margin-left: 2rem

docs/_sass/callout.sass

@@ -0,0 +1,13 @@
+.callout
+  +block
+  background-color: $background
+  border-radius: $radius
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem
+  position: relative
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert

docs/_sass/example.sass

@@ -0,0 +1,129 @@
+.example,
+.structure
+  border: 1px solid $warning
+  border-top-right-radius: $radius
+  color: $warning-invert
+  padding: 1.5rem
+  position: relative
+  &:not(:first-child)
+    margin-top: 2rem
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+  &:before
+    background: $warning
+    border-radius: $radius $radius 0 0
+    bottom: 100%
+    content: "Example"
+    display: inline-block
+    font-size: 7px
+    font-weight: bold
+    left: -1px
+    letter-spacing: 1px
+    padding: 3px 5px
+    position: absolute
+    text-transform: uppercase
+    vertical-align: top
+  +tablet
+    &.is-fullwidth
+      border-left: none
+      border-right: none
+      padding: 0
+
+.example
+  & + .highlight
+    border: 1px solid $warning
+    border-radius: 0 0 $radius $radius
+    border-top: none
+    margin-top: -1.5rem
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+
+.highlight pre
+  max-height: 320px
+  margin-bottom: 0 !important
+  padding: 1.25em 1.5em
+  code
+    padding: 0
+
+$structure: $danger
+$structure-invert: $danger-invert
+
+.structure
+  border-color: $structure
+  border-radius: $radius
+  padding: 1.5rem
+  &:before
+    background: $structure
+    color: $structure-invert
+    content: "Structure"
+
+.structure-item
+  position: relative
+  &:before
+    +overlay
+    background: rgba($black, 0.7)
+    background: $background
+    border: 1px solid $border
+    content: ""
+    display: block
+    z-index: 1
+  &:after
+    +overlay
+    align-items: center
+    content: attr(title)
+    display: flex
+    font-family: $family-monospace
+    font-size: 11px
+    justify-content: center
+    padding: 3px 5px
+    z-index: 2
+  &.is-structure-container
+    padding: 1.5rem 0.75rem 0.75rem
+    &:after
+      align-items: flex-start
+      justify-content: flex-start
+      padding: 0.5rem 0.75rem
+
+.highlight
+  position: relative
+  .copy,
+  .expand
+    +unselectable
+    background: $white
+    border: solid $border
+    border-width: 0 0 1px 1px
+    color: $text-light
+    cursor: pointer
+    outline: none
+    position: absolute
+    right: 0
+    top: 0
+    &:hover
+      border-color: $code
+      color: $code
+  .expand
+    border-right-width: 1px
+    right: 50px
+  +tablet
+    pre
+      white-space: pre-wrap
+
++tablet
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
+    margin-left: 1.5rem
+    margin-right: 1.5rem
+    & + .highlight
+      margin-left: 1.5rem
+      margin-right: 1.5rem
+
+.section.is-fullwidth
+  padding: 0 !important
+  .example
+    border-left: none
+    border-radius: 0
+    border-right: none
+    padding: 0
+    & + .highlight
+      border-left: none
+      border-radius: 0
+      border-right: none

docs/_sass/footer.sass

@@ -0,0 +1,66 @@
+#about
+  .twitter-container
+    display: block
+    height: 30px
+    line-height: 30px
+    margin-top: 5px
+  small
+    display: block
+    margin-top: 5px
+
+#mc_embed_signup
+  .field
+    margin-bottom: 0
+  .notification
+    margin-top: 0.75rem
+
+#share
+  form
+    height: 30px
+    margin-top: 10px
+
+#social
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  > iframe,
+  > a,
+  > form,
+  > div
+    display: inline-block
+    font-size: 11px
+    height: 30px
+    line-height: 30px
+    margin-top: 5px
+  .github-btn
+    width: 160px
+  .twitter-share-button
+    margin-right: 10px
+    min-width: 76px
+  .paypal-form
+    min-width: 148px
+  .fb-like
+    align-items: center
+    display: flex
+    width: 130px
+
+#newsletter
+  .input
+    border-color: $white
+    box-shadow: none
+
+#sister
+  ul
+    display: flex
+    flex-wrap: wrap
+  li
+    display: flex
+    height: 30px
+    margin: 5px 1rem 0 0
+  img
+    height: 30px
+
+#tsp
+  small
+    display: block

docs/_sass/global.sass

@@ -0,0 +1,50 @@
+svg
+  max-height: 100%
+  max-width: 100%
+
+$carbon-space: 15px
+
+#carbon
+  margin-left: auto
+  margin-right: auto
+  max-width: 340px
+  min-height: 120px + ($carbon-space * 2)
+  padding: 0
+  position: relative
+  &:hover
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
+  +tablet
+    width: 340px
+
+#carbonads
+  font-size: 14px
+  text-align: left
+  a,
+  span
+    display: block
+  .carbon-wrap
+    position: relative
+  .carbon-img
+    background: $background
+    float: left
+    height: 100px
+    margin: 15px 0 15px 15px
+    width: 130px
+    img
+      display: block
+      height: 100px
+      width: 130px
+  .carbon-text
+    display: block
+    color: $text-strong
+    line-height: 20px
+    padding: 15px 15px 35px 160px
+  .carbon-poweredby
+    bottom: 0
+    color: $text-light
+    font-size: $size-small
+    left: 160px
+    line-height: 20px
+    padding: 0 15px 10px 0
+    position: absolute
+    right: 0

docs/_sass/header.sass

@@ -0,0 +1,24 @@
+$github: #333333
+$twitter: #55acee
+
+#github
+  color: $github
+  border-color: $github
+  &:hover
+    background: $github
+    border-color: $github
+    color: $white
+
+#twitter
+  color: $twitter
+  border-color: $twitter
+  &:hover
+    background: $twitter
+    border-color: $twitter
+    color: $white
+
++desktop
+  #blogDropdown
+    width: 16rem
+    .navbar-item
+      white-space: normal

docs/_sass/highlight.sass

@@ -0,0 +1,126 @@
+.highlight
+  background-color: #f5f5f5
+  color: #586e75
+  .c
+    color: #93a1a1
+  .err,
+  .g
+    color: #586e75
+  .k
+    color: #859900
+  .l,
+  .n
+    color: #586e75
+  .o
+    color: #859900
+  .x
+    color: #cb4b16
+  .p
+    color: #586e75
+  .cm
+    color: #93a1a1
+  .cp
+    color: #859900
+  .c1
+    color: #93a1a1
+  .cs
+    color: #859900
+  .gd
+    color: #2aa198
+  .ge
+    color: #586e75
+    font-style: italic
+  .gr
+    color: #dc322f
+  .gh
+    color: #cb4b16
+  .gi
+    color: #859900
+  .go,
+  .gp
+    color: #586e75
+  .gs
+    color: #586e75
+    font-weight: bold
+  .gu
+    color: #cb4b16
+  .gt
+    color: #586e75
+  .kc
+    color: #cb4b16
+  .kd
+    color: #268bd2
+  .kn,
+  .kp
+    color: #859900
+  .kr
+    color: #268bd2
+  .kt
+    color: #dc322f
+  .ld
+    color: #586e75
+  .m,
+  .s
+    color: #2aa198
+  .na
+    color: #B58900
+  .nb
+    color: #586e75
+  .nc
+    color: #268bd2
+  .no
+    color: #cb4b16
+  .nd
+    color: #268bd2
+  .ni,
+  .ne
+    color: #cb4b16
+  .nf
+    color: #268bd2
+  .nl,
+  .nn,
+  .nx,
+  .py
+    color: #586e75
+  .nt,
+  .nv
+    color: #268bd2
+  .ow
+    color: #859900
+  .w
+    color: #586e75
+  .mf,
+  .mh,
+  .mi,
+  .mo
+    color: #2aa198
+  .sb
+    color: #93a1a1
+  .sc
+    color: #2aa198
+  .sd
+    color: #586e75
+  .s2
+    color: #2aa198
+  .se
+    color: #cb4b16
+  .sh
+    color: #586e75
+  .si,
+  .sx
+    color: #2aa198
+  .sr
+    color: #dc322f
+  .s1,
+  .ss
+    color: #2aa198
+  .bp,
+  .vc,
+  .vg,
+  .vi
+    color: #268bd2
+  .il
+    color: #2aa198
+
+.content .highlight
+  text-align: left

docs/_sass/index.sass

@@ -0,0 +1,148 @@
+@keyframes floatUp
+  0%
+    box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
+    transform: scale(0.86)
+  67%
+    box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+    transform: scale(1)
+  100%
+    box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+    transform: scale(1)
+
+@keyframes strokePath
+  from
+    stroke-dashoffset: 880
+  to
+    stroke-dashoffset: 0
+
+@keyframes fadeIn
+  from
+    opacity: 0
+    transform: scale(0.86)
+  to
+    opacity: 1
+    transform: scale(1)
+
+@keyframes fadeOut
+  0%
+    opacity: 1
+    transform: scale(0.86)
+  67%
+    opacity: 1
+    transform: scale(0.86)
+  100%
+    opacity: 0
+    transform: scale(1)
+
+@keyframes slideDown
+  0%
+    opacity: 0
+    transform: translateY(-10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes slideUp
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+$curve: cubic-bezier(0, 0.71, 0.29, 1)
+
+#b
+  // animation-delay: 1s
+  animation-duration: 1.5s
+  animation-fill-mode: both
+  animation-name: floatUp
+  animation-timing-function: $curve
+  border-radius: 24px
+  display: inline-block
+  height: 240px
+  margin-bottom: 40px
+  position: relative
+  vertical-align: top
+  width: 240px
+  svg
+    +overlay
+    display: block
+    height: 240px
+    width: 240px
+    &:first-child
+      animation-duration: 1.5s
+      animation-fill-mode: both
+      animation-name: fadeOut
+      animation-timing-function: $curve
+      g
+        animation-duration: 1s
+        animation-fill-mode: both
+        animation-name: strokePath
+        animation-timing-function: $curve
+        fill: none
+        stroke: $turquoise
+        stroke-dasharray: 880
+        stroke-width: 2px
+    &:last-child
+      animation-delay: 1s
+      animation-duration: 1s
+      animation-fill-mode: both
+      animation-name: fadeIn
+      animation-timing-function: $curve
+      g
+        fill: $turquoise
+  +mobile
+    border-radius: 16px
+    height: 160px
+    width: 160px
+
+#bulma
+  animation: slideDown 500ms both
+  // animation-delay: 1s
+
+#modern-framework
+  animation: slideUp 500ms both
+  animation-delay: 0.2s
+
+#npm
+  align-items: center
+  animation: fadeIn 500ms both
+  animation-delay: 0.4s
+  background: none
+  display: flex
+  justify-content: center
+  margin: -10px 0 20px
+  code
+    background: $background
+    border-radius: $radius
+    color: $primary
+    display: inline-block
+    font-size: 16px
+    padding: 16px 32px
+
+#ghbtns
+  animation: slideDown 500ms both
+  animation-delay: 0.6s
+
+html.route-index #carbon
+  animation: slideUp 500ms both
+  animation-delay: 0.8s
+
+#download
+  animation: fadeIn 500ms both
+  animation-delay: 1s
+
+#grid
+  .notification
+    padding-left: 0
+    padding-right: 0
+
+#message
+  display: none
+
+#tweet
+  background: $white
+  border-radius: $radius-large
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  padding: 1.5rem

docs/_sass/override.sass

@@ -0,0 +1,18 @@
+.button
+  +tablet
+    small
+      color: $text
+      left: 0
+      margin-top: 10px
+      position: absolute
+      top: 100%
+      width: 100%
+
+body.page-grid .column > .notification
+  padding-left: 0
+  padding-right: 0
+  text-align: center
+
++tablet
+  .header-item .button + .button
+    margin-left: 0.75rem

docs/_sass/route.sass

@@ -0,0 +1,36 @@
+html.route-index
+  .title.is-2
+    position: relative
+
+  .title.is-2 a
+    color: #242424
+    padding-left: 48px
+    position: relative
+
+  .title.is-2 a:hover
+    color: #00d1b2
+
+  .title.is-2 .icon.is-medium
+    left: 8px
+    position: absolute
+    top: 10px
+
+  .hero .title.is-2 a
+    color: white
+
+  .hero .title.is-2 a:hover
+    color: white
+
+  .hero.is-primary a.column,
+  .hero.is-primary a.column:hover
+    color: white
+
+  .hero.is-primary a.column:hover .title strong
+    border-bottom: 1px solid
+
+  @media screen and (max-width: 979px)
+    .title.is-2 a
+      padding-left: 0
+
+    .title.is-2 .icon.is-medium
+      display: none

docs/_sass/specific.sass

@@ -0,0 +1,22 @@
+#images
+  tr
+    td:nth-child(2)
+      width: 320px
+
+.color
+  border-radius: 2px
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
+  display: inline-block
+  float: left
+  height: 24px
+  margin-right: 8px
+  width: 24px
+
+.button.is-rss
+  background-color: #f26522
+  border-color: transparent
+  color: #fff
+  &:hover
+    background-color: darken(#f26522, 5%)
+  &:active
+    background-color: darken(#f26522, 10%)