treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Linear gradient no longer extends under metadata on account pages

lolsob-rspec
kibigo! 2017-06-28 01:10:28 -07:00
parent ea972105b9
commit 40358c906a
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/styles/accounts.scss
View File

@ -1,6 +1,5 @@
.card { .card {
display: flex; display: flex;
position: relative;
background: $ui-base-color; background: $ui-base-color;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -8,6 +7,17 @@
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden; overflow: hidden;
@media screen and (max-width: 700px) {
border-radius: 0;
box-shadow: none;
}
.details {
position: relative;
padding: 60px 0 0;
text-align: center;
flex: auto;
&::after { &::after {
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block; display: block;
@ -19,28 +29,18 @@
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
@media screen and (max-width: 700px) {
border-radius: 0;
box-shadow: none;
}
.details {
position: relative;
padding: 60px 0 0;
text-align: center;
flex: auto;
z-index: 2;
} }
.name { .name {
display: block; display: block;
position: relative;
font-size: 20px; font-size: 20px;
line-height: 18px * 1.5; line-height: 18px * 1.5;
color: $primary-text-color; color: $primary-text-color;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
text-shadow: 0 0 2px $base-shadow-color; text-shadow: 0 0 2px $base-shadow-color;
z-index: 2;
small { small {
display: block; display: block;
@ -51,9 +51,11 @@
} }
.avatar { .avatar {
position: relative;
@include avatar-size(120px); @include avatar-size(120px);
margin: 0 auto; margin: 0 auto;
margin-bottom: 15px; margin-bottom: 15px;
z-index: 2;
img { img {
@include avatar-radius(); @include avatar-radius();
@ -71,8 +73,10 @@
.details-counters { .details-counters {
display: inline-flex; display: inline-flex;
position: relative;
flex-direction: row; flex-direction: row;
margin: 15px 0; margin: 15px 0;
z-index: 2;
} }
.counter { .counter {
@ -120,11 +124,13 @@
} }
.bio { .bio {
position: relative;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
margin: 15px 0; margin: 15px 0;
padding: 5px 10px; padding: 5px 10px;
color: $ui-secondary-color; color: $ui-secondary-color;
z-index: 2;
} }
.metadata { .metadata {