sirlilpanda/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed scaling issue

Browse Source
This commit is contained in:
panda
2026-03-29 20:08:42 +13:00
parent 8ffaff5e0c
commit e0647a264c
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Header.astro
View File

@@ -37,13 +37,6 @@ import HambugerIcon from './HamburgerIcon.astro'
</nav> </nav>
</div> </div>
</header> </header>
<ul>
<li>
<a href="https://onio.neocities.org" title="Visit Onio Café">
<img src="https://onio.neocities.org/thebutton.gif" alt="Come Chat With Us!" width="88" height="31">
</a>
</li>
</ul>
<script is:inline> <script is:inline>
/* Hamburger button management */ /* Hamburger button management */
@@ -69,13 +62,13 @@ import HambugerIcon from './HamburgerIcon.astro'
const header = document.getElementById("header-bar"); const header = document.getElementById("header-bar");
const window_frame = document.getElementById("window-frame-wrapper"); const window_frame = document.getElementById("window-frame-wrapper");
const header_bounding_box = header.getBoundingClientRect(); const header_bounding_box = header.getBoundingClientRect();
console.log(header_bounding_box) // console.log(header_bounding_box)
const frame_bottom = document.getElementById("frame-bottom"); const frame_bottom = document.getElementById("frame-bottom");
const frame_bottom_bounding_box = frame_bottom.getBoundingClientRect();; const frame_bottom_bounding_box = frame_bottom.getBoundingClientRect();;
const em = parseFloat(getComputedStyle(header).fontSize); const em = parseFloat(getComputedStyle(header).fontSize);
number_of_slats = Math.ceil(header_bounding_box.width / slat_spaceing); number_of_slats = Math.ceil(header_bounding_box.width / slat_spaceing);
console.log(`number of slats ${number_of_slats}`) // console.log(`number of slats ${number_of_slats}`)
for (let i = 0; i < number_of_slats; i++) { for (let i = 0; i < number_of_slats; i++) {
const slat = document.createElement('div'); const slat = document.createElement('div');
@@ -108,7 +101,7 @@ import HambugerIcon from './HamburgerIcon.astro'
} }
} }
const number_of_stars = 300; const number_of_stars = 90;
function fill_stars() { function fill_stars() {
// get the size of the header // get the size of the header
@@ -218,6 +211,10 @@ import HambugerIcon from './HamburgerIcon.astro'
} }
} }
const number_of_clouds = 10;
const number_of_cloud_segments = 8;
function place_cloud(cloud, bound_box) { function place_cloud(cloud, bound_box) {
cloud.className = "cloud" cloud.className = "cloud"
@@ -226,7 +223,7 @@ import HambugerIcon from './HamburgerIcon.astro'
cloud.style.position = "absolute"; cloud.style.position = "absolute";
// random circles around the top half of the cloud // random circles around the top half of the cloud
const number_of_parts = Math.random() * 8 + 3; const number_of_parts = Math.random() * number_of_cloud_segments + 3;
for (let i = 0; i < number_of_parts; i++) { for (let i = 0; i < number_of_parts; i++) {
const fluff = document.createElement('div') const fluff = document.createElement('div')
fluff.style.backgroundColor = "white" fluff.style.backgroundColor = "white"
@@ -304,7 +301,6 @@ import HambugerIcon from './HamburgerIcon.astro'
} }
} }
const number_of_clouds = 20;
function fill_sky() { function fill_sky() {
// get the size of the header // get the size of the header
const header = document.getElementById("header-bar"); const header = document.getElementById("header-bar");
@@ -365,10 +361,13 @@ import HambugerIcon from './HamburgerIcon.astro'
addEventListener("resize", (event) => { addEventListener("resize", (event) => {
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobile) {
remove_slats() remove_slats()
position_window_frame() position_window_frame()
replace_stars() replace_stars()
}
}) })
function update_clock() { function update_clock() {
@@ -455,6 +454,7 @@ import HambugerIcon from './HamburgerIcon.astro'
header { header {
min-height: 10em; min-height: 10em;
width: 100vw; width: 100vw;
margin-bottom: 2em;
/* background: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%); */ /* background: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%); */
} }