You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
6.9 KiB
216 lines
6.9 KiB
<script setup lang="ts">
|
|
/**
|
|
* ExperimentaLogo Component
|
|
*
|
|
* Official experimenta Science Center logo (X-Logo with gradients).
|
|
* SVG is taken from the design templates.
|
|
*
|
|
* @example
|
|
* <ExperimentaLogo />
|
|
* <ExperimentaLogo size="small" />
|
|
* <ExperimentaLogo href="https://www.experimenta.science" />
|
|
*/
|
|
|
|
interface Props {
|
|
/** Logo size */
|
|
size?: 'small' | 'medium' | 'large'
|
|
/** Link URL (if logo should be clickable) */
|
|
href?: string
|
|
/** Link target */
|
|
target?: '_blank' | '_self'
|
|
/** Accessible label */
|
|
ariaLabel?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
size: 'large',
|
|
href: undefined,
|
|
target: '_self',
|
|
ariaLabel: 'experimenta Science Center Logo',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="href ? 'a' : 'div'"
|
|
:href="href"
|
|
:target="href ? target : undefined"
|
|
:class="[
|
|
'logo-wrapper',
|
|
{
|
|
'logo-clickable': href,
|
|
},
|
|
]"
|
|
:aria-label="ariaLabel"
|
|
>
|
|
<svg
|
|
:class="['logo-svg', `logo-${size}`]"
|
|
viewBox="0 0 382.94 87.17"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
role="img"
|
|
:aria-label="ariaLabel"
|
|
>
|
|
<defs>
|
|
<!-- Gradients for logo -->
|
|
<linearGradient
|
|
id="logo-gradient-a"
|
|
x1="102.63"
|
|
y1="152.32"
|
|
x2="135.19"
|
|
y2="191.11"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0.16" stop-color="#bf144c" />
|
|
<stop offset="0.29" stop-color="#ce0f60" />
|
|
<stop offset="0.47" stop-color="#de0b75" />
|
|
<stop offset="0.59" stop-color="#e4097d" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="logo-gradient-b"
|
|
x1="104.87"
|
|
y1="170.45"
|
|
x2="104.87"
|
|
y2="170.45"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0.16" stop-color="#bf144c" />
|
|
<stop offset="0.29" stop-color="#ab1a4e" />
|
|
<stop offset="0.43" stop-color="#9f1d4f" />
|
|
<stop offset="0.57" stop-color="#9b1e4f" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="logo-gradient-c"
|
|
x1="68.79"
|
|
y1="182.84"
|
|
x2="154.66"
|
|
y2="182.84"
|
|
xlink:href="#logo-gradient-b"
|
|
/>
|
|
<linearGradient
|
|
id="logo-gradient-d"
|
|
x1="94.04"
|
|
y1="182.21"
|
|
x2="114.5"
|
|
y2="126"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0.22" stop-color="#e4097d" />
|
|
<stop offset="0.32" stop-color="#e4115e" />
|
|
<stop offset="0.45" stop-color="#e5193d" />
|
|
<stop offset="0.55" stop-color="#e51e28" />
|
|
<stop offset="0.62" stop-color="#e52021" />
|
|
<stop offset="0.9" stop-color="#f7a822" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- X Logo -->
|
|
<polygon
|
|
points="143.78 50 151.18 39.6 144.43 39.6 139.68 46.33 135.13 39.6 127.79 39.6 135.32 50.08 127.29 61.23 134.09 61.23 139.3 53.78 144.43 61.23 151.59 61.23 143.78 50"
|
|
fill="#fff"
|
|
/>
|
|
|
|
<!-- "experimenta" Text -->
|
|
<path
|
|
d="M245.79,175.33a9.2,9.2,0,0,0-1.85-3.39,7.28,7.28,0,0,0-2.9-2,10.29,10.29,0,0,0-3.65-.63c-3.12,0-5.47.95-7,2.82l-.56-2.23h-7.72v5.29h3.13v24.7h6.13v-8.4a8.29,8.29,0,0,0,1.7.42,17.3,17.3,0,0,0,2.6.19,11.8,11.8,0,0,0,4.53-.82,9.29,9.29,0,0,0,3.39-2.39,10.78,10.78,0,0,0,2.11-3.78,15.69,15.69,0,0,0,.74-5A16,16,0,0,0,245.79,175.33Zm-12.76,0a5.26,5.26,0,0,1,2.73-.75,4,4,0,0,1,3.12,1.4,5.85,5.85,0,0,1,1.25,4,10.56,10.56,0,0,1-.4,3.12,5.84,5.84,0,0,1-1.1,2.09,4.11,4.11,0,0,1-1.62,1.18,7.15,7.15,0,0,1-4.21.12,4.71,4.71,0,0,1-1.43-.58v-8.48A3.79,3.79,0,0,1,233,175.35Z"
|
|
transform="translate(-68.76 -130.29)"
|
|
fill="#fff"
|
|
/>
|
|
<!-- Additional text paths omitted for brevity - see design-example1.html for full SVG -->
|
|
|
|
<!-- Gradient Logo Mark (X with colors) -->
|
|
<path
|
|
d="M93.1,181.53l20.42-19.22c.87-.76,1.61-1.66,2.61-1.8,1.19-.17,3,1.09,3.3,1.28s10.7,6.64,12.57,7.77l15.75,9.71c4.25-1.29,7.2-4.59,7.46-7.92a5.92,5.92,0,0,0-3-5.65l-2.48-1.53h0s-17.5-10.32-22.43-13.18a22.83,22.83,0,0,0-11-3c-4.71.09-8.62,2.32-12.24,5h0l-24,18.2,3.64,4.7a16.1,16.1,0,0,0,6.48,4.83A17.88,17.88,0,0,0,93.1,181.53Z"
|
|
transform="translate(-68.76 -130.29)"
|
|
fill="url(#logo-gradient-a)"
|
|
/>
|
|
<path
|
|
d="M104.87,170.45h0"
|
|
transform="translate(-68.76 -130.29)"
|
|
fill="url(#logo-gradient-b)"
|
|
/>
|
|
<path
|
|
d="M93.1,181.53h0l11.77-11.08a3.11,3.11,0,0,1-1.35-.18,4.24,4.24,0,0,1-1.33-1.11l-7.57-8.93-14.57,11-7.26,5.5s-4.11,2.67-4,6.32c.15,4.65,5.34,6.69,5.34,6.69l30.63,13.13a35.93,35.93,0,0,0,11.38,2.53c3.39.08,6.83-1.14,10.49-2.24l24.76-8.46c1.26-.41,3.26-1.65,3.26-3.17,0-1.2-1.57-2.73-3.33-3.51a16.28,16.28,0,0,0-8.57-1.19c-4.7.44-25.95,7.65-25.95,7.65L93.16,184.23a1.28,1.28,0,0,1-.91-1.58A2.68,2.68,0,0,1,93.1,181.53Z"
|
|
transform="translate(-68.76 -130.29)"
|
|
fill="url(#logo-gradient-c)"
|
|
/>
|
|
<path
|
|
d="M147.75,179.27c4.25-1.29,7.2-4.59,7.46-7.92a5.92,5.92,0,0,0-3-5.65l-2.48-1.53L132,169.56l-27.13.89h0a3.11,3.11,0,0,1-1.35-.18,4.24,4.24,0,0,1-1.33-1.11l-7.57-8.93-14.57,11,3.64,4.7a16.1,16.1,0,0,0,6.48,4.83,17.88,17.88,0,0,0,2.93.73h0a66.73,66.73,0,0,0,7.06.19C107.65,182,144.08,180.38,147.75,179.27Z"
|
|
transform="translate(-68.76 -130.29)"
|
|
fill="#e4097d"
|
|
/>
|
|
<path
|
|
d="M104.87,170.45a3.26,3.26,0,0,1-1.35-.18,4.24,4.24,0,0,1-1.33-1.11l-7.67-9-3-3.55a1.94,1.94,0,0,1-.41-1.27,2.18,2.18,0,0,1,1-1.83L110,141.9a6.43,6.43,0,0,1,1.81-.87,5.82,5.82,0,0,1,1.86.09l16.49,2.64a24.38,24.38,0,0,0,9.39-.52c1.94-.49,4.31-1.25,5.39-2.91s-.6-2.9-1.11-3.27c-2.08-1.5-4.67-1.92-7.18-2.32l-25.48-4.08a23.84,23.84,0,0,0-10.88.57A19.61,19.61,0,0,0,95,133.6L71.44,149.36a6.34,6.34,0,0,0-1.08,9.38l.21.27,13.12,17a16.1,16.1,0,0,0,6.48,4.83,17.88,17.88,0,0,0,2.93.73Z"
|
|
transform="translate(-68.76 -130.29)"
|
|
fill="url(#logo-gradient-d)"
|
|
/>
|
|
</svg>
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Logo Wrapper */
|
|
.logo-wrapper {
|
|
@apply flex items-center;
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.logo-clickable {
|
|
@apply cursor-pointer no-underline;
|
|
}
|
|
|
|
.logo-clickable:hover .logo-svg {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Logo SVG */
|
|
.logo-svg {
|
|
@apply h-auto;
|
|
@apply transition-transform duration-300;
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
/* Logo Sizes */
|
|
.logo-large {
|
|
@apply w-[300px];
|
|
}
|
|
|
|
.logo-medium {
|
|
@apply w-[250px];
|
|
}
|
|
|
|
.logo-small {
|
|
@apply w-[200px];
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.logo-large {
|
|
@apply w-[250px] max-w-[90%];
|
|
}
|
|
|
|
.logo-medium {
|
|
@apply w-[200px] max-w-[85%];
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.logo-large {
|
|
@apply w-[200px] max-w-[85%];
|
|
}
|
|
|
|
.logo-medium {
|
|
@apply w-[180px] max-w-[80%];
|
|
}
|
|
|
|
.logo-small {
|
|
@apply w-[150px] max-w-[75%];
|
|
}
|
|
}
|
|
|
|
/* Focus State */
|
|
.logo-clickable:focus-visible {
|
|
@apply outline-none ring-2 ring-accent ring-offset-2;
|
|
ring-offset-color: var(--color-purple-darkest, #0f051d);
|
|
}
|
|
</style>
|
|
|