Add Requiner font and styles for Logo component
- Introduced @font-face for Requiner font with multiple source paths. - Created .logo-text class to apply Requiner font with normal weight and letter-spacing. - Added .logo-text-bold class for bold text styling, including text-stroke for enhanced visibility.
This commit is contained in:
parent
a06ffa8f79
commit
70317f95f8
BIN
packages/broadcast-panel/public/assets/Requiner-6RRLM.woff
Normal file
BIN
packages/broadcast-panel/public/assets/Requiner-6RRLM.woff
Normal file
Binary file not shown.
29
shared/components/Logo.css
Normal file
29
shared/components/Logo.css
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
/* Requiner Font for Logo Component */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Requiner';
|
||||||
|
src: url('/fonts/Requiner-6RRLM.woff') format('woff'),
|
||||||
|
url('/assets/Requiner-6RRLM.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force Requiner font for logo text */
|
||||||
|
.logo-text {
|
||||||
|
font-family: 'Requiner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text-bold {
|
||||||
|
font-family: 'Requiner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Forzar bold visible con text-stroke */
|
||||||
|
-webkit-text-stroke: 0.2px currentColor;
|
||||||
|
paint-order: stroke fill;
|
||||||
|
}
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import './Logo.css';
|
||||||
|
|
||||||
interface LogoProps {
|
interface LogoProps {
|
||||||
size?: 'sm' | 'md' | 'lg';
|
size?: 'sm' | 'md' | 'lg';
|
||||||
@ -23,6 +24,14 @@ export const Logo: React.FC<LogoProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const dimensions = sizeMap[size];
|
const dimensions = sizeMap[size];
|
||||||
|
|
||||||
|
const textStyle: React.CSSProperties = {
|
||||||
|
fontSize: dimensions.fontSize,
|
||||||
|
letterSpacing: '0.5px',
|
||||||
|
transition: 'color 0.3s ease',
|
||||||
|
WebkitFontSmoothing: 'antialiased',
|
||||||
|
MozOsxFontSmoothing: 'grayscale'
|
||||||
|
};
|
||||||
|
|
||||||
const content = (
|
const content = (
|
||||||
<>
|
<>
|
||||||
<img
|
<img
|
||||||
@ -37,14 +46,8 @@ export const Logo: React.FC<LogoProps> = ({
|
|||||||
onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
|
onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
|
||||||
/>
|
/>
|
||||||
{showText && (
|
{showText && (
|
||||||
<span
|
<span className="logo-text" style={textStyle}>
|
||||||
style={{
|
Avanza<span className="logo-text-bold">Cast</span>
|
||||||
fontSize: dimensions.fontSize,
|
|
||||||
fontFamily: 'Requiner, sans-serif',
|
|
||||||
transition: 'color 0.3s ease'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Avanza<span style={{ fontWeight: 700 }}>Cast</span>
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user