[Add more gifs]

This commit is contained in:
xoy 2024-11-04 00:32:37 +01:00
parent bac14082e9
commit b63e5fee78
7 changed files with 156 additions and 111 deletions

View file

@ -28,13 +28,24 @@ header {
border-top-right-radius: 100px; border-top-right-radius: 100px;
} }
header > img { footer {
background-color: var(--yellow);
padding: 20px 0 0 0;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
header > img, footer > img {
width: 512px; width: 512px;
height: auto; height: auto;
display: block; display: block;
margin: auto; margin: auto;
} }
footer > img {
width: 128px;
}
@media only screen and (max-width: 512px) { @media only screen and (max-width: 512px) {
header > img { header > img {
width: 90vw; width: 90vw;
@ -48,15 +59,21 @@ main {
padding: 42px; padding: 42px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
background-color: black; background-color: black;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
} }
header, main { header, main, footer {
max-width: 1024px; max-width: 1024px;
margin: auto; margin: auto;
} }
main table th {
text-align: left;
}
main table th[colspan="2"] {
text-align: center;
}
main a, main a:visited { main a, main a:visited {
color: var(--green); color: var(--green);
text-decoration: none; text-decoration: none;
@ -71,7 +88,18 @@ main address {
justify-content: space-around; justify-content: space-around;
} }
main section#wil ul { main section div.section-row {
display: flex;
justify-content: space-between;
}
main section div.section-row img.section-icon {
width: 128px;
height: 128px;
margin: auto 0 auto 0;
}
main section ul {
list-style-type: ''; list-style-type: '';
} }
@ -83,10 +111,6 @@ main section#wil ul li:nth-child(even)::before {
content: '💛 '; content: '💛 ';
} }
main section#games ul {
list-style-type: '';
}
main section#games ul li::before { main section#games ul li::before {
content: '🟧 '; content: '🟧 ';
} }

View file

