yude-moe/index.html

135 lines
3.2 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="assets/images/favicon.ico">
2020-04-15 06:32:57 +09:00
<meta name="viewport" content="width=device-width,initial-scale=1">
2020-06-07 17:12:06 +09:00
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet"
media="print" onload="this.media='all'">
2020-06-07 17:36:15 +09:00
2020-05-09 15:00:26 +09:00
<title>yude.moe</title>
<style>
body {
text-align: center;
font-family: 'Roboto Mono', monospace;
}
2020-06-07 08:37:28 +09:00
@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);
}
}
2020-06-24 17:21:08 +09:00
svg {
fill: currentColor;
}
2020-06-06 19:27:07 +09:00
.discord {
height: 500px;
width: 90%;
min-width: 300px;
max-width: 565px;
}
</style>
</head>
<body>
2020-06-07 17:12:06 +09:00
<picture>
2020-06-07 18:06:25 +09:00
<source type="image/webp" srcset="assets/images/avatar.webp" style="width:200px; border-radius: 50%"
class="load">
2020-06-07 17:36:15 +09:00
<img src="assets/images/avatar.png" style="width:200px; border-radius: 50%" class="load">
2020-06-07 17:12:06 +09:00
</picture>
<h1>yude.moe</h1>
2020-06-30 11:30:15 +09:00
<p><a href="../about">yude's profile</a></p>
2020-07-04 21:38:06 +09:00
<p><a href="https://blog.yude.moe">yude's blog</a></p>
2020-06-06 19:27:07 +09:00
<iframe class="discord" src="https://discordapp.com/widget?id=550309736214691840&theme=dark"
allowtransparency="true" frameborder="0"></iframe>
</body>
</html>