fix: Positioning for mobile elements

This commit is contained in:
Sayantan Santra 2024-09-19 17:24:30 -05:00
parent 6bd33b1add
commit b33233e8e3
Signed by: SinTan1729
GPG key ID: 0538DD402EA50898
2 changed files with 13 additions and 8 deletions

View file

@ -37,18 +37,23 @@
<div class="container">
<div class="header">
<img src="https://www.gravatar.com/avatar/a5114f8f2ab803638d442ab3cb39d329?s=200" alt="gravatar" />
<h2 class="pc-name">Sayantan Santra | সায়ন্তন সাঁতরা |
<h2 class="pc name">Sayantan Santra | সায়ন্তন সাঁতরা |
<a href=https://en.wikipedia.org/wiki/Bengali_phonology>IPA</a>: /ʃɑ.e̯ɔn.t̪ɔn ʃãt.ra/
</h2>
<h3 class="mobile-name">Sayantan Santra<br />সায়ন্তন সাঁতরা<br /><a
<h3 class="mobile name">Sayantan Santra<br />সায়ন্তন সাঁতরা<br /><a
href=https://en.wikipedia.org/wiki/Bengali_phonology>IPA</a>: /ʃɑ.e̯ɔn.t̪ɔn ʃãt.ra/</h3>
</div>
<div class="row">
<div class="column">Office: PHSC 910</div>
<div class="column" name="mail">
<div class="column pc mail">
Email: <a href="mailto:sayantan.santra@ou.edu">sayantan.santra@ou.edu</a>
(PGP key: <a href=https://keys.openpgp.org/vks/v1/by-fingerprint/B7772D9CDFAE54AE8536A390A3319D1C521C0719>A3319D1C521C0719</a>)
</div>
<div class="column mobile mail">
Email: <a href="mailto:sayantan.santra@ou.edu">sayantan.santra@ou.edu</a>
<br />
(PGP key: <a href=https://keys.openpgp.org/vks/v1/by-fingerprint/B7772D9CDFAE54AE8536A390A3319D1C521C0719>A3319D1C521C0719</a>)
</div>
</div>
<hr />

View file

@ -37,11 +37,11 @@ img {
flex: 50%;
}
.column[name="mail"] {
.column.mail {
text-align: right;
}
.mobile-name {
.mobile {
display: none;
}
@ -51,7 +51,7 @@ img {
display: block;
}
.column[name="mail"] {
.column.mail {
text-align: left;
}
@ -59,11 +59,11 @@ img {
text-align: left;
}
.pc-name {
.pc {
display: none;
}
.mobile-name {
.mobile {
display: block;
}
}