forked from markus/AMPERION_Webpage
Refactor SCSS styles in common and about templates
- Removed unused styles and nested selectors from _common.scss to streamline the code. - Cleaned up the .about section in _about.scss by eliminating redundant styles for headings and paragraphs. - Improved overall readability and maintainability of the SCSS files.
This commit is contained in:
parent
99b78797b2
commit
30fb9c0827
13 changed files with 288 additions and 323 deletions
|
|
@ -246,27 +246,6 @@ input[type="tel"] {
|
|||
.title {
|
||||
padding: 20px 0 30px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ h2 {
|
|||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 5rem; // Erhöht den Abstand nach h2
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 4vw, 6rem); // skaliert stark bei kleinen Screens
|
||||
font-weight: 600;
|
||||
font-size: clamp(2.5rem, 4vw, 4rem); // skaliert stark bei kleinen Screens
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
color: #046e6e;
|
||||
word-break: normal;
|
||||
|
|
@ -81,16 +81,37 @@ section {
|
|||
|
||||
.gif-background {
|
||||
background-image: url('/images/BackgroundAnimation.svg');
|
||||
background-size: cover;
|
||||
background-position: center 50%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
// Desktop
|
||||
background-size: cover;
|
||||
background-position: center 50%;
|
||||
|
||||
// Tablet
|
||||
@media (max-width: 991px) {
|
||||
background-size: 120% auto;
|
||||
background-position: center 40%;
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media (max-width: 575px) {
|
||||
background-size: 180% auto;
|
||||
background-position: center 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
@media (max-width: 575px) {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -422,4 +443,6 @@ section {
|
|||
@media (min-width: 992px) {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
// Color Variables
|
||||
$color-primary: #fff;
|
||||
$color-secondary: #0AA8A7;
|
||||
$text-color: #fff;
|
||||
$text-dark: #222;
|
||||
$text-light: #737373;
|
||||
$body-bg: #fff;
|
||||
$border-color: #ECECEC;
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$light: #EDF6F5;
|
||||
{{ with site.Params.variables }}
|
||||
$color-primary: {{.color_primary | default "#fff"}};
|
||||
$color-secondary: {{.color_secondary | default "#0AA8A7"}};
|
||||
$text-color: {{.text_color | default "#fff"}};
|
||||
$text-dark: {{.text_dark | default "#222"}};
|
||||
$text-light: {{.text_light | default "#737373"}};
|
||||
$body-bg: {{.body_color | default "#fff"}};
|
||||
$border-color: {{.border_color | default "#ECECEC"}};
|
||||
$black: {{.black | default "#000"}};
|
||||
$white: {{.white | default "#fff"}};
|
||||
$light: {{.light | default "#EDF6F5"}};
|
||||
|
||||
|
||||
// Font Variables
|
||||
$font-size: 16px;
|
||||
$font-scale: 1.25;
|
||||
$font-primary: 'Lato', sans-serif;
|
||||
$font-secondary: 'Lato', sans-serif;
|
||||
$font-tertiary: 'Dosis', sans-serif;
|
||||
$font-quaternary: 'Edu', sans-serif;
|
||||
$font-size: {{.font_size | default "16px"}};
|
||||
$font-scale: {{.font_scale | default "1.25"}};
|
||||
$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
|
||||
$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
|
||||
$font-tertiary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_tertiary | default "Dosis") "+" " "}}', {{.font_tertiary_type | default "sans-serif"}};
|
||||
$font-quaternary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_quaternary | default "Edu") "+" " "}}', {{.font_quaternary_type | default "sans-serif"}};
|
||||
|
||||
$font-icon: 'Font Awesome 5 Free';
|
||||
$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
|
||||
{{ end }}
|
||||
|
||||
$h1: 80px;
|
||||
$h1-md: 34px;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ h2 {
|
|||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
|
@ -73,9 +72,4 @@ p {
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,10 +109,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
margin-bottom: 10px; /* Passe den Wert nach Bedarf an */
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ about:
|
|||
enable: true
|
||||
title: "ÜBER AMPERION"
|
||||
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||
content: "<b> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </b> <p> 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. <br> <b> Systemisch. Unabhängig. Zukunftsfähig. </b> <br> 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. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. <br><br><b> [MEHR ÜBER UNS](/about/) </b> </p>"
|
||||
content: "<b> AMPERION </b> ist ein <b>staatlich geprüftes Ingenieurbüro</b> und <b> konzessionierter Elektrotechnikbetrieb</b> mit Sitz in Niederösterreich. <p> 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. <br><br><b> Systemisch. Unabhängig. Zukunftsorientiert. </b> <br><br> 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. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. <br><br><b> [MEHR ÜBER UNS](/about/) </b> </p>"
|
||||
image: "images/ingenieurbuero.webp"
|
||||
|
||||
############################# About #################################
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ intro_section:
|
|||
enable: true
|
||||
text: >
|
||||
**AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. <br>
|
||||
|
||||
<br>Wir unterstützen Unternehmen, Gemeinden, Bauträger und Privatpersonen bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit klarem Fokus auf **Photovoltaik**, **Speicherlösungen**, **Ladeinfrastruktur** und **smarte Gebäudetechnik**.<br>
|
||||
|
||||
Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
|
||||
<!-- *Haupttitel + Button* -->
|
||||
<div class="hero-section">
|
||||
<div class="hero-section" style="margin-top: 10rem;">
|
||||
{{ with .title }}
|
||||
<h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
|
||||
{{ end }}
|
||||
|
|
@ -144,7 +144,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
|
||||
<!-- DARUM AMPERION – kompakt & detailliert -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 5rem; padding: 3rem 0;">
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 28rem; padding: 3rem 0;">
|
||||
<div class="container my-container">
|
||||
|
||||
<!-- Titelblock -->
|
||||
|
|
@ -212,12 +212,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
<!-- ÜBER AMPERION -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section" style="margin-top: 5rem; padding: 3rem 0;">
|
||||
<section id="about" class="about section" style="margin-top: 20rem; margin-bottom: 20rem; padding: 3rem 0;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1>Über AMPERION</h1>
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
{{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
.fade-in {
|
||||
animation: fadeInUp 1s ease-out
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -250,35 +250,8 @@ input[type="tel"] {
|
|||
|
||||
.title {
|
||||
padding: 20px 0 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 70px;
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin: 0px;
|
||||
padding: 30px 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-style: italic;
|
||||
color: darken( $light, 57.64);
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section-subtitle {
|
||||
|
|
@ -303,13 +276,6 @@ input[type="tel"] {
|
|||
.block {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $white;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.15em;
|
||||
margin-top: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
|
|
@ -321,20 +287,6 @@ input[type="tel"] {
|
|||
.heading {
|
||||
padding-bottom: 60px;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
color: $black;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
color: lighten( $black, 16.078);
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,5 @@
|
|||
.about{
|
||||
.block{
|
||||
h2 {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 0px;
|
||||
line-height:28px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.about-img {
|
||||
overflow:hidden;
|
||||
|
|
@ -35,7 +14,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue