fix: enhance layout and styling for footer and body, add portrait image for Bu Sunaidah
This commit is contained in:
parent
78649c6f3b
commit
e500fee42f
BIN
Gemini_Generated_Image_9kmkzd9kmkzd9kmk.png
Normal file
BIN
Gemini_Generated_Image_9kmkzd9kmkzd9kmk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/bu-sunaidah/portrait.png
Normal file
BIN
public/bu-sunaidah/portrait.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
23
scripts/prod-check.mjs
Normal file
23
scripts/prod-check.mjs
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { chromium } from 'playwright';
|
||||||
|
const browser = await chromium.launch();
|
||||||
|
const ctx = await browser.newContext({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true, deviceScaleFactor: 2 });
|
||||||
|
const page = await ctx.newPage();
|
||||||
|
await page.goto('https://yslootahrobotics.com/', { waitUntil: 'networkidle', timeout: 60000 });
|
||||||
|
await page.waitForSelector('footer', { timeout: 30000 });
|
||||||
|
await page.waitForTimeout(3000);
|
||||||
|
const r = await page.evaluate(() => {
|
||||||
|
const footer = document.querySelector('footer');
|
||||||
|
if (!footer) return { error: 'no footer' };
|
||||||
|
const body = document.body;
|
||||||
|
const fRect = footer.getBoundingClientRect();
|
||||||
|
return {
|
||||||
|
bodyScrollHeight: body.scrollHeight,
|
||||||
|
footerBottomAbs: Math.round(fRect.bottom + window.scrollY),
|
||||||
|
spaceBelowFooter: Math.round(body.scrollHeight - (fRect.bottom + window.scrollY)),
|
||||||
|
bodyDisplay: getComputedStyle(body).display,
|
||||||
|
bodyMinHeight: getComputedStyle(body).minHeight,
|
||||||
|
footerMarginTop: getComputedStyle(footer).marginTop,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
console.log(JSON.stringify(r, null, 2));
|
||||||
|
await browser.close();
|
||||||
@ -76,18 +76,29 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-height: 100vh;
|
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
color: var(--color-text-primary);
|
color: var(--color-text-primary);
|
||||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-x: clip;
|
overflow-x: clip;
|
||||||
|
overscroll-behavior-y: none;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
direction: ltr !important;
|
direction: ltr !important;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html { background-color: var(--color-bg); }
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
body > main { flex: 1 0 auto; }
|
||||||
|
body > footer { flex: 0 0 auto; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background:
|
background:
|
||||||
radial-gradient(1200px 700px at 80% -10%, rgba(39, 63, 148, 0.18), transparent 60%),
|
radial-gradient(1200px 700px at 80% -10%, rgba(39, 63, 148, 0.18), transparent 60%),
|
||||||
|
|||||||
@ -194,7 +194,6 @@ export function FooterAndContact() {
|
|||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
margin-top: clamp(3rem, 6vw, 5rem);
|
|
||||||
background: linear-gradient(180deg, #030307 0%, #020409 100%);
|
background: linear-gradient(180deg, #030307 0%, #020409 100%);
|
||||||
color: #DEE0F0;
|
color: #DEE0F0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -234,7 +233,7 @@ export function FooterAndContact() {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
padding-top: clamp(2.5rem, 5vw, 3.5rem);
|
padding-top: clamp(2.5rem, 5vw, 3.5rem);
|
||||||
padding-bottom: clamp(5rem, 7vw, 6rem);
|
padding-bottom: clamp(2rem, 4vw, 3.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CTA STRIP */
|
/* CTA STRIP */
|
||||||
|
|||||||
@ -27,7 +27,10 @@ export const BU_SUNAIDAH_URL = `https://www.instagram.com/${BU_SUNAIDAH_HANDLE}`
|
|||||||
* IMPORTANT: do NOT hotlink Instagram CDN images in production — save the
|
* IMPORTANT: do NOT hotlink Instagram CDN images in production — save the
|
||||||
* approved photo locally inside the repo first.
|
* approved photo locally inside the repo first.
|
||||||
*/
|
*/
|
||||||
export const BU_SUNAIDAH_PORTRAIT: { src: string; alt: string } | null = null;
|
export const BU_SUNAIDAH_PORTRAIT: { src: string; alt: string } | null = {
|
||||||
|
src: '/bu-sunaidah/portrait.png',
|
||||||
|
alt: 'Bu Sunaidah — Emirati-inspired robotics persona in white kandura and ghutra',
|
||||||
|
};
|
||||||
|
|
||||||
// Curated reel shortcodes from @bu.sunaidah, sourced from publicly indexed
|
// Curated reel shortcodes from @bu.sunaidah, sourced from publicly indexed
|
||||||
// Instagram URLs. Each entry renders as an official Instagram embed iframe.
|
// Instagram URLs. Each entry renders as an official Instagram embed iframe.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user