add toucan!

src/components/app-header.vue

@@ -4,7 +4,7 @@
   <header class="app-header">
     <div class="wrapper">
       <router-link to="/" class="logo">
-        <julien-calixte size="big" />
+        <toucan-icon />
       </router-link>
     </div>
   </header>
@@ -16,7 +16,7 @@
 } */
 
 .app-header {
-  padding: 0 1rem;
+  padding: 0.2rem;
 
   .wrapper {
     display: flex;

src/components/core/julien-calixte.vue

@@ -19,9 +19,7 @@ const style = `font-size: ${fontSize[props.size]}`
 </script>
 
 <template>
-  <span class="julien-calixte" :style="style"
-    >Julien<template v-if="version === 'full'"> Calixte</template></span
-  >
+  <span class="julien-calixte" :style="style">Julien<template v-if="version === 'full'"> Calixte</template></span>
 </template>
 
 <style scoped lang="scss">

src/components/core/toucan-icon.vue

@@ -0,0 +1,11 @@
+<template>
+  <img src="@/assets/icons/safari-pinned-tab.svg" alt="Toucan icon">
+</template>
+
+<style scoped>
+img {
+  --toucan-size: 80px;
+  width: var(--toucan-size);
+  height: var(--toucan-size);
+}
+</style>