genshibe/website
genshibe/website
1
1
Fork 0
mirror of https://github.com/GenShibe/website.git synced 2025-02-12 18:14:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from uncenter/patch-1

Browse source 
refactor: improvements
This commit is contained in:
Gen 2024-03-06 14:12:20 -08:00 • committed by GitHub
commit 624745511c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 111 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
index.html
View file

@ -1,57 +1,65 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="wilih=device-wilih, initial-scale=1.0">
<meta property="og:title" content="Gen's Website" /> <meta property="og:title" content="Gen's Website" />
<meta property="og:description" content="A little bit of information about me :3" /> <meta
property="og:description"
content="A little bit of information about me :3"
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://www.genshibe.gay" /> <meta property="og:url" content="https://genshibe.github.io" />
<title>Gen's Website</title> <title>Gen's Website</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> </head>
<body>
<body> <main>
<br> <h1>Hi, I'm Gen!</h1>
<br> <h2>
<div class="container"> I use
<div class="divs"> <a href="https://en.pronouns.page/@genshibe">any pronouns :3</a>
<h1>Hi, I'm Gen</h1> </h2>
<h2>and I use <a href="https://en.pronouns.page/@genshibe" target="_blank">any pronouns :3</a></h2> <hr />
<div class="nya"></div> <h2>I'm a 19 year old...</h2>
<ul> <ul>
<h4>I'm a 19 year old...</h4>
<br>
<li>Transit enthusiast &#128653;</li> <li>Transit enthusiast &#128653;</li>
<li>Photographer &#128248;</li> <li>Photographer &#128248;</li>
<li>Student &#129489;&#8205;&#127891;</li> <li>Student &#129489;&#8205;&#127891;</li>
<li>Canadian &#127464;&#127462; </li> <li>Canadian &#127464;&#127462;</li>
<li>Hong Konger 🇭🇰</li> <li>Hong Konger 🇭🇰</li>
<li>Maintainer at <a class="fuck" href="https://github.com/catppuccin/userstyles" <li>
target="_blank">Catppuccin</a></li> Maintainer at
<a
class="catppuccin"
href="https://github.com/catppuccin/userstyles"
>Catppuccin</a
>
</li>
</ul> </ul>
<br> <hr />
<h4>Contact me via:</h4>
<div class="nya"></div>
<br>
<div class="button-container">
<div class="batton">
<a href="https://discord.com/users/217892728875253760" target="_blank" class="button">Discord</a>
<a href="https://www.instagram.com/spotter_gen/" target="_blank" class="button">Instagram</a>
<a href="mailto:genshibe@gmail.com" target="_blank" class="button">Email</a>
</div>
<br>
<footer> <footer>
<i> <div class="socials">
Last Updated: <i id=woof></i> | ©️ Licensed under GPL V3 <a href="https://discord.com/users/217892728875253760"
<br> >Discord</a
<a href="https://github.com/GenShibe/genshibe.github.io/" target="_blank">Source Code</a> >
</i> <a href="https://www.instagram.com/spotter_gen/"
</footer> >Instagram</a
>
<a href="mailto:genshibe@gmail.com">Email</a>
</div> </div>
<script> document.getElementById("woof").innerHTML = document.lastModified; </script> <span
>Last updated at <span class="last-updated"></span> | ©️
Licensed under GPL V3 |
<a href="https://github.com/GenShibe/genshibe.github.io/"
>Open source</a
></span
>
</footer>
</main> </main>
</body> <script>
document.querySelector(".last-updated").innerHTML =
document.lastModified;
</script>
</body>
</html> </html>

113
style.css
View file

@ -1,57 +1,61 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background-color: #303446; background-color: #303446;
color: #4c4f69; color: #4c4f69;
font-family: "Figtree", Arial, sans-serif; font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
} }
.container {
display: block; p {
margin-left: auto; font-size: 2em;
margin-right: auto; margin: 10px;
width: 75%; text-align: center;
grid-gap: 20px; color: #c6d0f5;
} }
ul {
padding: 0; a {
color: #8caaee;
} }
.divs { a:hover {
border: 2px solid #ef9f76; color: #85c1dc;
border-radius: 10px;
padding: 0;
} }
a:visited {
color: #ca9ee6;
}
h1 { h1 {
margin-bottom: 2px; margin-bottom: 2px;
margin-top: 2px; margin-top: 2px;
font-size: 3.5em; font-size: 3em;
color: #c6d0f5; color: #c6d0f5;
text-align: center; text-align: center;
} }
h2 { h2 {
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
font-size: 3em; font-size: 2em;
color: #c6d0f5; color: #c6d0f5;
text-align: center; text-align: center;
} }
h4 { h3 {
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
font-size: 2.5em; font-size: 1.5em;
color: #ef9f76; color: #ef9f76;
text-align: center; text-align: center;
} }
footer {
text-align: center; ul {
border-top: 2px; padding: 0;
padding-top: 5px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 80%;
color: #c6d0f5
} }
li { li {
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
@ -59,7 +63,26 @@ li {
color: #c6d0f5; color: #c6d0f5;
margin-bottom: 1.5px; margin-bottom: 1.5px;
} }
.button {
footer {
margin: 0 auto;
color: #c6d0f5;
display: flex;
flex-direction: column;
text-align: center;
gap: 2rem;
}
.socials {
display: flex;
margin-right: auto;
margin-left: auto;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.socials a {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
text-decoration: none; text-decoration: none;
color: #c6d0f5; color: #c6d0f5;
@ -69,43 +92,19 @@ li {
text-align: center; text-align: center;
font-size: 1.25em; font-size: 1.25em;
margin: 5px; margin: 5px;
line-height: 1.75em line-height: 1.75em;
} }
.button:hover { .socials a:hover {
background-color: #ef9f76; background-color: #ef9f76;
color: #292c3c; color: #292c3c;
border-color: #fab387; border-color: #fab387;
} }
a {
color: #8caaee hr {
}
a:hover {
color: #85c1dc
}
a:not(.button):visited {
color: #ca9ee6
}
.batton {
display: flex;
margin-right: auto;
margin-left: auto;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.nya {
height: 2px; height: 2px;
width: 80%; width: 80%;
background-color: #949cbb; background-color: #949cbb;
margin-left: auto; border: none;
margin-right: auto; margin: 1.5rem auto;
margin-bottom: 10px;
margin-top: 10px;
box-shadow: 0 0 5px 0px #949cbb; box-shadow: 0 0 5px 0px #949cbb;
} }
@media screen and (max-width:750px) {
#e {
padding: 0px;
margin-left: 0px
}
}