feat: improve contact section

This commit is contained in:
Caesar Schinas 2022-02-19 00:21:09 +00:00
parent 4d9da04e6f
commit bcff104fd4
2 changed files with 43 additions and 28 deletions

View file

@ -66,32 +66,37 @@
<p>
<strong>Hello.</strong> Thanks for dropping by. Theres not much to see here at the moment, but feel free to drop me a line using one of the links below.
</p>
<section id="contact-section">
<ul id="contact" class="contact">
<li><a rel="me" title="GitHub" class="u-url url" href="https://github.com/caesar">
<li><a rel="me" class="u-url url" href="https://github.com/caesar">
<svg class="icon icon-github"><use xlink:href="images/icon-defs.svg#icon-github"></use></svg>
GitHub
</a></li>
<li><a rel="me" title="Twitter" class="u-url url" href="https://twitter.com/caesarschinas">
<li><a rel="me" class="u-url url" href="https://twitter.com/caesarschinas">
<svg class="icon icon-twitter"><use xlink:href="images/icon-defs.svg#icon-twitter"></use></svg>
Twitter
</a></li>
<li><a rel="me" title="Matrix" class="u-url url" href="https://matrix.to/#/@caesar:schinas.net">
<li><a rel="me" class="u-url url" href="https://matrix.to/#/@caesar:schinas.net">
<svg class="icon icon-keybase"><use xlink:href="images/icon-defs.svg#icon-matrix"></use></svg>
Matrix
</a></li>
<li><a rel="me" title="Keyoxide (PGP identity proofs)" class="u-url url" href="https://keyoxide.org/hkp/5119c11d57d14127aca1b6cfeab09a2560ec3bc6">
<svg class="icon icon-key"><use xlink:href="images/icon-defs.svg#icon-key"></use></svg>
Keyoxide
</a></li>
</ul>
<footer>
<p>
Check out <a rel="me" class="u-url url" href="https://keyoxide.org/hkp/5119c11d57d14127aca1b6cfeab09a2560ec3bc6">my cryptographically-verified identity proofs on Keyoxide</a>.
</p>
<p>
Message me privately on Matrix, or send me encrypted email using <a rel="pgpkey" class="u-key u-url url" href="https://keys.openpgp.org/vks/v1/by-fingerprint/5119C11D57D14127ACA1B6CFEAB09A2560EC3BC6">my PGP key</a><!--(<code>5119C11D57D14127ACA1B6CFEAB09A2560EC3BC6</code>)-->.<br />
</p>
</footer>
</section>
<script>
(function(){
if (!('addEventListener' in window && 'createElement' in document)) return;
var a = document.createElement('a');
a.text = 'email';
a.title = 'Email';
a.innerHTML = '<svg class="icon icon-envelope"><use xlink:href="images/icon-defs.svg#icon-envelope"></use></svg>';
a.innerHTML = '<svg class="icon icon-envelope"><use xlink:href="images/icon-defs.svg#icon-envelope"></use></svg> Email';
a.className = 'u-email email'
function setHref(e) {
var x = 'pnrfne' + '@pnrfnefpuvanf' + '.pbz';

View file

@ -72,27 +72,37 @@ img.profile {
}
.contact li {
list-style-type: none;
display: inline;
margin: 0 1em 0 0;
display: inline-block;
margin: 0.5em 1em 0 0;
padding: 0;
}
.contact a {
display: inline-block;
width: 1em;
height: 1em;
overflow: hidden;
margin-left: 2.4em;
height: 1.5em;
text-decoration: none;
border: none;
font-size: 1.7em;
color: inherit;
}
.contact a .icon {
margin-right: 1em;
padding-right: 0.5em;
width: 1.7em;
height: 1.7em;
vertical-align: bottom;
margin-left: -2.4em;
}
.contact a:hover {
color: #08f;
}
#contact-section footer {
font-size: 0.8em;
line-height: 1.5em;
}
code {
font-size: 0.8em;
}
@media (prefers-color-scheme: dark) {
html {
background: #333;