tfw
d814f14897
Introduced a testimonials section to the homepage, including JavaScript for interactive switching and automatic cycling, as well as responsive styles in SCSS. Users can now view dynamic testimonials with associated images and text.
374 lines
6.7 KiB
SCSS
374 lines
6.7 KiB
SCSS
//Fontawesome importieren
|
|
|
|
@import "fontawesome/fontawesome";
|
|
@import "fontawesome/regular";
|
|
@import "fontawesome/solid";
|
|
@import "fontawesome/brands";
|
|
@import "fontawesome/light";
|
|
@import "fontawesome/sharp-light";
|
|
@import "fontawesome/sharp-thin";
|
|
|
|
// Module importieren
|
|
@import 'modules/team';
|
|
@import 'modules/footer';
|
|
@import 'modules/home';
|
|
@import 'modules/testimonials';
|
|
|
|
@mixin transition{
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
// satware.ai CI-Anpassungen
|
|
|
|
// Assistant Font lokal einbinden
|
|
@font-face {
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
src: url('../assets/fonts/assistant-v19-latin-200.woff2') format('woff2');
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('../assets/fonts/assistant-v19-latin-regular.woff2') format('woff2');
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('../assets/fonts/assistant-v19-latin-700.woff2') format('woff2');
|
|
font-display: swap;
|
|
}
|
|
|
|
// Schriftart auf "Assistant" setzen
|
|
:root {
|
|
--md-text-font: "Assistant";
|
|
--md-code-font: "Assistant";
|
|
}
|
|
|
|
// Dark Theme optimieren (schwarzer Hintergrund nach CI)
|
|
[data-md-color-scheme="slate"] {
|
|
--md-default-bg-color: #000000;
|
|
--md-default-fg-color: #ffffff;
|
|
--md-default-fg-color--light: rgba(255, 255, 255, 0.8);
|
|
--md-default-fg-color--lighter: rgba(255, 255, 255, 0.54);
|
|
--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
|
|
|
|
// Link-Farbe anpassen
|
|
--md-typeset-a-color: #9d65cf; // Helleres Violett für Links
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--md-primary-fg-color);;
|
|
color: #fff;
|
|
}
|
|
::selection {
|
|
background: var(--md-primary-fg-color);;
|
|
color: #fff;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #d0d0d0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--md-primary-fg-color);
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: #fff;
|
|
a{
|
|
color: #fff !important;
|
|
}
|
|
|
|
}
|
|
|
|
h1,h2,h3{
|
|
&:after{
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
height: 6px;
|
|
width: 40px;
|
|
display: block;
|
|
margin-top: 0.6rem;
|
|
margin-bottom: -0.3rem;
|
|
}
|
|
}
|
|
|
|
.md-typeset h1 {
|
|
color: #fff;
|
|
}
|
|
|
|
.md-search-result .md-typeset {
|
|
color: #fff;
|
|
}
|
|
|
|
.md-tabs{
|
|
color: #fff !important;
|
|
}
|
|
.md-tabs__link{
|
|
opacity: 1;
|
|
}
|
|
|
|
.md-search__form{
|
|
input::placeholder {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.md-search-result__meta{
|
|
background-color: #000;
|
|
}
|
|
|
|
h1{
|
|
&:after{
|
|
|
|
height: 6px;
|
|
width: 40px;
|
|
margin-top: 0.6rem;
|
|
margin-bottom: -0.3rem;
|
|
}
|
|
}
|
|
|
|
a.headerlink{
|
|
color: var(--md-primary-fg-color) !important;
|
|
}
|
|
|
|
.satag-trademark{
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.md-header,
|
|
.md-tabs{
|
|
background-color: #000;
|
|
}
|
|
|
|
.md-tabs__item{
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.md-search__input{
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-search-result__list{
|
|
h1,h2,h3,h4,h5,h6{
|
|
&:after{
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.md-social__link {
|
|
display: inline-block;
|
|
height: 1rem;
|
|
text-align: center;
|
|
width: 1rem;
|
|
}
|
|
|
|
.md-search-result__meta{
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
|
|
// Footer Navigation für zusätzliche Links
|
|
.md-footer-meta .md-footer-meta__inner {
|
|
.md-footer-copyright {
|
|
width: auto;
|
|
margin: auto 1rem 0.5rem 0;
|
|
}
|
|
}
|
|
|
|
.md-footer-meta.md-typeset a{
|
|
color: #fff !important;
|
|
}
|
|
.md-footer-meta {
|
|
background-color: #000;
|
|
}
|
|
|
|
|
|
|
|
// Füge zusätzliche Navigation im Footer hinzu
|
|
.md-footer-custom-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 0;
|
|
text-transform: uppercase;
|
|
|
|
a {
|
|
color: var(--md-footer-fg-color);
|
|
font-size: 0.75rem;
|
|
margin-right: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:hover {
|
|
color: var(--md-footer-fg-color--light);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Verbessere Lesbarkeit von Code auf dunklem Hintergrund
|
|
.md-typeset code {
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
.md-nav__container>.md-nav__link:first-child {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.md-nav__title{
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-top{
|
|
border-radius: 0;
|
|
}
|
|
// Buttons im CI-Design
|
|
.md-button {
|
|
|
|
border-radius: 0 !important;
|
|
color: #fff !important;
|
|
border-color: var(--md-primary-fg-color) !important;
|
|
|
|
padding: 1.7em 2.9em !important;
|
|
letter-spacing: 0.2rem !important;
|
|
font-weight: 400 !important;
|
|
|
|
@include transition;
|
|
|
|
&:hover{
|
|
border-color: #8a44bd !important;
|
|
transform: translateY(8px);
|
|
@include transition;
|
|
}
|
|
|
|
|
|
&.md-button--primary {
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-fg-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--md-primary-fg-color--light);
|
|
border-color: var(--md-primary-fg-color--light);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Karten-Styling für die Startseite
|
|
.grid.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
|
|
> * {
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 1.5rem;
|
|
background-color: rgba(82, 19, 112, 0.05);
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-3px);
|
|
background-color: rgba(82, 19, 112, 0.1);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0.5rem;
|
|
font-size: 1.25rem;
|
|
color: var(--md-primary-fg-color);
|
|
}
|
|
|
|
.icon-card {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
// Button-Styling
|
|
.md-button {
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
|
|
&.md-button--primary {
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-fg-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--md-primary-fg-color--light);
|
|
border-color: var(--md-primary-fg-color--light) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Header-Anpassungen
|
|
|
|
// Seitentitel ausblenden
|
|
.md-header__title {
|
|
.md-header__topic {
|
|
// Der erste Eintrag (Seitenname) wird ausgeblendet
|
|
&:first-child {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Logo vergrößern
|
|
.md-header__button.md-logo {
|
|
padding: 0.2rem;
|
|
padding-left: 0;
|
|
|
|
|
|
img, svg {
|
|
width: 240px; // Größeres Logo (Standardwert ist 40px)
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// Navigationsleiste anpassen
|
|
.md-header {
|
|
height: auto;
|
|
|
|
&__inner {
|
|
padding: 0.5rem;
|
|
max-width: 98%;
|
|
}
|
|
}
|