sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply Oswald font to enhance the platform's visual appearance and branding

Browse Source 
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:
sebastjanartic 2025-08-29 20:19:43 +00:00
parent 3313d7ab18
commit 00274ffa27
5 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/index.html
View File

@ -26,6 +26,11 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#3b82f6" /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
client/src/components/search-header.tsx
View File

@ -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-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 className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
</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> </a>
</div> </div>

2
client/src/components/simple-carousel.tsx
View File

@ -97,7 +97,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
return ( return (
<div className="relative group mb-12"> <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} {category.title}
</h2> </h2>

2
client/src/components/video-card.tsx
View File

@ -229,7 +229,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{/* Title overlay at bottom */} {/* 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"> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
<h3 <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)} onClick={() => onClick?.(video)}
data-testid={`text-title-${video.id}`} data-testid={`text-title-${video.id}`}
> >

8
client/src/index.css
View File

@ -392,6 +392,14 @@ input[data-testid*="search"]::placeholder {
z-index: 2147483647 !important; 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 */ /* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button { video::-webkit-media-controls-picture-in-picture-button {
display: none !important; display: none !important;