Add responsive styles and improve FAQ script handling
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:
File diff suppressed because one or more lines are too long
+83
-70
@@ -17,7 +17,12 @@
|
||||
@import 'modules/testimonials';
|
||||
@import "modules/faq";
|
||||
|
||||
@mixin transition{
|
||||
//Responsive Design
|
||||
|
||||
@import "responsive/medium";
|
||||
@import "responsive/mobile";
|
||||
|
||||
@mixin transition {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
@@ -32,6 +37,7 @@
|
||||
src: url('../assets/fonts/assistant-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('../assets/fonts/assistant-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
/* assistant-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
@@ -41,6 +47,7 @@
|
||||
src: url('../assets/fonts/assistant-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('../assets/fonts/assistant-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
/* assistant-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
@@ -51,11 +58,12 @@
|
||||
url('../assets/fonts/assistant-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
html{
|
||||
html {
|
||||
|
||||
font-size: 100% !important;
|
||||
|
||||
}
|
||||
|
||||
// Schriftart auf "Assistant" setzen
|
||||
:root {
|
||||
--md-text-font: "Assistant";
|
||||
@@ -71,13 +79,13 @@ html{
|
||||
--md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
|
||||
|
||||
// Primär- und Akzentfarben gemäß satware CI
|
||||
--md-primary-fg-color: #521370; // Primärfarbe: satware Violett
|
||||
--md-primary-fg-color--light: #7e3a9e; // Helle Variante
|
||||
--md-primary-fg-color--dark: #3c0e52; // Dunkle Variante
|
||||
--md-accent-fg-color: #8a44bd; // Akzentfarbe: Helleres Violett
|
||||
--md-primary-fg-color: #521370; // Primärfarbe: satware Violett
|
||||
--md-primary-fg-color--light: #7e3a9e; // Helle Variante
|
||||
--md-primary-fg-color--dark: #3c0e52; // Dunkle Variante
|
||||
--md-accent-fg-color: #8a44bd; // Akzentfarbe: Helleres Violett
|
||||
|
||||
// Link-Farbe anpassen
|
||||
--md-typeset-a-color: #9d65cf; // Helleres Violett für Links
|
||||
--md-typeset-a-color: #9d65cf; // Helleres Violett für Links
|
||||
}
|
||||
|
||||
.md-search__scrollwrap {
|
||||
@@ -88,6 +96,7 @@ html{
|
||||
background: var(--md-primary-fg-color);;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--md-primary-fg-color);;
|
||||
color: #fff;
|
||||
@@ -109,28 +118,29 @@ html{
|
||||
}
|
||||
|
||||
|
||||
|
||||
body{
|
||||
body {
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
|
||||
.md-typeset,
|
||||
.md-nav{
|
||||
.md-nav {
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
a{
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h1,h2,h3{
|
||||
&:after{
|
||||
h1, h2, h3 {
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
@@ -145,8 +155,9 @@ h1,h2,h3{
|
||||
.md-typeset ul {
|
||||
list-style-type: none;
|
||||
padding: 0 0 0 2rem;
|
||||
li{
|
||||
&:before{
|
||||
|
||||
li {
|
||||
&:before {
|
||||
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
@@ -168,23 +179,24 @@ h1,h2,h3{
|
||||
}
|
||||
|
||||
.md-typeset h1,
|
||||
h1{
|
||||
h1 {
|
||||
color: #fff;
|
||||
margin-bottom: 1.75rem;
|
||||
text-align: left;
|
||||
font-size: 8rem;
|
||||
line-height: 1.1;
|
||||
|
||||
a.headerlink{
|
||||
a.headerlink {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2{
|
||||
h2 {
|
||||
line-height: 3rem;
|
||||
font-size: 2.7rem;
|
||||
&:after{
|
||||
|
||||
&:after {
|
||||
margin-top: .6rem;
|
||||
height: 7px;
|
||||
width: 50px;
|
||||
@@ -193,11 +205,11 @@ h2{
|
||||
}
|
||||
|
||||
.md-typeset h3,
|
||||
h3{
|
||||
h3 {
|
||||
|
||||
font-size: 2.1rem;
|
||||
|
||||
&:after{
|
||||
&:after {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
height: 4px;
|
||||
@@ -209,21 +221,21 @@ h3{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-tabs{
|
||||
.md-tabs {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-tabs__item{
|
||||
.md-tabs__item {
|
||||
|
||||
&:after{
|
||||
&:after {
|
||||
opacity: 0;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
transition: .3s all ease;
|
||||
|
||||
&:after{
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
@@ -239,81 +251,80 @@ h3{
|
||||
|
||||
}
|
||||
|
||||
&.md-tabs__item--active{
|
||||
&.md-tabs__item--active {
|
||||
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 22px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 1;
|
||||
transition: .3s all ease;
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 22px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 1;
|
||||
transition: .3s all ease;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-tabs__list{
|
||||
.md-tabs__list {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.md-tabs__link{
|
||||
.md-tabs__link {
|
||||
opacity: 1;
|
||||
font-size: 1.2rem;
|
||||
|
||||
}
|
||||
|
||||
.md-search__form{
|
||||
.md-search__form {
|
||||
input::placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.md-search-result__meta{
|
||||
.md-search-result__meta {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.md-source-file{
|
||||
.md-source-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-grid{
|
||||
.md-grid {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.satag--padding-container{
|
||||
.satag--padding-container {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
a.headerlink{
|
||||
a.headerlink {
|
||||
color: var(--md-primary-fg-color) !important;
|
||||
}
|
||||
|
||||
.satag-trademark{
|
||||
.satag-trademark {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.md-header,
|
||||
.md-tabs{
|
||||
.md-tabs {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.md-tabs__item{
|
||||
.md-tabs__item {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.md-search__input{
|
||||
.md-search__input {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
@@ -321,9 +332,9 @@ a.headerlink{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-search-result__list{
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
&:after{
|
||||
.md-search-result__list {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@@ -336,7 +347,7 @@ a.headerlink{
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.md-search-result__meta{
|
||||
.md-search-result__meta {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
@@ -345,15 +356,15 @@ a.headerlink{
|
||||
}
|
||||
|
||||
|
||||
.satag--webinar-form-container{
|
||||
#nextcloud-form{
|
||||
.satag--webinar-form-container {
|
||||
#nextcloud-form {
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: 3500px;
|
||||
transition: height .3s ease;
|
||||
color-scheme: dark;
|
||||
|
||||
.ng-csp{
|
||||
.ng-csp {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
}
|
||||
@@ -372,16 +383,16 @@ a.headerlink{
|
||||
padding-top: .6rem;
|
||||
}
|
||||
|
||||
.md-footer-meta.md-typeset a{
|
||||
.md-footer-meta.md-typeset a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-footer-meta {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Füge zusätzliche Navigation im Footer hinzu
|
||||
// Füge zusätzliche Navigation im Footer hinzu
|
||||
.md-footer-custom-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -406,22 +417,22 @@ a.headerlink{
|
||||
color: #e2e2e2;
|
||||
}
|
||||
|
||||
.md-nav__container>.md-nav__link:first-child {
|
||||
.md-nav__container > .md-nav__link:first-child {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.md-nav__title{
|
||||
.md-nav__title {
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-search__form{
|
||||
.md-search__form {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-md-toggle=search]:checked~.md-header .md-search__suggest {
|
||||
[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -436,15 +447,17 @@ a.headerlink{
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.md-top{
|
||||
.md-top {
|
||||
border-radius: 0;
|
||||
top: 4vh !important;
|
||||
font-size: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
svg{
|
||||
|
||||
svg {
|
||||
vertical-align: -.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons im CI-Design
|
||||
.md-button {
|
||||
|
||||
@@ -459,7 +472,7 @@ a.headerlink{
|
||||
|
||||
@include transition;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
border-color: #8a44bd !important;
|
||||
transform: translateY(8px);
|
||||
@include transition;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
|
||||
@media (max-width: 1219px) {
|
||||
body{
|
||||
|
||||
.md-grid {
|
||||
padding: 2rem;
|
||||
}
|
||||
.md-grid .md-content,
|
||||
.md-footer-container,
|
||||
.md-footer-custom-links{
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.md-typeset h1,
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
|
||||
|
||||
|
||||
label.md-header__button.md-icon:last-of-type{
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
content: "\f002";
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: 100;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
|
||||
.satag--padding-container{
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.satag--home-companies{
|
||||
padding: 4rem 3rem;
|
||||
|
||||
.satag--home-companies-logo-container{
|
||||
.satag--home-companies-logo{
|
||||
img {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-button{
|
||||
padding: 1em 2.3em !important;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@media (max-width: 479px) {
|
||||
body{
|
||||
|
||||
.md-grid {
|
||||
padding: 2rem;
|
||||
}
|
||||
.md-grid .md-content,
|
||||
.md-footer-container,
|
||||
.md-footer-custom-links{
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.md-typeset h1,
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user