colors for main content

This commit is contained in:
Tykayn 2020-12-18 14:54:10 +01:00 committed by tykayn
parent 70f0acca04
commit 8014836878
6 changed files with 43 additions and 32 deletions

View File

@ -12,13 +12,10 @@ a.out,
.content a, .content a,
.ProseMirror a { .ProseMirror a {
text-decoration: underline; text-decoration: underline;
text-decoration-color: #ed8d07; text-decoration-color: $primary-dark;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
} }
// input.input {
// border-color: $input-border-color !important;
// }
.section { .section {
padding: 1rem 1% 4rem; padding: 1rem 1% 4rem;

View File

@ -1,6 +1,10 @@
<template> <template>
<footer class="footer" ref="footer"> <footer class="footer" ref="footer">
<img :src="`/img/pics/footer_${random}.jpg`" alt="" /> <!-- <img :src="`/img/pics/footer_${random}.jpg`" alt="" />-->
<a href="https://openstreetmap.fr">
OpenStreetMap.fr
</a>
<ul> <ul>
<li> <li>
<router-link :to="{ name: RouteName.ABOUT }">{{ $t("About") }}</router-link> <router-link :to="{ name: RouteName.ABOUT }">{{ $t("About") }}</router-link>
@ -44,8 +48,12 @@ export default class Footer extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
footer.footer { footer.footer {
color: $secondary; color: white;
background: $primary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

View File

@ -20,7 +20,7 @@ export default class Logo extends Vue {
<style lang="scss" scoped> <style lang="scss" scoped>
svg { svg {
fill: $background-color; fill: $background-color;
width: 5em;
&.invert { &.invert {
fill: $secondary; fill: $secondary;
} }

View File

@ -6,22 +6,22 @@
</b-navbar-item> </b-navbar-item>
</template> </template>
<template slot="start"> <template slot="start">
<b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{ <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }"
$t("Explore") >{{ $t("Explore") }}
}}</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{ <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }"
$t("My events") >{{ $t("My events") }}
}}</b-navbar-item> </b-navbar-item>
<b-navbar-item <b-navbar-item
tag="router-link" tag="router-link"
:to="{ name: RouteName.MY_GROUPS }" :to="{ name: RouteName.MY_GROUPS }"
v-if="config && config.features.groups" v-if="config && config.features.groups"
>{{ $t("My groups") }}</b-navbar-item >{{ $t("My groups") }}
> </b-navbar-item>
<b-navbar-item tag="span" v-if="config && config.features.eventCreation"> <b-navbar-item tag="span" v-if="config && config.features.eventCreation">
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{ <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary"
$t("Create") >{{ $t("Create") }}
}}</b-button> </b-button>
</b-navbar-item> </b-navbar-item>
</template> </template>
<template slot="end"> <template slot="end">
@ -65,9 +65,9 @@
<hr class="navbar-divider" /> <hr class="navbar-divider" />
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{ <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }"
$t("My account") >{{ $t("My account") }}
}}</b-navbar-item> </b-navbar-item>
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">--> <!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
<!-- {{ $t('Create group') }}--> <!-- {{ $t('Create group') }}-->
@ -77,8 +77,8 @@
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
tag="router-link" tag="router-link"
:to="{ name: RouteName.ADMIN_DASHBOARD }" :to="{ name: RouteName.ADMIN_DASHBOARD }"
>{{ $t("Administration") }}</b-navbar-item >{{ $t("Administration") }}
> </b-navbar-item>
<b-navbar-item tag="span"> <b-navbar-item tag="span">
<span @click="logout">{{ $t("Log out") }}</span> <span @click="logout">{{ $t("Log out") }}</span>
@ -95,9 +95,9 @@
<strong>{{ $t("Sign up") }}</strong> <strong>{{ $t("Sign up") }}</strong>
</router-link> </router-link>
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ <router-link class="button is-light" :to="{ name: RouteName.LOGIN }"
$t("Log in") >{{ $t("Log in") }}
}}</router-link> </router-link>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -232,7 +232,11 @@ export default class NavBar extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
nav { @import "../variables.scss";
.nav {
background: $primary !important;
.navbar-item { .navbar-item {
a.button { a.button {
font-weight: bold; font-weight: bold;

View File

@ -6,6 +6,7 @@ $bleuvert: #1e7d97;
$jaune: #ffd599; $jaune: #ffd599;
$violet: #424056; $violet: #424056;
$green_osm: #77cc6d; $green_osm: #77cc6d;
$light_green_osm: lighten(#77cc6d,30%);
$text_osm: #444; $text_osm: #444;
/** /**
@ -38,15 +39,16 @@ $purple-3: #e6e4f4;
$orange-2: #ed8d07; $orange-2: #ed8d07;
$orange-3: #d35204; $orange-3: #d35204;
$red: #ff2e54;
$yellow-1: #ffd599; $yellow-1: #ffd599;
$yellow-2: #fff1de; $yellow-2: #fff1de;
$yellow-3: #fbd5cb; $yellow-3: #fbd5cb;
$yellow-4: #f7ba30; $yellow-4: #f7ba30;
$primary: $bleuvert; $primary: $green_osm;
$primary-invert: findColorInvert($primary); $primary-invert: findColorInvert($primary);
$secondary: $jaune; $secondary: $light_green_osm;
$secondary-invert: findColorInvert($secondary); $secondary-invert: findColorInvert($secondary);
$background-color: $violet-2; $background-color: $violet-2;
@ -55,11 +57,11 @@ $success: #0d8758;
$success-invert: findColorInvert($success); $success-invert: findColorInvert($success);
$info: mix($green_osm , #36bcd4); $info: mix($green_osm , #36bcd4);
$info-invert: findColorInvert( mix($green_osm , $info)); $info-invert: findColorInvert( mix($green_osm , $info));
$danger: #ff2e54; $danger: $orange-2;
$danger-invert: findColorInvert($danger); $danger-invert: findColorInvert($danger);
$link: $primary; $link: $primary;
$link-invert: $primary-invert; $link-invert: $primary-invert;
$text: $violet-1; $text: $text_osm;
$colors: map-merge( $colors: map-merge(
$colors, $colors,

View File

@ -1,7 +1,7 @@
<template> <template>
<div id="homepage"> <div id="homepage">
<section class="hero" v-if="config && (!currentUser.id || !currentActor.id)"> <section class="hero" v-if="config && (!currentUser.id || !currentActor.id)">
<div class="hero-body"> <div class="hero-body has-background-primary">
<div class="container"> <div class="container">
<h1 class="title">{{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1> <h1 class="title">{{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
<p <p