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

23
index.html
View file

@ -41,6 +41,9 @@
</script> </script>
<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" />
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">
</head> </head>
<body class="h-card vcard"> <body class="h-card vcard">
<header> <header>
@ -49,16 +52,18 @@
<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 u-photo photo" 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>
<h1 class="p-name fn"> <h1>
<a class="u-url u-uid url" href="https://caesarschinas.com" rel="home canonical"> <ruby>
Caesar Schinas <a class="p-name fn u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
</a> Caesar Schinas
</a>
<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>
</rt>
</ruby>
</h1> </h1>
<p class="ipa p-ipa" lang="en-GB-fonipa">
<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>
<p class="dfn p-role"> <p class="dfn p-role">
Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher. Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher.
</p> </p>

34
style.css
View file

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