Make buttons stack when on smaller page

This commit is contained in:
Bingus_Violet 2024-01-25 23:21:12 -06:00
parent 185497ab46
commit e51b98eb0a

View file

@ -24,7 +24,8 @@
<body> <body>
<h1>Welcome to Violet's Purgatory</h1> <h1>Welcome to Violet's Purgatory</h1>
<h2>Happy 200 (201) Commits!!!</h2> <h2>Happy 200 (201) Commits!!!</h2>
<p>Hopefully to celebrate, like I promised last time, this time I will try to ACTUALLY find a method to add a commit count to the site!</p> <p>Hopefully to celebrate, like I promised last time, this time I will try to ACTUALLY find a method to add a commit
count to the site!</p>
<div class="fadediv"> <div class="fadediv">
<div class="container-fluid row" id="card"> <div class="container-fluid row" id="card">
<h2>Violet</h2> <h2>Violet</h2>
@ -38,19 +39,24 @@
</div> </div>
<div> <div>
<hr> <hr>
<span style="white-space: nowrap;">
<!-- <p class="chip"><a href="https://status.violets-purgatory.dev">Status</a></p> --> <!-- <p class="chip"><a href="https://status.violets-purgatory.dev">Status</a></p> -->
<p class="chip"><a href="./socials">Socials</a></p> <p class="chip"><a href="./socials">Socials</a></p>
<p class="chip"><a href="./projects">Projects</a></p> <p class="chip"><a href="./projects">Projects</a></p>
</span>
<!-- <p class="chip"><a href="./extras">Extras</a></p> --> <!-- <p class="chip"><a href="./extras">Extras</a></p> -->
<br> <!-- <br> -->
<span style="white-space: nowrap;">
<p class="chip"><a href="https://blog.violets-purgatory.dev">Blog</a></p> <p class="chip"><a href="https://blog.violets-purgatory.dev">Blog</a></p>
<p class="chip"><a href="./faq">FAQ</a></p> <p class="chip"><a href="./faq">FAQ</a></p>
<p class="chip"><a href="https://{OPPOSITE_URL}.violets-purgatory.dev">{OPPOSITE_BRANCH}</a></p> <p class="chip"><a href="https://{OPPOSITE_URL}.violets-purgatory.dev">{OPPOSITE_BRANCH}</a></p>
</span>
{LANYARD_QUOTE} {LANYARD_QUOTE}
</div> </div>
</div> </div>
<noscript> <noscript>
<p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done <p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The
discord status) is done
server-side, so enjoy :D</p> server-side, so enjoy :D</p>
</noscript> </noscript>
<p>Check out the source code on <a href="https://codeberg.org/Bingus_Violet/Violets-Purgatory">Codeberg</a></p> <p>Check out the source code on <a href="https://codeberg.org/Bingus_Violet/Violets-Purgatory">Codeberg</a></p>
@ -62,4 +68,5 @@
{SEASONAL_EFFECT} {SEASONAL_EFFECT}
</div> </div>
</body> </body>
</html> </html>