fix twitter

Author: Warry

resources/css/main.css

@@ -1419,14 +1419,19 @@ h2.twitterhdr > span {
   float: right;
 }
 
-.tweets { position: relative; }
+.tweets { position: relative; zoom: 1; }
+.tweets:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
 
 .tweet-container {
   position: relative;
   float: left;
-  width: 220px;
+  width: 215px;
   height: 230px;
-  margin-right: 20px;
+  margin: 0 10px;
   vertical-align: bottom;
 }
 
@@ -1459,12 +1464,12 @@ h2.twitterhdr > span {
 .original-tweet { font-family: "museo-slab", serif; font-size: 13px; padding-top: 8px; color: #fff;}
 .original-tweet > a { color: #fff; /*color: #839496;*/ font-weight: normal; text-decoration: none; border: none; }
 .original-tweet > a:hover { color: #DC322F; }
-.tweet-username { position: relative; top: 10px; left: -10px; color: #839496; white-space: nowrap; line-height: 1em;}
+.tweet-username { color: rgb(131, 148, 150); white-space: nowrap; line-height: 1em; display: inline-block; padding-left: .5em; }
 .tweet-username > a { color: #fff; /*color: #657B83;*/ font-weight: bold; text-decoration: none; border: none; }
 .tweet-username > a:hover { color: #DC322F; border: none; }
 .triangle { position: relative; bottom: 9px; left: 40px; height: 0px; width: 1px; margin-left: auto; margin-right: auto; border-top: 16px solid rgba(0, 30, 30, 0.7); border-left: none; border-right: 16px solid transparent; border-bottom: none; }
 .bottom-anchored { position: absolute; bottom: 0px; }
-.lh1em { line-height: 1em; }
+.avatar-wrapper { border-radius: 40px; overflow: hidden; width: 50px; height: 50px; display: inline-block; margin-left: 12px; }
 
 .caret-container{ position: absolute; bottom: 60px; }
 .caret-divider{ position:absolute;top:0;left:28px;width:16px;height:8px}

resources/css/prettify.css

@@ -1,6 +1,6 @@
 
 .prettyprint { background-color: #073642; }
-.prettyprint code { color: #839496; white-space: nowrap;  overflow: auto; }
+.prettyprint code { color: #839496;  overflow: auto; }
 .prettyprint .pln { color: inherit; }
 .prettyprint .str, .prettyprint .atv { color: #2aa198; }
 .prettyprint .lit { color: #D33682;}

resources/js/main.js

@@ -156,17 +156,13 @@ $(document).ready(function(){
               <div class="caret-inner"></div>\
             </div>\
           </div>\
-          <div class="raw bootom-anchored">\
-            <div class="span1">\
-              <div class="thumbnail">\
-                <img class="avatar" width="70" height="70" src="" />\
-              </div>\
-            </div>\
-            <div class="span2 lh1em">\
-              <span class="tweet-username">\
-                <a href="" class="username" rel="external"></a>\
-              </span>\
+          <div class="raw bottom-anchored">\
+            <div class="avatar-wrapper">\
+              <img class="avatar" width="50" height="50" src="" />\
             </div>\
+            <span class="tweet-username">\
+              <a href="" class="username" rel="external"></a>\
+            </span>\
           </div>\
         </div>\
       '