KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the background stars fill the entire screen width

Browse Source 
Refactors CSS and JS to implement a stars-container that spans the full viewport width and positions stars accordingly.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a6d959e1-4446-4285-8e3f-38c176460537
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/GG0DPhp
This commit is contained in:
abhiramtx
2025-11-08 23:06:07 +00:00
parent 15abe10d23
commit c3578d968f
3 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1762643101965.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

19
static/css/styles.css
View File

@@ -310,20 +310,21 @@ hr {
position: relative; position: relative;
} }
.home-info::before { .home-info > * {
content: ''; position: relative;
z-index: 2;
}
.stars-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: -5%; left: 50%;
width: 110%; transform: translateX(-50%);
width: 100vw;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
} overflow: hidden;
.home-info > * {
position: relative;
z-index: 1;
} }
.star { .star {

11
static/js/scripts.js
View File

@@ -395,9 +395,12 @@ function initStars() {
const sections = document.querySelectorAll('.home-info'); const sections = document.querySelectorAll('.home-info');
sections.forEach(section => { sections.forEach(section => {
const starContainer = document.createElement('div');
starContainer.className = 'stars-container';
const sectionHeight = section.offsetHeight; const sectionHeight = section.offsetHeight;
const sectionWidth = section.offsetWidth; const viewportWidth = window.innerWidth;
const numStars = Math.floor((sectionWidth * sectionHeight) / 15000); const numStars = Math.floor((viewportWidth * sectionHeight) / 15000);
for (let i = 0; i < numStars; i++) { for (let i = 0; i < numStars; i++) {
const star = document.createElement('div'); const star = document.createElement('div');
@@ -416,7 +419,9 @@ function initStars() {
star.style.setProperty('--duration', duration + 's'); star.style.setProperty('--duration', duration + 's');
star.style.setProperty('--delay', delay + 's'); star.style.setProperty('--delay', delay + 's');
section.appendChild(star); starContainer.appendChild(star);
} }
section.appendChild(starContainer);
}); });
} }