forked from markus/AMPERION_Webpage
astosic
30fb9c0827
- 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.
75 lines
1.1 KiB
SCSS
75 lines
1.1 KiB
SCSS
.about{
|
|
.block{
|
|
h1 {
|
|
font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: 1rem;
|
|
color: #046e6e;
|
|
}
|
|
|
|
h1.page-title {
|
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
|
margin-top: 2rem;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
|
|
h2 {
|
|
font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
color: #222;
|
|
}
|
|
|
|
|
|
h3 {
|
|
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
|
|
font-weight: normal;
|
|
line-height: 1.6;
|
|
margin-bottom: 1rem;
|
|
color: inherit;
|
|
}
|
|
|
|
p {
|
|
font-style: normal;
|
|
font-size: clamp(1.3rem, 1.5vw, 1.4rem);
|
|
margin-bottom: 1.25rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.about-img {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
transition: opacity 0.5s ease-out;
|
|
}
|
|
|
|
.hover-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-out;
|
|
}
|
|
|
|
&:hover .hover-img {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:hover img {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|