From e0b28c8ae896a31fe63ee4c35ba803b4e4b783e7 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 23 Dec 2016 12:13:50 +0000 Subject: [PATCH] Fix index --- docs/css/bulma-docs.css | 621 ++++++++++++++++-- docs/documentation/grid/columns.html | 1 + .../modifiers/responsive-helpers.html | 6 +- docs/documentation/modifiers/syntax.html | 46 +- docs/documentation/overview/modular.html | 1 + docs/index.html | 10 +- sass/elements/title.sass | 3 - sass/layout/hero.sass | 6 +- 8 files changed, 610 insertions(+), 84 deletions(-) diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index df8b64f0..f6e9161b 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -2693,11 +2693,6 @@ a.box:active { font-weight: 300; } -.title a:hover, -.subtitle a:hover { - border-bottom: 1px solid; -} - .title strong, .subtitle strong { font-weight: 500; @@ -5442,13 +5437,13 @@ label.panel-block:hover { color: #0a0a0a; } -.hero.is-white .title { - color: #0a0a0a; +.hero.is-white a, +.hero.is-white strong { + color: inherit; } -.hero.is-white .title a, -.hero.is-white .title strong { - color: inherit; +.hero.is-white .title { + color: #0a0a0a; } .hero.is-white .subtitle { @@ -5532,13 +5527,13 @@ label.panel-block:hover { color: white; } -.hero.is-black .title { - color: white; +.hero.is-black a, +.hero.is-black strong { + color: inherit; } -.hero.is-black .title a, -.hero.is-black .title strong { - color: inherit; +.hero.is-black .title { + color: white; } .hero.is-black .subtitle { @@ -5622,13 +5617,13 @@ label.panel-block:hover { color: #363636; } -.hero.is-light .title { - color: #363636; +.hero.is-light a, +.hero.is-light strong { + color: inherit; } -.hero.is-light .title a, -.hero.is-light .title strong { - color: inherit; +.hero.is-light .title { + color: #363636; } .hero.is-light .subtitle { @@ -5712,13 +5707,13 @@ label.panel-block:hover { color: whitesmoke; } -.hero.is-dark .title { - color: whitesmoke; +.hero.is-dark a, +.hero.is-dark strong { + color: inherit; } -.hero.is-dark .title a, -.hero.is-dark .title strong { - color: inherit; +.hero.is-dark .title { + color: whitesmoke; } .hero.is-dark .subtitle { @@ -5802,13 +5797,13 @@ label.panel-block:hover { color: #fff; } -.hero.is-primary .title { - color: #fff; +.hero.is-primary a, +.hero.is-primary strong { + color: inherit; } -.hero.is-primary .title a, -.hero.is-primary .title strong { - color: inherit; +.hero.is-primary .title { + color: #fff; } .hero.is-primary .subtitle { @@ -5892,13 +5887,13 @@ label.panel-block:hover { color: #fff; } -.hero.is-info .title { - color: #fff; +.hero.is-info a, +.hero.is-info strong { + color: inherit; } -.hero.is-info .title a, -.hero.is-info .title strong { - color: inherit; +.hero.is-info .title { + color: #fff; } .hero.is-info .subtitle { @@ -5982,13 +5977,13 @@ label.panel-block:hover { color: #fff; } -.hero.is-success .title { - color: #fff; +.hero.is-success a, +.hero.is-success strong { + color: inherit; } -.hero.is-success .title a, -.hero.is-success .title strong { - color: inherit; +.hero.is-success .title { + color: #fff; } .hero.is-success .subtitle { @@ -6072,13 +6067,13 @@ label.panel-block:hover { color: rgba(0, 0, 0, 0.7); } -.hero.is-warning .title { - color: rgba(0, 0, 0, 0.7); +.hero.is-warning a, +.hero.is-warning strong { + color: inherit; } -.hero.is-warning .title a, -.hero.is-warning .title strong { - color: inherit; +.hero.is-warning .title { + color: rgba(0, 0, 0, 0.7); } .hero.is-warning .subtitle { @@ -6162,13 +6157,13 @@ label.panel-block:hover { color: #fff; } -.hero.is-danger .title { - color: #fff; +.hero.is-danger a, +.hero.is-danger strong { + color: inherit; } -.hero.is-danger .title a, -.hero.is-danger .title strong { - color: inherit; +.hero.is-danger .title { + color: #fff; } .hero.is-danger .subtitle { @@ -6293,3 +6288,529 @@ label.panel-block:hover { background-color: whitesmoke; padding: 3rem 1.5rem 6rem; } + +@media screen and (min-width: 769px) { + .button small { + color: #4a4a4a; + 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; +} + +@media screen and (min-width: 769px) { + .header-item .button + .button { + margin-left: 0.75rem; + } +} + +svg { + max-height: 100%; + max-width: 100%; +} + +#carbon { + max-width: 340px; + min-height: 130px; + padding: 15px; +} + +@media screen and (min-width: 769px) { + #carbon { + margin-left: auto; + margin-right: auto; + width: 340px; + } +} + +#carbonads { + text-align: left; +} + +#carbonads a:hover { + text-decoration: underline; +} + +#carbonads span { + display: block; +} + +#carbonads .carbon-img { + float: left; + height: 100px; + width: 130px; +} + +#carbonads .carbon-img img { + display: block; +} + +#carbonads .carbon-text { + display: block; + color: #363636; + margin-left: 145px; +} + +#carbonads .carbon-poweredby { + font-size: 0.75rem; + margin-left: 15px; +} + +#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; +} + +@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); + transform: scale(0.86); + } + 67% { + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + transform: scale(1); + } + 100% { + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 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); + } +} + +#b { + animation-delay: 1s; + animation-duration: 1.5s; + animation-fill-mode: both; + animation-name: floatUp; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + border-radius: 24px; + display: inline-block; + height: 240px; + margin-bottom: 40px; + position: relative; + vertical-align: top; + width: 240px; +} + +#b svg { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + display: block; + height: 240px; + width: 240px; +} + +#b svg:first-child { + animation-duration: 1.5s; + animation-fill-mode: both; + animation-name: fadeOut; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); +} + +#b svg:first-child g { + animation-duration: 1s; + animation-fill-mode: both; + animation-name: strokePath; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + fill: none; + stroke: #00d1b2; + stroke-dasharray: 880; + stroke-width: 2px; +} + +#b svg:last-child { + animation-delay: 1s; + animation-duration: 1s; + animation-fill-mode: both; + animation-name: fadeIn; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); +} + +#b svg:last-child g { + fill: #00d1b2; +} + +@media screen and (max-width: 768px) { + #b { + 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 { + animation: fadeIn 500ms both; + animation-delay: 1.4s; + margin: -10px 0 20px; +} + +#npm code { + border-radius: 3px; + color: #00d1b2; + 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: 5px; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + padding: 1.5rem; +} + +#mc_embed_signup .control { + margin-bottom: 0; +} + +#mc_embed_signup .notification { + margin-top: 0.75rem; +} + +#social { + align-items: center; + display: flex; + flex-wrap: wrap; + margin-bottom: 1em; + justify-content: center; +} + +#social a { + display: inline-block; + font-size: 11px; + height: 20px; + line-height: 20px; + margin: 5px; +} + +#social 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 #ffdd57; + border-top-right-radius: 3px; + color: rgba(0, 0, 0, 0.7); + padding: 1.25rem 1.5rem; + position: relative; +} + +.example:not(:first-child), +.structure:not(:first-child) { + margin-top: 2rem; +} + +.example:not(:last-child), +.structure:not(:last-child) { + margin-bottom: 1.5rem; +} + +.example:before, +.structure:before { + background: #ffdd57; + border-radius: 3px 3px 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; +} + +@media screen and (min-width: 769px) { + .example.is-fullwidth, + .structure.is-fullwidth { + border-left: none; + border-right: none; + padding: 0; + } +} + +.example + .highlight { + border: 1px solid #ffdd57; + border-radius: 0 0 3px 3px; + border-top: none; + margin-top: -1.5rem; +} + +.example + .highlight pre { + max-height: 600px; +} + +.example + .highlight:not(:last-child) { + margin-bottom: 1.5rem; +} + +.structure { + border-color: #ff3860; + border-radius: 3px; + padding: 1.5rem; +} + +.structure:before { + background: #ff3860; + color: #fff; + content: "Structure"; +} + +.structure-item { + position: relative; +} + +.structure-item:before { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background: rgba(10, 10, 10, 0.7); + background: whitesmoke; + border: 1px solid #dbdbdb; + content: ""; + display: block; + z-index: 1; +} + +.structure-item:after { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + align-items: center; + content: attr(title); + display: flex; + font-family: "Inconsolata", "Consolas", "Monaco", monospace; + font-size: 11px; + justify-content: center; + padding: 3px 5px; + z-index: 2; +} + +.structure-item.is-structure-container { + padding: 1.5rem 0.75rem 0.75rem; +} + +.structure-item.is-structure-container:after { + align-items: flex-start; + justify-content: flex-start; + padding: 0.5rem 0.75rem; +} + +.highlight { + position: relative; +} + +.highlight .copy, +.highlight .expand { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: white; + border: solid #dbdbdb; + border-width: 0 0 1px 1px; + color: #7a7a7a; + cursor: pointer; + outline: none; + position: absolute; + right: 0; + top: 0; +} + +.highlight .copy:hover, +.highlight .expand:hover { + border-color: #ff3860; + color: #ff3860; +} + +.highlight .expand { + border-right-width: 1px; + right: 50px; +} + +@media screen and (min-width: 769px) { + .highlight pre { + white-space: pre-wrap; + } +} + +@media screen and (min-width: 769px) { + .section:not(.is-fullwidth) > .example:not(.is-fullwidth) { + margin-left: 1.5rem; + margin-right: 1.5rem; + } + .section:not(.is-fullwidth) > .example:not(.is-fullwidth) + .highlight { + margin-left: 1.5rem; + margin-right: 1.5rem; + } +} + +.section.is-fullwidth { + padding: 0 !important; +} + +.section.is-fullwidth .example { + border-left: none; + border-radius: 0; + border-right: none; + padding: 0; +} + +.section.is-fullwidth .example + .highlight { + border-left: none; + border-radius: 0; + border-right: none; +} + +#newsletter .input { + border-color: white; + box-shadow: none; +} + +html ::-moz-selection { + background: #00d1b2; + color: #fff; +} + +html ::selection { + background: #00d1b2; + color: #fff; +} diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html index 9009a6cb..10eace29 100644 --- a/docs/documentation/grid/columns.html +++ b/docs/documentation/grid/columns.html @@ -17,6 +17,7 @@ doc-subtab: columns
  • Add a columns container
  • Add as many column elements as you want
    • +

    Each column will have an equal width, no matter the number of columns.

    diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index e04333ae..d01a7a82 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -200,15 +200,15 @@ doc-subtab: responsive-helpers Tablet
    - Between 769px and 979px + Between 769px and 999px Desktop
    - Between 980px and 1179px + Between 1000px and 1239px Widescreen
    - Above 1180px + Above 1240px diff --git a/docs/documentation/modifiers/syntax.html b/docs/documentation/modifiers/syntax.html index 8539ddc1..46f4fa0d 100644 --- a/docs/documentation/modifiers/syntax.html +++ b/docs/documentation/modifiers/syntax.html @@ -17,16 +17,19 @@ doc-subtab: syntax

    Let's start with a simple button that uses the "button" CSS class:

    +{% capture button_example %} + + Button + +{% endcapture %}

    - Button + {{button_example}}

    {% highlight html %} - - Button - +{{button_example}} {% endhighlight %}
    @@ -34,16 +37,19 @@ doc-subtab: syntax

    By adding the "is-primary" CSS class, you can modify the color:

    +{% capture button_primary_example %} + + Button + +{% endcapture %}

    - Button +{{button_primary_example}}

    {% highlight html %} - - Button - +{{button_primary_example}} {% endhighlight %}
    @@ -124,18 +130,18 @@ doc-subtab: syntax
    {% highlight html %} -

    - Button -

    -

    - Button -

    -

    - Button -

    -

    - Button -

    + + Button + + + Button + + + Button + + + Button + {% endhighlight %}
    diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html index 8bd676b2..a0e995bc 100644 --- a/docs/documentation/overview/modular.html +++ b/docs/documentation/overview/modular.html @@ -47,6 +47,7 @@ doc-subtab: modular What if you only want the button styles instead?

    {% highlight sass %} +@import "bulma/sass/utilities/_all @import "bulma/sass/elements/button.sass" {% endhighlight %}

    diff --git a/docs/index.html b/docs/index.html index 350d6372..bd0e0288 100644 --- a/docs/index.html +++ b/docs/index.html @@ -486,22 +486,22 @@ route: index

    Buttons, form controls, menus, tabs, titles, notifications, etc.

    -
    +
    - + Image
    -
    - Image +
    + Image
    -

    Card

    +

    Card

    Subtitle

    diff --git a/sass/elements/title.sass b/sass/elements/title.sass index 0fb62b4e..c381ad9d 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -15,9 +15,6 @@ $subtitle-weight: $weight-light !default em, span font-weight: $title-weight - a - &:hover - border-bottom: 1px solid strong font-weight: $title-weight-bold .tag diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index 661752e9..6f2acb74 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -68,11 +68,11 @@ &.is-#{$name} background-color: $color color: $color-invert + a, + strong + color: inherit .title color: $color-invert - a, - strong - color: inherit .subtitle color: rgba($color-invert, 0.9) a,