feat: add representative h-card

This commit is contained in:
Caesar Schinas 2022-02-16 01:35:07 +00:00
parent 0211c43c13
commit 4e75e64d55
2 changed files with 17 additions and 9 deletions

View file

@ -42,20 +42,24 @@
<link rel="pgpkey" href="https://keys.openpgp.org/vks/v1/by-fingerprint/5119C11D57D14127ACA1B6CFEAB09A2560EC3BC6" title="Caesar Schinas' PGP key" /> <link rel="pgpkey" href="https://keys.openpgp.org/vks/v1/by-fingerprint/5119C11D57D14127ACA1B6CFEAB09A2560EC3BC6" title="Caesar Schinas' PGP key" />
</head> </head>
<body> <body class="h-card vcard">
<header> <header>
<h1>Caesar Schinas</h1> <h1 class="p-name fn">
<a class="u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
Caesar Schinas
</a>
</h1>
<picture> <picture>
<source srcset="./images/caesar-256.webp 256w, ./images/caesar-128.webp 128w" type="image/webp" /> <source srcset="./images/caesar-256.webp 256w, ./images/caesar-128.webp 128w" type="image/webp" />
<source srcset="./images/caesar-256.jpg 256w, ./images/caesar-128.jpg 128w" type="image/jpeg" /> <source srcset="./images/caesar-256.jpg 256w, ./images/caesar-128.jpg 128w" type="image/jpeg" />
<img class="profile" src="./images/caesar-128.jpg" width="128" height="128" alt="" /> <img class="profile u-photo photo" src="./images/caesar-128.jpg" width="128" height="128" alt="" />
</picture> </picture>
<p class="ipa" lang="en-fonipa"> <p class="ipa p-ipa" lang="en-fonipa">
<a href="http://ipa-reader.xyz/?text=%CB%88si%CB%90z%C9%99%20%CB%88sk%C9%AAn%C9%99s&voice=Emma"> <a href="http://ipa-reader.xyz/?text=%CB%88si%CB%90z%C9%99%20%CB%88sk%C9%AAn%C9%99s&voice=Emma">
/ ˈsiːˈskɪnəs / / ˈsiːˈskɪnəs /
</a> </a>
</p> </p>
<p class="dfn"> <p class="dfn p-role">
Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher. Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher.
</p> </p>
</header> </header>
@ -63,19 +67,19 @@
<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. <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> </p>
<ul id="contact" class="contact"> <ul id="contact" class="contact">
<li><a rel="me" title="GitHub" href="https://github.com/caesar"> <li><a rel="me" title="GitHub" 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> <svg class="icon icon-github"><use xlink:href="images/icon-defs.svg#icon-github"></use></svg>
GitHub GitHub
</a></li> </a></li>
<li><a rel="me" title="Twitter" href="https://twitter.com/caesarschinas"> <li><a rel="me" title="Twitter" 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> <svg class="icon icon-twitter"><use xlink:href="images/icon-defs.svg#icon-twitter"></use></svg>
Twitter Twitter
</a></li> </a></li>
<li><a rel="me" title="Matrix" href="https://matrix.to/#/@caesar:schinas.net"> <li><a rel="me" title="Matrix" 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> <svg class="icon icon-keybase"><use xlink:href="images/icon-defs.svg#icon-matrix"></use></svg>
Matrix Matrix
</a></li> </a></li>
<li><a rel="me" title="Keyoxide (PGP identity proofs)" href="https://keyoxide.org/hkp/5119c11d57d14127aca1b6cfeab09a2560ec3bc6"> <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> <svg class="icon icon-key"><use xlink:href="images/icon-defs.svg#icon-key"></use></svg>
Keyoxide Keyoxide
</a></li> </a></li>
@ -88,6 +92,7 @@
a.text = 'email'; a.text = 'email';
a.title = '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>';
a.className = 'u-email email'
function setHref(e) { function setHref(e) {
var x = 'pnrfne' + '@pnrfnefpuvanf' + '.pbz'; var x = 'pnrfne' + '@pnrfnefpuvanf' + '.pbz';
x = x.replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}); x = x.replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});

View file

@ -27,6 +27,9 @@ a:hover {
color: #08f; color: #08f;
border-bottom-color: #08f; border-bottom-color: #08f;
} }
h1 a {
border-bottom: none;
}
header { header {
margin: 0 0 1em; margin: 0 0 1em;
} }