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

refactor: use ruby for IPA pronunciation

Browse source
This commit is contained in:
Caesar Schinas 2022-04-09 16:26:41 +01:00
parent b6a5051edf
commit 644fdec96c
2 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -52,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>

25
style.css
View file

@ -2,6 +2,7 @@ html {
background: #eee;
color: #444;
font-family: "Gentium Basic", serif;
font-size: 16px;
min-height: 80%;
display: flex;
flex-flow: column;
@ -12,7 +13,6 @@ body {
max-width: 30em;
margin: auto;
padding: 2em;
font-size: 16px;
line-height: 1.5em;
}
h1, p {
@ -27,10 +27,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 +44,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 +130,7 @@ code {
}
@media (min-width: 400px) {
body {
html {
font-size: 18px;
}
}
@ -132,9 +139,6 @@ code {
h1 {
margin-right: 0.5em;
}
h1, .ipa {
display: inline-block;
}
h1, .ipa, .dfn {
text-align: left;
}
@ -143,9 +147,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;
}
}