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

Improve footer design by repositioning and resizing decorative triangles

Browse Source 
Refactor CSS for footer triangle elements in VideoPage, Home, and NotFound components, adjusting positioning and dimensions for better visual appeal and to prevent text overlap.

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/GLdjeU9
This commit is contained in:
sebastjanartic 2025-08-28 19:19:41 +00:00
parent e3b00c1c2c
commit 6cb28870a2
3 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/pages/VideoPage.tsx
View File

@ -426,13 +426,9 @@ export default function VideoPage() {
{/* Footer - same as home page */}
<footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
{/* Triangle decorations in footer */}
<div className="absolute bottom-2 left-10 w-0 h-0 border-l-[30px] border-l-transparent border-r-[30px] border-r-transparent border-b-[40px] border-b-purple-400/8 rotate-12"></div>
<div className="absolute bottom-1 right-1/4 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-blue-400/6 -rotate-12"></div>
<div className="absolute bottom-3 left-1/2 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-cyan-400/7 rotate-45"></div>
<div className="triangle-decoration-1 opacity-20" style={{bottom: '10px', right: '20%'}}></div>
<div className="triangle-decoration-3 opacity-15" style={{bottom: '20px', left: '15%'}}></div>
{/* Triangle decorations in footer - manjši in bolje pozicionirani */}
<div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/5 rotate-12 z-0"></div>
<div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-blue-400/4 -rotate-12 z-0"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
<div className="flex flex-col md:flex-row items-center justify-between">

6
client/src/pages/home.tsx
View File

@ -107,9 +107,9 @@ export default function Home() {
{/* Footer with large triangle design */}
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
{/* Trikotniki v footerju - z nižjim z-index da ne zakrivajo besedila */}
<div className="absolute top-0 right-0 w-0 h-0 border-l-[150px] border-l-transparent border-b-[90px] border-b-blue-500/6 z-0"></div>
<div className="absolute bottom-0 left-0 w-0 h-0 border-r-[120px] border-r-transparent border-t-[80px] border-t-purple-500/6 z-0"></div>
{/* Trikotniki v footerju - manjši in bolje pozicionirani */}
<div className="absolute top-0 right-0 w-0 h-0 border-l-[80px] border-l-transparent border-b-[50px] border-b-blue-500/4 z-0"></div>
<div className="absolute bottom-0 left-0 w-0 h-0 border-r-[70px] border-r-transparent border-t-[45px] border-t-purple-500/4 z-0"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="col-span-1 md:col-span-2">

10
client/src/pages/not-found.tsx
View File

@ -117,13 +117,9 @@ export default function NotFound() {
{/* Footer - same as other pages */}
<footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
{/* Triangle decorations in footer */}
<div className="absolute bottom-2 left-10 w-0 h-0 border-l-[30px] border-l-transparent border-r-[30px] border-r-transparent border-b-[40px] border-b-purple-400/8 rotate-12"></div>
<div className="absolute bottom-1 right-1/4 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-blue-400/6 -rotate-12"></div>
<div className="absolute bottom-3 left-1/2 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-cyan-400/7 rotate-45"></div>
<div className="triangle-decoration-1 opacity-20" style={{bottom: '10px', right: '20%'}}></div>
<div className="triangle-decoration-3 opacity-15" style={{bottom: '20px', left: '15%'}}></div>
{/* Triangle decorations in footer - manjši in bolje pozicionirani */}
<div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/5 rotate-12 z-0"></div>
<div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-blue-400/4 -rotate-12 z-0"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
<div className="flex flex-col md:flex-row items-center justify-between">