Rework the styling to make it pretty
This commit is contained in:
parent
9ea447c447
commit
6caa872c8b
210
index.html
210
index.html
|
@ -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>
|
||||||
|
|
51
style.css
51
style.css
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue