tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improving status display design, including replies and threads

Browse Source
This commit is contained in:
Eugen Rochko
2016-02-28 14:02:53 +01:00
parent 5ae54f9e36
commit 2825991e09
9 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/stylesheets/application.scss
View File

@ -3,6 +3,9 @@ $secondary-color: #ffc952;
$tertiary-color: #47b8e0;
$quaternary-color: #34314c;
$background-color: #fff;
$darker-background-color: #e3dede;
$text-color: #333030;
$lighter-text-color: #8b8687;
@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic");
@import "font-awesome-sprockets";
@ -10,35 +13,23 @@ $background-color: #fff;
body {
font-family: 'Noto Sans', sans-serif;
background: $secondary-color;
background: $background-color image-url('background-pattern.png');
font-size: 13px;
line-height: 18px;
color: $quaternary-color;
&::before {
display: block;
content: "";
position: absolute;
background: $secondary-color;
width: 100%;
height: 200px;
z-index: -1;
top: 0;
left: 0;
}
color: $text-color;
}
.container {
width: 800px;
margin: 0 auto;
z-index: 2;
margin-top: 40px;
}
.footer {
text-align: center;
padding: 100px 0;
font-size: 12px;
color: lighten($quaternary-color, 15%);
color: $text-color;
.mastodon-link {
color: $quaternary-color;

33
app/assets/stylesheets/profile.scss
View File

@ -1,8 +1,7 @@
.card {
margin-top: 40px;
display: flex;
background: darken($background-color, 10%);
border-bottom: 1px solid darken($background-color, 15%);
background: $darker-background-color;
border: 1px solid darken($darker-background-color, 15%);
box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
.bio {
@ -12,11 +11,12 @@
.name {
font-size: 24px;
line-height: 18px * 1.5;
color: $text-color;
small {
display: block;
font-size: 14px;
color: lighten($quaternary-color, 15%);
color: $lighter-text-color;
}
}
@ -25,13 +25,15 @@
float: left;
margin-right: 10px;
padding: 10px;
padding-left: 9px;
margin-top: -30px;
img {
width: 94px;
height: 94px;
display: block;
border: 2px solid $background-color;
border: 2px solid $lighter-text-color;
border-radius: 5px;
}
}
}
@ -49,12 +51,17 @@
border-left: 2px solid $tertiary-color;
}
&.entry-predecessor, &.entry-successor {
border-left: 2px solid $lighter-text-color;
background: darken($background-color, 5%);
}
&:last-child {
border-bottom: 0;
}
}
.entry-container {
.entry__container {
display: flex;
}
@ -69,11 +76,11 @@
width: 48px;
height: 48px;
display: block;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
}
.container {
.entry__container__container {
flex-grow: 1;
}
@ -84,10 +91,10 @@
.name {
text-decoration: none;
color: lighten($quaternary-color, 15%);
color: $lighter-text-color;
strong {
color: $quaternary-color;
color: $text-color;
}
&:hover {
@ -124,7 +131,7 @@
.time {
text-decoration: none;
color: lighten($quaternary-color, 15%);
color: $lighter-text-color;
&:hover {
text-decoration: underline;
@ -133,7 +140,7 @@
.counters {
margin-top: 15px;
color: lighten($quaternary-color, 15%);
color: $lighter-text-color;
cursor: default;
padding: 10px;
padding-top: 0;
@ -141,7 +148,7 @@
.counter {
display: inline-block;
margin-right: 10px;
color: lighten($quaternary-color, 50%);
color: $lighter-text-color;
}
.conversation-link {