kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: start using the solarized palette

Browse source
This commit is contained in:
Kazhnuz 2019-10-08 13:27:07 +02:00
parent 8bc72fdb78
commit 76c889d47b
6 changed files with 834 additions and 690 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1114
css/style.css
View file

File diff suppressed because it is too large Load diff

1
css/style.css.map Normal file
View file

File diff suppressed because one or more lines are too long

169
scss/_colorize.scss
View file

@ -1,5 +1,8 @@
/* ------------------ COULEURS ------------------- */ /* ------------------ COULEURS ------------------- */
$color-button-light: $color-light;
$color-button-dark: $color-dark;
@mixin card-color($background-color, $text-color) { @mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; } & > .card-header { background-color: $background-color; color:$text-color; }
} }
@ -48,120 +51,120 @@ a, a:hover, a:active {
} }
::selection { ::selection {
@include background-color($color-selection, #FFF); @include background-color($color-selection, $color-button-light);
} }
::-moz-selection { ::-moz-selection {
@include background-color($color-selection, #FFF); @include background-color($color-selection, $color-button-light);
} }
/* CARDS */ /* CARDS */
.card { .card {
&-blue { @include card-color($color-blue, #FFF); } &-blue { @include card-color($color-blue, $color-button-light); }
&-violet { @include card-color($color-violet, #FFF); } &-violet { @include card-color($color-violet, $color-button-light); }
&-purple { @include card-color($color-purple, #FFF); } &-purple { @include card-color($color-purple, $color-button-light); }
&-red { @include card-color($color-red, #FFF); } &-red { @include card-color($color-red, $color-button-light); }
&-orange { @include card-color($color-orange, #FFF); } &-orange { @include card-color($color-orange, $color-button-light); }
&-green { @include card-color($color-green, #FFF); } &-green { @include card-color($color-green, $color-button-light); }
&-skyblue { @include card-color($color-skyblue, #FFF); } &-skyblue { @include card-color($color-skyblue, $color-button-light); }
&-dark { @include card-color($color-dark, #FFF); } &-dark { @include card-color($color-dark, $color-button-light); }
&-light { @include card-color($color-light, #111); } &-light { @include card-color($color-light, $color-button-dark); }
&-turquoise { @include card-color($color-turquoise, #FFF); } &-turquoise { @include card-color($color-turquoise, $color-button-light); }
&-yellow { @include card-color($color-yellow, #FFF); } &-yellow { @include card-color($color-yellow, $color-button-light); }
&-brown { @include card-color($color-brown, #FFF); } &-brown { @include card-color($color-brown, $color-button-light); }
&-grey { @include card-color($color-grey, #FFF); } &-grey { @include card-color($color-grey, $color-button-light); }
&-primary { @include card-color($color-primary, #FFF); } &-primary { @include card-color($color-primary, $color-button-light); }
&-secondary { @include card-color($color-secondary, #FFF); } &-secondary { @include card-color($color-secondary, $color-button-light); }
&-warning { @include card-color($color-warning, #FFF); } &-warning { @include card-color($color-warning, $color-button-light); }
&-danger { @include card-color($color-danger, #FFF); } &-danger { @include card-color($color-danger, $color-button-light); }
&-info { @include card-color($color-info, #FFF); } &-info { @include card-color($color-info, $color-button-light); }
&-success { @include card-color($color-success, #FFF); } &-success { @include card-color($color-success, $color-button-light); }
} }
/* BUTTONS & BADGES */ /* BUTTONS & BADGES */
.btn { .btn {
&-blue { @include button-color($color-blue, #FFF); } &-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, #FFF); } &-violet { @include button-color($color-violet, $color-button-light); }
&-purple { @include button-color($color-purple, #FFF); } &-purple { @include button-color($color-purple, $color-button-light); }
&-red { @include button-color($color-red, #FFF); } &-red { @include button-color($color-red, $color-button-light); }
&-orange { @include button-color($color-orange, #FFF); } &-orange { @include button-color($color-orange, $color-button-light); }
&-green { @include button-color($color-green, #FFF); } &-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, #FFF); } &-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, #FFF); } &-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-color($color-light, #111); } &-light { @include button-color($color-light, $color-button-dark); }
&-turquoise { @include button-color($color-turquoise, #FFF); } &-turquoise { @include button-color($color-turquoise, $color-button-light); }
&-yellow { @include button-color($color-yellow, #FFF); } &-yellow { @include button-color($color-yellow, $color-button-light); }
&-brown { @include button-color($color-brown, #FFF); } &-brown { @include button-color($color-brown, $color-button-light); }
&-grey { @include button-color($color-grey, #FFF); } &-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, #FFF); } &-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, #FFF); } &-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, #FFF); } &-warning { @include button-color($color-warning, $color-button-light); }
&-danger { @include button-color($color-danger, #FFF); } &-danger { @include button-color($color-danger, $color-button-light); }
&-info { @include button-color($color-info, #FFF); } &-info { @include button-color($color-info, $color-button-light); }
&-success { @include button-color($color-success, #FFF); } &-success { @include button-color($color-success, $color-button-light); }
} }
/* social */ /* social */
.btn { .btn {
&-facebook {@include button-color(#3B5998, #FFF);} &-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, #FFF);} &-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836, #FFF);} &-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739, #FFF);} &-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37, #FFF);} &-mastodon {@include button-color(#282c37, $color-button-light);}
} }
/* BADGES */ /* BADGES */
.badge { .badge {
&-blue { @include badge-color($color-blue, #FFF); } &-blue { @include badge-color($color-blue, $color-button-light); }
&-violet { @include badge-color($color-violet, #FFF); } &-violet { @include badge-color($color-violet, $color-button-light); }
&-purple { @include badge-color($color-purple, #FFF); } &-purple { @include badge-color($color-purple, $color-button-light); }
&-red { @include badge-color($color-red, #FFF); } &-red { @include badge-color($color-red, $color-button-light); }
&-orange { @include badge-color($color-orange, #FFF); } &-orange { @include badge-color($color-orange, $color-button-light); }
&-green { @include badge-color($color-green, #FFF); } &-green { @include badge-color($color-green, $color-button-light); }
&-skyblue { @include badge-color($color-skyblue, #FFF); } &-skyblue { @include badge-color($color-skyblue, $color-button-light); }
&-dark { @include badge-color($color-dark, #FFF); } &-dark { @include badge-color($color-dark, $color-button-light); }
&-light { @include badge-color($color-light, #111); } &-light { @include badge-color($color-light, $color-button-dark); }
&-turquoise { @include badge-color($color-turquoise, #FFF); } &-turquoise { @include badge-color($color-turquoise, $color-button-light); }
&-yellow { @include badge-color($color-yellow, #FFF); } &-yellow { @include badge-color($color-yellow, $color-button-light); }
&-brown { @include badge-color($color-brown, #FFF); } &-brown { @include badge-color($color-brown, $color-button-light); }
&-grey { @include badge-color($color-grey, #FFF); } &-grey { @include badge-color($color-grey, $color-button-light); }
&-primary { @include badge-color($color-primary, #FFF); } &-primary { @include badge-color($color-primary, $color-button-light); }
&-secondary { @include badge-color($color-secondary, #FFF); } &-secondary { @include badge-color($color-secondary, $color-button-light); }
&-warning { @include badge-color($color-warning, #FFF); } &-warning { @include badge-color($color-warning, $color-button-light); }
&-danger { @include badge-color($color-danger, #FFF); } &-danger { @include badge-color($color-danger, $color-button-light); }
&-info { @include badge-color($color-info, #FFF); } &-info { @include badge-color($color-info, $color-button-light); }
&-success { @include badge-color($color-success, #FFF); } &-success { @include badge-color($color-success, $color-button-light); }
} }
/* BACKGROUNDS */ /* BACKGROUNDS */
.bg { .bg {
&-blue { @include background-color($color-blue, #FFF); } &-blue { @include background-color($color-blue, $color-button-light); }
&-violet { @include background-color($color-violet, #FFF); } &-violet { @include background-color($color-violet, $color-button-light); }
&-purple { @include background-color($color-purple, #FFF); } &-purple { @include background-color($color-purple, $color-button-light); }
&-red { @include background-color($color-red, #FFF); } &-red { @include background-color($color-red, $color-button-light); }
&-orange { @include background-color($color-orange, #FFF); } &-orange { @include background-color($color-orange, $color-button-light); }
&-green { @include background-color($color-green, #FFF); } &-green { @include background-color($color-green, $color-button-light); }
&-skyblue { @include background-color($color-skyblue, #FFF); } &-skyblue { @include background-color($color-skyblue, $color-button-light); }
&-dark { @include background-color($color-dark, #FFF); } &-dark { @include background-color($color-dark, $color-button-light); }
&-light { @include background-color($color-light, #111); } &-light { @include background-color($color-light, $color-button-dark); }
&-turquoise { @include background-color($color-turquoise, #FFF); } &-turquoise { @include background-color($color-turquoise, $color-button-light); }
&-yellow { @include background-color($color-yellow, #FFF); } &-yellow { @include background-color($color-yellow, $color-button-light); }
&-brown { @include background-color($color-brown, #FFF); } &-brown { @include background-color($color-brown, $color-button-light); }
&-grey { @include background-color($color-grey, #FFF); } &-grey { @include background-color($color-grey, $color-button-light); }
&-primary { @include background-color($color-primary, #FFF); } &-primary { @include background-color($color-primary, $color-button-light); }
&-secondary { @include background-color($color-secondary, #FFF); } &-secondary { @include background-color($color-secondary, $color-button-light); }
&-warning { @include background-color($color-warning, #FFF); } &-warning { @include background-color($color-warning, $color-button-light); }
&-danger { @include background-color($color-danger, #FFF); } &-danger { @include background-color($color-danger, $color-button-light); }
&-info { @include background-color($color-info, #FFF); } &-info { @include background-color($color-info, $color-button-light); }
&-success { @include background-color($color-success, #FFF); } &-success { @include background-color($color-success, $color-button-light); }
} }
/* ALERTS */ /* ALERTS */

21
scss/_commons.scss
View file

@ -17,7 +17,7 @@
} }
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { 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); 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 { header h1 {
border-style:none !important; border-style:none !important;
color:#FFF; color: $color-light;
font-weight:700; font-weight:700;
font-size:5.4em; font-size:5.4em;
font-style:oblique; font-style:oblique;
@ -71,7 +71,7 @@ ul.social {
list-style: none; list-style: none;
display: inline; display: inline;
a { a {
color:#FFFFFF; color: $color-light;
background-color:#000000; background-color:#000000;
padding:0.3em; padding:0.3em;
padding-left:0.36em; padding-left:0.36em;
@ -80,7 +80,7 @@ ul.social {
border-radius:100%; border-radius:100%;
&:hover { &:hover {
color:#000; color:#000;
background-color:#FFF background-color: $color-light;
} }
} }
} }
@ -94,6 +94,7 @@ ul.social {
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border: none;
margin-bottom:1.2em; margin-bottom:1.2em;
background-color: $color-light;
} }
.card-shadow { .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 { .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); 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); text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px; padding:0px;
margin:0px; margin:0px;
color:#FFF; color:$color-light;;
font-weight:600; font-weight:600;
line-height:1.5em; line-height:1.5em;
} }
@ -264,7 +265,7 @@ a.list-group-item:hover {
@include border-radius(); @include border-radius();
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
border: 0; border: 0;
background-color:#eeeeec; background-color: $color-light2;
margin-bottom:1.2em; margin-bottom:1.2em;
@include li-no-margin(); @include li-no-margin();
} }
@ -387,7 +388,7 @@ a.list-group-item:hover {
position: absolute; position: absolute;
padding: 0; padding: 0;
transition: opacity .5s; transition: opacity .5s;
color: #FFF; color: $color-light;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px rgba(0,0,0,0.7); text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
backdrop-filter: none; backdrop-filter: none;
@ -401,11 +402,11 @@ a.list-group-item:hover {
text-align:center; text-align:center;
display:block; display:block;
font-size:2em; 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 { .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); text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
} }

33
scss/_palette.scss
View file

@ -1,16 +1,23 @@
$color-blue: #4e63c9; $color-blue: #268bd2;
$color-violet: #ce4dcd; $color-violet: #d33682;
$color-purple: #7951c0; $color-purple: #6c71c4;
$color-red: #e33d22; $color-red: #dc322f;
$color-orange: #eb790a; $color-orange: #cb4b16;
$color-green: #75b82d; $color-green: #859900;
$color-skyblue: #42a0f3; $color-skyblue: #2aa198;
$color-dark: #2D2D2D; $color-dark: #002b36;
$color-light: #eeeeec; $color-light: #fdf6e3;
$color-turquoise: #46bd9e; $color-turquoise: #2aa198;
$color-yellow: #f6d32d; $color-yellow: #b58900;
$color-brown: #986a44; $color-brown: #b58900;
$color-grey: #77767b; $color-grey: #586e75;
$color-dark2: #073642;
$color-light2: #eee8d5;
$color-gray2: #657b83;
$color-gray3: #839496;
$color-gray4: #93a1a1;
$color-warning: $color-orange; $color-warning: $color-orange;
$color-danger: $color-red; $color-danger: $color-red;

6
scss/style.scss
View file

@ -25,8 +25,12 @@ $color-mark: $color-yellow;
border-radius: $border-radius $border-radius $border-radius $border-radius; border-radius: $border-radius $border-radius $border-radius $border-radius;
} }
body {
background-color: $color-light;
}
#wrapper { #wrapper {
background: #64b5f6 url('../img/background.png') center bottom repeat-x; background: $color-turquoise url('../img/background.png') center bottom repeat-x;
} }
@import 'commons'; @import 'commons';