mw/satware.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive styles and improve FAQ script handling

Browse Source 
Introduced mobile and medium responsiveness in stylesheets for better layout on smaller screens. Adjusted FAQ script to properly remove duplicate event listeners and ensure functionality remains smooth on initialization.
This commit is contained in:
tfw
2025-05-08 16:04:42 +02:00
parent d36051a03d
commit 1717057e56
30 changed files with 510 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/stylesheets/modules/header.scss
+6 -3
View File
@@ -21,9 +21,12 @@ body{
}
/* Für den Fall, dass du die Seitenleiste verwendest */
.md-sidebar {
top: 0 !important;
height: auto !important;
@media (min-width: 768px){
.md-sidebar {
top: 0 !important;
height: auto !important;
}
}
label.md-search__icon.md-icon {
docs/stylesheets/modules/home.scss
+45 -24
View File
@@ -12,21 +12,16 @@
margin-top: 7rem;
.entry-text{
font-size: 1.5rem;
line-height: 2.2rem;
padding-bottom: 1.6rem;
padding-top: 1.6rem;
}
//@include ohne-balken;
.entry-text{
font-size: 1.5rem;
line-height: 2.2rem;
padding-bottom: 1.6rem;
padding-top: 1.6rem;
}
h1{
//font-size: 6rem;
margin-bottom: 1.75rem;
text-align: left;
//line-height: 114%;
&:after{
height: 12px;
width: 85px;
@@ -41,10 +36,7 @@
margin-bottom: 0;
}
//text-align: center;
.screenshot-container{
text-align: center;
}
@@ -52,7 +44,6 @@
border: 1px solid var(--md-primary-fg-color--light);
width: 100%;
}
}
.satag--home-companies{
@@ -73,21 +64,34 @@
margin: 0 auto;
}
//@include ohne-balken;
text-align: center;
.satag--home-companies-logo-container{
display: flex;
max-width: 61rem;
margin: 0 auto;
flex-wrap: wrap; // Erlaubt Umbruch bei kleinen Bildschirmen
.satag--home-companies-logo{
flex: auto;
flex: 0 0 25%;
img{
width: 80%;
float:left;
}
}
// Responsive Anpassung für die Logos
@media screen and (max-width: 768px) {
.satag--home-companies-logo {
flex: 0 0 50%; // 2 Logos pro Zeile
margin-bottom: 1rem;
}
}
@media screen and (max-width: 480px) {
.satag--home-companies-logo {
flex: 0 0 100%; // 1 Logo pro Zeile
}
}
}
}
@@ -95,7 +99,6 @@
width: 100%;
h2{
padding-bottom: 1rem;
}
@@ -105,9 +108,13 @@
text-align: center;
.satag--home-counters-container{
display: flex;
flex-wrap: wrap; // Erlaubt Umbruch bei kleinen Bildschirmen
.satag--home-counter{
flex: auto;
flex: 1 0 auto;
display: block;
padding: 1rem;
.satag--home-counter-icon{
display: block;
font-size: 2rem;
@@ -120,9 +127,21 @@
line-height: 1.6;
}
}
// Responsive Breakpoints für die Counter
@media screen and (max-width: 768px) {
.satag--home-counter {
flex: 0 0 50%; // 2 Counter pro Zeile
}
}
@media screen and (max-width: 480px) {
.satag--home-counter {
flex: 0 0 100%; // 1 Counter pro Zeile
}
}
}
}
}
body{
@@ -135,12 +154,14 @@ body{
background-size: 60%;
background-position-y: 2rem;
.md-header, .md-tabs {
background-color: transparent;
box-shadow: none;
}
// Responsive Anpassung für den Hintergrund
@media screen and (max-width: 768px) {
background-size: 100%;
}
}
}
}
docs/stylesheets/modules/testimonials.scss
+90 -22
View File
@@ -1,8 +1,8 @@
// Testimonials Section
.satag--home-testimonials-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
h2 {
text-align: left;
@@ -31,6 +31,10 @@
@media (min-width: 768px) {
flex: 0 0 60%;
}
@media (max-width: 767px) {
min-height: 400px; // Mehr Platz für den Text auf mobilen Geräten
}
}
.satag--home-testimonials-text {
@@ -48,38 +52,61 @@
}
blockquote {
font-style: normal;
margin-bottom: 1.5rem;
color: #fff;
border-left: none !important;
//border-left: 4px solid var(--md-primary-fg-color, #9c27b0);
padding-left: 0 !important;
//font-size: 1.2rem;
//line-height: 2rem;
//padding-bottom: 1.6rem;
//padding-top: 1.6rem;
@media (max-width: 767px) {
font-size: 1rem; // Etwas kleinere Schrift auf mobilen Geräten
line-height: 1.5;
margin-top: 70px; // Platz für das Logo über dem Text
}
}
}
.satag--home-testimonial-author {
margin-top: 1rem;
@media (max-width: 767px) {
margin-top: 1.5rem; // Mehr Abstand nach oben auf mobilen Geräten
margin-bottom: 2rem; // Mehr Abstand nach unten auf mobilen Geräten
}
}
.satag--home-testimonial-text-logo{
.satag--home-testimonial-text-logo {
max-width: 120px !important;
filter: grayscale(1);
@media (max-width: 767px) {
display: none;
position: absolute;
top: 0;
left: 0;
max-width: 80px !important; // Kleineres Logo
margin-bottom: 1rem;
}
}
.satag--home-testimonial-name {
font-weight: bold;
margin-bottom: 0.25rem;
@media (max-width: 767px) {
font-size: 1.2rem; // Größerer Name auf mobilen Geräten
margin-bottom: 0.1rem;
}
}
.satag--home-testimonial-title {
font-size: 0.9rem;
color: #666;
@media (max-width: 767px) {
font-size: 1rem; // Etwas größerer Titel auf mobilen Geräten
margin-top: 0; // Kein negativer Abstand mehr
}
}
// Bilder-Container (rechts)
@@ -92,6 +119,22 @@
flex: 0 0 40%;
justify-content: flex-end;
}
@media (max-width: 767px) {
flex-wrap: nowrap; // Keine Umbrüche, damit die Bilder horizontal scrollbar sind
overflow-x: auto; // Horizontales Scrollen ermöglichen
-webkit-overflow-scrolling: touch; // Für besseres Scrolling auf iOS
scrollbar-width: none; // Firefox: Scrollbar ausblenden
-ms-overflow-style: none; // IE/Edge: Scrollbar ausblenden
padding-bottom: 1rem; // Platz für die Scrollbar
margin-top: 1rem; // Weniger Abstand nach oben
justify-content: flex-start; // Links ausrichten
// Webkit: Scrollbar ausblenden
&::-webkit-scrollbar {
display: none;
}
}
}
.satag--home-testimonial-image-wrapper {
@@ -103,21 +146,19 @@
opacity: 0.6;
transition: all 0.3s ease;
border: 1px solid transparent;
border-radius: 0; // Leicht abgerundete Ecken statt Kreis
border-radius: 0;
border-color: var(--md-primary-fg-color--dark);
img{
filter: grayscale(1);
//@include transition;
}
img {
filter: grayscale(1);
}
&.active {
opacity: 1;
border-color: var(--md-primary-fg-color, #9c27b0);
transform: scale(1.05);
img{
img {
filter: grayscale(0);
//@include transition;
}
}
@@ -126,8 +167,14 @@
}
@media (max-width: 767px) {
width: 100px;
height: 150px;
width: 120px; // Etwas größer als zuvor
height: 180px; // Etwas größer als zuvor
flex: 0 0 auto; // Verhindert Schrumpfen
margin-right: 0.5rem; // Abstand zwischen den Bildern
&:last-child {
margin-right: 1rem; // Extra Platz am Ende für besseres Scrollen
}
}
}
@@ -156,15 +203,36 @@
img {
max-width: 60px;
}
@media (max-width: 767px) {
bottom: 15px; // Näher am unteren Rand
width: 30px; // Etwas kleiner
height: 30px; // Etwas kleiner
background: rgba(0, 0, 0, 0.5); // Halbdurchsichtiger Hintergrund für bessere Sichtbarkeit
img {
max-width: 40px;
}
}
}
// Responsive Anpassungen
@media (max-width: 767px) {
.satag--home-testimonials-text-container {
min-height: 300px;
// Verbessertes Layout für mobile Geräte
.satag--home-testimonials-container {
h2 {
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
}
.satag--home-testimonials-images {
flex-wrap: wrap;
// Entfernung der Scrollklasse für die Bilder
.satag--home-testimonials-images.scroll {
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
}