css "だけ"で サイトをtwitter風にするコツ ref: https://qiita.com/tomokinex/items/d96feb18633949470c26

file0.css

 display:none

file1.css

/*タイムラインっぽくするwraper*/
div#activity {
    padding: 0;
    background: #ffffff;
    overflow: hidden;
    max-width: 700px;
    margin: 20px auto;
    font-size: 80%;
    border: solid 1px #eeeeee;
    height: 800px;
    overflow-y: scroll;
}
/*日付をヘッダーっぽくする*/
div#activity h3 {
    background: #58aeed;
    padding: 10px;
    text-align: center;
    margin: 0 auto;
    display: block;
    color: #eeeeee;
}

file2.css

/*それぞれの要素を1tweetっぽく*/
/*groupedついてるやつが小さく表示されるやつ*/
div#activity dd {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 0px;
    margin-bottom: 5px;
    border-bottom: solid 1px #eeeeee;
    overflow: hidden;
    margin-left: 0px;
    font-size: 15px;
}
div#activity dd.grouped {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 0px;
    margin-bottom: 5px;
    border-bottom: solid 1px #eeeeee;
    overflow: hidden;
    margin-left: 100px;
    font-size: 15px;
}
/*本文*/
div#activity dd span.description {
    order: 2;
    margin-left: 000px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000000;
    font-style: normal;
}

file3.css

/*アイコン画像のwrapper*/
dl dt {
  width: 50px;
  height: 50px;
}
/*アイコン画像のwrapper内の要素を外に出す*/
dl dt a {
  font-size: 14px;
  position: relative;
  top: 20px;
  left: 150px;
  white-space: nowrap;
}
/*アイコン画像*/
a.user[href="/users/0"] {
  background-image: url();
  display: inline-block;
  height: 78px;
  background-position: 0px 18px;
  background-repeat: no-repeat;
  background-size: 50px;
}