improvement: start using the solarized palette
This commit is contained in:
Kazhnuz
parent
8bc72fdb78
commit
76c889d47b
6 changed files with 834 additions and 690 deletions
1230
css/style.css
1230
css/style.css
File diff suppressed because it is too large
Load diff
1
css/style.css.map
Normal file
1
css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,8 @@
|
|||
/* ------------------ COULEURS ------------------- */
|
||||
|
||||
$color-button-light: $color-light;
|
||||
$color-button-dark: $color-dark;
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& > .card-header { background-color: $background-color; color:$text-color; }
|
||||
}
|
||||
|
|
@ -48,120 +51,120 @@ a, a:hover, a:active {
|
|||
}
|
||||
|
||||
::selection {
|
||||
@include background-color($color-selection, #FFF);
|
||||
@include background-color($color-selection, $color-button-light);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, #FFF);
|
||||
@include background-color($color-selection, $color-button-light);
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
|
||||
.card {
|
||||
&-blue { @include card-color($color-blue, #FFF); }
|
||||
&-violet { @include card-color($color-violet, #FFF); }
|
||||
&-purple { @include card-color($color-purple, #FFF); }
|
||||
&-red { @include card-color($color-red, #FFF); }
|
||||
&-orange { @include card-color($color-orange, #FFF); }
|
||||
&-green { @include card-color($color-green, #FFF); }
|
||||
&-skyblue { @include card-color($color-skyblue, #FFF); }
|
||||
&-dark { @include card-color($color-dark, #FFF); }
|
||||
&-light { @include card-color($color-light, #111); }
|
||||
&-turquoise { @include card-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include card-color($color-yellow, #FFF); }
|
||||
&-brown { @include card-color($color-brown, #FFF); }
|
||||
&-grey { @include card-color($color-grey, #FFF); }
|
||||
&-blue { @include card-color($color-blue, $color-button-light); }
|
||||
&-violet { @include card-color($color-violet, $color-button-light); }
|
||||
&-purple { @include card-color($color-purple, $color-button-light); }
|
||||
&-red { @include card-color($color-red, $color-button-light); }
|
||||
&-orange { @include card-color($color-orange, $color-button-light); }
|
||||
&-green { @include card-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include card-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include card-color($color-dark, $color-button-light); }
|
||||
&-light { @include card-color($color-light, $color-button-dark); }
|
||||
&-turquoise { @include card-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include card-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include card-color($color-brown, $color-button-light); }
|
||||
&-grey { @include card-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include card-color($color-primary, #FFF); }
|
||||
&-secondary { @include card-color($color-secondary, #FFF); }
|
||||
&-warning { @include card-color($color-warning, #FFF); }
|
||||
&-danger { @include card-color($color-danger, #FFF); }
|
||||
&-info { @include card-color($color-info, #FFF); }
|
||||
&-success { @include card-color($color-success, #FFF); }
|
||||
&-primary { @include card-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include card-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include card-color($color-warning, $color-button-light); }
|
||||
&-danger { @include card-color($color-danger, $color-button-light); }
|
||||
&-info { @include card-color($color-info, $color-button-light); }
|
||||
&-success { @include card-color($color-success, $color-button-light); }
|
||||
}
|
||||
|
||||
/* BUTTONS & BADGES */
|
||||
|
||||
.btn {
|
||||
&-blue { @include button-color($color-blue, #FFF); }
|
||||
&-violet { @include button-color($color-violet, #FFF); }
|
||||
&-purple { @include button-color($color-purple, #FFF); }
|
||||
&-red { @include button-color($color-red, #FFF); }
|
||||
&-orange { @include button-color($color-orange, #FFF); }
|
||||
&-green { @include button-color($color-green, #FFF); }
|
||||
&-skyblue { @include button-color($color-skyblue, #FFF); }
|
||||
&-dark { @include button-color($color-dark, #FFF); }
|
||||
&-light { @include button-color($color-light, #111); }
|
||||
&-turquoise { @include button-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include button-color($color-yellow, #FFF); }
|
||||
&-brown { @include button-color($color-brown, #FFF); }
|
||||
&-grey { @include button-color($color-grey, #FFF); }
|
||||
&-blue { @include button-color($color-blue, $color-button-light); }
|
||||
&-violet { @include button-color($color-violet, $color-button-light); }
|
||||
&-purple { @include button-color($color-purple, $color-button-light); }
|
||||
&-red { @include button-color($color-red, $color-button-light); }
|
||||
&-orange { @include button-color($color-orange, $color-button-light); }
|
||||
&-green { @include button-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include button-color($color-dark, $color-button-light); }
|
||||
&-light { @include button-color($color-light, $color-button-dark); }
|
||||
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include button-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include button-color($color-brown, $color-button-light); }
|
||||
&-grey { @include button-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include button-color($color-primary, #FFF); }
|
||||
&-secondary { @include button-color($color-secondary, #FFF); }
|
||||
&-warning { @include button-color($color-warning, #FFF); }
|
||||
&-danger { @include button-color($color-danger, #FFF); }
|
||||
&-info { @include button-color($color-info, #FFF); }
|
||||
&-success { @include button-color($color-success, #FFF); }
|
||||
&-primary { @include button-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include button-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include button-color($color-warning, $color-button-light); }
|
||||
&-danger { @include button-color($color-danger, $color-button-light); }
|
||||
&-info { @include button-color($color-info, $color-button-light); }
|
||||
&-success { @include button-color($color-success, $color-button-light); }
|
||||
}
|
||||
|
||||
/* social */
|
||||
|
||||
.btn {
|
||||
&-facebook {@include button-color(#3B5998, #FFF);}
|
||||
&-twitter {@include button-color(#55ACEE, #FFF);}
|
||||
&-googleplus {@include button-color(#d34836, #FFF);}
|
||||
&-diaspora {@include button-color(#313739, #FFF);}
|
||||
&-mastodon {@include button-color(#282c37, #FFF);}
|
||||
&-facebook {@include button-color(#3B5998, $color-button-light);}
|
||||
&-twitter {@include button-color(#55ACEE, $color-button-light);}
|
||||
&-googleplus {@include button-color(#d34836, $color-button-light);}
|
||||
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
||||
}
|
||||
|
||||
/* BADGES */
|
||||
|
||||
.badge {
|
||||
&-blue { @include badge-color($color-blue, #FFF); }
|
||||
&-violet { @include badge-color($color-violet, #FFF); }
|
||||
&-purple { @include badge-color($color-purple, #FFF); }
|
||||
&-red { @include badge-color($color-red, #FFF); }
|
||||
&-orange { @include badge-color($color-orange, #FFF); }
|
||||
&-green { @include badge-color($color-green, #FFF); }
|
||||
&-skyblue { @include badge-color($color-skyblue, #FFF); }
|
||||
&-dark { @include badge-color($color-dark, #FFF); }
|
||||
&-light { @include badge-color($color-light, #111); }
|
||||
&-turquoise { @include badge-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include badge-color($color-yellow, #FFF); }
|
||||
&-brown { @include badge-color($color-brown, #FFF); }
|
||||
&-grey { @include badge-color($color-grey, #FFF); }
|
||||
&-blue { @include badge-color($color-blue, $color-button-light); }
|
||||
&-violet { @include badge-color($color-violet, $color-button-light); }
|
||||
&-purple { @include badge-color($color-purple, $color-button-light); }
|
||||
&-red { @include badge-color($color-red, $color-button-light); }
|
||||
&-orange { @include badge-color($color-orange, $color-button-light); }
|
||||
&-green { @include badge-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include badge-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include badge-color($color-dark, $color-button-light); }
|
||||
&-light { @include badge-color($color-light, $color-button-dark); }
|
||||
&-turquoise { @include badge-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include badge-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include badge-color($color-brown, $color-button-light); }
|
||||
&-grey { @include badge-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include badge-color($color-primary, #FFF); }
|
||||
&-secondary { @include badge-color($color-secondary, #FFF); }
|
||||
&-warning { @include badge-color($color-warning, #FFF); }
|
||||
&-danger { @include badge-color($color-danger, #FFF); }
|
||||
&-info { @include badge-color($color-info, #FFF); }
|
||||
&-success { @include badge-color($color-success, #FFF); }
|
||||
&-primary { @include badge-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include badge-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include badge-color($color-warning, $color-button-light); }
|
||||
&-danger { @include badge-color($color-danger, $color-button-light); }
|
||||
&-info { @include badge-color($color-info, $color-button-light); }
|
||||
&-success { @include badge-color($color-success, $color-button-light); }
|
||||
}
|
||||
|
||||
/* BACKGROUNDS */
|
||||
|
||||
.bg {
|
||||
&-blue { @include background-color($color-blue, #FFF); }
|
||||
&-violet { @include background-color($color-violet, #FFF); }
|
||||
&-purple { @include background-color($color-purple, #FFF); }
|
||||
&-red { @include background-color($color-red, #FFF); }
|
||||
&-orange { @include background-color($color-orange, #FFF); }
|
||||
&-green { @include background-color($color-green, #FFF); }
|
||||
&-skyblue { @include background-color($color-skyblue, #FFF); }
|
||||
&-dark { @include background-color($color-dark, #FFF); }
|
||||
&-light { @include background-color($color-light, #111); }
|
||||
&-turquoise { @include background-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include background-color($color-yellow, #FFF); }
|
||||
&-brown { @include background-color($color-brown, #FFF); }
|
||||
&-grey { @include background-color($color-grey, #FFF); }
|
||||
&-blue { @include background-color($color-blue, $color-button-light); }
|
||||
&-violet { @include background-color($color-violet, $color-button-light); }
|
||||
&-purple { @include background-color($color-purple, $color-button-light); }
|
||||
&-red { @include background-color($color-red, $color-button-light); }
|
||||
&-orange { @include background-color($color-orange, $color-button-light); }
|
||||
&-green { @include background-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include background-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include background-color($color-dark, $color-button-light); }
|
||||
&-light { @include background-color($color-light, $color-button-dark); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include background-color($color-brown, $color-button-light); }
|
||||
&-grey { @include background-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include background-color($color-primary, #FFF); }
|
||||
&-secondary { @include background-color($color-secondary, #FFF); }
|
||||
&-warning { @include background-color($color-warning, #FFF); }
|
||||
&-danger { @include background-color($color-danger, #FFF); }
|
||||
&-info { @include background-color($color-info, #FFF); }
|
||||
&-success { @include background-color($color-success, #FFF); }
|
||||
&-primary { @include background-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include background-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include background-color($color-warning, $color-button-light); }
|
||||
&-danger { @include background-color($color-danger, $color-button-light); }
|
||||
&-info { @include background-color($color-info, $color-button-light); }
|
||||
&-success { @include background-color($color-success, $color-button-light); }
|
||||
}
|
||||
|
||||
/* ALERTS */
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
color:white;
|
||||
color: $color-light;
|
||||
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
|||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
color:#FFF;
|
||||
color: $color-light;
|
||||
font-weight:700;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
|
|
@ -71,7 +71,7 @@ ul.social {
|
|||
list-style: none;
|
||||
display: inline;
|
||||
a {
|
||||
color:#FFFFFF;
|
||||
color: $color-light;
|
||||
background-color:#000000;
|
||||
padding:0.3em;
|
||||
padding-left:0.36em;
|
||||
|
|
@ -80,7 +80,7 @@ ul.social {
|
|||
border-radius:100%;
|
||||
&:hover {
|
||||
color:#000;
|
||||
background-color:#FFF
|
||||
background-color: $color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,6 +94,7 @@ ul.social {
|
|||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin-bottom:1.2em;
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
|
|
@ -101,7 +102,7 @@ ul.social {
|
|||
}
|
||||
|
||||
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card h7,.card h8,.card h9,.card h10 {
|
||||
color:#333;
|
||||
color:$color-dark;
|
||||
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +133,7 @@ ul.social {
|
|||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:#FFF;
|
||||
color:$color-light;;
|
||||
font-weight:600;
|
||||
line-height:1.5em;
|
||||
}
|
||||
|
|
@ -264,7 +265,7 @@ a.list-group-item:hover {
|
|||
@include border-radius();
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
border: 0;
|
||||
background-color:#eeeeec;
|
||||
background-color: $color-light2;
|
||||
margin-bottom:1.2em;
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
|
@ -387,7 +388,7 @@ a.list-group-item:hover {
|
|||
position: absolute;
|
||||
padding: 0;
|
||||
transition: opacity .5s;
|
||||
color: #FFF;
|
||||
color: $color-light;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
|
||||
backdrop-filter: none;
|
||||
|
|
@ -401,11 +402,11 @@ a.list-group-item:hover {
|
|||
text-align:center;
|
||||
display:block;
|
||||
font-size:2em;
|
||||
color: white;
|
||||
color: $color-light;
|
||||
}
|
||||
|
||||
.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 {
|
||||
color:white;
|
||||
color: $color-light;
|
||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
$color-blue: #4e63c9;
|
||||
$color-violet: #ce4dcd;
|
||||
$color-purple: #7951c0;
|
||||
$color-red: #e33d22;
|
||||
$color-orange: #eb790a;
|
||||
$color-green: #75b82d;
|
||||
$color-skyblue: #42a0f3;
|
||||
$color-dark: #2D2D2D;
|
||||
$color-light: #eeeeec;
|
||||
$color-turquoise: #46bd9e;
|
||||
$color-yellow: #f6d32d;
|
||||
$color-brown: #986a44;
|
||||
$color-grey: #77767b;
|
||||
$color-blue: #268bd2;
|
||||
$color-violet: #d33682;
|
||||
$color-purple: #6c71c4;
|
||||
$color-red: #dc322f;
|
||||
$color-orange: #cb4b16;
|
||||
$color-green: #859900;
|
||||
$color-skyblue: #2aa198;
|
||||
$color-dark: #002b36;
|
||||
$color-light: #fdf6e3;
|
||||
$color-turquoise: #2aa198;
|
||||
$color-yellow: #b58900;
|
||||
$color-brown: #b58900;
|
||||
$color-grey: #586e75;
|
||||
|
||||
$color-dark2: #073642;
|
||||
$color-light2: #eee8d5;
|
||||
|
||||
$color-gray2: #657b83;
|
||||
$color-gray3: #839496;
|
||||
$color-gray4: #93a1a1;
|
||||
|
||||
$color-warning: $color-orange;
|
||||
$color-danger: $color-red;
|
||||
|
|
|
|||
|
|
@ -25,8 +25,12 @@ $color-mark: $color-yellow;
|
|||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background: #64b5f6 url('../img/background.png') center bottom repeat-x;
|
||||
background: $color-turquoise url('../img/background.png') center bottom repeat-x;
|
||||
}
|
||||
|
||||
@import 'commons';
|
||||
|
|
|
|||
Reference in a new issue