Use SVG logo instead of raw title

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
master
Thomas Citharel 4 years ago
parent bed9843539
commit aaa1111cab
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
  1. 1
      js/src/assets/mobilizon_logo.svg
  2. 20
      js/src/components/Logo.vue
  3. 4
      js/src/components/NavBar.vue

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78"><title>Fichier 1</title><g id="e11b986d-bcba-4466-9834-a5e44ebfe12a" data-name="Calque 2"><g id="ab18705c-9f78-4d57-8f04-bd2f1ccdd04c" data-name="header"><path d="M0,46.07,3.18,5.27a29.88,29.88,0,0,1,5.07-.36,27.74,27.74,0,0,1,4.95.36l4.86,17.16A92.19,92.19,0,0,1,20.4,32.51h.36A92.19,92.19,0,0,1,23.1,22.43L28,5.27a29.23,29.23,0,0,1,5-.36,29.23,29.23,0,0,1,5,.36l3.18,40.8a13.61,13.61,0,0,1-3.63.42,23.41,23.41,0,0,1-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84H31.8L24.48,40a25.62,25.62,0,0,1-4,.3,23.36,23.36,0,0,1-3.84-.3L9.36,13.49H9q-.3,8.94-.48,12.84L7.26,46.25a22.47,22.47,0,0,1-3.6.24A13.75,13.75,0,0,1,0,46.07Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M74,31.31q0,8-4.26,12.3a12.21,12.21,0,0,1-9,3.42,12.21,12.21,0,0,1-9-3.42q-4.26-4.26-4.26-12.3T51.72,19a12.21,12.21,0,0,1,9-3.42,12.21,12.21,0,0,1,9,3.42Q74,23.27,74,31.31ZM60.75,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T60.75,21.23Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M103.2,20q2.7,4.11,2.7,11.28T102,42.56a13.18,13.18,0,0,1-10,4.11,31.41,31.41,0,0,1-11.34-2V2.45L81.06,2h2.76A4,4,0,0,1,87,3.08a5.38,5.38,0,0,1,.93,3.57V18.59a12.08,12.08,0,0,1,7.56-2.7A8.71,8.71,0,0,1,103.2,20ZM93.48,22a7.28,7.28,0,0,0-5.58,2.82v16a15,15,0,0,0,4.08.54,5.25,5.25,0,0,0,4.68-2.67q1.68-2.67,1.68-7.59Q98.34,22.07,93.48,22Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M121,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4,1.62A6.27,6.27,0,0,1,121,22.25Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M119.82,1.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,112.26,7a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,119.82,1.09Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M139.08,40.67h2a10.23,10.23,0,0,1,.6,3.18,9.24,9.24,0,0,1-.18,2.1,38.47,38.47,0,0,1-5.64.54q-6.48,0-6.48-7v-37l.36-.42h2.88a3.94,3.94,0,0,1,3.12,1.05,5.52,5.52,0,0,1,.9,3.57V38Q136.62,40.67,139.08,40.67Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M155.94,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4.05,1.62A6.27,6.27,0,0,1,155.94,22.25Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M154.8,3.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,147.24,9a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,154.8,3.09Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M163.08,39.47l8.76-11.82q1.32-1.8,4.8-5.7l-.18-.3a63.09,63.09,0,0,1-7.74.42H163a9.79,9.79,0,0,1-.24-2.34,15.8,15.8,0,0,1,.42-3.3h20.4a16.31,16.31,0,0,1,1,4.26,4.1,4.1,0,0,1-.78,2.34L175,34.91a64.65,64.65,0,0,1-4.56,5.7l.18.24q3.12-.3,5.22-.3h2.58a15.35,15.35,0,0,0,6.12-.9,9.4,9.4,0,0,1,.72,3.12q0,3.42-4.32,3.42h-18a14.27,14.27,0,0,1-.9-3.93A5.08,5.08,0,0,1,163.08,39.47Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M215.88,31.31q0,8-4.26,12.3a13.63,13.63,0,0,1-18.06,0q-4.26-4.26-4.26-12.3T193.56,19a13.63,13.63,0,0,1,18.06,0Q215.88,23.27,215.88,31.31ZM202.59,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T202.59,21.23Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M247,26.09V39.41a11,11,0,0,0,1.2,5.64,7,7,0,0,1-4.41,1.56q-2.43,0-3.33-1.14a5.69,5.69,0,0,1-.9-3.54V27.65a7.74,7.74,0,0,0-.72-3.87,2.78,2.78,0,0,0-2.58-1.17,8.62,8.62,0,0,0-6.3,3V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V16.49l.42-.36h2.76q3.42,0,4.08,3.6,4.38-3.84,8.73-3.84t6.42,2.82A12.17,12.17,0,0,1,247,26.09Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M57.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,57.26,11Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M198.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,198.26,11Z" transform="translate(0 -0.25)" style="fill:#fff"/></g></g></svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

@ -1,5 +1,5 @@
<template>
<span class="logo" v-bind:class="{ invert }">M<span class="accent">o</span>b<span class="accent">ı</span>l<span class="accent">ı</span>z<span class="accent">o</span>n</span>
<img src="../assets/mobilizon_logo.svg" alt="Mobilizon">
</template>
<script lang="ts">
@ -12,21 +12,9 @@ export default class Logo extends Vue {
</script>
<style lang="scss" scoped>
@import "../variables.scss";
@import "~typeface-signika/index.css";
.logo {
font-size: 3.5em;
color: $primary;
font-weight: 400;
font-family: Signika,serif;
&.invert {
color: $secondary;
}
span.accent::after {
content: "̇"; // U+0307
color: #fff;
}
img {
color: #403e56;
height: 80px;
}
</style>

@ -131,5 +131,9 @@ export default class NavBar extends Vue {
nav {
border-bottom: solid 1px #0a0a0a;
.navbar-item img {
max-height: 2.5em;
}
}
</style>

Loading…
Cancel
Save