Clean docs css

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 4f8edb0159c1709a3f4c0569120b211317acc2b1..8b381316c3909213e5073bdd7e4eb8ce530be148 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -2,408 +2,13 @@
 
 @import "../bulma"
 @import "./sass/highlight"
-
-// Override
-.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
-
-// Additional
-svg
-  max-height: 100%
-  max-width: 100%
-
-$carbon-space: 15px
-
-#carbon
-  max-width: 340px
-  min-height: 100px + ($carbon-space * 2)
-  padding: 0
-  position: relative
-  &:hover
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
-  +tablet
-    margin-left: auto
-    margin-right: auto
-    width: 340px
-
-#carbonads
-  text-align: left
-  a,
-  span
-    display: block
-  .carbon-wrap
-    position: relative
-  .carbon-img
-    float: left
-    height: 130px
-    padding: 15px 0 15px 15px
-    width: 145px
-    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
-
-$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
-
-@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: 1.2s
-
-#npm
-  align-items: center
-  animation: fadeIn 500ms both
-  animation-delay: 1.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: 1.6s
-
-html.route-index #carbon
-  animation: slideUp 500ms both
-  animation-delay: 1.8s
-
-#download
-  animation: fadeIn 500ms both
-  animation-delay: 2s
-
-#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
-
-#mc_embed_signup
-  .control
-    margin-bottom: 0
-  .notification
-    margin-top: 0.75rem
-
-#social
-  align-items: center
-  display: flex
-  flex-wrap: wrap
-  margin-bottom: 1em
-  justify-content: center
-  a
-    display: inline-block
-    font-size: 11px
-    height: 20px
-    line-height: 20px
-    margin: 5px
-  iframe
-    margin: 5px
-
-#images
-  tr
-    td:nth-child(2)
-      width: 320px
-
-.color
-  display: inline-block
-  float: left
-  height: 18px
-  margin-right: 5px
-  width: 18px
-
-.example,
-.structure
-  border: 1px solid $warning
-  border-top-right-radius: $radius
-  color: $warning-invert
-  padding: 1.25rem 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
-    pre
-      max-height: 50vh
-    &:not(:last-child)
-      margin-bottom: 1.5rem
-
-$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
-
-#newsletter
-  .input
-    border-color: $white
-    box-shadow: none
+@import "./sass/override"
+@import "./sass/global"
+@import "./sass/index"
+@import "./sass/header"
+@import "./sass/footer"
+@import "./sass/specific"
+@import "./sass/example"
 
 html
   \::-moz-selection

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 0a75edd102e4c11e56835c97367df7aca121a394..a321e03003494d215caae32438f06e9c8d6ff5cd 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -1,4 +1,4 @@
-/*! bulma.io v0.3.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.3.1 | MIT License | github.com/jgthms/bulma */
 @-webkit-keyframes spinAround {
   from {
     -webkit-transform: rotate(0deg);
@@ -801,6 +801,10 @@ a.box:active {
   color: #0a0a0a;
 }
 
+.button.is-white.is-outlined.is-loading:after {
+  border-color: transparent transparent white white !important;
+}
+
 .button.is-white.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #0a0a0a;
@@ -862,6 +866,10 @@ a.box:active {
   color: white;
 }
 
+.button.is-black.is-outlined.is-loading:after {
+  border-color: transparent transparent #0a0a0a #0a0a0a !important;
+}
+
 .button.is-black.is-inverted.is-outlined {
   background-color: transparent;
   border-color: white;
@@ -923,6 +931,10 @@ a.box:active {
   color: #363636;
 }
 
+.button.is-light.is-outlined.is-loading:after {
+  border-color: transparent transparent whitesmoke whitesmoke !important;
+}
+
 .button.is-light.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #363636;
@@ -984,6 +996,10 @@ a.box:active {
   color: whitesmoke;
 }
 
+.button.is-dark.is-outlined.is-loading:after {
+  border-color: transparent transparent #363636 #363636 !important;
+}
+
 .button.is-dark.is-inverted.is-outlined {
   background-color: transparent;
   border-color: whitesmoke;
@@ -1045,6 +1061,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-primary.is-outlined.is-loading:after {
+  border-color: transparent transparent #00d1b2 #00d1b2 !important;
+}
+
 .button.is-primary.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -1106,6 +1126,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-info.is-outlined.is-loading:after {
+  border-color: transparent transparent #3273dc #3273dc !important;
+}
+
 .button.is-info.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -1167,6 +1191,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-success.is-outlined.is-loading:after {
+  border-color: transparent transparent #23d160 #23d160 !important;
+}
+
 .button.is-success.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -1228,6 +1256,10 @@ a.box:active {
   color: rgba(0, 0, 0, 0.7);
 }
 
+.button.is-warning.is-outlined.is-loading:after {
+  border-color: transparent transparent #ffdd57 #ffdd57 !important;
+}
+
 .button.is-warning.is-inverted.is-outlined {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.7);
@@ -1289,6 +1321,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-danger.is-outlined.is-loading:after {
+  border-color: transparent transparent #ff3860 #ff3860 !important;
+}
+
 .button.is-danger.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -7059,28 +7095,6 @@ svg {
   right: 0;
 }
 
-#github {
-  color: #333333;
-  border-color: #333333;
-}
-
-#github:hover {
-  background: #333333;
-  border-color: #333333;
-  color: white;
-}
-
-#twitter {
-  color: #55acee;
-  border-color: #55acee;
-}
-
-#twitter:hover {
-  background: #55acee;
-  border-color: #55acee;
-  color: white;
-}
-
 @-webkit-keyframes floatUp {
   0% {
     box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
@@ -7250,8 +7264,6 @@ svg {
 }
 
 #b {
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
   -webkit-animation-duration: 1.5s;
           animation-duration: 1.5s;
   -webkit-animation-fill-mode: both;
@@ -7334,15 +7346,13 @@ svg {
 #bulma {
   -webkit-animation: slideDown 500ms both;
           animation: slideDown 500ms both;
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
 }
 
 #modern-framework {
   -webkit-animation: slideUp 500ms both;
           animation: slideUp 500ms both;
-  -webkit-animation-delay: 1.2s;
-          animation-delay: 1.2s;
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
 }
 
 #npm {
@@ -7351,8 +7361,8 @@ svg {
           align-items: center;
   -webkit-animation: fadeIn 500ms both;
           animation: fadeIn 500ms both;
-  -webkit-animation-delay: 1.4s;
-          animation-delay: 1.4s;
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
   background: none;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7375,22 +7385,22 @@ svg {
 #ghbtns {
   -webkit-animation: slideDown 500ms both;
           animation: slideDown 500ms both;
-  -webkit-animation-delay: 1.6s;
-          animation-delay: 1.6s;
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
 }
 
 html.route-index #carbon {
   -webkit-animation: slideUp 500ms both;
           animation: slideUp 500ms both;
-  -webkit-animation-delay: 1.8s;
-          animation-delay: 1.8s;
+  -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
 }
 
 #download {
   -webkit-animation: fadeIn 500ms both;
           animation: fadeIn 500ms both;
-  -webkit-animation-delay: 2s;
-          animation-delay: 2s;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
 }
 
 #grid .notification {
