added custom css and js for better appearance

docs/news.rst

@@ -1,5 +1,26 @@
 .. raw:: html
-
-    <embed >
-    <a class="twitter-timeline" data-width="550" data-height="900" href="https://twitter.com/tardis_sn?ref_src=twsrc%5Etfw">Tweets by tardis_sn</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-    </embed>
+
+    <div class = "twitter-block"  style = "width:100%; display: flex; justify-content: center;">
+    <a class="twitter-timeline" data-width="850" data-height="900" href="https://twitter.com/tardis_sn?ref_src=twsrc%5Etfw">Tweets by tardis_sn</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+    </div>
+
+
+
+    <script>
+    jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
+    //function call to override the base twitter styles
+    customizeTweetMedia();
+    });
+
+    var customizeTweetMedia = function() {
+        //overrides css 
+        jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Header-title.u-inlineBlock').css('font-size', '18px');
+        jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Header-title.u-inlineBlock').children().css('font-size', '18px');
+        jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css({'font-size': '16px', 'font': 'Lato,proxima-nova,Helvetica Neue,Arial,sans-serif;', 'line-height': '1.1'});
+
+        //also call the function on dynamic updates in addition to page load
+        jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
+        customizeTweetMedia(this);
+        });
+    }
+    </script>