Improve message

This commit is contained in:
Jeremy Thomas 2018-04-11 16:07:35 +01:00
parent 4380aacda6
commit 24878c09bc
6 changed files with 2598 additions and 803 deletions

View File

@ -1,28 +1,37 @@
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-4"> <div class="column is-4">
{% assign tweet = site.data.love.tweets_by_id.910956939886043136 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweets_by_id.910956939886043136 %}
{% assign tweet = site.data.love.tweets_by_id.912690697416753152 %}{% include elements/tw.html tweet=tweet%} {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.834140257054502913 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweets_by_id.912690697416753152 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.834140257054502913 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
</div> </div>
<div class="column is-4"> <div class="column is-4">
{% assign tweet = site.data.love.tweets_by_id.869284735440363520 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweets_by_id.869284735440363520 %}
{% assign tweet = site.data.love.tweets_by_id.835834634655174658 %}{% include elements/tw.html tweet=tweet%} {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.874925154475929602 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweets_by_id.835834634655174658 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.874925154475929602 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
</div> </div>
<div class="column is-4"> <div class="column is-4">
{% assign tweet = site.data.love.tweets_by_id.915580081938018304 %} {% assign tweet = site.data.love.tweets_by_id.915580081938018304 %}
{% include {% include
elements/tw.html elements/tw.html
modifier='bd-is-white'
tweet=tweet tweet=tweet
drawing_id='love-letters' drawing_id='love-letters'
drawing_width=240 drawing_width=240
drawing_height=120 drawing_height=120
%} %}
{% assign tweet = site.data.love.tweets_by_id.903629781744439297 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweets_by_id.903629781744439297 %}
{% assign tweet = site.data.love.tweets_by_id.909653512010833920 %}{% include elements/tw.html tweet=tweet%} {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.909653512010833920 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
</div> </div>
</div> </div>

View File

@ -9,7 +9,7 @@
</a> </a>
</h3> </h3>
<h4 class="subtitle is-4"> <h4 class="subtitle is-4">
See what <strong>Bulma fans</strong> are saying See what Bulma fans are saying
</h4> </h4>
</header> </header>

View File

@ -7,8 +7,7 @@ $tw-border: #e1e8ed
background-color: $white-bis background-color: $white-bis
.bd-tw .bd-tw
background-color: #fff background-color: $white-bis
border: 2px solid $background
border-radius: $radius-large border-radius: $radius-large
color: $tw-grey color: $tw-grey
flex-shrink: 0 flex-shrink: 0
@ -16,9 +15,8 @@ $tw-border: #e1e8ed
font-size: 16px font-size: 16px
max-width: 420px max-width: 420px
padding: 20px padding: 20px
&.bd-is-grey &.bd-is-white
background-color: $white-bis background-color: $white
border: none
.bd-tw-header .bd-tw-header
align-items: stretch align-items: stretch

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -3,17 +3,21 @@ $message-radius: $radius !default
$message-header-background-color: $text !default $message-header-background-color: $text !default
$message-header-color: $text-invert !default $message-header-color: $text-invert !default
$message-header-padding: 0.5em 0.75em !default $message-header-weight: $weight-bold !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default $message-header-radius: $radius !default
$message-body-border: 1px solid $border !default $message-body-border-color: $border !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default $message-body-color: $text !default
$message-body-padding: 1em 1.25em !default $message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default $message-body-radius: $radius !default
$message-body-pre-background-color: $white !default $message-body-pre-background-color: $white !default
$message-body-pre-code-background-color: transparent !default $message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
.message .message
+block +block
background-color: $message-background-color background-color: $message-background-color
@ -54,6 +58,7 @@ $message-body-pre-code-background-color: transparent !default
border-radius: $message-header-radius $message-header-radius 0 0 border-radius: $message-header-radius $message-header-radius 0 0
color: $message-header-color color: $message-header-color
display: flex display: flex
font-weight: $message-header-weight
justify-content: space-between justify-content: space-between
line-height: 1.25 line-height: 1.25
padding: $message-header-padding padding: $message-header-padding
@ -63,13 +68,15 @@ $message-body-pre-code-background-color: transparent !default
flex-shrink: 0 flex-shrink: 0
margin-left: 0.75em margin-left: 0.75em
& + .message-body & + .message-body
border-width: $message-header-body-border-width
border-top-left-radius: 0 border-top-left-radius: 0
border-top-right-radius: 0 border-top-right-radius: 0
border-top: none
.message-body .message-body
border: $message-body-border border-color: $message-body-border-color
border-radius: $message-body-radius border-radius: $message-body-radius
border-style: solid
border-width: $message-body-border-width
color: $message-body-color color: $message-body-color
padding: $message-body-padding padding: $message-body-padding
code, code,