markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

12082025-1105

Browse source
This commit is contained in:
astosic 2025-08-12 11:05:32 +02:00
parent 23aa8074ac
commit b6fe872a80
3 changed files with 40 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

11
assets/scss/custom.scss
View file

@ -1107,24 +1107,23 @@ body {
border-radius: 999px; border-radius: 999px;
} }
/* About-Intro: Video ohne abgerundete Ecken */ /* About-Intro: Video */
/* About-Intro: Video mit weichen Kanten */
.intro-video { .intro-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block; display: block;
border-radius: 12px; /* Weiche Kanten */ border-radius: 12px; // Weiche Kanten
} }
.intro-media { .intro-media {
overflow: hidden; /* sorgt dafür, dass der Radius auch das Video schneidet */ overflow: hidden; // sorgt dafür, dass der Radius auch das Video schneidet
border-radius: 12px; /* gleicher Radius wie Video */ border-radius: 12px;
} }
/* ======================================== /* ========================================
ABOUT PAGE STYLES ABOUT PAGE STYLES
======================================== */ ======================================== */

40
layouts/_default/about.html
View file

@ -19,20 +19,44 @@
</div> </div>
<!-- VIDEO (rechts, ohne abgerundete Ecken) --> <!-- VIDEO (rechts, ohne abgerundete Ecken) -->
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="600"> <div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="200">
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden"> <div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
<video class="intro-video" <video id="aboutVideo"
autoplay class="intro-video"
muted muted
loop loop
playsinline playsinline
preload="metadata" preload="none"
poster='{{ "images/brand_poster.jpg" | relURL }}'> poster='{{ "images/brand_poster.jpg" | relURL }}'>
<source src='{{ "images/Imagevideo_Short.mp4" | relURL }}' type="video/mp4"> <!-- Quellen werden per JS gesetzt -->
Ihr Browser unterstützt eingebettete Videos nicht.
</video> </video>
</div> </div>
</div> </div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const vid = document.getElementById("aboutVideo");
if (!vid) return;
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
const srcMp4 = '{{ "images/Imagevideo_Short.mp4" | relURL }}';
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
vid.innerHTML = `
<source src="${srcWebm}" type="video/webm">
<source src="${srcMp4}" type="video/mp4">
`;
vid.play().catch(() => {});
observer.disconnect();
}
});
}, { rootMargin: "200px" });
observer.observe(vid);
});
</script>
</div> </div>
</div> </div>
</section> </section>
@ -116,8 +140,8 @@
{{ $step := 100 }} {{ $step := 100 }}
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);"> <img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
<h3 class="service-card-title">Staatlich geprüft & konzessioniert</h3> <h3 class="service-card-title">Staatlich geprüft & konessioniert</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit. <strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
</p> </p>

10
resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
View file

@ -3490,21 +3490,17 @@ body {
background: #006464; background: #006464;
border-radius: 999px; } border-radius: 999px; }
/* About-Intro: Video ohne abgerundete Ecken */ /* About-Intro: Video */
/* About-Intro: Video mit weichen Kanten */
.intro-video { .intro-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block; display: block;
border-radius: 12px; border-radius: 12px; }
/* Weiche Kanten */ }
.intro-media { .intro-media {
overflow: hidden; overflow: hidden;
/* sorgt dafür, dass der Radius auch das Video schneidet */ border-radius: 12px; }
border-radius: 12px;
/* gleicher Radius wie Video */ }
/* ======================================== /* ========================================
ABOUT PAGE STYLES ABOUT PAGE STYLES