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 './Logo.css';
|
||||
|
||||
interface LogoProps {
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
@ -23,6 +24,14 @@ export const Logo: React.FC<LogoProps> = ({
|
||||
}) => {
|
||||
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 = (
|
||||
<>
|
||||
<img
|
||||
@ -37,14 +46,8 @@ export const Logo: React.FC<LogoProps> = ({
|
||||
onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
|
||||
/>
|
||||
{showText && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: dimensions.fontSize,
|
||||
fontFamily: 'Requiner, sans-serif',
|
||||
transition: 'color 0.3s ease'
|
||||
}}
|
||||
>
|
||||
Avanza<span style={{ fontWeight: 700 }}>Cast</span>
|
||||
<span className="logo-text" style={textStyle}>
|
||||
Avanza<span className="logo-text-bold">Cast</span>
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user