@@ -7409,6 +7419,28 @@ html.route-index #carbon {
   padding: 1.5rem;
 }
 
+#github {
+  color: #333333;
+  border-color: #333333;
+}
+
+#github:hover {
+  background: #333333;
+  border-color: #333333;
+  color: white;
+}
+
+#twitter {
+  color: #55acee;
+  border-color: #55acee;
+}
+
+#twitter:hover {
+  background: #55acee;
+  border-color: #55acee;
+  color: white;
+}
+
 #mc_embed_signup .control {
   margin-bottom: 0;
 }
@@ -7649,11 +7681,6 @@ html.route-index #carbon {
   border-right: none;
 }
 
-#newsletter .input {
-  border-color: white;
-  box-shadow: none;
-}
-
 html ::-moz-selection {
   background: #00d1b2;
   color: #fff;

diff --git a/docs/sass/example.sass b/docs/sass/example.sass
new file mode 100644 (file)
index 0000000..7089ecb
--- /dev/null
+++ b/docs/sass/example.sass
@@ -0,0 +1,124 @@
+.example,
+.structure
+  border: 1px solid $warning
+  border-top-right-radius: $radius
+  color: $warning-invert
+  padding: 1.25rem 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
+    pre
+      max-height: 50vh
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+
+$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

diff --git a/docs/sass/footer.sass b/docs/sass/footer.sass
new file mode 100644 (file)
index 0000000..3470f0a
--- /dev/null
+++ b/docs/sass/footer.sass
@@ -0,0 +1,20 @@
+#mc_embed_signup
+  .control
+    margin-bottom: 0
+  .notification
+    margin-top: 0.75rem
+
+#social
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  margin-bottom: 1em
+  justify-content: center
+  a
+    display: inline-block
+    font-size: 11px
+    height: 20px
+    line-height: 20px
+    margin: 5px
+  iframe
+    margin: 5px

diff --git a/docs/sass/global.sass b/docs/sass/global.sass
new file mode 100644 (file)
index 0000000..c399cbf
--- /dev/null
+++ b/docs/sass/global.sass
@@ -0,0 +1,48 @@
+svg
+  max-height: 100%
+  max-width: 100%
+
+$carbon-space: 15px
+
+#carbon
+  max-width: 340px
+  min-height: 100px + ($carbon-space * 2)
+  padding: 0
+  position: relative
+  &:hover
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
+  +tablet
+    margin-left: auto
+    margin-right: auto
+    width: 340px
+
+#carbonads
+  text-align: left
+  a,
+  span
+    display: block
+  .carbon-wrap
+    position: relative
+  .carbon-img
+    float: left
+    height: 130px
+    padding: 15px 0 15px 15px
+    width: 145px
+    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

diff --git a/docs/sass/header.sass b/docs/sass/header.sass
new file mode 100644 (file)
index 0000000..edbfb62
--- /dev/null
+++ b/docs/sass/header.sass
@@ -0,0 +1,18 @@
+$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

diff --git a/docs/sass/index.sass b/docs/sass/index.sass
new file mode 100644 (file)
index 0000000..1bd31ed
--- /dev/null
+++ b/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

diff --git a/docs/sass/override.sass b/docs/sass/override.sass
new file mode 100644 (file)
index 0000000..da3cbdc
--- /dev/null
+++ b/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

diff --git a/docs/sass/specific.sass b/docs/sass/specific.sass
new file mode 100644 (file)
index 0000000..e8f8882
--- /dev/null
+++ b/docs/sass/specific.sass
@@ -0,0 +1,11 @@
+#images
+  tr
+    td:nth-child(2)
+      width: 320px
+
+.color
+  display: inline-block
+  float: left
+  height: 18px
+  margin-right: 5px
+  width: 18px