107 lines
13 KiB
Vue
107 lines
13 KiB
Vue
<template>
|
|
|
|
<footer>
|
|
<div class="footer-bar">
|
|
<svg aria-hidden="true" class="footer-bar__logo" viewBox="0 0 500 190.4" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="footer-bar__logo-gradient-1" gradientUnits="userSpaceOnUse" x1="79.525" y1="191.722" x2="79.525" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
|
|
<stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
|
|
<stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
|
|
</linearGradient>
|
|
<linearGradient id="footer-bar__logo-gradient-2" gradientUnits="userSpaceOnUse" x1="129.473" y1="191.722" x2="129.473" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
|
|
<stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
|
|
<stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
|
|
</linearGradient>
|
|
<linearGradient id="footer-bar__logo-gradient-3" gradientUnits="userSpaceOnUse" x1="370.521" y1="191.722" x2="370.521" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
|
|
<stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
|
|
<stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
|
|
</linearGradient>
|
|
<linearGradient id="footer-bar__logo-gradient-4" gradientUnits="userSpaceOnUse" x1="420.47" y1="191.722" x2="420.47" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
|
|
<stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
|
|
<stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path class="footer-bar__logo-bracket-1" d="M 56.184 172.259 C 49.551 171.999 43.894 171.154 39.213 169.724 C 34.53 168.292 30.759 166.212 27.897 163.481 C 25.036 160.749 22.956 157.302 21.654 153.141 C 20.354 148.979 19.704 143.972 19.704 138.119 C 19.704 135.908 19.802 133.566 19.996 131.096 C 20.192 128.625 20.354 126.219 20.484 123.878 C 20.744 121.926 20.907 120.106 20.972 118.415 C 21.037 116.725 21.07 115.359 21.07 114.318 C 21.07 108.856 19.412 104.402 16.094 100.955 C 12.779 97.508 7.413 94.745 0 92.664 L 0 80.374 C 7.543 78.552 12.942 75.952 16.193 72.569 C 19.444 69.188 21.07 64.702 21.07 59.109 C 21.07 57.808 21.004 56.215 20.874 54.329 C 20.744 52.444 20.614 50.461 20.484 48.379 C 20.354 45.908 20.192 43.436 19.996 40.966 C 19.802 38.495 19.704 36.284 19.704 34.334 C 19.704 28.351 20.354 23.245 21.654 19.019 C 22.956 14.792 25.069 11.314 27.994 8.582 C 30.921 5.851 34.726 3.802 39.407 2.436 C 44.09 1.071 49.747 0.258 56.38 -0.002 L 56.576 13.069 C 50.723 13.329 46.203 14.369 43.017 16.191 C 39.83 18.011 37.619 20.515 36.384 23.701 C 35.149 26.888 34.53 30.692 34.53 35.114 C 34.53 36.804 34.629 38.755 34.823 40.966 C 35.019 43.176 35.18 45.454 35.31 47.794 C 35.441 49.875 35.571 51.924 35.701 53.939 C 35.831 55.955 35.896 57.678 35.896 59.109 C 35.896 64.572 35.31 69.026 34.14 72.472 C 32.97 75.919 30.921 78.715 27.994 80.861 C 25.069 83.006 20.874 84.861 15.412 86.421 C 23.476 88.762 28.906 91.948 31.701 95.981 C 34.497 100.012 35.896 106.059 35.896 114.124 C 35.896 115.424 35.831 116.886 35.701 118.512 C 35.571 120.138 35.441 121.796 35.31 123.488 C 35.18 125.828 35.019 128.105 34.823 130.315 C 34.629 132.526 34.53 134.672 34.53 136.754 C 34.53 141.045 35.116 144.816 36.286 148.068 C 37.457 151.319 39.636 153.888 42.821 155.775 C 46.009 157.661 50.527 158.798 56.38 159.188 L 56.184 172.259 Z"/>
|
|
<path class="footer-bar__logo-bracket-2" d="M 121.146 172.259 C 114.513 171.999 108.856 171.154 104.174 169.724 C 99.491 168.292 95.72 166.212 92.859 163.481 C 89.997 160.749 87.916 157.302 86.616 153.141 C 85.316 148.979 84.664 143.972 84.664 138.119 C 84.664 135.908 84.763 133.566 84.957 131.096 C 85.153 128.625 85.316 126.219 85.446 123.878 C 85.706 121.926 85.869 120.106 85.933 118.415 C 85.999 116.725 86.03 115.359 86.03 114.318 C 86.03 108.856 84.373 104.402 81.056 100.955 C 77.74 97.508 72.374 94.745 64.961 92.664 L 64.961 80.374 C 72.504 78.552 77.901 75.952 81.153 72.569 C 84.404 69.188 86.03 64.702 86.03 59.109 C 86.03 57.808 85.966 56.215 85.836 54.329 C 85.706 52.444 85.576 50.461 85.446 48.379 C 85.316 45.908 85.153 43.436 84.957 40.966 C 84.763 38.495 84.664 36.284 84.664 34.334 C 84.664 28.351 85.316 23.245 86.616 19.019 C 87.916 14.792 90.03 11.314 92.956 8.582 C 95.883 5.851 99.687 3.802 104.369 2.436 C 109.051 1.071 114.709 0.258 121.341 -0.002 L 121.536 13.069 C 115.684 13.329 111.164 14.369 107.977 16.191 C 104.791 18.011 102.58 20.515 101.344 23.701 C 100.11 26.888 99.491 30.692 99.491 35.114 C 99.491 36.804 99.589 38.755 99.784 40.966 C 99.979 43.176 100.141 45.454 100.271 47.794 C 100.401 49.875 100.531 51.924 100.661 53.939 C 100.791 55.955 100.857 57.678 100.857 59.109 C 100.857 64.572 100.271 69.026 99.101 72.472 C 97.931 75.919 95.883 78.715 92.956 80.861 C 90.03 83.006 85.836 84.861 80.373 86.421 C 88.437 88.762 93.867 91.948 96.663 95.981 C 99.459 100.012 100.857 106.059 100.857 114.124 C 100.857 115.424 100.791 116.886 100.661 118.512 C 100.531 120.138 100.401 121.796 100.271 123.488 C 100.141 125.828 99.979 128.105 99.784 130.315 C 99.589 132.526 99.491 134.672 99.491 136.754 C 99.491 141.045 100.077 144.816 101.247 148.068 C 102.417 151.319 104.596 153.888 107.783 155.775 C 110.969 157.661 115.489 158.798 121.341 159.188 L 121.146 172.259 Z"/>
|
|
<path class="footer-bar__logo-bracket-3" d="M 378.853 172.259 L 378.657 159.188 C 384.64 158.798 389.193 157.661 392.313 155.775 C 395.434 153.888 397.581 151.319 398.751 148.068 C 399.921 144.816 400.507 141.045 400.507 136.754 C 400.507 134.672 400.441 132.526 400.311 130.315 C 400.181 128.105 399.987 125.828 399.727 123.488 C 399.597 121.796 399.467 120.138 399.337 118.512 C 399.207 116.886 399.141 115.424 399.141 114.124 C 399.141 106.059 400.54 100.012 403.336 95.981 C 406.133 91.948 411.561 88.762 419.626 86.421 C 414.293 84.861 410.131 83.006 407.14 80.861 C 404.149 78.715 402.069 75.919 400.897 72.472 C 399.727 69.026 399.141 64.572 399.141 59.109 C 399.141 57.678 399.207 55.955 399.337 53.939 C 399.467 51.924 399.597 49.875 399.727 47.794 C 399.987 45.454 400.181 43.176 400.311 40.966 C 400.441 38.755 400.507 36.804 400.507 35.114 C 400.507 30.692 399.89 26.888 398.654 23.701 C 397.419 20.515 395.24 18.011 392.119 16.191 C 388.997 14.369 384.446 13.329 378.463 13.069 L 378.657 -0.002 C 385.29 0.258 390.949 1.071 395.63 2.436 C 400.311 3.802 404.116 5.851 407.043 8.582 C 409.969 11.314 412.083 14.792 413.383 19.019 C 414.683 23.245 415.334 28.351 415.334 34.334 C 415.334 36.284 415.269 38.495 415.139 40.966 C 415.009 43.436 414.813 45.908 414.553 48.379 C 414.423 50.461 414.293 52.444 414.163 54.329 C 414.033 56.215 413.969 57.808 413.969 59.109 C 413.969 64.702 415.594 69.188 418.846 72.569 C 422.097 75.952 427.494 78.552 435.037 80.374 L 435.037 92.664 C 427.624 94.745 422.26 97.508 418.943 100.955 C 415.626 104.402 413.969 108.856 413.969 114.318 C 413.969 115.359 414.033 116.725 414.163 118.415 C 414.293 120.106 414.423 121.926 414.553 123.878 C 414.813 126.219 415.009 128.625 415.139 131.096 C 415.269 133.566 415.334 135.908 415.334 138.119 C 415.334 143.972 414.683 148.979 413.383 153.141 C 412.083 157.302 410.001 160.749 407.14 163.481 C 404.279 166.212 400.507 168.292 395.826 169.724 C 391.143 171.154 385.486 171.999 378.853 172.259 Z"/>
|
|
<path class="footer-bar__logo-bracket-4" d="M 443.816 172.259 L 443.62 159.188 C 449.603 158.798 454.154 157.661 457.276 155.775 C 460.397 153.888 462.543 151.319 463.714 148.068 C 464.884 144.816 465.47 141.045 465.47 136.754 C 465.47 134.672 465.404 132.526 465.274 130.315 C 465.144 128.105 464.95 125.828 464.689 123.488 C 464.559 121.796 464.429 120.138 464.299 118.512 C 464.169 116.886 464.104 115.424 464.104 114.124 C 464.104 106.059 465.501 100.012 468.299 95.981 C 471.094 91.948 476.524 88.762 484.588 86.421 C 479.256 84.861 475.094 83.006 472.103 80.861 C 469.111 78.715 467.03 75.919 465.86 72.472 C 464.689 69.026 464.104 64.572 464.104 59.109 C 464.104 57.678 464.169 55.955 464.299 53.939 C 464.429 51.924 464.559 49.875 464.689 47.794 C 464.95 45.454 465.144 43.176 465.274 40.966 C 465.404 38.755 465.47 36.804 465.47 35.114 C 465.47 30.692 464.851 26.888 463.616 23.701 C 462.381 20.515 460.203 18.011 457.081 16.191 C 453.96 14.369 449.407 13.329 443.424 13.069 L 443.62 -0.002 C 450.253 0.258 455.91 1.071 460.593 2.436 C 465.274 3.802 469.079 5.851 472.006 8.582 C 474.931 11.314 477.044 14.792 478.346 19.019 C 479.646 23.245 480.296 28.351 480.296 34.334 C 480.296 36.284 480.231 38.495 480.101 40.966 C 479.971 43.436 479.776 45.908 479.516 48.379 C 479.386 50.461 479.256 52.444 479.126 54.329 C 478.996 56.215 478.93 57.808 478.93 59.109 C 478.93 64.702 480.556 69.188 483.807 72.569 C 487.058 75.952 492.457 78.552 500 80.374 L 500 92.664 C 492.587 94.745 487.221 97.508 483.906 100.955 C 480.589 104.402 478.93 108.856 478.93 114.318 C 478.93 115.359 478.996 116.725 479.126 118.415 C 479.256 120.106 479.386 121.926 479.516 123.878 C 479.776 126.219 479.971 128.625 480.101 131.096 C 480.231 133.566 480.296 135.908 480.296 138.119 C 480.296 143.972 479.646 148.979 478.346 153.141 C 477.044 157.302 474.964 160.749 472.103 163.481 C 469.241 166.212 465.47 168.292 460.787 169.724 C 456.106 171.154 450.449 171.999 443.816 172.259 Z"/>
|
|
<g class="footer-bar__logo-letters" style="" transform="matrix(1.428571, 0, 0, 1.428571, -107.142746, -271.430603)">
|
|
<path d="M 172.229 323.283 L 172.229 224.823 L 182.744 224.823 L 182.744 229.739 C 184.201 228.829 186.045 227.896 188.275 226.94 C 190.506 225.984 192.895 225.164 195.445 224.482 C 197.994 223.799 200.452 223.457 202.819 223.457 C 211.468 223.457 217.795 226.211 221.801 231.719 C 225.806 237.227 227.809 246.035 227.809 258.144 C 227.809 267.066 226.785 274.19 224.737 279.515 C 222.688 284.841 219.456 288.665 215.041 290.986 C 210.626 293.308 204.913 294.469 197.903 294.469 C 195.08 294.469 192.235 294.287 189.368 293.923 C 186.5 293.558 184.292 293.24 182.744 292.967 L 182.744 323.283 L 172.229 323.283 Z M 197.356 285.183 C 202.273 285.183 206.165 284.272 209.032 282.451 C 211.9 280.631 213.926 277.74 215.109 273.78 C 216.293 269.82 216.885 264.608 216.885 258.144 C 216.885 248.949 215.519 242.462 212.788 238.684 C 210.057 234.906 206.233 233.017 201.317 233.017 C 199.132 233.017 196.878 233.29 194.557 233.836 C 192.235 234.382 190.028 235.042 187.934 235.816 C 185.84 236.59 184.11 237.386 182.744 238.206 L 182.744 283.817 C 184.201 283.999 186.341 284.272 189.163 284.636 C 191.985 285.001 194.716 285.183 197.356 285.183 Z"/>
|
|
<path d="M 274.099 293.103 L 274.099 224.823 L 284.614 224.823 L 284.614 229.603 C 286.162 228.692 288.096 227.782 290.418 226.871 C 292.739 225.961 295.22 225.164 297.86 224.482 C 300.501 223.799 303.05 223.457 305.508 223.457 C 311.79 223.457 316.592 224.573 319.915 226.803 C 323.238 229.034 325.537 232.607 326.811 237.523 C 328.086 242.439 328.723 248.903 328.723 256.915 L 328.723 293.103 L 318.071 293.103 L 318.071 257.324 C 318.071 251.407 317.73 246.673 317.047 243.122 C 316.364 239.571 314.999 237 312.95 235.406 C 310.902 233.813 307.784 233.017 303.596 233.017 C 301.32 233.017 298.976 233.267 296.563 233.768 C 294.15 234.268 291.897 234.906 289.803 235.679 C 287.709 236.453 285.98 237.204 284.614 237.933 L 284.614 293.103 L 274.099 293.103 Z"/>
|
|
</g>
|
|
<path class="footer-bar__logo-dot" d="M 240.923 147.288 L 240.923 124.464 L 257.504 124.464 L 257.504 147.288 L 240.923 147.288 Z" style=""/>
|
|
</svg>
|
|
<div class="footer-bar__copyright">
|
|
<p>© {{ currentYear }} Paul Nicoué</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// STYLE
|
|
// --------------------------------------------------
|
|
|
|
footer {
|
|
width: 100%;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.footer-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&__logo {
|
|
width: auto;
|
|
height: var(--footnote-font-height);
|
|
|
|
&-background {
|
|
fill: var(--primary-color);
|
|
}
|
|
|
|
&-bracket-1 {
|
|
fill: url(#footer-bar__logo-gradient-1);
|
|
}
|
|
|
|
&-bracket-2 {
|
|
fill: url(#footer-bar__logo-gradient-2);
|
|
}
|
|
|
|
&-bracket-3 {
|
|
fill: url(#footer-bar__logo-gradient-3);
|
|
}
|
|
|
|
&-bracket-4 {
|
|
fill: url(#footer-bar__logo-gradient-4);
|
|
}
|
|
|
|
&-letters {
|
|
fill: var(--secondary-color);
|
|
}
|
|
|
|
&-dot {
|
|
fill: var(--primary-accent-color);
|
|
}
|
|
}
|
|
|
|
&__copyright {
|
|
margin: 0 0 0 0.4rem;
|
|
font-size: var(--footnote-font-size);
|
|
}
|
|
}
|
|
|
|
</style>
|