Better pronouns page! and new CSS!!!

This commit is contained in:
Violet 2023-11-09 20:56:11 -06:00
parent 5791787af8
commit 1b803646a9
3 changed files with 51 additions and 43 deletions

View file

@ -11,6 +11,8 @@
<title>Violet's Purgatory</title> <title>Violet's Purgatory</title>
<!-- <link rel="icon" type="image/x-icon" href="https://api.lanyard.rest/534132311781015564.png"> -->
<meta content="Violet's Purgatory" property="og:title" /> <meta content="Violet's Purgatory" property="og:title" />
<meta content="Welcome to Violet's Purgatory! I'm Violet, a 14yo web and game developer. On my site i'm hosting various services, so please check out the site for more info!!! \u200B Pronouns: They/Them " property="og:description" /> <meta content="Welcome to Violet's Purgatory! I'm Violet, a 14yo web and game developer. On my site i'm hosting various services, so please check out the site for more info!!! \u200B Pronouns: They/Them " property="og:description" />
<meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" /> <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
@ -37,9 +39,9 @@
<p class="chip"><a href="/socials">Socials</a></p> <p class="chip"><a href="/socials">Socials</a></p>
<p class="chip"><a href="/pronouns">Pronouns</a></p> <p class="chip"><a href="/pronouns">Pronouns</a></p>
<br> <br>
<p class="chip d-md-inline-block d-none">Fediverse: <a rel="me" href="https://tech.lgbt/@Bingus_Violet" >@Bingus_Violet@tech.lgbt</a></p> <p class="d-md-inline-block d-none">Fediverse: <a rel="me" href="https://tech.lgbt/@Bingus_Violet" >@Bingus_Violet@tech.lgbt</a></p>
<p class="chip d-md-inline-block d-none" style="border-color: red;">Ko-Fi: <a href="https://ko-fi.com/bingus_violet" <p class="d-md-inline-block d-none" style="border-color: red;">Ko-Fi: <a href="https://ko-fi.com/bingus_violet"
style="color: rgb(255, 100, 100)">bingus_violet</a> - Please donate!</p> style="color: rgb(255, 0, 0)">bingus_violet</a> - Please donate!</p>
<p class="d-sm-block d-none">If you have any problems with the site, put up an issue on <a <p class="d-sm-block d-none">If you have any problems with the site, put up an issue on <a
href="https://codeberg.org/Bingus_Violet/Violets-Purgatory">codeberg!</a></p> href="https://codeberg.org/Bingus_Violet/Violets-Purgatory">codeberg!</a></p>
</div> </div>

View file

@ -5,6 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<title>Pronouns - Violet's Purgatory</title> <title>Pronouns - Violet's Purgatory</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
@ -13,45 +16,49 @@
<body> <body>
<!-- Yet again I would like to apologize for the absolutely atrocious code !! --> <!-- Yet again I would like to apologize for the absolutely atrocious code !! -->
<br> <br>
<p class="chip"><a href="/">Home</a></p> <p class="chip"><a href="/">Home</a></p>
<h1>Preferences</h1> <h1>Pronouns</h1>
<div class="fadediv"> <div class="fadediv row container-fluid">
<p class="chip love">Love</p> <div class="col-sm-12">
<p class="chip like">Like</p> <p class="chip love">Love</p>
<p class="chip silly">Fine if used Silly/Jokingly</p> <p class="chip like">Like</p>
<p class="chip fine">Neutral</p> <p class="chip silly">Fine if used Silly/Jokingly</p>
<p class="chip hate">Hate</p> <p class="chip fine">Neutral</p>
<hr> <p class="chip hate">Hate</p>
<hr>
</div>
<div class="col-sm-6">
<h2>Names</h2>
<p class="chip love">Violet, Vivi, Vi, V</p>
<p class="chip like">Purple</p>
<p class="chip silly">Purple guy</p>
<hr>
</div>
<h1>Names</h1> <div class="col-sm-6">
<p class="chip love">Violet, Vivi, Vi, V</p> <h2>Pronouns</h2>
<p class="chip like">Purple</p> <p class="chip love">They/Them</p>
<p class="chip silly">Purple guy</p> <p class="chip fine">She/Her, etc...</p>
<hr> <p class="chip hate">He/Him</p>
<hr>
</div>
<h1>Pronouns</h1> <div class="col-sm-6">
<p class="chip love">They/Them</p> <h2>Honorifics</h2>
<p class="chip like">She/Her</p> <p class="chip like">Mrs/Ms, Miss, Ma'am</p>
<p class="chip fine">Other</p> <p class="chip silly">Sir, Mr</p>
<p class="chip hate">He/Him</p> <p class="chip fine">Mx</p>
<hr> </div>
<h1>Words</h1> <div class="col-sm-6">
<h2>Honorifics</h2> <h2>Other words</h2>
<p class="chip like">Mrs/Ms, Miss, Ma'am</p> <p class="chip love">Any silly Enby/Slime/Moth related terms</p>
<p class="chip silly">Sir, Mr</p> <p class="chip like">Dude, Partner, Bro</p>
<p class="chip fine">Mx</p> <p class="chip silly">Guy, Pardner</p>
</div>
<h2>Other words</h2>
<p class="chip love">Any silly Enby/Slime/Moth related terms</p>
<p class="chip like">Dude, Partner, Bro</p>
<p class="chip silly">Guy, Pardner</p>
<hr>
<h2>This page will be updated over time!</h2>
</div> </div>
</body> </body>

View file

@ -20,7 +20,7 @@ h2 {
body, html { body, html {
overflow-x: hidden; overflow-x: hidden;
margin: auto; margin: auto;
background-color: rgb(30, 5, 60); background-color: rgb(20, 5, 60);
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
@ -34,7 +34,7 @@ body, html {
} }
a { a {
color: rgb(230, 175, 255); color: rgb(175, 225, 255);
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1); transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
@ -43,7 +43,7 @@ a {
.chip { .chip {
font-size: 1.3rem; font-size: 1.3rem;
border: 2px gray solid; border: 2px gray solid;
border-radius: 8px; /* border-radius: 4px; */
background-color: black; background-color: black;
padding: 8px; padding: 8px;
margin: 3px; margin: 3px;
@ -94,8 +94,7 @@ hr {
} }
#card { #card {
background-image: linear-gradient(-45deg, rgb(75, 25, 125), rgb(100, 30, 100)); background-color: rgb(75, 25, 100);
background-color: rgb(50, 25, 100);
padding: 15px; padding: 15px;
border: 2px white solid; border: 2px white solid;
margin: auto; margin: auto;