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

Compare commits

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

No commits in common. "e4da6b17950c66edc6863980129c5a1cb6f5f7e0" and "a2ccfde3309b2935a916c4b4bd15a76714412826" have entirely different histories.
e4da6b1795 ... a2ccfde330

2 changed files with 23 additions and 34 deletions
Show stats Expand all files Collapse all files

23
index.html
View file

@ -41,9 +41,6 @@
</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>
@ -52,18 +49,16 @@
<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> <h1 class="p-name fn">
<ruby> <a class="u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
<a class="p-name fn u-url u-uid url" href="https://caesarschinas.com" rel="home canonical"> Caesar Schinas
Caesar Schinas </a>
</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,16 +2,17 @@ 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: 100vh; display: flex;
display: grid; flex-flow: column;
grid-template-rows: 1fr auto 3fr; align-items: center;
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 {
@ -26,10 +27,10 @@ a:hover {
color: #08f; color: #08f;
border-bottom-color: #08f; border-bottom-color: #08f;
} }
h1 a.p-name { h1 a {
border-bottom: none; border-bottom: none;
} }
h1 a.p-name:hover { h1 a:hover {
color: inherit; color: inherit;
cursor: default; cursor: default;
} }
@ -43,16 +44,9 @@ 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 1em; margin: 0;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
img.profile { img.profile {
@ -129,7 +123,7 @@ code {
} }
@media (min-width: 400px) { @media (min-width: 400px) {
html { body {
font-size: 18px; font-size: 18px;
} }
} }
@ -138,6 +132,9 @@ 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;
} }
@ -146,12 +143,9 @@ 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) {
html { body {
font-size: 20px; font-size: 20px;
} }
} }