78 lines
1.9 KiB
Text
78 lines
1.9 KiB
Text
---
|
|
css: |
|
|
.aboutme {
|
|
display: flex;
|
|
margin: 3em auto;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
width: 48rem;
|
|
min-width: 524px;
|
|
border: 3px ridge #8C2;
|
|
}
|
|
.aboutme h1 {
|
|
font-size: 4em;
|
|
}
|
|
.aboutme a {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
.aboutme > .text > p.intro {
|
|
font-size: 2em;
|
|
color: #9C8;
|
|
}
|
|
.aboutme > div.ava > img {
|
|
border-radius: 160px;
|
|
margin: 1.5ex;
|
|
margin-bottom: .5ex;
|
|
}
|
|
.aboutme > .text {
|
|
flex: 1;
|
|
padding-left: 2em;
|
|
}
|
|
.aboutme > .text > h1 {
|
|
margin: 1.5ex;
|
|
color: #9F4;
|
|
}
|
|
.aboutme > * > .socials > a.pronouns {
|
|
color: #fff;
|
|
font-size: 2em;
|
|
baseline: bottom;
|
|
display: block;
|
|
margin-bottom: 1em;
|
|
}
|
|
.aboutme > * > .socials > a.pronouns > img {
|
|
vertical-align: middle;
|
|
filter: invert(81%) sepia(55%) saturate(634%) hue-rotate(39deg) brightness(91%) contrast(89%);
|
|
}
|
|
.aboutme > * > .socials {
|
|
margin: 1em;
|
|
margin-top: 0;
|
|
}
|
|
.aboutme > * > .socials img {
|
|
filter: invert(81%) sepia(55%) saturate(634%) hue-rotate(39deg) brightness(91%) contrast(89%);
|
|
}
|
|
.aboutme > * > .socials a {
|
|
margin-right: .75ex;
|
|
}
|
|
---
|
|
<div class="aboutme">
|
|
<div class="ava">
|
|
<img src="img/ava.jpeg" width="256" height="256" />
|
|
<div class="socials">
|
|
<a href="{{ pronounsDB }}" target="_blank" class="pronouns">
|
|
<img src="{{ "transgender:solid" |> icon("fontawesome") }}" width="48" height="48" />
|
|
{{ pronouns }}
|
|
</a>
|
|
<a href="{{ mastodon }}" target="_blank">
|
|
<img src="{{ "mastodon:brands" |> icon("fontawesome") }}" width="48" height="48" />
|
|
</a>
|
|
<a href="{{ git }}" target="_blank">
|
|
<img src="{{ "git:brands" |> icon("fontawesome") }}" width="48" height="48" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
<h1>{{ h1 }}</h1>
|
|
<p class="intro">{{ intro }}</p>
|
|
<p></p>
|
|
</div>
|
|
</div>
|