change tweet styling and expect the link first

4 files changed, 14 insertions, 14 deletions

diff --git a/exampleSite/content/typography.md b/exampleSite/content/typography.md
index a10e6c6..8ac59ae 100644
--- a/exampleSite/content/typography.md
+++ b/exampleSite/content/typography.md
@@ -91,11 +91,11 @@ And an ordered list:
 
 ### Quotes That Link To Tweets
 
-If you don't like embedding tweets, Story has a cleaner way to quote and link to a tweet. Just blockquote the content and end it with a paragraph containing the author's name and the tweet's permalink, and enable the `feature-tweetquote` flag. Story will transform the quote to resemble a simplistic tweet styling. If the flag isn't enabled, normal blockquote styling applies.
+If you don't like embedding tweets, Story has a cleaner way to quote and link to a tweet. Just blockquote the content and begin it with a link containing the author's name and the tweet's permalink, and enable the `feature-tweetquote` flag. Story will transform the quote to resemble a simplistic tweet styling. If the flag isn't enabled, normal blockquote styling applies.
 
-> Monitoring tells you whether the system works. Observability lets you ask why it's not working.
-> 
 > [Baron Sc​hwartz](https://twitter.com/xaprb/status/921004656402321408)
+>
+> Monitoring tells you whether the system works. Observability lets you ask why it's not working.
 
 <script type="text/javascript">
 $( "#hyph" ).click(function() {
diff --git a/static/css/story.css b/static/css/story.css
index ca486e4..868fd25 100644
--- a/static/css/story.css
+++ b/static/css/story.css
@@ -218,12 +218,10 @@ body.feature-fignum table caption::before {
   margin: 0 1rem 1rem 0;
 }
 blockquote.tweet {
-	border: 1px solid #e1e8ed;
+	border: 1px solid #dfe2e5;
 	border-radius: 5px;
   padding: 4px 20px;
-}
-blockquote.tweet p:last-child {
-	text-align: right !important;
+  color: black;
 }
 .pagination li {
   display: inline-block;
diff --git a/static/css/story.less b/static/css/story.less
index 6f0febc..10f0ffb 100644
--- a/static/css/story.less
+++ b/static/css/story.less
@@ -249,12 +249,10 @@ body {
 }
 
 blockquote.tweet {
-	border: 1px solid #e1e8ed;
+	border: 1px solid @border;
 	border-radius: 5px;
 	padding: 4px 20px;
-	p:last-child {
-		text-align: right !important;
-	}
+	color: black;
 }
 
 .pagination li {
diff --git a/static/js/story.js b/static/js/story.js
index ff247f5..13582fc 100644
--- a/static/js/story.js
+++ b/static/js/story.js
@@ -42,10 +42,14 @@ $( function() {
 // with a twitter permalink URL.
 $( function() {
    if ( $( "body.feature-tweetquote:not(.feature-notweetquote)" ).length ) {
-      $("blockquote p:last-child a[href*='twitter.com']").each(function(i, e){
+      $("blockquote p:first-child a[href*='twitter.com']").each(function(i, e){
          $(this.parentElement.parentElement).addClass("tweet sans-serif mw6");
-         $(this).addClass("no-underline link dim");
-         $(this).append(' <i class="fab fa-twitter fa-lg">');
+         $(this).addClass("no-underline link dim b dib v-top");
+         $(this).prepend('<i class="fl mr2 v-top fab fa-twitter-square fa-3x">');
+         var m = $(this).attr('href').match(/twitter.com\/([^\/]*)\//);
+         if (m.length > 1) {
+            $(this).append('<br><span class="normal gray">@' + m[1] + '</span>');
+         }
       });
    }
 });