astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

Refactor SCSS and HTML for improved layout, typography, and animations

Browse source
This commit is contained in:
astosic 2025-08-04 19:03:47 +02:00
parent 30fb9c0827
commit 53eff1def7
8 changed files with 265 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/scss/_common.scss
View file

@ -723,3 +723,4 @@ span.cloaked-e-mail:before {
.why-title1 { .why-title1 {
margin: 0; /* Entfernt zusätzliche Ränder */ margin: 0; /* Entfernt zusätzliche Ränder */
} }

9
assets/scss/_typography.scss
View file

@ -27,7 +27,7 @@ body {
// --------------------------- // ---------------------------
h1 { h1 {
font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop font-size: clamp(2.5rem, 5vw, 4rem); // ~32px auf Desktop
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -42,7 +42,7 @@ h1.page-title {
h2 { h2 {
font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix font-size: clamp(2rem, 3vw, 2.5rem); // Reaktionsfähig statt fix
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
@ -52,16 +52,17 @@ h2 {
h3 { h3 {
font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-size: clamp(1.8rem, 1.8vw, 2rem);
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;
margin-bottom: 1rem; margin-bottom: 1rem;
color: inherit; color: inherit;
color: #F5A623;
} }
p { p {
font-style: normal; font-style: normal;
font-size: clamp(1.3rem, 1.5vw, 1.4rem); font-size: clamp(1.5rem, 1.5vw, 1.8rem);
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
line-height: 1.6; line-height: 1.6;
} }

142
assets/scss/custom.scss
View file

@ -6,7 +6,7 @@
} }
.hero-title { .hero-title {
font-size: clamp(2.5rem, 4vw, 4rem); // skaliert stark bei kleinen Screens font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
color: #046e6e; color: #046e6e;
@ -14,7 +14,6 @@
hyphens: none; hyphens: none;
} }
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -23,11 +22,19 @@
text-align: justify; text-align: justify;
} }
/* ========== Vereinheitlichte Section-Abstände ========== */
section { section {
margin-bottom: 0; margin-bottom: 0;
} }
/* ========== Sektionen Padding (Intro etc.) ========== */ .section {
padding-top: 90px;
padding-bottom: 90px;
margin-top: 80px;
margin-bottom: 80px;
}
/* Spezielle Section-Anpassungen */
#welcome.section, #welcome.section,
#service.section { #service.section {
padding-top: 90px; padding-top: 90px;
@ -40,7 +47,6 @@ section {
margin-top: 5rem; margin-top: 5rem;
} }
/* ========== Beschreibung ========== */ /* ========== Beschreibung ========== */
.description { .description {
font-size: 22px; font-size: 22px;
@ -83,18 +89,14 @@ section {
background-image: url('/images/BackgroundAnimation.svg'); background-image: url('/images/BackgroundAnimation.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
// Desktop
background-size: cover; background-size: cover;
background-position: center 50%; background-position: center 50%;
// Tablet
@media (max-width: 991px) { @media (max-width: 991px) {
background-size: 120% auto; background-size: 120% auto;
background-position: center 40%; background-position: center 40%;
} }
// Mobile
@media (max-width: 575px) { @media (max-width: 575px) {
background-size: 180% auto; background-size: 180% auto;
background-position: center 50%; background-position: center 50%;
@ -115,10 +117,7 @@ section {
} }
} }
/* ========== Service-Layout ========== */
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
.service-arrow .block { .service-arrow .block {
display: flex; display: flex;
align-items: center; align-items: center;
@ -170,7 +169,6 @@ section {
padding: 0 1rem; padding: 0 1rem;
} }
.service-item-fixed { .service-item-fixed {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
@ -220,8 +218,7 @@ section {
z-index: 2; z-index: 2;
} }
/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */ /* ========== Zusatz-Layouts ========== */
.spacer-lg { .spacer-lg {
height: 0px; height: 0px;
} }
@ -243,9 +240,8 @@ section {
} }
.overlay-text { .overlay-text {
font-size: clamp(2rem, 2vw, 3rem); font-size: clamp(2rem, 2vw, 3rem);
} }
} }
.info-card { .info-card {
@ -271,37 +267,30 @@ section {
} }
} }
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */ /* ========== WHY AMPERION Grid ========== */
.why-grid { .why-grid {
display: grid; display: grid;
gap: 2rem; gap: 2rem;
/* Desktop: 3 Spalten => 3×2 */
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
/* Jede Zeile passt sich der höchsten Karte an */
align-items: stretch; align-items: stretch;
} }
/* Tablet: 2 Spalten => 2×3 */
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.why-grid { .why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
} }
/* Mobil: 1 Spalte => 1×6 */
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.why-grid { .why-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
/* Karten sollen die Zellen voll ausfüllen */
.service-card { .service-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; /* gleiche Höhe pro Zeile */ height: 100%;
background: #fff; background: #fff;
padding: 1.5rem; padding: 1.5rem;
border-radius: 10px; border-radius: 10px;
@ -310,7 +299,6 @@ section {
text-align: center; text-align: center;
} }
/* Icon einheitlich */
.service-icon { .service-icon {
width: 56px; width: 56px;
height: 56px; height: 56px;
@ -319,7 +307,6 @@ section {
display: block; display: block;
} }
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
.service-card-title { .service-card-title {
font-weight: 600; font-weight: 600;
margin: .25rem 0 .5rem; margin: .25rem 0 .5rem;
@ -330,12 +317,19 @@ section {
margin: 0; margin: 0;
} }
/* ========== Container & Layout-Hilfen ========== */ /* ========== Container & Layout ========== */
.my-container { .my-container {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.custom-container {
max-width: 1800px;
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
}
.fixed-width { .fixed-width {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
@ -445,4 +439,92 @@ section {
} }
} }
/* ========== Logo Animation ========== */
.logo-container {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
.frame1 {
flex: 0 0 40%;
display: flex;
justify-content: center;
align-items: center;
}
.frame2 {
flex: 0 0 60%;
display: flex;
justify-content: center;
align-items: center;
}
.banner-logo {
max-width: 100%;
height: auto;
opacity: 0;
}
/* Animationen */
.frame1 .banner-logo {
animation: moveIn 1s forwards;
}
.frame2 .banner-logo {
animation: moveIn 1s 0.5s forwards;
}
@keyframes moveIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in-title {
opacity: 0;
animation: fadeTitle 1.5s forwards 1s;
}
@keyframes fadeTitle {
to { opacity: 1; }
}
@media (max-width: 768px) {
.logo-container {
flex-direction: column;
width: 90%;
}
.frame1, .frame2 {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px;
}
}
/* ========== Body Base (aus style.scss) ========== */
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #ffffff;
margin: 0;
padding: 20px;
}

17
layouts/_default/about.html
View file

@ -4,8 +4,7 @@
<!-- Intro + Mission/Vision Section --> <!-- Intro + Mission/Vision Section -->
{{ with .Params.intro_section }} {{ with .Params.intro_section }}
{{ if .enable }} {{ if .enable }}
<section id="about-intro" class="section py-5"> <section id="about-intro" class="section">
<div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);"> <div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
<!-- ROW 1: TEXT + BILD --> <!-- ROW 1: TEXT + BILD -->
@ -71,7 +70,7 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln --> <!-- AMPERION Mehrwerte -->
<section class="section p-0 m-0" style="background-color: #f7f7f7;"> <section class="section p-0 m-0" style="background-color: #f7f7f7;">
<div class="container text-center mb-5"> <div class="container text-center mb-5">
<h3 class="mb-4"> <h3 class="mb-4">
@ -119,12 +118,12 @@
</div> </div>
</div> </div>
</div> </div>
</section>
<!-- About Section (Gründerteam) --> <!-- About Section (Gründerteam) -->
{{ with .Params.about }} {{ with .Params.about }}
{{ if .enable }} {{ if .enable }}
<section class="about section pt-0"> <section class="about section">
<div class="container-fluid"> <div class="container-fluid">
<!-- Überschrift --> <!-- Überschrift -->
@ -132,9 +131,8 @@
<!-- Zentraler Einleitungstext --> <!-- Zentraler Einleitungstext -->
<p class="text-center px-3" style="margin-bottom: 40px;"> <p class="text-center px-3" style="margin-bottom: 40px;">
Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte. Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
</p> </p>
<div class="row gx-5 gy-5 align-items-center"> <div class="row gx-5 gy-5 align-items-center">
@ -176,10 +174,9 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- Call to Action --> <!-- Call to Action -->
{{ if .Params.cta.enable }} {{ if .Params.cta.enable }}
{{ partial "cta.html" . }} {{ partial "cta.html" . }}
{{ end }} {{ end }}
{{ end }} {{ end }}

85
layouts/index.html
View file

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<header id="mainHeader"> <header id="mainHeader">
{{ with .Params.banner }} {{ with .Params.banner }}
{{ if .enable }} {{ if .enable }}
<!-- HERO / SLIDER --> <!-- HERO / SLIDER -->
@ -8,7 +7,7 @@
style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;"> style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
<div class="my-container" style="position: relative; z-index: 2;"> <div class="my-container" style="position: relative; z-index: 2;">
<!-- *Logo-Zeile mit zwei Frames* --> <!-- Logo-Zeile mit zwei Frames -->
<div class="logo-container"> <div class="logo-container">
<div class="frame1"> <div class="frame1">
<img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo"> <img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
@ -18,7 +17,7 @@
</div> </div>
</div> </div>
<!-- *Haupttitel + Button* --> <!-- Haupttitel + Button -->
<div class="hero-section" style="margin-top: 10rem;"> <div class="hero-section" style="margin-top: 10rem;">
{{ with .title }} {{ with .title }}
<h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1> <h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
@ -45,7 +44,7 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const hero = document.getElementById('hero'); const hero = document.getElementById('hero');
const targetSection = document.getElementById('leistungen'); const targetSection = document.getElementById('leistungen-fokusthemen');
const scrolldown = document.querySelector('.scrolldown'); const scrolldown = document.querySelector('.scrolldown');
const header = document.getElementById('mainHeader'); const header = document.getElementById('mainHeader');
let lastScroll = window.scrollY; let lastScroll = window.scrollY;
@ -61,40 +60,36 @@ document.addEventListener('DOMContentLoaded', function () {
window.scrollTo({ top: y, behavior: 'smooth' }); window.scrollTo({ top: y, behavior: 'smooth' });
// Warte bis Scroll-Animation fertig ist
setTimeout(() => { setTimeout(() => {
isAutoScrolling = false; isAutoScrolling = false;
autoScrollDone = true; autoScrollDone = true;
}, 1000); }, 1000);
} }
// Klick auf Chevron → scrollen // Click handler für Scrolldown
scrolldown?.addEventListener('click', (e) => { scrolldown?.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
scrollToTarget(); scrollToTarget();
}); });
// Scrollrad nach unten → am Ende von Hero → scrollen // Wheel handler für Auto-Scroll am Ende der Hero-Section
let wheelTimeout; let wheelTimeout;
window.addEventListener('wheel', function (e) { window.addEventListener('wheel', function (e) {
// Verhindere Auto-Scroll während manueller Scroll oder wenn bereits ausgeführt
if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return; if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return;
// Debounce wheel events
clearTimeout(wheelTimeout); clearTimeout(wheelTimeout);
wheelTimeout = setTimeout(() => { wheelTimeout = setTimeout(() => {
const heroBottom = hero.getBoundingClientRect().bottom; const heroBottom = hero.getBoundingClientRect().bottom;
const threshold = 50; const threshold = 50;
// Nur wenn wir wirklich am Ende der Hero-Section sind
if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) { if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
scrollToTarget(); scrollToTarget();
} }
}, 50); }, 50);
}, { passive: true }); }, { passive: true });
// Scroll-Verhalten (Chevron + Header + Reset) // Scroll handler für Header und Chevron
let scrollTimeout; let scrollTimeout;
window.addEventListener('scroll', function () { window.addEventListener('scroll', function () {
clearTimeout(scrollTimeout); clearTimeout(scrollTimeout);
@ -114,42 +109,39 @@ document.addEventListener('DOMContentLoaded', function () {
lastScroll = currentScroll; lastScroll = currentScroll;
} }
// Reset der Auto-Scroll-Sperre nur wenn wir wieder komplett im Hero sind // Reset Auto-Scroll wenn zurück im Hero
const heroTop = hero.getBoundingClientRect().top; const heroTop = hero.getBoundingClientRect().top;
const heroBottom = hero.getBoundingClientRect().bottom; const heroBottom = hero.getBoundingClientRect().bottom;
// Nur resetten wenn Hero-Section vollständig sichtbar ist
if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) { if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
autoScrollDone = false; autoScrollDone = false;
} }
}, 10); }, 10);
}); });
// Reset beim Seitenwechsel oder Refresh // Reset beim Seitenwechsel
window.addEventListener('beforeunload', () => { window.addEventListener('beforeunload', () => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });
}); });
</script> </script>
<!-- Leistungen --> <!-- KOMBINIERTE SECTION: Leistungen & Fokusthemen -->
<section id="leistungen" class="section"> <section id="leistungen-fokusthemen" class="section combined-services">
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }} <div class="my-container">
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }}
<div style="margin-top: 5rem;"></div>
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }}
</div>
</section> </section>
<!-- Fokusthemen --> <!-- DARUM AMPERION -->
<section id="fokusthemen" class="section"> <section class="whyamperion section" style="background-color:#f3f3f3;">
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
</section>
<!-- DARUM AMPERION – kompakt & detailliert -->
<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 28rem; padding: 3rem 0;">
<div class="container my-container"> <div class="container my-container">
<!-- Titelblock --> <!-- Titelblock -->
<div class="row"> <div class="row">
<div class="text-center"> <div class="text-center" data-aos="fade-up" data-aos-delay="100">
<h1>Darum AMPERION</h1> <h1>Darum AMPERION</h1>
<h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2> <h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
</div> </div>
@ -157,7 +149,10 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- Karten --> <!-- Karten -->
<div class="why-grid mt-5"> <div class="why-grid mt-5">
<article class="service-card text-center"> {{ $delay := 0 }}
{{ $delayStep := 100 }}
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3"> <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
<h3 class="service-card-title">Technische Planungskompetenz</h3> <h3 class="service-card-title">Technische Planungskompetenz</h3>
<p class="service-card-description"> <p class="service-card-description">
@ -165,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3"> <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
<h3 class="service-card-title">Intelligente Energiesysteme</h3> <h3 class="service-card-title">Intelligente Energiesysteme</h3>
<p class="service-card-description"> <p class="service-card-description">
@ -173,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3"> <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
<h3 class="service-card-title">Persönliche Betreuung</h3> <h3 class="service-card-title">Persönliche Betreuung</h3>
<p class="service-card-description"> <p class="service-card-description">
@ -181,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3"> <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
<h3 class="service-card-title">Reibungslose Projektabwicklung</h3> <h3 class="service-card-title">Reibungslose Projektabwicklung</h3>
<p class="service-card-description"> <p class="service-card-description">
@ -189,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3"> <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
<h3 class="service-card-title">Vernetzte Energiezukunft</h3> <h3 class="service-card-title">Vernetzte Energiezukunft</h3>
<p class="service-card-description"> <p class="service-card-description">
@ -197,7 +192,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3"> <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
<h3 class="service-card-title">Präzise Systemplanung</h3> <h3 class="service-card-title">Präzise Systemplanung</h3>
<p class="service-card-description"> <p class="service-card-description">
@ -205,35 +200,41 @@ document.addEventListener('DOMContentLoaded', function () {
</p> </p>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
<!-- ÜBER AMPERION --> <!-- ÜBER AMPERION -->
{{ with .Params.about }} {{ with .Params.about }}
{{ if .enable }} {{ if .enable }}
<section id="about" class="about section" style="margin-top: 20rem; margin-bottom: 20rem; padding: 3rem 0;"> <section id="about" class="about section">
<div class="container"> <div class="container">
<!-- Titelbereich -->
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
<h1>Über AMPERION</h1> <h1>Über AMPERION</h1>
{{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }} {{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
</div> </div>
</div> </div>
<!-- Inhalt -->
<div class="row mt-4"> <div class="row mt-4">
<div class="col-md-9 col-sm-12">
<!-- Textbereich -->
<div class="col-md-9 col-sm-12" data-aos="fade-right" data-aos-delay="200">
<div class="text-left"> <div class="text-left">
{{ with .content }}{{ . | markdownify }}{{ end }} {{ with .content }}{{ . | markdownify }}{{ end }}
</div> </div>
<div class="hover-link mt-3">
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
</div>
</div> </div>
<div class="col-md-3 col-sm-12">
<!-- Bildbereich -->
<div class="col-md-3 col-sm-12" data-aos="zoom-in" data-aos-delay="300">
<div class="block text-center"> <div class="block text-center">
<img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild"> <img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@ -249,7 +250,7 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- FACTS --> <!-- FACTS -->
{{ with .Params.facts }} {{ with .Params.facts }}
{{ if .enable }} {{ if .enable }}
<section class="facts"> <section class="facts section">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
{{ range .fact_item }} {{ range .fact_item }}
@ -264,4 +265,4 @@ document.addEventListener('DOMContentLoaded', function () {
</section> </section>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}

11
layouts/partials/section-grid.html
View file

@ -1,16 +1,15 @@
{{ with site.GetPage .page }} {{ with site.GetPage .page }}
{{ with .Params.service }} {{ with .Params.service }}
<section class="section">
<div class="my-container"> <div class="my-container">
<div class="section-title text-center"> <div class="section-title text-center">
<h1>{{ .title | markdownify }}</h1> <h1 data-aos="fade-up">{{ .title | markdownify }}</h1>
<h2>{{ .description | markdownify }}</h2> <h2 data-aos="fade-up">{{ .description | markdownify }}</h2>
</div> </div>
<div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}"> <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up">
{{ range .service_item }} {{ range .service_item }}
{{ if eq $.type "zoom" }} {{ if eq $.type "zoom" }}
<div class="service-item zoom-wrap"> <div class= "service-item zoom-wrap" >
<a href="{{ .link | relURL }}"> <a href="{{ .link | relURL }}">
<img src="{{ .picture | relURL }}" alt="{{ .name }}"> <img src="{{ .picture | relURL }}" alt="{{ .name }}">
<div class="overlay"></div> <div class="overlay"></div>
@ -27,6 +26,6 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</section>
{{ end }} {{ end }}
{{ end }} {{ end }}

2
layouts/partials/style.html
View file

@ -13,4 +13,4 @@
{{ end }} {{ end }}
{{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }} {{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }}
{{ $styles := $styles | resources.Concat "/css/style.css" | minify | fingerprint "sha512"}} {{ $styles := $styles | resources.Concat "/css/style.css" | minify | fingerprint "sha512"}}
<style type="text/css">{{$styles.Content | safeCSS}}</style> <link rel="stylesheet" href="{{ $styles.Permalink }}">

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

@ -18,7 +18,7 @@ body {
margin-top: 1rem; } margin-top: 1rem; }
h1 { h1 {
font-size: clamp(2rem, 5vw, 3rem); font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -30,7 +30,7 @@ h1.page-title {
text-transform: capitalize; } text-transform: capitalize; }
h2 { h2 {
font-size: clamp(1.25rem, 2vw, 1.5rem); font-size: clamp(2rem, 3vw, 2.5rem);
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
@ -38,15 +38,16 @@ h2 {
color: #222; } color: #222; }
h3 { h3 {
font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-size: clamp(1.8rem, 1.8vw, 2rem);
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;
margin-bottom: 1rem; margin-bottom: 1rem;
color: inherit; } color: inherit;
color: #F5A623; }
p { p {
font-style: normal; font-style: normal;
font-size: clamp(1.3rem, 1.5vw, 1.4rem); font-size: clamp(1.5rem, 1.5vw, 1.8rem);
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
line-height: 1.6; } line-height: 1.6; }
@ -2522,10 +2523,17 @@ header .navbar-default .navbar-nav li a:hover {
.text-justify { .text-justify {
text-align: justify; } text-align: justify; }
/* ========== Vereinheitlichte Section-Abstände ========== */
section { section {
margin-bottom: 0; } margin-bottom: 0; }
/* ========== Sektionen Padding (Intro etc.) ========== */ .section {
padding-top: 90px;
padding-bottom: 90px;
margin-top: 80px;
margin-bottom: 80px; }
/* Spezielle Section-Anpassungen */
#welcome.section, #welcome.section,
#service.section { #service.section {
padding-top: 90px; padding-top: 90px;
@ -2592,7 +2600,7 @@ section {
@media (max-width: 575px) { @media (max-width: 575px) {
.gif-background::after { .gif-background::after {
background-color: rgba(255, 255, 255, 0.5); } } background-color: rgba(255, 255, 255, 0.5); } }
/* ========== Service-Layout (Kacheln / Pfeile) ========== */ /* ========== Service-Layout ========== */
.service-arrow .block { .service-arrow .block {
display: flex; display: flex;
align-items: center; align-items: center;
@ -2679,7 +2687,7 @@ section {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
z-index: 2; } z-index: 2; }
/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */ /* ========== Zusatz-Layouts ========== */
.spacer-lg { .spacer-lg {
height: 0px; } height: 0px; }
@ -2713,31 +2721,25 @@ section {
font-size: 1rem; font-size: 1rem;
color: #333; } color: #333; }
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */ /* ========== WHY AMPERION Grid ========== */
.why-grid { .why-grid {
display: grid; display: grid;
gap: 2rem; gap: 2rem;
/* Desktop: 3 Spalten => 3×2 */
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
/* Jede Zeile passt sich der höchsten Karte an */
align-items: stretch; } align-items: stretch; }
/* Tablet: 2 Spalten => 2×3 */
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.why-grid { .why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); } } grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobil: 1 Spalte => 1×6 */
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.why-grid { .why-grid {
grid-template-columns: 1fr; } } grid-template-columns: 1fr; } }
/* Karten sollen die Zellen voll ausfüllen */
.service-card { .service-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
/* gleiche Höhe pro Zeile */
background: #fff; background: #fff;
padding: 1.5rem; padding: 1.5rem;
border-radius: 10px; border-radius: 10px;
@ -2745,7 +2747,6 @@ section {
transition: transform .25s ease, box-shadow .25s ease; transition: transform .25s ease, box-shadow .25s ease;
text-align: center; } text-align: center; }
/* Icon einheitlich */
.service-icon { .service-icon {
width: 56px; width: 56px;
height: 56px; height: 56px;
@ -2753,7 +2754,6 @@ section {
margin: 0 auto .75rem auto; margin: 0 auto .75rem auto;
display: block; } display: block; }
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
.service-card-title { .service-card-title {
font-weight: 600; font-weight: 600;
margin: .25rem 0 .5rem; } margin: .25rem 0 .5rem; }
@ -2762,11 +2762,17 @@ section {
line-height: 1.6; line-height: 1.6;
margin: 0; } margin: 0; }
/* ========== Container & Layout-Hilfen ========== */ /* ========== Container & Layout ========== */
.my-container { .my-container {
width: 80%; width: 80%;
margin: 0 auto; } margin: 0 auto; }
.custom-container {
max-width: 1800px;
margin: 0 auto;
padding-left: 30px;
padding-right: 30px; }
.fixed-width { .fixed-width {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; } margin: 0 auto; }
@ -2852,58 +2858,78 @@ section {
@media (min-width: 992px) { @media (min-width: 992px) {
#about-intro .intro-text { #about-intro .intro-text {
font-size: 1.35rem; } } font-size: 1.35rem; } }
/* ========== Call-to-Action ========== */ /* ========== Logo Animation ========== */
.call-to-action.cta-animated { .logo-container {
position: relative; width: 80%;
background-attachment: fixed; margin: 0 auto;
background-size: cover; display: flex;
background-position: center; flex-direction: row;
color: #ffffff; justify-content: center;
padding: 6rem 1rem; } align-items: center;
.call-to-action.cta-animated .overlay-dark { gap: 20px; }
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 0; }
.call-to-action.cta-animated .block {
position: relative;
z-index: 1; }
.call-to-action.cta-animated .cta-title {
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 600;
margin-bottom: 1rem; }
.call-to-action.cta-animated .cta-subtitle {
font-size: clamp(1rem, 2vw, 1.4rem);
max-width: 800px;
margin: 0 auto 2rem auto;
line-height: 1.6; }
.call-to-action.cta-animated .cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap; }
.call-to-action.cta-animated .btn {
padding: 0.9rem 2rem;
font-size: 1rem;
transition: all 0.3s ease; }
.call-to-action.cta-animated .btn:hover {
transform: scale(1.05); }
.fade-in { .frame1 {
opacity: 0; flex: 0 0 40%;
transform: translateY(20px); display: flex;
animation: fadeInUp 1s ease forwards; } justify-content: center;
align-items: center; }
.delay-1 { .frame2 {
animation-delay: 0.2s; } flex: 0 0 60%;
display: flex;
justify-content: center;
align-items: center; }
.delay-2 { .banner-logo {
animation-delay: 0.4s; } max-width: 100%;
height: auto;
opacity: 0; }
@keyframes fadeInUp { /* Animationen */
.frame1 .banner-logo {
animation: moveIn 1s forwards; }
.frame2 .banner-logo {
animation: moveIn 1s 0.5s forwards; }
@keyframes moveIn {
from {
transform: translateX(50px);
opacity: 0; }
to { to {
opacity: 1; transform: translateX(0);
transform: translateY(0); } } opacity: 1; } }
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.fade-in-title {
opacity: 0;
animation: fadeTitle 1.5s forwards 1s; }
@keyframes fadeTitle {
to {
opacity: 1; } }
@media (max-width: 768px) {
.logo-container {
flex-direction: column;
width: 90%; }
.frame1, .frame2 {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px; } }
/* ========== Body Base (aus style.scss) ========== */
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #ffffff;
margin: 0;
padding: 20px; }
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */ /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
.logo-container { .logo-container {