@ -1,89 +1,107 @@
<!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="width=device-width, initial-scale=1.0">
<title>TSAIBAR</title> <title>TSAIBAR</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/icons.css"> <link rel="stylesheet" href="css/icons.css">
</head> </head>
<body> <body>
<header> <header>
<img src="media/title.gif" width="128" height="40"> <img src="media/title.gif" width="128" height="40">
</header> </header>
<main> <main>
<section id="socials"> <section id="socials">
<h2>Socials</h2> <h2>Socials</h2>
<a href="https://chaos.social/@xoy" target="_blank" rel="noopener noreferrer me"><i class="icon mastodon"></i>@xoy@chaos.social</a><br> <div class="section-row">
<a href="https://matrix.to/#/@iamxoy:matrix.org" target="_blank" rel="noopener noreferrer"><i class="icon matrix"></i>@iamxoy:matrix.org</a> <table>
</section> <tr>
<hr> <td><a href="https://chaos.social/@xoy" target="_blank" rel="noopener noreferrer me"><i class="icon mastodon"></i>@xoy@chaos.social</a></td>
<section id="identity"> </tr>
<h2>Identity</h2> <tr>
<table> <td><a href="https://matrix.to/#/@iamxoy:matrix.org" target="_blank" rel="noopener noreferrer"><i class="icon matrix"></i>@iamxoy:matrix.org</a></td>
<tr> </tr>
<td>Name</td> </table>
<td>xoy</td> <img class="section-icon" src="media/social.gif" width="64" height="64">
</tr> </div>
<tr> </section>
<td>Age</td> <hr>
<td>23</td> <section id="identity">
</tr> <h2>Identity</h2>
<tr> <div class="section-row">
<td>Gender</td> <table>
<td>non-binary</td> <tr>
</tr> <th>Name</th>
<tr> <td>xoy</td>
<td>Sexuality</td> </tr>
<td>pansexual</td> <tr>
</tr> <th>Age</th>
<tr> <td>23</td>
<th colspan="2">Pronouns</th> </tr>
</tr> <tr>
<tr> <th>Gender</th>
<td>🇬🇧</td> <td>non-binary</td>
<td>they/them</td> </tr>
</tr> <tr>
<tr> <th>Sexuality</th>
<td>🇩🇪</td> <td>pansexual</td>
<td>dey/denen</td> </tr>
</tr> <tr>
</table> <th colspan="2">Pronouns</th>
</section> </tr>
<hr> <tr>
<section id="wil"> <td>🇬🇧</td>
<h2>What I like</h2> <td>they/them</td>
<ul> </tr>
<li>Software development</li> <tr>
<li>Linux</li> <td>🇩🇪</td>
<li>Gaming</li> <td>dey/denen</td>
<li>Bouldern</li> </tr>
</ul> </table>
</section> <img class="section-icon" src="media/identity.gif" width="64" height="64">
<hr> </div>
<section id="games"> </section>
<h2>Games</h2> <hr>
<h3>Currently playing</h3> <section id="wil">
<ul> <h2>What I like</h2>
<li><a href="https://store.steampowered.com/app/2054970/Dragons_Dogma_2/" target="_blank">Dragon's Dogma 2</a></li> <div class="section-row">
<li><a href="https://store.steampowered.com/app/526870/Satisfactory/" target="_blank">Satisfactory</a></li> <ul>
</ul> <li>Software development</li>
<h3>Pile of Shame</h3> <li>Linux</li>
<ul> <li>Gaming</li>
<li><a href="https://store.steampowered.com/app/1933840/Moon_Mystery/" target="_blank">Moon Mystery</a></li> <li>Bouldern</li>
<li><a href="https://store.steampowered.com/app/1817070/Marvels_SpiderMan_Remastered/" target="_blank">Marvel's Spider-Man Remastered</a></li> </ul>
<li><a href="https://store.steampowered.com/app/599140/Graveyard_Keeper/" target="_blank">Graveyard Keeper</a></li> <img class="section-icon" src="media/hearts.gif" width="64" height="64">
<li><a href="https://store.steampowered.com/app/881100/Noita/" target="_blank">Noita</a></li> </div>
</ul> </section>
<h3>Waiting for</h3> <hr>
<ul> <section id="games">
<li><a href="https://store.steampowered.com/app/1172710/Dune_Awakening/" target="_blank">Dune Awakening</a></li> <h2>Games</h2>
<li><a href="https://store.steampowered.com/app/2677660/Indiana_Jones_and_the_Great_Circle/" target="_blank">Indiana Jones and the Great Circle</a></li> <h3>Currently playing</h3>
<li><a href="https://store.steampowered.com/app/2719750/Star_Birds/" target="_blank">Star Birds</a></li> <ul>
<li><a href="https://store.steampowered.com/app/801800/Atomfall/" target="_blank">Atomfall</a></li> <li><a href="https://store.steampowered.com/app/2054970/Dragons_Dogma_2/" target="_blank">Dragon's Dogma 2</a></li>
<li>The Elder Scrolls 6</li> <li><a href="https://store.steampowered.com/app/526870/Satisfactory/" target="_blank">Satisfactory</a></li>
</ul> </ul>
</section> <h3>Pile of Shame</h3>
</main> <ul>
</body> <li><a href="https://store.steampowered.com/app/1933840/Moon_Mystery/" target="_blank">Moon Mystery</a></li>
<li><a href="https://store.steampowered.com/app/1817070/Marvels_SpiderMan_Remastered/" target="_blank">Marvel's Spider-Man Remastered</a></li>
<li><a href="https://store.steampowered.com/app/599140/Graveyard_Keeper/" target="_blank">Graveyard Keeper</a></li>
<li><a href="https://store.steampowered.com/app/881100/Noita/" target="_blank">Noita</a></li>
</ul>
<h3>Waiting for</h3>
<ul>
<li><a href="https://store.steampowered.com/app/1172710/Dune_Awakening/" target="_blank">Dune Awakening</a></li>
<li><a href="https://store.steampowered.com/app/2677660/Indiana_Jones_and_the_Great_Circle/" target="_blank">Indiana Jones and the Great Circle</a></li>
<li><a href="https://store.steampowered.com/app/2719750/Star_Birds/" target="_blank">Star Birds</a></li>
<li><a href="https://store.steampowered.com/app/801800/Atomfall/" target="_blank">Atomfall</a></li>
<li>The Elder Scrolls 6</li>
</ul>
</section>
</main>
<footer>
<img src="media/xoy.gif" width="64" height="64">
</footer>
</body>
</html> </html>

BIN
media/hearts.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
media/identity.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
media/social.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

BIN
media/xoy.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -1,19 +1,22 @@
<!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="width=device-width, initial-scale=1.0">
<title>TSAIBAR</title> <title>TSAIBAR</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
<header> <header>
<img src="media/title.gif" width="128" height="40"> <img src="media/title.gif" width="128" height="40">
</header> </header>
<main> <main>
<h1>Page Not Found</h1> <h1>Page Not Found</h1>
<p>The requested page was not found.</p> <p>The requested page was not found.</p>
<a href="index.html">Go to index</a> <a href="index.html">Go to index</a>
</main> </main>
</body> <footer>
<img src="media/xoy.gif" width="64" height="64">
</footer>
</body>
</html> </html>