Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Testing grid layout again

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
static/index.html
View file

@ -54,22 +54,23 @@
<hr> <hr>
<div> <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> <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"> <div class="customStatus">
{CUSTOM_STATUS} {CUSTOM_STATUS}
</div> </div>
</div> </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"> <div id="activityHtml">
{ACTIVITIES} {ACTIVITIES}

10
static/root.css
View file

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