From 5083ef7e3cdbbb50dc1bcc873abe55aeeaa1e464 Mon Sep 17 00:00:00 2001 From: astosic Date: Sat, 9 Aug 2025 12:38:57 +0200 Subject: [PATCH] Refactor SCSS and HTML for improved layout, typography, and call-to-action sections --- assets/scss/custom.scss | 115 +++++++++++- content/german/_index.md | 3 +- deploy.ps1 | 0 layouts/index.html | 50 +++++- layouts/partials/cta.html | 27 --- ...s_d9077b5cab49df084fb1a39ad4b1e75d.content | 168 +++++++++++++++++- 6 files changed, 328 insertions(+), 35 deletions(-) create mode 100644 deploy.ps1 delete mode 100644 layouts/partials/cta.html diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 57c5213..64c74fe 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -6,7 +6,7 @@ } .hero-title { - font-size: clamp(2.5rem, 4vw, 4rem); + font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 400; line-height: 1.2; color: #046e6e; @@ -290,7 +290,7 @@ section { cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */ } -/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */ +/* dezentes Hover-Feedback */ .service-card::after { content: ''; position: absolute; inset: 0; @@ -409,6 +409,22 @@ section { } } +.about-cta { + color: #046e6e; /* Türkis */ + font-weight: 700; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: color 0.2s ease, border-color 0.2s ease; +} + +.about-cta:hover, +.about-cta:focus { + color: #F5A623; /* Orange */ + border-bottom-color: #F5A623; +} + + + /* ========== Mehrwerte ========== */ .mehrwerte-grid { display: grid; @@ -719,3 +735,98 @@ body { outline:2px dashed var(--amp-accent); outline-offset:4px; } + +/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */ +.cta { + --cta-primary: #046e6e; /* Türkis */ + --cta-accent: #F5A623; /* Orange */ + + /* Button-Preset (hier zentral Größe steuern) */ + --btn-py: clamp(2rem, 2.8vw, 3rem); /* oben/unten -> Höhe */ + --btn-px: clamp(2rem, 3.6vw, 3em); /* links/rechts -> Breite (em skaliert mit Schriftgröße) */ + --btn-fs: clamp(2rem, 2vw, 3rem); /* Schriftgröße */ + + position: relative; + overflow: hidden; + padding: clamp(6rem, 10vw, 12rem) 0; /* Section höher wie „Standard-Sektion“ */ + background: #f3f3f3; +} + +/* Hintergrund dezent + optional animiert */ +.cta__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } +.cta__grad { position: absolute; inset: 0; background: linear-gradient(180deg,#fff,#f6f9f9,#fff); } +@keyframes cta-pan { from { background-position: 0% 0%; } to { background-position: 200% 200%; } } +.cta__pan { + position: absolute; inset: 0; opacity: .08; background-size: 200% 200%; + background-image: + radial-gradient(40% 40% at 20% 10%, rgba(4,110,110,.25), transparent 60%), + radial-gradient(35% 35% at 85% 35%, rgba(245,166,35,.25), transparent 55%); + animation: cta-pan 24s linear infinite; +} +@media (prefers-reduced-motion: reduce) { .cta__pan { animation: none !important; } } + +.cta .my-container { position: relative; z-index: 1; } +.cta__wrap { text-align: center; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); } + +/* Große Typografie */ +.cta__title { + margin: 0; + color: var(--cta-primary); + font-weight: 700; + letter-spacing: .2px; + font-size: clamp(2.2rem, 4.8vw, 3.6rem); +} +.cta__lead { + margin: .9rem auto 0; + color: #0f172a; + font-size: clamp(1.2rem, 2.8vw, 1.7rem); + line-height: 1.55; + max-width: 58rem; +} +.cta__accent { color: var(--cta-accent); font-weight: 700; } + +/* Buttons – deutlich größer */ +.cta__actions { + display: flex; flex-wrap: wrap; justify-content: center; + gap: clamp(1rem, 2.4vw, 1.6rem); + margin-top: clamp(1.4rem, 3vw, 2.2rem); +} +.cta__btn { + display: inline-flex; align-items: center; gap: .7rem; + padding: var(--btn-py) var(--btn-px); + border-radius: 9999px; + background: #fff; color: var(--cta-primary); + border: 1px solid rgba(0,0,0,.06); + box-shadow: 0 1px 3px rgba(0,0,0,.06); + text-decoration: none; font-weight: 700; + font-size: var(--btn-fs); + transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease; +} +.cta__btn:hover { + background: var(--cta-accent); /* Hover = Orange */ + color: #fff; + box-shadow: 0 8px 22px rgba(245,166,35,.35); +} +.cta__btn:active { transform: translateY(1px); } +.cta__btn:focus-visible { outline: 2px dashed var(--cta-accent); outline-offset: 3px; } + +/* Social-Icons (etwas größer, Teal-Hover) */ +.cta__social { + display: flex; justify-content: center; + gap: clamp(.9rem, 2vw, 1.2rem); + margin-top: clamp(1.2rem, 2.4vw, 1.6rem); +} +.cta__social-link { + width: clamp(56px, 6.2vw, 64px); height: clamp(56px, 6.2vw, 64px); + display: inline-flex; align-items: center; justify-content: center; + background: #fff; border-radius: 9999px; + box-shadow: 0 1px 3px rgba(0,0,0,.06); + transition: background .2s ease, box-shadow .2s ease, transform .04s ease; + text-decoration: none; +} +.cta__social-link:hover { background: var(--cta-accent); box-shadow: 0 6px 16px rgba(4,110,110,.25); } +.cta__social-link:active { transform: translateY(1px); } +.cta__social-link img { + width: clamp(24px, 3vw, 28px); height: auto; display: block; transition: filter .2s ease; +} +.cta__social-link:hover img { filter: invert(1); } diff --git a/content/german/_index.md b/content/german/_index.md index a590ac2..e545c7c 100644 --- a/content/german/_index.md +++ b/content/german/_index.md @@ -24,7 +24,7 @@ about: enable: true title: "ÜBER AMPERION" description: "Technik mit Verantwortung. Planung mit Weitblick." - content: " AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich.

Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik.

Systemisch. Unabhängig. Zukunftsorientiert.

Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben.
Mit technischem Know-how, Verantwortungsbewusstsein und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme.

[MEHR ÜBER UNS](/about/)

" + content: " AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich.

Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik.

Systemisch. Unabhängig. Zukunftsorientiert.

Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben.
Mit technischem Know-how, Verantwortungsbewusstsein und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme.

" image: "images/ingenieurbuero.svg" ############################# About ################################# @@ -74,6 +74,7 @@ cta: enable: true label: "Kontaktinformation" link: "contact/" + ############################# facts ############################### facts: enable: true diff --git a/deploy.ps1 b/deploy.ps1 new file mode 100644 index 0000000..e69de29 diff --git a/layouts/index.html b/layouts/index.html index dc4c9c7..ad10c8a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -261,18 +261,21 @@ document.addEventListener('DOMContentLoaded', function () {
-
+
{{ with .content }}{{ . | markdownify }}{{ end }}
+ MEHR ÜBER UNS
+ -
+
Über AMPERION Bild
+
@@ -283,7 +286,48 @@ document.addEventListener('DOMContentLoaded', function () { +{{ $impressum := site.GetPage "page" "impressum" }} + {{ if .Params.cta.enable }} -{{ partial "cta.html" . }} +
+ + + +
+
+

+ Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen. +

+

+ Bereit für Ihr Energieprojekt? + Kostenfreie Erstberatung sichern! +

+ +
+ + E-Mail senden + + + Anrufen + +
+ + +
+
+
{{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/cta.html b/layouts/partials/cta.html deleted file mode 100644 index b1e37d3..0000000 --- a/layouts/partials/cta.html +++ /dev/null @@ -1,27 +0,0 @@ -{{ $impressum := site.GetPage "page" "impressum" }} - -{{ with site.GetPage "/" }} -{{ with .Params.cta }} -
-
-
-
-
-
- {{ with .title }}

{{ . | markdownify }}

{{ end }} - {{ with .content }}

{{ . | markdownify }}

{{ end }} - {{ with .button }} - {{ if .enable }} - E-mail - -
- TELEFON - {{ end }} - {{ end }} -
-
-
-
-
-{{ end }} -{{ end }} diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content index 7e65b6b..5b9bb0b 100644 --- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content +++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content @@ -2510,7 +2510,7 @@ header .navbar-default .navbar-nav li a:hover { padding: 0 1rem; } .hero-title { - font-size: clamp(2.5rem, 4vw, 4rem); + font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 400; line-height: 1.2; color: #046e6e; @@ -2750,7 +2750,7 @@ section { cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */ } -/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */ +/* dezentes Hover-Feedback */ .service-card::after { content: ''; position: absolute; @@ -2866,6 +2866,20 @@ section { .hover-link:hover { color: #F5A623; } +.about-cta { + color: #046e6e; + /* Türkis */ + font-weight: 700; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: color 0.2s ease, border-color 0.2s ease; } + +.about-cta:hover, +.about-cta:focus { + color: #F5A623; + /* Orange */ + border-bottom-color: #F5A623; } + /* ========== Mehrwerte ========== */ .mehrwerte-grid { display: grid; @@ -3133,6 +3147,156 @@ body { outline: 2px dashed var(--amp-accent); outline-offset: 4px; } +/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */ +.cta { + --cta-primary: #046e6e; + /* Türkis */ + --cta-accent: #F5A623; + /* Orange */ + /* Button-Preset (hier zentral Größe steuern) */ + --btn-py: clamp(2rem, 2.8vw, 3rem); + /* oben/unten -> Höhe */ + --btn-px: clamp(2rem, 3.6vw, 3em); + /* links/rechts -> Breite (em skaliert mit Schriftgröße) */ + --btn-fs: clamp(2rem, 2vw, 3rem); + /* Schriftgröße */ + position: relative; + overflow: hidden; + padding: clamp(6rem, 10vw, 12rem) 0; + /* Section höher wie „Standard-Sektion“ */ + background: #f3f3f3; } + +/* Hintergrund dezent + optional animiert */ +.cta__bg { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; } + +.cta__grad { + position: absolute; + inset: 0; + background: linear-gradient(180deg, #fff, #f6f9f9, #fff); } + +@keyframes cta-pan { + from { + background-position: 0% 0%; } + to { + background-position: 200% 200%; } } + +.cta__pan { + position: absolute; + inset: 0; + opacity: .08; + background-size: 200% 200%; + background-image: radial-gradient(40% 40% at 20% 10%, rgba(4, 110, 110, 0.25), transparent 60%), radial-gradient(35% 35% at 85% 35%, rgba(245, 166, 35, 0.25), transparent 55%); + animation: cta-pan 24s linear infinite; } + +@media (prefers-reduced-motion: reduce) { + .cta__pan { + animation: none !important; } } + +.cta .my-container { + position: relative; + z-index: 1; } + +.cta__wrap { + text-align: center; + max-width: 72rem; + margin: 0 auto; + padding: 0 clamp(1rem, 3vw, 2rem); } + +/* Große Typografie */ +.cta__title { + margin: 0; + color: var(--cta-primary); + font-weight: 700; + letter-spacing: .2px; + font-size: clamp(2.2rem, 4.8vw, 3.6rem); } + +.cta__lead { + margin: .9rem auto 0; + color: #0f172a; + font-size: clamp(1.2rem, 2.8vw, 1.7rem); + line-height: 1.55; + max-width: 58rem; } + +.cta__accent { + color: var(--cta-accent); + font-weight: 700; } + +/* Buttons – deutlich größer */ +.cta__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: clamp(1rem, 2.4vw, 1.6rem); + margin-top: clamp(1.4rem, 3vw, 2.2rem); } + +.cta__btn { + display: inline-flex; + align-items: center; + gap: .7rem; + padding: var(--btn-py) var(--btn-px); + border-radius: 9999px; + background: #fff; + color: var(--cta-primary); + border: 1px solid rgba(0, 0, 0, 0.06); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + text-decoration: none; + font-weight: 700; + font-size: var(--btn-fs); + transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease; } + +.cta__btn:hover { + background: var(--cta-accent); + /* Hover = Orange */ + color: #fff; + box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); } + +.cta__btn:active { + transform: translateY(1px); } + +.cta__btn:focus-visible { + outline: 2px dashed var(--cta-accent); + outline-offset: 3px; } + +/* Social-Icons (etwas größer, Teal-Hover) */ +.cta__social { + display: flex; + justify-content: center; + gap: clamp(0.9rem, 2vw, 1.2rem); + margin-top: clamp(1.2rem, 2.4vw, 1.6rem); } + +.cta__social-link { + width: clamp(56px, 6.2vw, 64px); + height: clamp(56px, 6.2vw, 64px); + display: inline-flex; + align-items: center; + justify-content: center; + background: #fff; + border-radius: 9999px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + transition: background .2s ease, box-shadow .2s ease, transform .04s ease; + text-decoration: none; } + +.cta__social-link:hover { + background: var(--cta-accent); + box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25); } + +.cta__social-link:active { + transform: translateY(1px); } + +.cta__social-link img { + width: clamp(24px, 3vw, 28px); + height: auto; + display: block; + transition: filter .2s ease; } + +.cta__social-link:hover img { + filter: invert(1); } + +/* Optional: Wenn du Social-Hover auch Orange willst, tausche oben var(--cta-primary) -> var(--cta-accent) */ /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */ .logo-container { width: 80%;