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