Testing grid layout again

This commit is contained in:
bingus_violet 2024-10-17 00:45:30 -05:00
parent f206c666b8
commit 5a45de7f2a
2 changed files with 19 additions and 14 deletions

View file

@ -54,23 +54,24 @@
<hr>
<div>
<p style="padding: 10px; padding-bottom: 5px;">Hi, I'm Violet! I'm a 15 year old web developer, making dynamic websites with server-side rendering, so Javascript is never forced! All of my sites are all made with NodeJS, and are self-hosted.</p>
<h2>Other pages:</h2>
<br>
<div class="linkContainer">
<a class="chip" href="./socials/">Socials</a>
<a class="chip" href="./stats">Stats</a>
<a class="chip" href="./faq">Nerd FAQ</a>
<a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} site</a>
<a class="chip" href="./blog">Blog</a>
<a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a>
</div>
<div class="customStatus">
{CUSTOM_STATUS}
</div>
</div>
</div>
<p>{RANDOM_QUOTE}</p>
<!-- <p>{RANDOM_QUOTE}</p> -->
<h2>Other pages:</h2>
<br>
<div class="linkContainer">
<a class="chip" href="./socials/">Socials</a>
<a class="chip" href="./stats">Stats</a>
<a class="chip" href="./faq">Nerd FAQ</a>
<a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} site</a>
<a class="chip" href="./blog">Blog</a>
<a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a>
</div>
<div id="activityHtml">
{ACTIVITIES}
</div>

View file

@ -31,13 +31,17 @@ body {
}
.linkContainer {
display: flex;
flex-wrap: wrap;
max-width: 385px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 500px;
margin: auto;
justify-content: center;
}
.linkContainer > .chip {
font-size: 1.5rem;
}
.animatedTitle {
animation: mainText 2s cubic-bezier(0.075, 0.82, 0.165, 1);
/* animation-delay: 1s; */