tfw
a81c5ee28b
Added WCAG-compliant scrolling behavior for search wrapper and updated styles for testimonials and team sections. Integrated alt attributes for images to improve accessibility and made minor layout refinements.
382 lines
6.8 KiB
SCSS
382 lines
6.8 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
|
|
}
|
|
|
|
.md-search__scrollwrap {
|
|
tabindex: 0; /* Macht das Element fokussierbar */
|
|
}
|
|
|
|
::-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;
|
|
}
|
|
|
|
.md-source-file{
|
|
display: none;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|