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

Refactor SCSS styles in common and about templates

Browse source 
- 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:
astosic 2025-08-02 01:31:47 +02:00
parent 99b78797b2
commit 30fb9c0827
13 changed files with 288 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

35
assets/scss/custom.scss
View file

@ -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;
}
}
}