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

Compare commits

base: caesar:a2ccfde3309b2935a916c4b4bd15a76714412826
Branches Tags
caesar:master
..
compare: caesar:e4da6b17950c66edc6863980129c5a1cb6f5f7e0
Branches Tags
caesar:master

3 commits
a2ccfde330 ... e4da6b1795

Author SHA1 Message Date
Caesar Schinas
e4da6b1795 feat: better vertical alignment with CSS grid 2022-04-09 17:59:28 +01:00
Caesar Schinas
644fdec96c refactor: use ruby for IPA pronunciation 2022-04-09 17:54:08 +01:00
Caesar Schinas
b6a5051edf feat: add IndieAuth endpoint links to head 2022-04-06 13:42:08 +01:00
2 changed files with 34 additions and 23 deletions
Show stats Expand all files Collapse all files

15
index.html
View file

@ -41,6 +41,9 @@
</script>
<link rel="pgpkey" href="https://keys.openpgp.org/vks/v1/by-fingerprint/5119C11D57D14127ACA1B6CFEAB09A2560EC3BC6" title="Caesar Schinas' PGP key" />
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">
</head>
<body class="h-card vcard">
<header>
@ -49,16 +52,18 @@
<source srcset="./images/caesar-256.jpg 256w, ./images/caesar-128.jpg 128w" type="image/jpeg" />
<img class="profile u-photo photo" src="./images/caesar-128.jpg" width="128" height="128" alt="" />
</picture>
<h1 class="p-name fn">
<a class="u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
<h1>
<ruby>
<a class="p-name fn u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
Caesar Schinas
</a>
</h1>
<p class="ipa p-ipa" lang="en-GB-fonipa">
<rt class="ipa p-ipa" lang="en-GB-fonipa" title="pronunciation (IPA)">
<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/
</a>
</p>
</rt>
</ruby>
</h1>
<p class="dfn p-role">
Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher.
</p>

34
style.css
View file

@ -2,17 +2,16 @@ html {
background: #eee;
color: #444;
font-family: "Gentium Basic", serif;
min-height: 80%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
font-size: 16px;
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto 3fr;
}
body {
grid-row: 2;
max-width: 30em;
margin: auto;
padding: 2em;
font-size: 16px;
line-height: 1.5em;
}
h1, p {
@ -27,10 +26,10 @@ a:hover {
color: #08f;
border-bottom-color: #08f;
}
h1 a {
h1 a.p-name {
border-bottom: none;
}
h1 a:hover {
h1 a.p-name:hover {
color: inherit;
cursor: default;
}
@ -44,9 +43,16 @@ h1 {
h1, .ipa, .dfn {
text-align: center;
}
ruby, rp, rt {
display: inline;
font: inherit;
}
.ipa {
display: block;
font-size: 1rem;
line-height: inherit;
color: #888;
margin: 0;
margin: 0 1em;
letter-spacing: 0.05em;
}
img.profile {
@ -123,7 +129,7 @@ code {
}
@media (min-width: 400px) {
body {
html {
font-size: 18px;
}
}
@ -132,9 +138,6 @@ code {
h1 {
margin-right: 0.5em;
}
h1, .ipa {
display: inline-block;
}
h1, .ipa, .dfn {
text-align: left;
}
@ -143,9 +146,12 @@ code {
margin: -0.5em 0em 0.5em 0.5em;
max-width: 20%;
}
.ipa {
display: inline;
}
}
@media (min-width: 800px) {
body {
html {
font-size: 20px;
}
}