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

fix: improve layout, especially on mobile

Browse source
This commit is contained in:
Caesar Schinas 2022-02-20 08:35:08 +00:00
parent 7a60f5d544
commit a2ccfde330
1 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
style.css
View file

@ -30,16 +30,19 @@ a:hover {
h1 a { h1 a {
border-bottom: none; border-bottom: none;
} }
h1 a:hover {
color: inherit;
cursor: default;
}
header { header {
margin: 0 0 1em; margin: 0 0 1em;
} }
h1 { h1 {
font-weight: normal; font-weight: normal;
font-size: 2em; font-size: 2em;
margin-right: 0.5em;
} }
h1, .ipa { h1, .ipa, .dfn {
display: inline-block; text-align: center;
} }
.ipa { .ipa {
color: #888; color: #888;
@ -47,12 +50,14 @@ h1, .ipa {
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
img.profile { img.profile {
float: right; display: block;
height: 6em; margin: 0 auto 1em;
width: 6em; width: 6em;
max-width: 50%;
height: auto;
aspect-ratio: 1;
border-radius: 50%; border-radius: 50%;
border: 1px solid #666; border: 1px solid #666;
margin: -0.5em 0em 0.5em 0.5em;
shape-outside: margin-box; shape-outside: margin-box;
} }
@ -66,22 +71,23 @@ img.profile {
} }
.contact { .contact {
display: flex;
flex-wrap: wrap;
list-style-type: none; list-style-type: none;
margin: 1em 0; margin: 1em -1em;
padding: 0; padding: 0;
} }
.contact li { .contact li {
flex: 1 0 6em;
list-style-type: none; list-style-type: none;
display: inline-block; display: inline-block;
margin: 0.5em 1em 0 0; margin: 0.5em 1em;
padding: 0; padding: 0;
} }
.contact a { .contact a {
display: inline-block; display: inline-block;
margin-left: 2.4em; margin-left: 2.4em;
height: 1.5em; height: 1.5em;
text-decoration: none;
color: inherit;
} }
.contact a .icon { .contact a .icon {
padding-right: 0.5em; padding-right: 0.5em;
@ -116,31 +122,30 @@ code {
} }
} }
@media (min-width: 480px) { @media (min-width: 400px) {
body { body {
font-size: 18px; font-size: 18px;
} }
} }
@media (min-width: 480px) {
h1 {
margin-right: 0.5em;
}
h1, .ipa {
display: inline-block;
}
h1, .ipa, .dfn {
text-align: left;
}
img.profile {
float: right;
margin: -0.5em 0em 0.5em 0.5em;
max-width: 20%;
}
}
@media (min-width: 800px) { @media (min-width: 800px) {
body { body {
font-size: 20px; font-size: 20px;
} }
} }
@media (max-width: 580px) {
img.profile {
height: 5em;
width: 5em;
/* margin-top: 0; */
}
}
@media (max-width: 400px) {
h1 {
font-size: 1.75em;
}
img.profile {
height: 5em;
width: 5em;
margin-top: 0;
}
}