mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Use tws
This commit is contained in:
Jeremy Thomas
parent
e082865ab7
commit
1da5ad3912
22
docs/_config-local.yml
Normal file
22
docs/_config-local.yml
Normal file
@ -0,0 +1,22 @@
|
||||
# Meta
|
||||
|
||||
title: "Bulma: a modern CSS framework based on Flexbox"
|
||||
description: "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free."
|
||||
env: "production"
|
||||
|
||||
# Build
|
||||
|
||||
markdown: kramdown
|
||||
permalink: pretty
|
||||
url: http://localhost:4000
|
||||
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
|
||||
exclude: ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
|
||||
|
||||
# Variables
|
||||
|
||||
documentation: "/documentation/overview/start/"
|
||||
download: https://github.com/jgthms/bulma/archive/0.5.1.zip
|
||||
github: https://github.com/jgthms/bulma
|
||||
twitter: https://twitter.com/jgthms
|
||||
version: 0.5.1
|
||||
vernum: 51
|
||||
57
docs/_includes/tw.html
Normal file
57
docs/_includes/tw.html
Normal file
@ -0,0 +1,57 @@
|
||||
{% assign twUrl = "https://twitter.com/" | append: include.username | append: "/status/" | append: include.id %}
|
||||
|
||||
<article class="tw">
|
||||
<header class="tw-header">
|
||||
<a class="tw-author" href="{{ twUrl }}" target="_blank">
|
||||
<figure class="tw-avatar">
|
||||
<img src="{{ include.avatar }}">
|
||||
</figure>
|
||||
<div class="tw-name">
|
||||
<strong class="tw-fullname">
|
||||
{{ include.fullname }}
|
||||
</strong>
|
||||
<span class="tw-username">
|
||||
@{{ include.username }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="tw-content">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
|
||||
<p class="tw-date">
|
||||
<a href="{{ twUrl }}" target="_blank">
|
||||
{{ include.date }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<ul class="Tweet-actions">
|
||||
<li class="Tweet-action">
|
||||
<a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ include.id }}">
|
||||
<div class="Icon Icon--reply TweetAction-icon Icon--replyEdge"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tweet-action Tweet-action--retweet">
|
||||
<a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ include.id }}">
|
||||
<div class="Icon Icon--retweet TweetAction-icon Icon--retweetEdge"></div>
|
||||
{% if include.retweets %}
|
||||
<span class="TweetAction-stat">
|
||||
{{ include.retweets }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tweet-action Tweet-action--heart">
|
||||
<a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ include.id }}&ref_src=twsrc%5Etfw&ref_url=http%3A%2F%2Fbulma.io%2F&original_referer=http%3A%2F%2Fbulma.io%2F&tw_i={{ include.id }}&tw_p=tweetembed" target="_blank">
|
||||
<div class="Icon Icon--heartEdge TweetAction-icon Icon--heartEdge"></div>
|
||||
{% if include.hearts %}
|
||||
<span class="TweetAction-stat">
|
||||
{{ include.hearts }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
85
docs/_includes/tws.html
Normal file
85
docs/_includes/tws.html
Normal file
@ -0,0 +1,85 @@
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
{%
|
||||
include tw.html
|
||||
content='So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>'
|
||||
fullname="Francisco Cruz"
|
||||
username="atFranCruz"
|
||||
id="868829487072464897"
|
||||
date="3:01 PM - May 28, 2017"
|
||||
avatar="https://pbs.twimg.com/profile_images/802607347306594304/siN1Iznd_bigger.jpg"
|
||||
hearts="3"
|
||||
%}
|
||||
|
||||
{%
|
||||
include tw.html
|
||||
content='<a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! <img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/1f60d.png" draggable="false" alt="😍" title="Smiling face with heart-shaped eyes" aria-label="Emoji: Smiling face with heart-shaped eyes"></p>'
|
||||
fullname="Simon Jaeger"
|
||||
username="simonjaegr"
|
||||
id="834140257054502913"
|
||||
date="9:38 PM - Feb 21, 2017"
|
||||
avatar="https://pbs.twimg.com/profile_images/794696494091792384/V5WGxQTk_bigger.jpg"
|
||||
hearts="1"
|
||||
%}
|
||||
</div>
|
||||
|
||||
<div class="column is-4">
|
||||
{%
|
||||
include tw.html
|
||||
content='<p lang="en" dir="ltr">Bulma, I think I'm in love. <a href="https://t.co/APYefmC1Bs">bulma.io</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>'
|
||||
fullname="Jesse Schoff"
|
||||
username="jesseschoff"
|
||||
id="869284735440363520"
|
||||
date="9:10 PM - May 29, 2017"
|
||||
avatar="https://pbs.twimg.com/profile_images/663874141854961666/HXz-_UA4_bigger.jpg"
|
||||
hearts="2"
|
||||
%}
|
||||
|
||||
{%
|
||||
include tw.html
|
||||
content='<p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">bulma.io</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br><img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/1f4af.png" draggable="false" alt="💯" title="Hundred points symbol" aria-label="Emoji: Hundred points symbol"> <a href="https://twitter.com/jgthms">@jgthms</a>.</p>'
|
||||
fullname="scottgallant"
|
||||
username="scottgallant"
|
||||
id="835834634655174658"
|
||||
date="1:51 PM - Feb 26, 2017"
|
||||
avatar="https://pbs.twimg.com/profile_images/737847066030936064/1yHqQT-h_bigger.jpg"
|
||||
retweets="2"
|
||||
hearts="10"
|
||||
%}
|
||||
</div>
|
||||
|
||||
<div class="column is-4">
|
||||
{%
|
||||
include tw.html
|
||||
content='<p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">bulma.io</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far <img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/1f44d.png" draggable="false" alt="👍" title="Thumbs up sign" aria-label="Emoji: Thumbs up sign"></p>'
|
||||
fullname="mario zupan"
|
||||
username="mzupzup"
|
||||
id="874925154475929602"
|
||||
date="10:43 AM - Jun 14, 2017"
|
||||
avatar="https://pbs.twimg.com/profile_images/378800000350936693/8ce343d2944ad08a0935d0e485c82572_bigger.png"
|
||||
retweets="1"
|
||||
hearts="7"
|
||||
%}
|
||||
|
||||
{%
|
||||
include tw.html
|
||||
content='<a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better <img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/1f60d.png" draggable="false" alt="😍" title="Smiling face with heart-shaped eyes" aria-label="Emoji: Smiling face with heart-shaped eyes"></p>'
|
||||
fullname="juliooooo"
|
||||
username="juliooooo000"
|
||||
id="819710615337857024"
|
||||
date="2:00 AM - Jan 13, 2017"
|
||||
avatar="https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png"
|
||||
hearts="1"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-loves">
|
||||
<p class="more-loves-container">
|
||||
<a class="button is-medium is-danger rainbow" href="{{ site.url }}/love/">
|
||||
<span>See more <strong>love</strong> 🤗</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -6,6 +6,9 @@
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
.testimonial-tweet
|
||||
background-color: $white
|
||||
|
||||
.more-loves
|
||||
align-items: center
|
||||
display: flex
|
||||
@ -115,4 +118,4 @@
|
||||
margin-top: 0
|
||||
&:nth-child(3n-1),
|
||||
&:nth-child(3n)
|
||||
margin-left: 1.5rem
|
||||
margin-left: 1.5rem
|
||||
|
||||
@ -1,32 +1,159 @@
|
||||
$tw-black: #1c2022
|
||||
$tw-blue: #2b7bb9
|
||||
$tw-grey: #697882
|
||||
|
||||
.tws
|
||||
background-color: $background
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
overflow: auto
|
||||
padding: 20px
|
||||
|
||||
.tw
|
||||
color: #697882
|
||||
background-color: #fff
|
||||
border: 1px solid #e1e8ed
|
||||
border-radius: 5px
|
||||
color: $tw-grey
|
||||
flex-shrink: 0
|
||||
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
|
||||
font-size: 16px
|
||||
// height: 270px
|
||||
padding: 20px
|
||||
|
||||
.tw-header
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
|
||||
.tw-author
|
||||
align-items: center
|
||||
color: $tw-black
|
||||
display: flex
|
||||
line-height: 1.2
|
||||
&:hover
|
||||
color: $tw-blue
|
||||
|
||||
.tw-avatar
|
||||
flex-shrink: 0
|
||||
height: 36px
|
||||
margin-right: 9px
|
||||
width: 36px
|
||||
img
|
||||
border-radius: 290486px
|
||||
display: block
|
||||
height: 36px
|
||||
width: 36px
|
||||
|
||||
.tw-fullname
|
||||
color: currentColor
|
||||
display: block
|
||||
font-size: 16px
|
||||
font-weight: 700
|
||||
|
||||
.tw-username
|
||||
color: $tw-grey
|
||||
display: block
|
||||
font-size: 14px
|
||||
|
||||
.tw-content
|
||||
color: $tw-black
|
||||
font-size: 16px
|
||||
line-height: 1.4
|
||||
padding: 10px
|
||||
width: 520px
|
||||
margin-top: 14px
|
||||
a
|
||||
color: currentColor
|
||||
p
|
||||
color: #1c2022
|
||||
font-size: 16px
|
||||
margin-bottom: 3.2px
|
||||
a
|
||||
color: #2b7bb9
|
||||
color: $tw-blue
|
||||
.Emoji
|
||||
height: 1.25em
|
||||
padding: 0 .05em 0 .1em
|
||||
vertical-align: -.2em
|
||||
width: 1.25em
|
||||
|
||||
.tw-date
|
||||
font-size: 14px
|
||||
line-height: 1.4
|
||||
margin-top: 3.2px
|
||||
a
|
||||
color: $tw-grey
|
||||
&:hover
|
||||
color: $tw-blue
|
||||
|
||||
.Tweet-actions
|
||||
align-items: center
|
||||
display: flex
|
||||
margin-top: 8.4px
|
||||
|
||||
.Tweet-action
|
||||
margin-right: 1.25rem
|
||||
|
||||
.TweetAction
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 24px
|
||||
min-width: 24px
|
||||
&:hover
|
||||
.Icon--replyEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231DA1F2%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E)
|
||||
.Icon--retweetEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2317BF63%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E)
|
||||
.Icon--heartEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E0245E%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
.Tweet-action--retweet:hover
|
||||
.TweetAction-stat
|
||||
color: #17BF63
|
||||
|
||||
.Tweet-action--heart:hover
|
||||
.TweetAction-stat
|
||||
color: #E0245E
|
||||
|
||||
.TweetAction-icon
|
||||
background-size: contain
|
||||
height: 20px
|
||||
width: 20px
|
||||
|
||||
.TweetAction-stat
|
||||
color: $tw-grey
|
||||
font-size: 14px
|
||||
margin-left: 5px
|
||||
margin-top: 1px
|
||||
|
||||
.Icon--replyEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
.Icon--retweetEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
.Icon--heartEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
+mobile
|
||||
.tws
|
||||
padding: 1.5rem
|
||||
.tw
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.tws
|
||||
padding: 3rem
|
||||
.tw + .tw
|
||||
margin-top: 1.5rem
|
||||
|
||||
+desktop
|
||||
.tws
|
||||
min-height: 595px
|
||||
|
||||
+widescreen
|
||||
.tws
|
||||
min-height: 653px
|
||||
|
||||
+fullhd
|
||||
.tws
|
||||
min-height: 632px
|
||||
|
||||
.twitter-tweet:not(.twitter-tweet-rendered)
|
||||
background-color: $white
|
||||
border: 1px solid #e1e8ed
|
||||
border-radius: 5px
|
||||
color: #697882
|
||||
color: $tw-grey
|
||||
font-size: 14px
|
||||
padding: 20px 20px 11.6px
|
||||
a
|
||||
@ -34,14 +161,14 @@
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
p
|
||||
color: #1c2022
|
||||
color: $tw-black
|
||||
font-size: 16px
|
||||
margin-bottom: 3.2px
|
||||
a
|
||||
color: #2b7bb9
|
||||
color: $tw-blue
|
||||
|
||||
.twitter-tweet-rendered
|
||||
border: none
|
||||
border-radius: 0
|
||||
margin: 0 !important
|
||||
padding: 0 !important
|
||||
padding: 0 !important
|
||||
|
||||
@ -10973,6 +10973,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
}
|
||||
|
||||
.tws {
|
||||
background-color: whitesmoke;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
@ -10983,30 +10984,210 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
}
|
||||
|
||||
.tw {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 5px;
|
||||
color: #697882;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
padding: 10px;
|
||||
width: 520px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tw a {
|
||||
.tw-header {
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tw-author {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #1c2022;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tw-author:hover {
|
||||
color: #2b7bb9;
|
||||
}
|
||||
|
||||
.tw-avatar {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
height: 36px;
|
||||
margin-right: 9px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.tw-avatar img {
|
||||
border-radius: 290486px;
|
||||
display: block;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.tw-fullname {
|
||||
color: currentColor;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tw p {
|
||||
.tw-username {
|
||||
color: #697882;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tw-content {
|
||||
color: #1c2022;
|
||||
font-size: 16px;
|
||||
margin-bottom: 3.2px;
|
||||
line-height: 1.4;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.tw p a {
|
||||
.tw-content a {
|
||||
color: #2b7bb9;
|
||||
}
|
||||
|
||||
.tw-content .Emoji {
|
||||
height: 1.25em;
|
||||
padding: 0 .05em 0 .1em;
|
||||
vertical-align: -.2em;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.tw-date {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin-top: 3.2px;
|
||||
}
|
||||
|
||||
.tw-date a {
|
||||
color: #697882;
|
||||
}
|
||||
|
||||
.tw-date a:hover {
|
||||
color: #2b7bb9;
|
||||
}
|
||||
|
||||
.Tweet-actions {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-top: 8.4px;
|
||||
}
|
||||
|
||||
.Tweet-action {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
.TweetAction {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.TweetAction:hover .Icon--replyEdge {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231DA1F2%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.TweetAction:hover .Icon--retweetEdge {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2317BF63%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.TweetAction:hover .Icon--heartEdge {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E0245E%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.Tweet-action--retweet:hover .TweetAction-stat {
|
||||
color: #17BF63;
|
||||
}
|
||||
|
||||
.Tweet-action--heart:hover .TweetAction-stat {
|
||||
color: #E0245E;
|
||||
}
|
||||
|
||||
.TweetAction-icon {
|
||||
background-size: contain;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.TweetAction-stat {
|
||||
color: #697882;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.Icon--replyEdge {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.Icon--retweetEdge {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.Icon--heartEdge {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.tws {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.tw {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.tws {
|
||||
padding: 3rem;
|
||||
}
|
||||
.tw + .tw {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1008px) {
|
||||
.tws {
|
||||
min-height: 595px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.tws {
|
||||
min-height: 653px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1392px) {
|
||||
.tws {
|
||||
min-height: 632px;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter-tweet:not(.twitter-tweet-rendered) {
|
||||
background-color: white;
|
||||
border: 1px solid #e1e8ed;
|
||||
@ -11134,6 +11315,10 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testimonial-tweet {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.more-loves {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -85,8 +85,8 @@ route: index
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonials">
|
||||
{% include testimonials.html %}
|
||||
<section class="tws">
|
||||
{% include tws.html %}
|
||||
</section>
|
||||
|
||||
<section class="section is-medium">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user