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

20
index.html
View file

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

25
style.css
View file

@ -2,6 +2,7 @@ html {
background: #eee; background: #eee;
color: #444; color: #444;
font-family: "Gentium Basic", serif; font-family: "Gentium Basic", serif;
font-size: 16px;
min-height: 80%; min-height: 80%;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -12,7 +13,6 @@ body {
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 +27,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 +44,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 +130,7 @@ code {
} }
@media (min-width: 400px) { @media (min-width: 400px) {
body { html {
font-size: 18px; font-size: 18px;
} }
} }
@ -132,9 +139,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 +147,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;
} }
} }