134 lines
3.2 KiB
HTML
134 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet"
|
|
media="print" onload="this.media='all'">
|
|
|
|
<title>yude.moe</title>
|
|
<style>
|
|
body {
|
|
text-align: center;
|
|
font-family: 'Roboto Mono', monospace;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
a {
|
|
color: white
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
body {
|
|
background-color: white;
|
|
color: black
|
|
}
|
|
|
|
a {
|
|
color: black
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
padding: 2.5% 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.flex>* {
|
|
width: 8%;
|
|
font-size: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.load {
|
|
-webkit-animation: spin 4s linear infinite;
|
|
-moz-animation: spin 4s linear infinite;
|
|
-ms-animation: spin 4s linear infinite;
|
|
-o-animation: spin 4s linear infinite;
|
|
animation: spin 4s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes spin {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes spin {
|
|
0% {
|
|
-ms-transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-ms-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes spin {
|
|
0% {
|
|
-o-transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
.discord {
|
|
height: 500px;
|
|
width: 90%;
|
|
min-width: 300px;
|
|
max-width: 565px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<picture>
|
|
<source type="image/webp" srcset="assets/images/avatar.webp" style="width:200px; border-radius: 50%"
|
|
class="load">
|
|
<img src="assets/images/avatar.png" style="width:200px; border-radius: 50%" class="load">
|
|
</picture>
|
|
<h1>yude.moe</h1>
|
|
<p><a href="../about">yude's profile</a></p>
|
|
<iframe class="discord" src="https://discordapp.com/widget?id=550309736214691840&theme=dark"
|
|
allowtransparency="true" frameborder="0"></iframe>
|
|
</body>
|
|
|
|
</html> |