homepage/config/custom.css
traveler 0c34c237be sdf
2025-12-30 09:20:47 -06:00

137 lines
3.8 KiB
CSS
Executable file
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* custom.css (drop-in replacement) */
/* ----------------------------- */
/* Base background behavior */
/* ----------------------------- */
body {
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
}
/* ----------------------------- */
/* Per-tab backgrounds */
/* ----------------------------- */
body.tab-glance {
background-image: url("/images/bg-glance.jpg") !important;
}
body.tab-pncharris {
background-image: url("/images/pncharris-bg.png") !important;
}
body.tab-netgrimoire {
background-image: url("/images/Netgrimoire-bg.png") !important;
}
body.tab-wasted-bandwidth {
background-image: url("/images/Wasted-bandwidth-bg.png") !important;
}
body.tab-nucking-futz {
background-image: url("/images/Nucking-futz-bg.png") !important;
}
/* ----------------------------- */
/* Readability / tone-down layer */
/* ----------------------------- */
#page-wrapper {
background-color: rgba(0, 0, 0, 0.40);
}
.service-card,
.widget {
background: rgba(20, 20, 20, 0.70) !important;
backdrop-filter: blur(2px);
border-radius: 10px;
}
/* ----------------------------- */
/* PNCHarris: narrow centered column */
/* ----------------------------- */
body.tab-pncharris main {
max-width: 900px;
margin: 0 auto !important;
padding-left: 16px;
padding-right: 16px;
}
body.tab-pncharris section,
body.tab-pncharris .group {
max-width: 900px;
margin-left: auto !important;
margin-right: auto !important;
}
body.tab-pncharris .service-card,
body.tab-pncharris .widget {
width: auto !important;
max-width: 100% !important;
}
/* ========================================================= */
/* GLANCE TAB: make ONLY the glance iframe fill the page */
/* ========================================================= */
/* Full width on Glance tab */
body.tab-glance main {
max-width: none !important;
margin: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Single-column layout on Glance tab */
body.tab-glance .service-grid,
body.tab-glance .services {
grid-template-columns: 1fr !important;
}
/* Adjust this number if you want more/less height */
body.tab-glance {
--glance-vh: calc(100vh - 170px);
}
/* Make the card containing the Glance iframe tall and clean */
body.tab-glance .service-card:has(iframe[name="glance"]),
body.tab-glance .service-card:has(iframe[src*="home.netgrimoire.com"]) {
grid-column: 1 / -1 !important;
height: var(--glance-vh) !important;
min-height: var(--glance-vh) !important;
overflow: hidden !important;
padding: 0 !important;
border-radius: 12px !important;
position: relative !important; /* required for absolute iframe fill */
}
/* Some Homepage themes add an inner wrapper; make it fill the card */
body.tab-glance .service-card:has(iframe[name="glance"]) .service-card-content,
body.tab-glance .service-card:has(iframe[src*="home.netgrimoire.com"]) .service-card-content,
body.tab-glance .service-card:has(iframe[name="glance"]) .widget,
body.tab-glance .service-card:has(iframe[src*="home.netgrimoire.com"]) .widget {
height: 100% !important;
min-height: 100% !important;
padding: 0 !important;
background: transparent !important; /* dont paint over the iframe */
}
/* Fill the entire card with the iframe */
body.tab-glance iframe[name="glance"],
body.tab-glance iframe[src*="home.netgrimoire.com"] {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
background: transparent !important;
}
/* Fallback if :has() isnt supported */
@supports not selector(.service-card:has(iframe)) {
body.tab-glance iframe[name="glance"],
body.tab-glance iframe[src*="home.netgrimoire.com"] {
width: 100% !important;
height: var(--glance-vh) !important;
}
}