Skip to content

Commit

Permalink
:3
Browse files Browse the repository at this point in the history
  • Loading branch information
@worldwidepixel
worldwidepixel committed Jul 7, 2024
1 parent bdb7136 commit 3cce0f4
Show file tree
Hide file tree
Showing 6 changed files with 654 additions and 4 deletions.
271 changes: 271 additions & 0 deletions components/colourableLogo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
<template>
<span>
<svg
width="375mm"
height="25mm"
viewBox="0 0 375 25"
version="1.1"
id="logotype"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
class="h-4 w-fit"
:fill="color"
>
<defs id="defslogotype" />
<g id="logotypelayer" transform="translate(112.00347,-77.240964)">
<path
id="rect3460"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
stop-color: #000000;
"
d="m -82.003747,77.240965 v 25.000025 h 5.000202 V 87.240865 h 5.000228 v -4.999699 h -5.000228 v -5.000201 z m 10.00043,9.9999 v 5.000202 h 4.999672 v -5.000202 z m 4.999672,5.000202 v 4.999699 h 5.000229 v 5.000224 h 4.999698 V 77.240965 h -4.999698 v 15.000102 z"
/>
<path
id="rect3573"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m -47.003817,77.240965 v 5.000201 h -4.999699 v 14.9996 h 4.999699 v 5.000224 h 15.000102 v -5.000224 h -14.999599 v -14.9996 h 14.999599 v -5.000201 z m 15.000102,5.000201 v 14.9996 h 5.000228 v -14.9996 z"
/>
<path
id="rect3581"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m -22.003285,77.240965 v 5.000201 h 9.9999 v 19.999824 h 4.9996991 V 82.241166 h 9.9999005 v -5.000201 h -9.9999005 -4.9996991 z"
/>
<path
id="rect3460-5"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 127.9964,77.241 v 25 h 5.0002 V 87.2409 h 5.0003 v -4.9997 h -5.0003 V 77.241 Z m 10.0005,9.9999 v 5.0002 h 4.9996 v -5.0002 z m 4.9996,5.0002 v 4.9997 h 5.0003 v 5.0002 h 4.9997 v -25 h -4.9997 v 15.0001 z"
/>
<path
id="rect3581-1"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 157.9965,77.241 v 5.0002 h 9.9999 v 19.9998 h 4.9997 V 82.2412 h 9.9999 V 77.241 h -9.9999 -4.9997 z"
/>
<path
id="rect6313"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 7.9964426,77.240965 v 5.000201 4.999699 5.000202 9.999923 h 4.9996994 20.00033 V 97.240766 H 12.996142 V 92.241067 H 22.996545 V 87.240865 H 12.996142 v -4.999699 h 20.00033 v -5.000201 h -20.00033 z"
/>
<path
id="rect6321"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 42.996372,77.240965 v 5.000201 h 20.00033 v -5.000201 z m 0,5.000201 h -4.999699 v 4.999699 h 4.999699 z m 0,4.999699 v 5.000202 h 15.000102 v -5.000202 z m 15.000102,5.000202 v 4.999699 h 5.000228 v -4.999699 z m 0,4.999699 H 37.996673 v 5.000224 h 19.999801 z"
/>
<path
id="rect6333"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 72.996603,77.240965 v 5.000201 h 19.999801 v -5.000201 z m 0,5.000201 h -5.000202 v 4.999699 h 5.000202 z m 0,4.999699 v 5.000202 h 15.000128 v -5.000202 z m 15.000128,5.000202 v 4.999699 h 4.999673 v -4.999699 z m 0,4.999699 h -20.00033 v 5.000224 h 20.00033 z"
/>
<path
id="rect6343"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 97.996632,77.240965 v 5.000201 4.999699 5.000202 4.999699 5.000224 h 4.999698 20.00033 v -5.000224 h -20.00033 v -4.999699 h 9.9999 v -5.000202 h -9.9999 v -4.999699 h 20.00033 v -5.000201 h -20.00033 z"
/>
<path
id="rect9123"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 187.99629,77.240965 v 5.000201 h 5.00023 v 14.9996 h -5.00023 v 5.000224 h 5.00023 5.0002 4.9997 v -5.000224 h -4.9997 v -14.9996 h 4.9997 v -5.000201 h -4.9997 -5.0002 z"
/>
<path
id="rect9131"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 212.99632,77.240965 v 5.000201 h 15.00013 v -5.000201 z m 15.00013,5.000201 v 9.999901 h -15.00013 v -9.999901 h -4.9997 v 9.999901 4.999699 5.000224 h 4.9997 v -5.000224 h 15.00013 v 5.000224 h 5.0002 v -5.000224 -4.999699 -9.999901 z"
/>
<path
id="rect9139"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m 237.99635,77.240965 v 19.999801 5.000224 h 5.0002 19.99983 V 97.240766 H 242.99655 V 77.240965 Z"
/>
<path
id="rect9248"
style="
font-variation-settings: normal;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000080;
stroke-width: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
-inkscape-stroke: none;
stop-color: #000000;
"
d="m -112.00347,77.240965 v 9.9999 h 5.00022 v 5.000202 h -5.00022 v 9.999923 h 9.9999 v -5.000224 h 5.000224 v 5.000224 h 9.9999 v -9.999923 h -5.000201 v -5.000202 h 5.000201 v -9.9999 h -9.9999 v 5.000201 h -5.000224 v -5.000201 z"
/>
</g>
</svg>
</span>
</template>

<script setup>
const props = defineProps({
color: String,
})
</script>
87 changes: 87 additions & 0 deletions components/logoScroll.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<div class="w-full inline-flex flex-nowrap overflow-hidden">
<div
class="flex items-center justify-center md:justify-start animate-infinite-scroll"
>
<ColourableLogo
color="var(--brand-red)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-orange)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-yellow)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-green)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-blue)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-purple)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-rose)"
class="max-w-none mx-8 logotype"
/>
</div>
<div
class="flex items-center justify-center md:justify-start animate-infinite-scroll"
aria-hidden="true"
>
<ColourableLogo
color="var(--brand-red)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-orange)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-yellow)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-green)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-blue)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-purple)"
class="max-w-none mx-8 logotype"
/>
<ColourableLogo
color="var(--brand-rose)"
class="max-w-none mx-8 logotype"
/>
</div>
</div>
</template>

<style>
.logotype svg {
height: 1.5rem;
}
@keyframes infinite-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.animate-infinite-scroll {
animation: infinite-scroll 25s linear infinite;
}
</style>
Loading

0 comments on commit 3cce0f4

Please sign in to comment.