Improvements to static metadata styling, especially for mobile

This commit is contained in:
kibigo! 2017-06-28 00:57:32 -07:00
parent 6107e95404
commit 03f9648377
2 changed files with 41 additions and 25 deletions

View file

@ -1,10 +1,25 @@
.card {
display: flex;
position: relative;
background: $ui-base-color;
background-size: cover;
background-position: center;
border-radius: 4px 4px 0 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
&::after {
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@media screen and (max-width: 700px) {
border-radius: 0;
box-shadow: none;
@ -13,22 +28,9 @@
.details {
position: relative;
padding: 60px 0 0;
background-size: cover;
background-position: center;
text-align: center;
flex: auto;
&::after {
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
z-index: 2;
}
.name {
@ -38,8 +40,6 @@
color: $primary-text-color;
font-weight: 500;
text-align: center;
position: relative;
z-index: 2;
text-shadow: 0 0 2px $base-shadow-color;
small {
@ -54,8 +54,6 @@
@include avatar-size(120px);
margin: 0 auto;
margin-bottom: 15px;
position: relative;
z-index: 2;
img {
@include avatar-radius();
@ -72,11 +70,9 @@
}
.details-counters {
position: relative;
display: inline-flex;
flex-direction: row;
margin: 15px 0;
z-index: 2;
}
.counter {
@ -124,22 +120,23 @@
}
.bio {
position: relative;
font-size: 14px;
line-height: 18px;
margin: 15px 0;
padding: 5px 10px;
color: $ui-secondary-color;
z-index: 2;
}
.metadata {
position: relative;
min-width: 180px;
max-width: 40%;
background: $ui-base-color;
background: rgba($base-shadow-color, 0.8);
color: $primary-text-color;
text-align: left;
overflow-y: auto;
white-space: pre-wrap;
z-index: 3;
.metadata-item {
border-bottom: 1px $ui-primary-color solid;
@ -173,6 +170,25 @@
}
}
@media screen and (max-width: 500px) {
.card {
display: block;
.metadata {
max-width: none;
background: $base-shadow-color;
border-top: 1px $ui-primary-color solid;
.metadata-item {
padding: 15px 20px;
}
}
}
}
.pagination {
padding: 30px 0;
text-align: center;

View file

@ -1,6 +1,6 @@
- processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account
.card.h-card.p-author
.details{ style: "background-image: url(#{account.header.url(:original)})" }
.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
.details
- if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
.controls
- if current_account.following?(account)