feat: add representative h-card
This commit is contained in:
parent
0211c43c13
commit
4e75e64d55
2 changed files with 17 additions and 9 deletions
23
index.html
23
index.html
|
|
@ -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ːzə ˈskɪnəs /
|
/ ˈsiːzə ˈskɪnəs /
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="dfn">
|
<p class="dfn p-role">
|
||||||
Sailor; programmer; web developer; publisher.
|
Sailor; programmer; web developer; publisher.
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -63,19 +67,19 @@
|
||||||
<strong>Hello.</strong> Thanks for dropping by. There’s 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. There’s 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);});
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue