[Add more gifs]
This commit is contained in:
parent
bac14082e9
commit
b63e5fee78
7 changed files with 156 additions and 111 deletions
42
css/main.css
42
css/main.css
|
|
@ -28,13 +28,24 @@ header {
|
|||
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;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer > img {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 512px) {
|
||||
header > img {
|
||||
width: 90vw;
|
||||
|
|
@ -48,15 +59,21 @@ main {
|
|||
padding: 42px;
|
||||
font-family: 'Courier New', monospace;
|
||||
background-color: black;
|
||||
border-bottom-left-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
}
|
||||
|
||||
header, main {
|
||||
header, main, footer {
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
main table th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
main table th[colspan="2"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main a, main a:visited {
|
||||
color: var(--green);
|
||||
text-decoration: none;
|
||||
|
|
@ -71,7 +88,18 @@ main address {
|
|||
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: '';
|
||||
}
|
||||
|
||||
|
|
@ -83,10 +111,6 @@ main section#wil ul li:nth-child(even)::before {
|
|||
content: '💛 ';
|
||||
}
|
||||
|
||||
main section#games ul {
|
||||
list-style-type: '';
|
||||
}
|
||||
|
||||
main section#games ul li::before {
|
||||
content: '🟧 ';
|
||||
}
|
||||
|
|
|
|||
190
index.html
190
index.html
|
|
@ -1,89 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TSAIBAR</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="media/title.gif" width="128" height="40">
|
||||
</header>
|
||||
<main>
|
||||
<section id="socials">
|
||||
<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>
|
||||
<a href="https://matrix.to/#/@iamxoy:matrix.org" target="_blank" rel="noopener noreferrer"><i class="icon matrix"></i>@iamxoy:matrix.org</a>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="identity">
|
||||
<h2>Identity</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>xoy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Age</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gender</td>
|
||||
<td>non-binary</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sexuality</td>
|
||||
<td>pansexual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">Pronouns</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🇬🇧</td>
|
||||
<td>they/them</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🇩🇪</td>
|
||||
<td>dey/denen</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="wil">
|
||||
<h2>What I like</h2>
|
||||
<ul>
|
||||
<li>Software development</li>
|
||||
<li>Linux</li>
|
||||
<li>Gaming</li>
|
||||
<li>Bouldern</li>
|
||||
</ul>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="games">
|
||||
<h2>Games</h2>
|
||||
<h3>Currently playing</h3>
|
||||
<ul>
|
||||
<li><a href="https://store.steampowered.com/app/2054970/Dragons_Dogma_2/" target="_blank">Dragon's Dogma 2</a></li>
|
||||
<li><a href="https://store.steampowered.com/app/526870/Satisfactory/" target="_blank">Satisfactory</a></li>
|
||||
</ul>
|
||||
<h3>Pile of Shame</h3>
|
||||
<ul>
|
||||
<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>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TSAIBAR</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="media/title.gif" width="128" height="40">
|
||||
</header>
|
||||
<main>
|
||||
<section id="socials">
|
||||
<h2>Socials</h2>
|
||||
<div class="section-row">
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://chaos.social/@xoy" target="_blank" rel="noopener noreferrer me"><i class="icon mastodon"></i>@xoy@chaos.social</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</table>
|
||||
<img class="section-icon" src="media/social.gif" width="64" height="64">
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="identity">
|
||||
<h2>Identity</h2>
|
||||
<div class="section-row">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<td>xoy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Age</th>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Gender</th>
|
||||
<td>non-binary</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Sexuality</th>
|
||||
<td>pansexual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">Pronouns</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🇬🇧</td>
|
||||
<td>they/them</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🇩🇪</td>
|
||||
<td>dey/denen</td>
|
||||
</tr>
|
||||
</table>
|
||||
<img class="section-icon" src="media/identity.gif" width="64" height="64">
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="wil">
|
||||
<h2>What I like</h2>
|
||||
<div class="section-row">
|
||||
<ul>
|
||||
<li>Software development</li>
|
||||
<li>Linux</li>
|
||||
<li>Gaming</li>
|
||||
<li>Bouldern</li>
|
||||
</ul>
|
||||
<img class="section-icon" src="media/hearts.gif" width="64" height="64">
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="games">
|
||||
<h2>Games</h2>
|
||||
<h3>Currently playing</h3>
|
||||
<ul>
|
||||
<li><a href="https://store.steampowered.com/app/2054970/Dragons_Dogma_2/" target="_blank">Dragon's Dogma 2</a></li>
|
||||
<li><a href="https://store.steampowered.com/app/526870/Satisfactory/" target="_blank">Satisfactory</a></li>
|
||||
</ul>
|
||||
<h3>Pile of Shame</h3>
|
||||
<ul>
|
||||
<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>
|
||||
|
|
|
|||
BIN
media/hearts.gif
Normal file
BIN
media/hearts.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
media/identity.gif
Normal file
BIN
media/identity.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
media/social.gif
Normal file
BIN
media/social.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
media/xoy.gif
Normal file
BIN
media/xoy.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
|
|
@ -1,19 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TSAIBAR</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="media/title.gif" width="128" height="40">
|
||||
</header>
|
||||
<main>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>The requested page was not found.</p>
|
||||
<a href="index.html">Go to index</a>
|
||||
</main>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TSAIBAR</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="media/title.gif" width="128" height="40">
|
||||
</header>
|
||||
<main>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>The requested page was not found.</p>
|
||||
<a href="index.html">Go to index</a>
|
||||
</main>
|
||||
<footer>
|
||||
<img src="media/xoy.gif" width="64" height="64">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue