caesar/caesarschinas.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: improve contact section

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -66,32 +66,37 @@
<p> <p>
<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>
<section id="contact-section">
<ul id="contact" class="contact"> <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> <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" 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> <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" 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> <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)" 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> </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> <script>
(function(){ (function(){
if (!('addEventListener' in window && 'createElement' in document)) return; if (!('addEventListener' in window && 'createElement' in document)) return;
var a = document.createElement('a'); var a = document.createElement('a');
a.text = 'email'; a.text = 'email';
a.title = 'Email'; a.innerHTML = '<svg class="icon icon-envelope"><use xlink:href="images/icon-defs.svg#icon-envelope"></use></svg> Email';
a.innerHTML = '<svg class="icon icon-envelope"><use xlink:href="images/icon-defs.svg#icon-envelope"></use></svg>';
a.className = 'u-email email' a.className = 'u-email email'
function setHref(e) { function setHref(e) {
var x = 'pnrfne' + '@pnrfnefpuvanf' + '.pbz'; var x = 'pnrfne' + '@pnrfnefpuvanf' + '.pbz';

26
style.css
View file

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