facebook 單一動態切版

by rulin shyu

HTML

<article class="article">
    <header class="article__header">
        <img src="https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-1/13221646_591623167677666_3112850048912983202_n.jpg?oh=cdf6a94ab6bdc2d56ca9e0bea32d1ae4&oe=58F226A3" alt="IT 幫幫忙" />
        <div class="article__info">
            <a class="article__author" href="#"> IT 邦幫忙</a>
            <a class="article__time" href="#"><time>12月8日 15:37</time></a>
        </div>
    </header>
    <div>
        <p>【iT邦幫忙鐵人賽】</p>
        <p>今年鐵人賽的文章好專業，小財神好推薦大家來看看各主題的好文，這邊分享一個 以 Ansible 及 Jenkins-CI 為主題參賽DevOps的文章，邀請大家一起來團練。</p>
        
        <p><a href="#"></a></p>
        <p><a href="#"></a></p>
        <p><a href="#"></a></p>
        
        <a href="#">
            <img src="https://external-tpe1-1.xx.fbcdn.net/safe_image.php?d=AQCpPuHbveQSX1la&w=158&h=158&url=fbstaging%3A%2F%2Fgraph.facebook.com%2Fstaging_resources%2FMDE3MDIwMTA5NTk5NzIyMTk6MjA1NDk4ODk3NA%3D%3D&cfs=1&upscale=1&_nc_hash=AQC2O0zCiIkYhckO" alt="縮圖">
            <div>
                <h2>鐵人檔案 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天</h2>
                <p>iT 邦幫忙是 IT 領域的技術問答與分享社群，透過 IT 人互相幫忙，一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧，拯救下一個卡關的 IT…</p>
            </div>
        </a>
    </div>
    <footer>
        <div>
            <button><span></span>讚</button>
            <button><span></span>留言</button>
            <button><span></span>分享</button>
        </div>
        <button>
            <img src="https://member.ithome.com.tw/avatars/118437?s=ithelp" alt="您的大頭貼">
            <span></span>
        </button>
    </footer>
</article>

SCSS

a {
    text-decoration: none;
}

.article {
    margin: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
}

.article__header {
    display: flex;
    margin-bottom: 20px;

    img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border: 1px solid #ddd;
    }
    
    .article__info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .article__author {
        color: #365899;
        font-size: 1.2em;
        font-weight: 800;
    }
    
    .article__time {
        color: #888;
    }
}