108 lines
5.4 KiB
HTML
108 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--
|
||
|
|
experimenting with post layouts here!
|
||
|
|
don't expect anything too flashy ;3
|
||
|
|
|
||
|
|
ari melody, 2024
|
||
|
|
-->
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title></title>
|
||
|
|
<link href="css/style.css" rel="stylesheet">
|
||
|
|
<script type="application/javascript" src="script/main.mjs" defer></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<audio id="sound-success" src="sound/success.wav"></audio>
|
||
|
|
<header>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<div id="feed">
|
||
|
|
<!--
|
||
|
|
<div class="post-container" aria-label="ari; hello world!~; 02:12:06">
|
||
|
|
<div class="post-context">
|
||
|
|
<span class="post-context-icon">🔁</span>
|
||
|
|
<span class="post-context-action">
|
||
|
|
<a href="/@ari">ari 💫</a> boosted this post.
|
||
|
|
</span>
|
||
|
|
<span class="post-context-time">
|
||
|
|
<time title="6/3/2024, 2:12:06 AM">2m ago</time>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<article class="post">
|
||
|
|
<div class="post-header-container">
|
||
|
|
<a href="/@ari" class="post-avatar-container">
|
||
|
|
<img src="avatar/ari.jpg" alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
|
||
|
|
</a>
|
||
|
|
<header class="post-header">
|
||
|
|
<div class="post-user-info">
|
||
|
|
<a href="/@ari" class="name">ari 💫</a>
|
||
|
|
<span class="username">@ari</span>
|
||
|
|
</div>
|
||
|
|
<div class="post-info">
|
||
|
|
<a href="/post/21c892b23701" class="created-at">
|
||
|
|
<time title="6/3/2024, 2:11:58 AM">10m ago</time>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
<div class="post-body">
|
||
|
|
<span class="post-content">hello world!~</span>
|
||
|
|
<div class="post-media-container" data-count="3">
|
||
|
|
<div class="post-media image">
|
||
|
|
<a href="media/ariyeah-button.png">
|
||
|
|
<img src="media/ariyeah-button.png" alt="custom miiverse "yeah!" button" loading="lazy" decoding="async">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="post-media image">
|
||
|
|
<a href="media/beer.jpg">
|
||
|
|
<img src="media/beer.jpg" alt="barney calhoun with beer" loading="lazy" decoding="async">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="post-media image">
|
||
|
|
<a href="media/duck.jpg">
|
||
|
|
<img src="media/duck.jpg" alt="big rubber duck" loading="lazy" decoding="async">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer class="post-footer">
|
||
|
|
<div class="post-reactions">
|
||
|
|
<button type="button" class="reaction">
|
||
|
|
<span>⭐</span>
|
||
|
|
<span class="count">52</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="post-actions">
|
||
|
|
<button type="button" class="reply" aria-label="Reply" title="Reply">
|
||
|
|
<span>🗨️</span>
|
||
|
|
<span class="count">7</span>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="boost" aria-label="Boost" title="Boost">
|
||
|
|
<span>🔁</span>
|
||
|
|
<span class="count">13</span>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="favourite" aria-label="Favourite" title="Favourite">
|
||
|
|
<span>⭐</span>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="react" aria-label="React" title="React">
|
||
|
|
<span>😃</span>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="quote" aria-label="Quote" title="Quote">
|
||
|
|
<span>🗣️</span>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="more" aria-label="More" title="More">
|
||
|
|
<span>🛠️</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
-->
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|