feat: contact page responsive

This commit is contained in:
Alexander Daichendt 2022-07-31 15:31:57 +02:00
parent ba67b4113c
commit c34be93b5c
2 changed files with 35 additions and 11 deletions

View file

@ -22,21 +22,34 @@
<ul> <ul>
<ListItem> <ListItem>
<Icon path={mdiEmailEditOutline} /> <span class="listText">
E-Mail: <Link disableIcon disablePrefetch href="mailto:me@daichendt.one">me@daichendt.one</Link> <Icon path={mdiEmailEditOutline} />
E-Mail:</span
>
<span class="listValue">
<Link disableIcon disablePrefetch href="mailto:me@daichendt.one">me@daichendt.one</Link>
<span style="margin-left: 4px;"> <span style="margin-left: 4px;">
<Icon path={mdiKey} size="1rem" /> <Icon path={mdiKey} size="1rem" />
<Link href="/pub.key" disablePrefetch>GPG public key</Link> <Link href="/pub.key" disablePrefetch>GPG key</Link>
</span>
</span> </span>
</ListItem> </ListItem>
<ListItem> <ListItem>
<Icon path={mdiGithub} /> <span class="listText">
Github: <Link disableIcon href="https://github.com/AlexDaichendt">AlexDaichendt</Link> <Icon path={mdiGithub} />
Github:</span
>
<span class="listValue">
<Link disableIcon href="https://github.com/AlexDaichendt">AlexDaichendt</Link></span
>
</ListItem> </ListItem>
<ListItem> <ListItem>
<span style="font-size:1rem"><Element /></span> <span class="listText">
Element: @alexdaichendt:matrix.org <span style="font-size:1rem"><Element /></span>
Element:</span
> <span class="listValue"> @alexdaichendt:matrix.org</span>
</ListItem> </ListItem>
</ul> </ul>
@ -46,4 +59,15 @@ I usually reply within a couple minutes - if it is important.
ul { ul {
list-style-type: none; list-style-type: none;
} }
@media screen and (max-width: 480px) {
ul {
padding-left: unset;
}
.listText {
display: block;
}
.listValue {
margin-left: 2rem;
}
}
</style> </style>

View file

@ -16,10 +16,10 @@
import type { Skill } from '../lib/utils/types'; import type { Skill } from '../lib/utils/types';
let _SKILLS = [ let _SKILLS = [
{ name: 'React / Svelte', started: 2019 }, { name: 'React/Svelte', started: 2019 },
{ name: 'Scripting with Bash/Python', started: 2018 }, { name: 'Scripting with Bash/Python', started: 2018 },
{ name: 'Java', started: 2013 }, { name: 'Java', started: 2013 },
{ name: 'LXC / Docker', started: 2021 }, { name: 'LXC/Docker', started: 2021 },
{ name: 'FaaS', started: 2021 }, { name: 'FaaS', started: 2021 },
{ name: 'git', started: 2016 }, { name: 'git', started: 2016 },
{ name: 'Linux administration (Debian)', started: 2017 }, { name: 'Linux administration (Debian)', started: 2017 },