pixelfed-design-demos/content/app/home.html
2021-12-09 02:45:28 -06:00

80 lines
2.2 KiB
HTML

---
layout: app
---
<main id="home" class="section">
<div class="container">
<article class="post">
<header class="post-header">
<i class="icon fa fa-plus"></i>
<span class="username">trwnh</span><span class="domain">@pixelfed.social</span> posted an image.
</header>
<img class="post-image" src="/sunset.jpg" alt="">
<section class="post-body">
<header class="author">
<img src="/sunset.jpg" alt="" class="avatar">
<span class="name">trwnh</span>
</header>
<section class="description">
<p>"A Sky On Fire"</p>
</section>
</section>
<section class="post-actions">
<div class="primary">
<button class="like">
<i class="fa fa-heart fa-2x"></i>
</button>
<button class="boost">
<i class="fa fa-retweet fa-2x"></i>
</button>
<button class="save">
<i class="fa fa-bookmark fa-2x"></i>
</button>
</div>
<div class="secondary">
<button class="comment">
<span class="hint">Leave a comment</span>
<i class="fa fa-comment fa-2x"></i>
</button>
</div>
</section>
<article class="post-comment">
<header class="author">
<img src="/logo.svg" alt="" class="avatar">
<span class="name">dansup</span>
</header>
<section class="comment">
<p>Great picture!</p>
</section>
</article>
<article class="post-comment">
<header class="author">
<img src="/logo.svg" alt="" class="avatar">
<span class="name">dansup</span>
</header>
<section class="comment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sequi corrupti ut deleniti, labore, odio commodi molestiae unde architecto perspiciatis consequuntur doloremque. Illum rerum in unde, autem commodi vitae obcaecati!</p>
</section>
</article>
<article class="post-comment">
<header class="author">
<img src="/logo.svg" alt="" class="avatar">
<span class="name">dansup</span>
</header>
<section class="comment">
<p>Great picture!</p>
</section>
</article>
</article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
</div>
</main>