Skin colour tweaks

This commit is contained in:
Toby Zerner 2015-05-02 08:29:43 +09:30
parent 74c145eb03
commit affebc2ca1
6 changed files with 26 additions and 25 deletions

View File

@ -29,6 +29,6 @@ export default function stringToColor(string) {
num += string.charCodeAt(i); num += string.charCodeAt(i);
} }
var hue = num % 360; var hue = num % 360;
var rgb = hsvToRgb(hue / 360, 0.4, 0.9); var rgb = hsvToRgb(hue / 360, 0.3, 0.9);
return ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16); return ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16);
}; };

View File

@ -4,26 +4,24 @@
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;
&, & a, & .close { &, & a {
color: @fl-body-hero-color; color: @fl-body-hero-color;
} }
& .close {
float: right;
margin-top: -10px;
color: @fl-body-hero-muted-color;
}
& h2 { & h2 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
line-height: 1.5em; line-height: 1.5em;
} }
} & .subtitle {
.welcome-hero { margin: 8px 0 0;
& a, & .close { line-height: 1.5em;
opacity: 0.5; color: @fl-body-hero-muted-color;
}
& .close {
float: right;
margin-top: -10px;
}
& p {
margin: 5px 0 0;
} }
} }
@media @phone { @media @phone {
@ -35,8 +33,8 @@
} }
@media @tablet, @desktop, @desktop-hd { @media @tablet, @desktop, @desktop-hd {
.hero { .hero {
padding: 30px 0; padding: 40px 0 30px;
font-size: 14px; font-size: 15px;
& h2 { & h2 {
font-size: 22px; font-size: 22px;

View File

@ -176,7 +176,7 @@
} }
& .author { & .author {
float: left; float: left;
margin-top: 18px; margin-top: 19px;
} }
& .badges { & .badges {
float: left; float: left;
@ -200,6 +200,7 @@
& .title { & .title {
margin: 0 0 5px; margin: 0 0 5px;
line-height: 1.3; line-height: 1.3;
color: @fl-secondary-color;
} }
&.unread .title { &.unread .title {
color: @fl-body-heading-color; color: @fl-body-heading-color;

View File

@ -59,7 +59,7 @@
} }
& .avatar { & .avatar {
.avatar-size(96px); .avatar-size(96px);
border: 4px solid #fff; border: 4px solid @fl-body-bg;
.box-shadow(0 2px 6px @fl-shadow-color); .box-shadow(0 2px 6px @fl-shadow-color);
} }
& .badges { & .badges {

View File

@ -2,10 +2,10 @@
// CONFIG // CONFIG
// Color palette: // Color palette:
// #AB2C2C #E7562E #E99700 #E7D81D #92D32F #55A835 #3388A7 #355B8E #7F45A9 #A0346E #797979 // #8F3B3B #9E5541 #99793F #8F8A49 #778F53 #638F53 #537F8F #536F90 #76538F #8F5373 #797979
@fl-primary-color: #355B8E; @fl-primary-color: #536F90;
@fl-secondary-color: #355B8E; @fl-secondary-color: #536F90;
@fl-dark-mode: false; @fl-dark-mode: false;
@fl-colored-hdr: false; @fl-colored-hdr: false;

View File

@ -23,12 +23,12 @@
} }
.define-body-variables(true) { .define-body-variables(true) {
@fl-body-primary-color: mix(@fl-primary-color, #000); @fl-body-primary-color: mix(@fl-primary-color, #000);
@fl-body-secondary-color: hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 13%); @fl-body-secondary-color: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 13%);
@fl-body-bg: hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 10%); @fl-body-bg: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 10%);
@fl-body-color: #ccc; @fl-body-color: #ccc;
@fl-body-muted-color: hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 35%); @fl-body-muted-color: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 35%);
@fl-body-muted-more-color: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 25%); @fl-body-muted-more-color: hsl(@fl-secondary-hue, min(10%, @fl-secondary-sat), 25%);
@fl-shadow-color: rgba(0, 0, 0, 0.5); @fl-shadow-color: rgba(0, 0, 0, 0.5);
} }
@fl-body-heading-color: @fl-body-color; @fl-body-heading-color: @fl-body-color;
@ -57,6 +57,7 @@
@fl-body-hero-bg: @fl-body-primary-color; @fl-body-hero-bg: @fl-body-primary-color;
@fl-body-hero-color: #fff; @fl-body-hero-color: #fff;
@fl-body-hero-muted-color: rgba(255, 255, 255, 0.6);
} }
.define-hdr-variables(true) { .define-hdr-variables(true) {
@fl-hdr-bg: @fl-drawer-bg; @fl-hdr-bg: @fl-drawer-bg;
@ -66,7 +67,8 @@
@fl-hdr-control-color: @fl-drawer-control-color; @fl-hdr-control-color: @fl-drawer-control-color;
@fl-body-hero-bg: @fl-body-control-bg; @fl-body-hero-bg: @fl-body-control-bg;
@fl-body-hero-color: @fl-body-control-color; @fl-body-hero-color: @fl-body-primary-color;
@fl-body-hero-muted-color: @fl-body-control-color;
} }
// --------------------------------- // ---------------------------------