Apply Oswald font to enhance the platform's visual appearance and branding
Integrates the Oswald font across the client-side by adding Google Fonts CDN links and applying the new 'oswald-text' class to relevant text elements in components like SearchHeader, SimpleCarousel, and VideoCard, as well as defining the font styles in index.css. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE
This commit is contained in:
parent
3313d7ab18
commit
00274ffa27
@ -26,6 +26,11 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="theme-color" content="#3b82f6" />
|
||||
|
||||
<!-- Oswald Google Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -59,7 +59,7 @@ export default function SearchHeader({
|
||||
<div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
|
||||
<h1 className="oswald-text text-2xl text-white">go4.video</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -97,7 +97,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
|
||||
|
||||
return (
|
||||
<div className="relative group mb-12">
|
||||
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
|
||||
<h2 className="oswald-text text-2xl text-bunny-light mb-6 px-4">
|
||||
{category.title}
|
||||
</h2>
|
||||
|
||||
|
||||
@ -229,7 +229,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
|
||||
{/* Title overlay at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
|
||||
<h3
|
||||
className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
|
||||
className="oswald-text text-white text-sm md:text-base line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
|
||||
onClick={() => onClick?.(video)}
|
||||
data-testid={`text-title-${video.id}`}
|
||||
>
|
||||
|
||||
@ -392,6 +392,14 @@ input[data-testid*="search"]::placeholder {
|
||||
z-index: 2147483647 !important;
|
||||
}
|
||||
|
||||
/* Oswald font povsod */
|
||||
.oswald-text {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Hide picture-in-picture button on all video elements */
|
||||
video::-webkit-media-controls-picture-in-picture-button {
|
||||
display: none !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user