49 lines
No EOL
1.7 KiB
Svelte
49 lines
No EOL
1.7 KiB
Svelte
<div class="profile" aria-label="プロフィール">
|
|
<div>
|
|
<div class="space topspace"></div>
|
|
<div class="icon">
|
|
<img src="https://moris.day/files/assets/moris_icon_200px.avif" width="200" height="200" alt="moris icon"/>
|
|
</div>
|
|
<div class="space bottomspace"></div>
|
|
<div style="position:relative; text-align:center; font-family:monospace;font-size:1.2em; font-weight:350; width:fit-content; margin:auto;"><span>moris</span><img src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f9ea.svg" alt="test tube" style="position:absolute; left:100%; aspect-ratio:1; height:100%; padding:3%; box-sizing:border-box;"/></div>
|
|
</div>
|
|
|
|
<div class="discription">
|
|
<span>有機化学好きの大学生<br>電子工作やプログラムもいじります<br>誤字 文句 その他連絡→<a href="https://mi.moris.day/@moris" target="_blank">Misskey(Fediverse)</a></span>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.profile {
|
|
position: relative;
|
|
}
|
|
.topspace {
|
|
height: 55px;
|
|
background-color: color-mix(in srgb, var(--theme-color) 25%, var(--back-color));
|
|
}
|
|
.bottomspace {
|
|
height: 38px;
|
|
}
|
|
.icon {
|
|
position: absolute;
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
width: 70px;
|
|
height: 70px;
|
|
top: 14px; /*calc(55px - 35px - 6px);*/
|
|
left: calc(50% - 41px); /*calc(50% - 35px - 6px);*/
|
|
background-color: var(--grid-color);
|
|
|
|
& img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.discription {
|
|
padding: 8px;
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
line-height: 1.8;
|
|
}
|
|
</style> |