improve sizes/spacing on large screens

This commit is contained in:
Sean Yesmunt 2018-10-14 13:41:19 -04:00
parent 4d5c26f258
commit 627af75f43
2 changed files with 24 additions and 24 deletions

View file

@ -362,7 +362,7 @@ class PublishForm extends React.PureComponent<Props> {
{__('to learn more.')} {__('to learn more.')}
</div> </div>
{(filePath || !!editingURI) && ( {(filePath || !!editingURI) && (
<div className="card-media__internal-links"> <div className="card__actions-top-corner">
<Button <Button
button="inverse" button="inverse"
icon={icons.CLOSE} icon={icons.CLOSE}

View file

@ -36,24 +36,6 @@
cursor: pointer; cursor: pointer;
} }
.card__media {
background-color: $lbry-gray-3;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.card__media--no-img {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.card__media--nsfw {
background-color: $lbry-red-5;
}
.card--pending { .card--pending {
opacity: 0.5; opacity: 0.5;
} }
@ -85,6 +67,24 @@
} }
} }
.card__media {
background-color: $lbry-gray-3;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.card__media--no-img {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.card__media--nsfw {
background-color: $lbry-red-5;
}
.card__actions { .card__actions {
display: flex; display: flex;
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 2/3;
@ -227,12 +227,12 @@
.card__subtitle { .card__subtitle {
color: $lbry-gray-5; color: $lbry-gray-5;
font-size: 1em; font-size: .9em;
line-height: 1em; line-height: .9em;
padding-top: $spacing-vertical * 1/3; padding-top: $spacing-vertical * 1/3;
@media (min-width: $large-breakpoint) { @media (min-width: $large-breakpoint) {
font-size: 1.2em; font-size: 1em;
} }
} }
@ -277,11 +277,11 @@
.card__title--file-card { .card__title--file-card {
// FileCard is slightly different where the title is only slightly bigger than the subtitle // FileCard is slightly different where the title is only slightly bigger than the subtitle
// Slightly bigger than 2 lines for consistent channel placement // Slightly bigger than 2 lines for consistent channel placement
font-size: 1.1em; font-size: 1em;
height: 3.3em; height: 3.3em;
@media only screen and (min-width: $large-breakpoint) { @media only screen and (min-width: $large-breakpoint) {
font-size: 1.3em; font-size: 1.1em;
} }
} }