Enhance 404 page

src/components/Logo.vue

@@ -15,6 +15,13 @@
             d="M59.531 11.628s-21.361 8.34-39.768 15.458a70.304 70.304 0 0 0-3.352 7.515l38.018-14.847-.362 51.47h4.415l1.05-59.596h-.001zM36.015 86.763l-15.014 7.61a70.304 70.304 0 0 0 2.272 3.817 5427.49 5427.49 0 0 1 12.742-6.554v-4.873zm7.242 11.105l-2.097 1.22-17.373-.803-.474-.038a70.304 70.304 0 0 0 4.666 6.256l13.22.33 4.592-3.074c-.767-1.047-1.884-2.668-2.534-3.891zm10.842 5.699l-5.59 4.073-18.033-.295a70.304 70.304 0 0 0 2.445 2.508l15.79.066 8.435-6.172-3.047-.18zm10.833 1.703l-12.87 7.69H36.256a70.304 70.304 0 0 0 3.316 2.603l12.49.103 16.58-9.402-3.708-.994z" />
       <path class="logo_monkey"
             d="M121.164 13.974c-2.186-.006-4.526.207-7.04.656-12.421 2.217-17.629 14.907-17.472 17.64-3.15 2.374-2.372 5.745-.996 6.434 1.347 6.671 2.39 9.085 3.353 10.405.058.08.42-1.085 2.45-3.15-1.305 1.802-2.182 3.495-2.135 3.55-.405 3.76-4.503 5.033-1.102 11.36-.033.234-.234 2.076.408 3.015.403.588 7.293-.512 7.372-.627.09.257-6.825 1.612-7.163 1.18-.206-.262-.417.69-.216 1.108.496 1.034 1.68 1.776 2.808 1.989 1.653.312 10.579-4.09 10.579-4.09-3.196 1.705-6.337 3.542-9.787 4.655.835 1.57 2.82 2.79 6.155 2.79 0 0 1.26-.015 1.75.32 1.654 1.135-1.551 6.59-1.383 9.537-17.521-3.186-48.506-5.505-52.218-7.05l-6.848 2.907c-2.098.89-.625 3.752 2.405 2.673 0 0 .486-.559 1.452-.992 1.045.11 2.46-.23 3.46-.98.908.67 1.992.95 3.608 1.003-1.898 1.303-3.464 3.103-6.364 2.904l-.685 2.107c-2.593-1.462-5.13-3.51-8.253-2.673-1.446.388-2.422 1.163-2.114 2.532.712-.437 6.616 1.426 6.24 1.648-.048-.254-6.414-2-7.249-1.242-.43.392-1.458.877-1.63 1.608-.206.87.503 2.451 1.043 2.74.36.19 7.81 2.443 7.72 2.67.036-.123-7.21-2.137-7.757-1.93-.152.056-2.205 1.674-2.266 2.665-.114 1.85 3.004 4.427 3.82 4.756 1.513.61 1.508.404 1.811.18.73-.545 1.222-.87-.878-2.332 1 .183 6.472 3.544 6.472 3.544-2.321-.786-4.874-3.25-6.548.668 0 0 1.76 3.17 3.279 4.432.77.64 1.58 1.27 2.43 1.888 1.006.735 2.382.051 3.164-1.063.422-.6-4.537-1.707-4.434-1.798.193-.17 5.492 1.08 5.84 1.303.114.073.514.037.807.061 20.406 1.69 37.239 13.584 52.412 22.192a70.304 70.304 0 0 0 42.901-49.384l-.75-20.15 1.63 1.465.316 12.279a70.304 70.304 0 0 0 .764-9.746 70.304 70.304 0 0 0-7.09-30.64c-5.83-9.284-12.97-14.983-24.07-15.017h-.001zm10.804 6.282c1.587.014 3.215.472 4.601 1.17 1.717.865 3.297 3.917 3.564 4.26.286.368-2.043-2.314-3.132-2.702-1.19-.425-5.427-.578-6.668.26-1.99 1.34-2.857 4.311-2.96 4.385 0 0-1.912-2.369-1.607-3.669.406-1.732 2.383-2.932 4.092-3.428a7.344 7.344 0 0 1 2.11-.276zm1.7 3.483h.001c1.445-.026 3.015.305 3.914 1.071 3.462 2.948 3.566 9.133 1.172 12.998-1.425 2.3-4.296 3.827-6.747 2.877-.64-.248-1.3-.614-.874-1.866.9-2.652 5.17-2.084 4.18-5.457 0 0-4.98-.438-4.77-2.174.195-1.606 3.526-1.293 4.77-.897 1.399.444 3.623 3.737-1.227 7.984 3.854-.681 4.44-4.14 4.04-8.693-.386-4.401-5.051-1.799-7.237-3.256-.78-.52-.665-1.07-.393-1.516.403-.663 1.725-1.046 3.171-1.071zm-23.403 12.19c.796-.014 1.44.168 1.848.894.29.518.556 1.269.107 1.76-.448.493-1.68 1.193-2.23.072-.267-.547.338-1.614 1.294-1.24-.928-1.333-2.063-.412-3.207.6-.357.636.174 2.72 2.558 3.624-1.417-.03-2.032.145-4.128-2.52.287-1.003 1.944-3.066 3.408-3.174.12-.01.236-.015.35-.017zm-9.848 1.186l-.001.001c.24 0 .448.038.596.115 1.69.879 1.792 2.738.85 3.525l-.817.684c.366-.628.838-1.24.65-1.954-.55.565-1.227 1.116-1.937.267-.376-.45-.056-.985.802-1.336-1.29-.756-2.113.42-3.123.818.263-1.402 1.937-2.12 2.98-2.12zM133.5 47.771c-11.19 16.85-11.575 35.86-14.365 54.39.14.282-4.477-.141-6.783-1.428 2.835-.745 3.86-.585 4.582-1.313 5.25-14.763 3.267-33.855 16.566-51.65zm-28.329 5.812c-.576 1.236-1.333 2.056-1.323 4.63.005 1.191-2.258.104-1.607-1.795.645-1.332 1.76-2.116 2.93-2.835zm-30.818 35.55a19.052 19.052 0 0 1 .071 0c3.765.023 7.278 1.1 10.773 2.258 4.716 2.534 7.71 1.942 15.722 5.145-12.476-4.275-22.397-2.944-23.545-3.061-1.403-.145-6.807-3.977-6.807-3.977a19.052 19.052 0 0 1 3.786-.365z" />
+      <text class="logo_interrogation"
+            x="16.08"
+            y="79.93"
+            font-size="30"
+            transform="rotate(-25.375)">
+        <tspan x="8" y="79.93">?</tspan>
+      </text>
     </g>
   </svg>
 </template>
@@ -35,10 +42,15 @@ export default {
     }
 
     &_computer,
-    &_monkey {
+    &_monkey,
+    &_interrogation{
       fill: whitesmoke;
     }
 
+    &_interrogation {
+      display: none;
+    }
+
     &--navbar {
       vertical-align: middle;
       height: $logo-size-navbar;
@@ -51,5 +63,14 @@ export default {
         fill: #333;
       }
     }
+
+    &--404 {
+      .logo_interrogation {
+        display: block;
+      }
+      .logo_computer {
+        display: none;
+      }
+    }
   }
 </style>

src/views/404.vue

 <template>
-  <div>
+  <i-container>
     <h1>{{ $t('404.title') }}</h1>
-  </div>
+    <i-container class="_text-center">
+      <logo variant="404" />
+    </i-container>
+  </i-container>
 </template>
+<script>
+import Logo from '../components/Logo'
+
+export default {
+  components: { Logo },
+}
+</script>