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 class="article__main">
        <p>【iT邦幫忙鐵人賽】</p>
        <p>今年鐵人賽的文章好專業，小財神好推薦大家來看看各主題的好文，這邊分享一個 以 Ansible 及 Jenkins-CI 為主題參賽DevOps的文章，邀請大家一起來團練。</p>

        <p><a class="tag" href="#">#12月16日以前仍可報名喔</a></p>
        <p><a class="tag" href="#">#鐵人賽是年度修練一定要參加</a></p>
        <p><a class="tag" href="#">#這滿滿的大平台不能缺席</a></p>
        
        <a class="main-link" 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 class="main-link__text">
                <h2>鐵人檔案 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天</h2>
                <p class="main-link__summary">iT 邦幫忙是 IT 領域的技術問答與分享社群，透過 IT 人互相幫忙，一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧，拯救下一個卡關的 IT…</p>
                <p class="main-link__info">ITHELP.ITHOME.COM.TW | 由 ITHOME 上傳</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;
    }
}

.article__main {
    line-height: 1.5;
    
    .tag {
        padding-bottom: 2px;
        border-bottom: 1px solid transparent;
        color: #365899;
        
        &:hover { border-color: currentColor; }
    }
}

.main-link {
    display: flex;
    margin: 20px 0;
    border: 1px solid #ccc;
    color: #000;
    
    h2 {
        max-height: 2 * 1.2em;
        font-size: 1.5em;
        font-weight: 800;
        line-height: 1.2;
        overflow: hidden;
    }
    
    img {
        flex-shrink: 0;
        width: 160px;
        height: 160px;
        border-right: 1px solid #ccc;
    }
    
    .main-link__text {
        display: flex;
        padding: 10px 15px 5px;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .main-link__summary {
        max-height: 3 * 1.2em;
        line-height: 1.2em;
        overflow: hidden;
    }
    
    .main-link__info {
        color: #888;
        font-size: .8em;
        font-weight: 600;
    }
}