Rework the styling to make it pretty

This commit is contained in:
Emi Simpson 2021-10-12 21:19:04 -04:00
parent 9ea447c447
commit 6caa872c8b
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG Key ID: A12F2C2FFDC3D847
2 changed files with 154 additions and 107 deletions

View File

@ -6,111 +6,109 @@
<link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="style.css"/>
</head> </head>
<body> <body>
<div id="wrap"> <header>
<header> <p>Welcome to</p>
<p>Welcome to</p> <h1>Emi's Homepage</h1>
<h1>Emi's Homepage</h1> <p>a trans femby's tiny corner of the internet</p>
<p>a trans femby's tiny corner of the internet</p> </header>
</header> <main>
<main> <section>
<section> <h2>Who are you???</h2>
<h2>Who are you???</h2> <p>
<p> I'm Emi, a student at [REDACTED] who loves niche communities and the software
I'm Emi, a student at [REDACTED] who loves niche communities and the software & circumstances that form them. I'm nonbinary, meaning that I'm not
& circumstances that form them. I'm nonbinary, meaning that I'm not exclusively male or female, and trans. If you need to refer to me in
exclusively male or female, and trans. If you need to refer to me in third person, please use they/them pronouns, like, "They went to the
third person, please use they/them pronouns, like, "They went to the park with their dog"
park with their dog" </p>
</p> <p>
<p> I do a whole bunch of work scattered across whatever hobbies have
I do a whole bunch of work scattered across whatever hobbies have struck my interest, but common themes are:
struck my interest, but common themes are: </p>
</p> <ul>
<ul> <li>Queer advocacy!</li>
<li>Queer advocacy!</li> <li>Non-standard chat platforms & social networks!</li>
<li>Non-standard chat platforms & social networks!</li> <li>toki pona, and sometimes other neat language projects!</li>
<li>toki pona, and sometimes other neat language projects!</li> </ul>
</ul> <p> I will also be very excited if you try to talk to me about </p>
<p> I will also be very excited if you try to talk to me about </p> <ul>
<ul> <li>Gender!</li>
<li>Gender!</li> <li>Neat open source protocols</li>
<li>Neat open source protocols</li> <li>Ethics & software</li>
<li>Ethics & software</li> <li>Sociology or Philosophy</li>
<li>Sociology or Philosophy</li> <li>Sustainability</li>
<li>Sustainability</li> <li>Cartoons</li>
<li>Cartoons</li> <li>Video essays</li>
<li>Video essays</li> <li>The intersection of any of the above</li>
<li>The intersection of any of the above</li> </ul>
</ul> <p>
<p> but will probably stop paying attention if you try to talk to me
but will probably stop paying attention if you try to talk to me about:
about: </p>
</p> <ul>
<ul> <li>Your very specific linux setup</li>
<li>Your very specific linux setup</li> <li>Why software A is better than software B</li>
<li>Why software A is better than software B</li> <li>Something I don't understand but that you don't care to explain</li>
<li>Something I don't understand but that you don't care to explain</li> </ul>
</ul> </section>
</section> <section>
<section> <h2>Do you have any public projects?</h2>
<h2>Do you have any public projects?</h2> <p>
<p> Hell yeah! I maintain a couple of Discord bots that you can find on
Hell yeah! I maintain a couple of Discord bots that you can find on my GitLab, as well as a smattering of other random one-off things. I
my GitLab, as well as a smattering of other random one-off things. I also have a GitHub, although I don't use it to host projects, just to
also have a GitHub, although I don't use it to host projects, just to do pull requests.
do pull requests. </p>
</p> <p><a href="https://gitlab.com/Alch_Emi"> My GitLab</a></p>
<p><a href="https://gitlab.com/Alch_Emi"> My GitLab</a></p> <p><a href="https://github.com/Alch-Emi"> My GitHub</a></p>
<p><a href="https://github.com/Alch-Emi"> My GitHub</a></p> </section>
</section> <section>
<section> <h2>Something you made is difficult for me to use</h2>
<h2>Something you made is difficult for me to use</h2> <p>
<p> Please please please tell me. I try to make everything I do
Please please please tell me. I try to make everything I do accessable, but I'll inevitably miss things. If you let me know how
accessable, but I'll inevitably miss things. If you let me know how something I made is inaccessible to you, I will make it my top
something I made is inaccessible to you, I will make it my top priority to make sure that it works for you. Same goes if anyone,
priority to make sure that it works for you. Same goes if anyone, deliberately or not, uses my software to make you uncomfortable or
deliberately or not, uses my software to make you uncomfortable or otherwise hurt you.
otherwise hurt you. </p>
</p> </section>
</section> <section>
<section> <h2>
<h2> Something you made is difficult for me to use because you used a license
Something you made is difficult for me to use because you used a license I don't like
I don't like </h2>
</h2> <p>
<p> Some of my code is licensed under the Hippocratic license or the CNPL
Some of my code is licensed under the Hippocratic license or the CNPL in an effort to prevent the use of my code to violate human rights.
in an effort to prevent the use of my code to violate human rights. Some people are not a fan of this license due to the fact that it
Some people are not a fan of this license due to the fact that it means that anyone intending to use it to violate human rights cannot.
means that anyone intending to use it to violate human rights cannot. </p>
</p> <p>
<p> If you would like permission to use my code to violate human rights,
If you would like permission to use my code to violate human rights, or to let someone else use it to violate human rights, you cannot.
or to let someone else use it to violate human rights, you cannot. </p>
</p> <p>
<p> If you have a specific usecase that you think is justified, such as
If you have a specific usecase that you think is justified, such as wanting to license under a different ELOS license, and I am the sole
wanting to license under a different ELOS license, and I am the sole licensor of the project you want to use, then you are welcome to reach
licensor of the project you want to use, then you are welcome to reach out to me and I may grant you specifically rights to use my code under
out to me and I may grant you specifically rights to use my code under a different license.
a different license. </p>
</p> <p>
<p> If you have other concerns about this license, please first consult
If you have other concerns about this license, please first consult the
the <a href="https://firstdonoharm.dev/">
<a href="https://firstdonoharm.dev/"> Hippocratic License FAQ.
Hippocratic License FAQ. </a>
</a> </p>
</p> </section>
</section> <section>
<section> <h2>I really like security. Do you have a GPG key?</h2>
<h2>I really like security. Do you have a GPG key?</h2> <p><a href=".well-known/openpgpkey/hu/xjgaxcou5ojpf3otjssi8k8mc6eswjib">
<p><a href=".well-known/openpgpkey/hu/xjgaxcou5ojpf3otjssi8k8mc6eswjib"> I mean like if you really want.
I mean like if you really want. </a></p>
</a></p> </section>
</section> </main>
</main>
</div>
</body> </body>
</html> </html>

View File

@ -1,8 +1,57 @@
/* Basic styling */
body { body {
background-color: #2A1A35; margin: 0;
color: white; color: white;
font-family: Comic Mono; font-family: Comic Mono;
} }
/* Setting up the centered content */
section {
display: grid;
justify-content: center;
padding: 50px 0;
}
section > * {
max-width: 700px;
}
/* Styles for the header */
header p:first-of-type {
font-size: 2em;
}
h1 {
font-size: 5em;
margin-top: 15px;
margin-bottom: 15px;
}
header { header {
text-align: center; text-align: center;
height: 100vh;
display: grid;
align-content: center;
background-color: #2A1A35;
}
/* Color Scheme */
h1, a {
color: #AA89FD;
}
h2 {
color: #B50085;
}
section:nth-child(1) {
background-color: #26182F;
}
section:nth-child(2) {
background-color: #211629;
}
section:nth-child(3) {
background-color: #1D1422;
}
section:nth-child(4) {
background-color: #18121C;
}
section:nth-child(5) {
background-color: #141016;
} }