Improve styling of data on small screens

This commit is contained in:
Yarmo Mackenbach 2020-06-27 21:25:47 +02:00
parent 77deed91a6
commit f9879cf438

View file

@ -2,10 +2,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background-color: #eee; margin: 0;
color: #333; color: #333;
font-family: sans-serif; font-family: sans-serif;
margin: 0; background-color: #eee;
} }
header { header {
padding: 16px; padding: 16px;
@ -63,6 +63,9 @@ h1 {
h2, h3 { h2, h3 {
margin-top: 32px; margin-top: 32px;
} }
p {
line-height: 1.3em;
}
a { a {
color: #3f9acc; color: #3f9acc;
} }
@ -143,10 +146,11 @@ input[type="submit"] {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
a.proofDisplay { a.proofDisplay {
margin-right: 16px; margin-right: 8px;
} }
a.proofUrl { a.proofUrl {
color: #777; color: #777;
font-size: 0.8em;
} }
a.proofUrl.proofUrl--verified { a.proofUrl.proofUrl--verified {
color: #499539; color: #499539;
@ -157,6 +161,7 @@ a.proofUrl:hover {
@media (max-width: 680px) { @media (max-width: 680px) {
.profileDataItem { .profileDataItem {
flex-direction: column; flex-direction: column;
margin-bottom: 8px;
} }
.profileDataItem__label { .profileDataItem__label {
max-width: 100%; max-width: 100%;