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

Refactor SCSS and HTML for improved layout, styling, and responsiveness in various sections

Browse source
This commit is contained in:
astosic 2025-08-09 00:49:35 +02:00
parent d9e98dcf01
commit b62687cac4
5 changed files with 482 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

80
layouts/index.html
View file

@ -127,16 +127,21 @@ document.addEventListener('DOMContentLoaded', function () {
</script>
<!-- KOMBINIERTE SECTION: Leistungen & Fokusthemen -->
<section id="leistungen-fokusthemen" class="section combined-services">
<section id="leistungen-fokusthemen" class="section combined-services " style="background-color:#f3f3f3;">
<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 class="grid-section services-grid" data-aos="fade-up" data-aos-delay="50">
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }}
</div>
<div class="grid-spacer" aria-hidden="true"></div>
<div class="grid-section focus-grid" data-aos="fade-up" data-aos-delay="100">
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }}
</div>
</div>
</section>
<!-- DARUM AMPERION -->
<section class="whyamperion section" style="background-color:#f3f3f3;">
<section class="whyamperion section">
<div class="container my-container">
<!-- Titelblock -->
@ -201,13 +206,47 @@ document.addEventListener('DOMContentLoaded', function () {
</article>
</div>
</div>
<!-- Affiliations / Verbände unterhalb der Cards -->
<div class="darum-aff-row" data-aos="fade-up" data-aos-delay="100">
<!-- Linker Block: Ingenieurbüros + Co. -->
<div class="aff-group aff-left">
<div class="aff-logos">
<!-- Deine Logos hier (Beispiele) -->
<img src="images/logo-fusszeile-mitglieder-2018.webp" alt="Ingenieurbüros Österreich">
</div>
</div>
<!-- Rechter Block: PV Austria (klickbar) -->
<a class="aff-group aff-right"
href="https://pvaustria.at/"
target="_blank"
rel="noopener external nofollow"
aria-label="Photovoltaic Austria – Website öffnen"
title="Photovoltaic Austria">
<p class="aff-text">
AMPERION ist Mitglied bei Photovoltaic Austria und bietet normgerechte Planung, herstellerunabhängige Beratung und praxisnahe Innovation –
damit jedes Projekt technisch, wirtschaftlich und langfristig überzeugt.
</p>
<img src="/images/mitglied-photovoltaic-austria.png" alt="Mitglied bei Photovoltaic Austria" class="aff-pva-logo">
</a>
</div>
</div>
</section>
<!-- ÜBER AMPERION -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section">
<section id="about" class="about section" style="background-color:#f3f3f3">
<div class="container">
<!-- Titelbereich -->
@ -219,20 +258,19 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
<!-- Inhalt -->
<div class="row mt-4 d-flex align-items-stretch" style="min-height: 400px;">
<div class="row mt-4 d-flex align-items-stretch about-row">
<!-- Textbereich -->
<div class="col-md-7 col-sm-12 d-flex h-100" data-aos="fade-right" data-aos-delay="200">
<div class="text-left w-100 my-auto"> <!-- vertikal zentriert -->
<div class="text-left w-100 my-auto">
{{ with .content }}{{ . | markdownify }}{{ end }}
</div>
</div>
<!-- Bildbereich -->
<div class="col-md-5 col-sm-12 d-flex h-100" data-aos="zoom-in" data-aos-delay="300">
<div class="w-100 d-flex align-items-end" style="padding-top: 30px;"> <!-- Bild etwas nach unten -->
<img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild"
style="width: 100%; height: auto; object-fit: contain;">
<div class="about-image-wrap">
<img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
</div>
</div>
@ -244,28 +282,8 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- CALL TO ACTION -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- FACTS -->
{{ with .Params.facts }}
{{ if .enable }}
<section class="facts section">
<div class="container">
<div class="row">
{{ range .fact_item }}
<div class="col-md-6">
<div class="fact-item text-center">
<img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
</div>
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
{{ end }}
{{ end }}