Improve color palette

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-06-24 10:05:22 +02:00
parent 148183ca48
commit 703de9c638
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
7 changed files with 80 additions and 37 deletions

View File

@ -1,6 +1,6 @@
a {
text-decoration: underline;
text-decoration-color: #fea72b;
text-decoration-color: #ED8D07;
text-decoration-thickness: 2px;
&.navbar-item,

View File

@ -42,9 +42,11 @@ export default class DateCalendarIcon extends Vue {
</script>
<style lang="scss" scoped>
@import "../../variables.scss";
time.datetime-container {
background: #f6f7f8;
border: 1px solid rgba(46, 62, 72, 0.12);
background: $backgrounds;
border: 1px solid $borders;
border-radius: 8px;
display: flex;
flex-direction: column;
@ -59,7 +61,7 @@ time.datetime-container {
font-weight: 600;
&.month {
color: #fa3e3e;
color: $danger;
padding: 2px 0;
font-size: 12px;
line-height: 12px;
@ -67,6 +69,7 @@ time.datetime-container {
}
&.day {
color: $violet-3;
font-size: 20px;
line-height: 20px;
}

View File

@ -20,6 +20,8 @@ export default class EventMetadataBlock extends Vue {
}
</script>
<style lang="scss" scoped>
@import "../../variables.scss";
h2 {
font-size: 1.8rem;
font-weight: 500;

View File

@ -13,9 +13,11 @@ export default class Tag extends Vue {}
</script>
<style lang="scss" scoped>
@import "../variables.scss";
span.tag {
background: #ecebf7;
color: #8e8bae;
background: $purple-3;
color: $violet-2;
text-transform: uppercase;
&::before {
content: "#";

View File

@ -4,52 +4,79 @@ $bleuvert: #1e7d97;
$jaune: #ffd599;
$violet: #424056;
/**
* Text body, paragraphs
*/
$violet-1: #3A384C;
$violet-2: #474467;
/**
* Titles, dark borders, buttons
*/
$violet-3: #3C376E;
/**
* Borders
*/
$borders: #D7D6DE;
$backgrounds: #ECEBF2;
/**
* Text
*/
$purple-1: #757199;
/**
* Background
*/
$purple-2: #CDCAEA;
$purple-3: #E6E4F4;
$orange-2: #ED8D07;
$orange-3: #D35204;
$yellow-1: #FFD599;
$yellow-2: #FFF1DE;
$yellow-3: #FBD5CB;
$yellow-4: #f7ba30;
$primary: $bleuvert;
$primary-invert: findColorInvert($primary);
//$secondary: #ffcc85;
$secondary: $jaune;
$secondary-invert: findColorInvert($secondary);
$background-color: $violet;
$background-color: $violet-2;
$success: #0eccaf;
$success: #0D8758;
$success-invert: findColorInvert($success);
$info: #36bcd4;
$info-invert: findColorInvert($info);
$danger: #ff7061;
$danger: #FF2E54;
$danger-invert: findColorInvert($danger);
$link: $primary;
$link-invert: $primary-invert;
$text: $violet-1;
$colors: map-merge(
$colors,
(
"primary": (
$primary,
$colors: map-merge($colors,
("primary": ($primary,
$primary-invert,
),
"secondary": (
$secondary,
"secondary": ($secondary,
$secondary-invert,
),
"success": (
$success,
"success": ($success,
$success-invert,
),
"info": (
$info,
"info": ($info,
$info-invert,
),
"danger": (
$danger,
"danger": ($danger,
$danger-invert,
),
"link": (
$link,
"link": ($link,
$link-invert,
),
)
);
));
// Navbar
$navbar-background-color: $secondary;
@ -69,7 +96,11 @@ main > .container {
}
$title-color: #3c376e;
$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
$title-family: "Liberation Sans",
"Helvetica Neue",
Roboto,
Helvetica,
Arial,
serif;
$title-weight: 700;
$title-size: 40px;
@ -77,12 +108,17 @@ $title-sub-size: 45px;
$title-sup-size: 30px;
$subtitle-color: #3a384c;
$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
$subtitle-family: "Liberation Sans",
"Helvetica Neue",
Roboto,
Helvetica,
Arial,
serif;
$subtitle-weight: 400;
$subtitle-size: 32px;
$subtitle-sub-size: 30px;
$subtitle-sup-size: 15px;
.title {
margin: 30px auto 45px;
}
@ -97,3 +133,4 @@ $subtitle-sup-size: 15px;
$input-border-color: #dbdbdb;
$breadcrumb-item-color: $primary;
$checkbox-background-color: #fff;
$title-color: $violet-3;

View File

@ -134,7 +134,10 @@ export default class About extends Vue {
}
.hero.register {
background: lighten($background-color, 20%);
.title {
color: $violet-1;
}
background: $purple-2;
}
aside.menu {

View File

@ -184,10 +184,6 @@ export default class AboutMobilizon extends Vue {}
}
}
.hero.register {
background: lighten($background-color, 20%);
}
section {
padding: 3rem 0;