Blog/2025 05 20 test blog post (#51)
* Remove unused font-face definitions from stylesheets The `fonts.scss` file defining `Assistant` font-face rules has been deleted as it was no longer in use. This cleanup reduces unnecessary assets and improves maintainability. * Fix npm script command in blog preview workflow Replaced `npm scss:build` with the correct `npm run scss:build` command in the GitHub Actions workflow. This ensures the SCSS build step executes properly during site generation. * Update blog preview workflow to use mkdocs gh-deploy Replaces the GitHub Pages action with `mkdocs gh-deploy` for deploying previews. Simplifies the workflow configuration and reduces dependencies. * Update `site_url` logic and fix URL format consistency Simplified the `site_url` handling in the workflow by removing branch-specific URL construction. Additionally, ensured the main URL in `mkdocs.yml` uses a consistent trailing slash. This enhances clarity and maintains uniformity in URL formatting. * Set `use_directory_urls` in mkdocs.yml directly. Removed redundant script lines for configuring `use_directory_urls` in the workflow file. This simplifies deployment logic by directly defining the configuration in the mkdocs.yml file. * Remove unnecessary CSS source map file Deleted `custom.css.map` as it is not required for production. Removing it helps reduce clutter and keeps the repository clean. * Add support for 'satware.ai' as a homepage path Updated body-classes.js to treat 'satware.ai' as a homepage path by adding the 'home' class to the body element. This ensures correct behavior for both empty paths and specific developer GitHub Pages. * Simplify FAQ and navigation structure. Renamed `faq.md` to `index.md` for consistency and updated navigation links in `mkdocs.yml` to use folder paths directly. Adjusted `main.html` to clean up formatting with additional line breaks. * Update footer links to use relative paths Replaced absolute paths with relative paths for internal footer links to ensure consistency and improve maintainability. External links remain unchanged. * Fix relative URL for Jane Alesi's team page in authors file Updated the URL path for Jane Alesi to ensure correct navigation to her team page. This fixes a broken link caused by an incorrect relative URL. * Update footer links and enhance blog post on website relaunch Updated footer links to utilize dynamic `config.site_url` for consistent URL routing. Enhanced the blog post for better readability, showcasing the MkDocs implementation, GitHub integration, and use of Mermaid diagrams. * Update footer link and simplify satWay documentation Replaced the "Blog" link in the footer with "satWay Prinzipien" and refined the satWay documentation by removing overly detailed content about Jane Alesi. Additionally, added the Blog section to the site navigation in `mkdocs.yml`.
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
// Base HTML and root settings
|
||||
|
||||
html {
|
||||
font-size: 100% !important;
|
||||
}
|
||||
|
||||
// Schriftart auf "Assistant" setzen
|
||||
:root {
|
||||
--md-text-font: "Assistant";
|
||||
--md-code-font: "Assistant";
|
||||
}
|
||||
|
||||
// Transition mixin for reuse
|
||||
@mixin transition {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
// General layout settings
|
||||
.md-grid {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.satag--padding-container {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.satag-trademark {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
strong{
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// Blog styling
|
||||
|
||||
// Author styling in blog posts
|
||||
.md-post__authors.md-typeset {
|
||||
font-size: 1.3rem; // Match the general text size of the website
|
||||
|
||||
// General author styling
|
||||
.md-author {
|
||||
img {
|
||||
// Make the author image significantly larger
|
||||
width: 3.5rem; // Much larger than default
|
||||
height: 3.5rem; // Maintain aspect ratio
|
||||
border-radius: 50%; // Keep the circular shape
|
||||
}
|
||||
}
|
||||
|
||||
// Long author format (used in blog post sidebar)
|
||||
.md-author--long {
|
||||
img {
|
||||
width: 4rem; // Even larger for the long format
|
||||
height: 4rem; // Maintain aspect ratio
|
||||
}
|
||||
}
|
||||
|
||||
// Author profile description
|
||||
.md-profile__description {
|
||||
font-size: 1.3rem; // Match the general text size of the website
|
||||
line-height: 1.6; // Improve readability
|
||||
}
|
||||
|
||||
// Profile container
|
||||
.md-profile.md-post__profile {
|
||||
margin-bottom: 1rem; // Add some spacing between multiple authors
|
||||
}
|
||||
}
|
||||
|
||||
// Blog sidebar styling - make all text in the sidebar 80% of the normal size
|
||||
.md-sidebar__inner.md-post {
|
||||
font-size: 80%; // Set font size to 80% of the parent element
|
||||
|
||||
// Ensure all child elements inherit the font size
|
||||
* {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
// Override specific font sizes that were previously set
|
||||
.md-post__authors.md-typeset,
|
||||
.md-profile__description {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// Button styling
|
||||
|
||||
// Buttons im CI-Design
|
||||
.md-button {
|
||||
border-radius: 0 !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--md-primary-fg-color) !important;
|
||||
border-width: .15rem !important;
|
||||
padding: 1.7em 2.9em !important;
|
||||
letter-spacing: 0.2rem !important;
|
||||
font-weight: 400 !important;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.5s ease, border-color 0.5s ease, background-color 0.5s ease !important;
|
||||
font-size: 1.1rem;
|
||||
border: .15rem solid;
|
||||
|
||||
&:hover {
|
||||
border-color: #8a44bd !important;
|
||||
transform: translateY(8px) !important;
|
||||
}
|
||||
|
||||
&.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;
|
||||
transform: translateY(8px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
color: var(--md-primary-fg-color);
|
||||
}
|
||||
|
||||
.icon-card {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// Code styling
|
||||
|
||||
// Verbessere Lesbarkeit von Code auf dunklem Hintergrund
|
||||
.md-typeset code {
|
||||
background-color: rgba(255, 255, 255, 0.07);
|
||||
color: #e2e2e2;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
* Cookie Consent Styling
|
||||
* Position the cookie consent container in the center of the viewport
|
||||
*/
|
||||
|
||||
.satag--cookie-consent-container {
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
z-index: 9999 !important; /* Ensure it appears above other content */
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Direct targeting of Usercentrics elements
|
||||
* These selectors target various elements that Usercentrics might create
|
||||
*/
|
||||
#usercentrics-root,
|
||||
[class*="usercentrics"],
|
||||
[id*="usercentrics"],
|
||||
.uc-banner-content,
|
||||
.uc-container,
|
||||
[class*="banner"],
|
||||
[class*="consent"],
|
||||
[class*="cookie"] {
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
bottom: auto !important;
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* Specific targeting for the center container */
|
||||
#uc-center-container {
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
margin: 0 auto !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
[id*="center-container"]:not(#uc-center-container),
|
||||
[class*="center-container"] {
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Special styling for landscape mode on smaller height screens
|
||||
* This targets the Usercentrics container element
|
||||
*/
|
||||
@media (max-height: 768px) and (orientation: landscape) {
|
||||
.gtPQAC,
|
||||
[class*="usercentrics"],
|
||||
[id*="usercentrics"],
|
||||
.uc-banner-content,
|
||||
.uc-container,
|
||||
#uc-center-container {
|
||||
border-bottom: 0 !important;
|
||||
max-height: 100vh !important;
|
||||
max-width: 625px !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional styling to ensure the cookie consent is centered */
|
||||
body iframe[id^="usercentrics-"],
|
||||
body [class*="usercentrics"],
|
||||
body [id*="usercentrics"] {
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
bottom: auto !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* Benutzerdefiniertes FAQ-Styling */
|
||||
.custom-faq {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.custom-faq-item {
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 15px 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.custom-faq-question {
|
||||
|
||||
//background-color: rgba(0, 0, 0, 0.03);
|
||||
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-faq-question::after {
|
||||
content: "\f078";
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: 100;
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff !important;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-faq-question.active::after {
|
||||
content: "\f077";
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: 100;
|
||||
font-size: 1rem;
|
||||
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.custom-faq-answer {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-faq-answer.active {
|
||||
padding: 0;
|
||||
max-height: 1000px; /* Großer Wert, um sicherzustellen, dass der Inhalt vollständig angezeigt wird */
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
/* assistant-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../fonts/assistant-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('../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. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/assistant-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('../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. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/assistant-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('../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+ */
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.md-footer{
|
||||
background-color: #000;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.md-footer-meta{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.md-footer-container{
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
line-height: 2rem;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
float: left;
|
||||
letter-spacing: 1px;
|
||||
.satag--custom-footer-column{
|
||||
display: inline-block;
|
||||
|
||||
&.left{
|
||||
|
||||
padding-right: 6rem;
|
||||
|
||||
}
|
||||
&.right{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.satag--footer-social-icons{
|
||||
padding-top: 5px;
|
||||
a{
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-footer-custom-links{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
a{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Header logo and title styling
|
||||
|
||||
// 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: 2.2rem;
|
||||
//padding-left: 0.5rem;
|
||||
|
||||
img, svg {
|
||||
width: 325px; // Größeres Logo (Standardwert ist 40px)
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile logo ausblenden in Desktop-Ansicht
|
||||
.md-header__mobile-logo {
|
||||
display: none; // Wird in der mobilen Ansicht überschrieben
|
||||
}
|
||||
|
||||
// Navigationsleiste anpassen
|
||||
.md-header {
|
||||
height: auto;
|
||||
|
||||
&__inner {
|
||||
padding: 0.5rem;
|
||||
max-width: 98%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
body{
|
||||
|
||||
/* Header nicht fixieren, sondern statisch positionieren */
|
||||
.md-header {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
/* Abstand nach oben für den Hauptinhalt entfernen */
|
||||
.md-main__inner {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Falls du Tabs verwendest, diese auch nicht fixieren */
|
||||
.md-tabs {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
/* Anpassung für den Hauptinhalt */
|
||||
.md-content {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Für den Fall, dass du die Seitenleiste verwendest */
|
||||
@media (min-width: 768px){
|
||||
.md-sidebar {
|
||||
top: 0 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
label.md-search__icon.md-icon {
|
||||
|
||||
|
||||
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
nav.md-search__options{
|
||||
&:after{
|
||||
content: "\f002";
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: 100;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Versteckt den Placeholder-Text im Suchfeld */
|
||||
.md-search__input::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
.satag--home-landing{
|
||||
|
||||
@mixin ohne-balken{
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-hero{
|
||||
|
||||
margin-top: 7rem;
|
||||
|
||||
.entry-text{
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.2rem;
|
||||
padding-bottom: 1.6rem;
|
||||
padding-top: 1.6rem;
|
||||
}
|
||||
|
||||
h1{
|
||||
margin-bottom: 1.75rem;
|
||||
text-align: left;
|
||||
&:after{
|
||||
height: 12px;
|
||||
width: 85px;
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons{
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.screenshot-container{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img{
|
||||
border: 1px solid var(--md-primary-fg-color--light);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-companies{
|
||||
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
|
||||
background-color: var(--md-primary-fg-color);
|
||||
|
||||
h2{
|
||||
padding-bottom: 1rem;
|
||||
max-width: 1200px;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
.satag--home-companies-logo-container{
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-top: 2rem;
|
||||
flex-wrap: wrap; // Erlaubt Umbruch bei kleinen Bildschirmen
|
||||
|
||||
.satag--home-companies-logo{
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-counters{
|
||||
|
||||
width: 100%;
|
||||
|
||||
h2{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include ohne-balken;
|
||||
|
||||
text-align: left;
|
||||
.satag--home-counters-container{
|
||||
display: flex;
|
||||
flex-wrap: wrap; // Erlaubt Umbruch bei kleinen Bildschirmen
|
||||
|
||||
.satag--home-counter{
|
||||
flex: 1 0 auto;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
|
||||
.satag--home-counter-icon{
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
color: var(--md-primary-fg-color--light);
|
||||
}
|
||||
.satag--home-counter-number{
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
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{
|
||||
&.home{
|
||||
|
||||
background-image: url('../images/home/bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
backdrop-filter: brightness(0.4);
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// Lightbox styling for the homepage screenshot
|
||||
|
||||
// Lightbox container - positioned directly over the original image
|
||||
.satag-lightbox {
|
||||
display: none;
|
||||
position: fixed !important;
|
||||
z-index: 9999; // Use a very high z-index to ensure it's above everything
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
background-color: transparent;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Close button - positioned in the top-right corner
|
||||
.satag-lightbox-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--md-primary-fg-color--light);
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Lightbox image
|
||||
.satag-lightbox-img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border: 2px solid var(--md-primary-fg-color--light);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.4s ease;
|
||||
display: block; // Ensure proper display
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Transform scale is now handled by JavaScript for better responsive control
|
||||
// &.active .satag-lightbox-img {
|
||||
// transform: scale(1.3);
|
||||
// }
|
||||
|
||||
// Responsive styles for medium screens (max-width: 1219px)
|
||||
@media (max-width: 1219px) {
|
||||
.satag-lightbox-close {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 22px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.satag-lightbox-img {
|
||||
border-width: 1px; // Thinner border
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive styles for tablets and smaller devices (max-width: 959px)
|
||||
@media (max-width: 959px) {
|
||||
.satag-lightbox-close {
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
font-size: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.satag-lightbox-img {
|
||||
border-width: 1px; // Thinner border
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); // Lighter shadow
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive styles for mobile phones (max-width: 479px)
|
||||
@media (max-width: 479px) {
|
||||
.satag-lightbox-close {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 18px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.satag-lightbox-img {
|
||||
border-width: 1px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); // Lighter shadow
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make the screenshot container image clickable only on screens > 768px
|
||||
.screenshot-container {
|
||||
img {
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
// Cursor styling is handled by JavaScript for better control
|
||||
// Default cursor is used for screens <= 768px
|
||||
// Pointer cursor is used for screens > 768px
|
||||
|
||||
// Hover effect only for screens > 768px
|
||||
@media (min-width: 769px) {
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We want the lightbox to scroll with the page, so we don't need to prevent scrolling
|
||||
// body.lightbox-active {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
@@ -0,0 +1,134 @@
|
||||
// Navigation and tabs styling
|
||||
|
||||
// Tabs styling
|
||||
.md-tabs {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-tabs__item {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 22px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 0;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: .3s all ease;
|
||||
|
||||
&:after {
|
||||
opacity: .7;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-tabs__item--active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tabs__list {
|
||||
height: 4rem;
|
||||
|
||||
// Remove left margin/padding from the first tab item to align with content container
|
||||
.md-tabs__item:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tabs__link {
|
||||
opacity: 1;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// Navigation styling
|
||||
.md-nav__container > .md-nav__link:first-child {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.md-nav__title {
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-nav__container>.md-nav__link {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
// Secondary navigation (TOC) styling - make all text 80% of the normal size
|
||||
.md-nav.md-nav--secondary {
|
||||
font-size: 80%; // Set font size to 80% of the parent element
|
||||
|
||||
// Ensure all child elements inherit the font size
|
||||
* {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer navigation
|
||||
.md-footer__title {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.md-footer__direction {
|
||||
font-size: 100%;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--md-footer-fg-color--light);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide Impressum and Datenschutz from navigation (top tabs and sidebar)
|
||||
.md-tabs__link[href^="/impressum/"],
|
||||
.md-tabs__link[href^="/datenschutzerklaerung/"],
|
||||
.md-nav__link[href^="/impressum/"],
|
||||
.md-nav__link[href^="/datenschutzerklaerung/"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Content inner margin
|
||||
.md-content__inner {
|
||||
margin: 0 0 1.2rem;
|
||||
padding-top: .6rem;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Scrollbar styling
|
||||
|
||||
// Selection color
|
||||
::-moz-selection {
|
||||
background: var(--md-primary-fg-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--md-primary-fg-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Scrollbar width
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #d0d0d0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--md-primary-fg-color);
|
||||
}
|
||||
|
||||
// Scrollwrap for search
|
||||
.md-search__scrollwrap {
|
||||
tabindex: 0; /* Macht das Element fokussierbar */
|
||||
}
|
||||
|
||||
// Back to top button
|
||||
.md-top {
|
||||
border-radius: 0;
|
||||
top: 4vh !important;
|
||||
font-size: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
|
||||
svg {
|
||||
vertical-align: -.15rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// Search functionality styling
|
||||
|
||||
// Search form
|
||||
.md-search__form {
|
||||
input::placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Search input
|
||||
.md-search__input {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Search results meta
|
||||
.md-search-result__meta {
|
||||
background-color: #000;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Hide search suggestions when search is active
|
||||
[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Social links
|
||||
.md-social__link {
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
text-align: center;
|
||||
width: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
// Team-Seite Styling für satware® AI Agenten
|
||||
|
||||
// Überschriften in Großbuchstaben und Assistant Bold
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-transform: uppercase !important;
|
||||
font-family: 'Assistant', sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Team Header
|
||||
.team-header {
|
||||
text-align: left;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 3rem auto;
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--md-primary-fg-color);
|
||||
text-align: left;
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Team Grid Layout
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
// Einzelner Agent
|
||||
.team-agent {
|
||||
background-color: rgba(82, 19, 112, 0.03);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
// Styling für nicht-klickbare Agenten
|
||||
.team-agent-nolink {
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
// Removed pointer-events: none to allow hover effects on images
|
||||
}
|
||||
|
||||
.team-agent-image {
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;// Besserer Bildausschnitt für Gesichter
|
||||
transition: transform 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-agent-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
font-size: 2.2rem;
|
||||
line-height: 2.3rem;
|
||||
color: #fff;
|
||||
margin-bottom: 0.1rem; // Verringerter Abstand
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
.agent-surname {
|
||||
//opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.team-agent-position {
|
||||
//font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
opacity: .9;
|
||||
color: #fff;
|
||||
margin-bottom: 0.1rem;
|
||||
text-align: left;
|
||||
margin-top: 0.1rem;
|
||||
min-height: 2rem;
|
||||
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.team-agent-description {
|
||||
//font-size: 0.8rem;
|
||||
//line-height: 1.4;
|
||||
text-align: left;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-agent-position{
|
||||
font-weight: bold !important;
|
||||
min-height: 4rem;
|
||||
}
|
||||
// Expertise-Bereich
|
||||
.team-expertise {
|
||||
|
||||
h2 {
|
||||
color: var(--md-primary-fg-color);
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Kontakt-Bereich
|
||||
.team-contact {
|
||||
margin-top: 4rem;
|
||||
text-align: left;
|
||||
|
||||
h2 {
|
||||
color: var(--md-primary-fg-color);
|
||||
margin-bottom: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 800px;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.contact-item {
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: left;
|
||||
|
||||
a {
|
||||
color: var(--md-primary-fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
a {
|
||||
color: var(--md-primary-fg-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsives Verhalten
|
||||
@media (max-width: 768px) {
|
||||
.team-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.team-header {
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.expertise-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.team-agent {
|
||||
.team-agent-image {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.team-agent-info {
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.team-agent-description {
|
||||
//font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,330 @@
|
||||
// Testimonials Section
|
||||
.satag--home-testimonials-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-top: 4rem;
|
||||
overflow-x: hidden; // Prevent horizontal scrolling
|
||||
box-sizing: border-box; // Include padding in width calculation
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit; // Ensure all children inherit box-sizing
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 2rem;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden; // Prevent horizontal scrolling
|
||||
min-height: 25rem;
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
// Text-Container (links)
|
||||
.satag--home-testimonials-text-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
flex: 0 0 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
min-height: 20rem; // Mehr Platz für den Text auf mobilen Geräten
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonials-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.5s ease, visibility 0.5s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: normal;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #fff;
|
||||
border-left: none !important;
|
||||
padding-left: 0 !important;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
margin-top: 70px; // Platz für das Logo über dem Text
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: 1rem; // Etwas kleinere Schrift auf mobilen Geräten
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonial-author {
|
||||
margin-top: 1rem;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin-top: 1.5rem; // Mehr Abstand nach oben auf Tablets und mobilen Geräten
|
||||
margin-bottom: 2rem; // Mehr Abstand nach unten auf Tablets und mobilen Geräten
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonial-text-logo {
|
||||
max-width: 120px !important;
|
||||
filter: grayscale(1);
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 100px !important; // Kleineres Logo
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
max-width: 80px !important; // Noch kleineres Logo für mobile Geräte
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonial-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonial-title {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bilder-Container (rechts)
|
||||
.satag--home-testimonials-images {
|
||||
display: flex;
|
||||
gap: 0.5rem; // Increased gap for better spacing between larger images
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; // Ensure no overflow
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
flex: 0 0 40%; // Increased from 35% to 40% to accommodate larger images
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap; // Allow wrapping to create grid-like layout
|
||||
overflow-x: hidden; // Prevent horizontal scrolling
|
||||
padding-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
justify-content: center; // Center on smaller screens
|
||||
gap: 0.5rem; // Add gap between grid items
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonial-image-wrapper {
|
||||
position: relative;
|
||||
width: 130px; // Increased width for desktop
|
||||
height: auto; // Further reduced height for desktop
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px; // Add rounded corners
|
||||
box-sizing: border-box; // Include border in width calculation
|
||||
flex: 0 0 auto; // Prevent flex items from growing or shrinking
|
||||
margin: 0.5rem; // Add more space between images
|
||||
|
||||
img {
|
||||
filter: grayscale(1);
|
||||
max-width: 100%; // Ensure image doesn't exceed container width
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
border-color: var(--md-primary-fg-color, #9c27b0);
|
||||
transform: scale(1.01); // Subtle scale for visibility without overflow
|
||||
transform-origin: center; // Ensure scaling happens from center
|
||||
img {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 80px; // Further reduced width for tablets
|
||||
height: auto; // Further reduced height for tablets
|
||||
margin: 0; // Remove margin as we're using gap in the parent
|
||||
transform-origin: center; // Ensure scaling happens from center
|
||||
flex: 0 0 calc(33.333% - 0.5rem); // Create a 3-column grid layout
|
||||
max-width: calc(33.333% - 0.5rem); // Ensure consistent sizing
|
||||
display: flex; // Make it a flex container
|
||||
justify-content: center; // Center content horizontally
|
||||
align-items: center; // Center content vertically
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 70px; // Further reduced width for mobile
|
||||
height: auto; // Further reduced height for mobile
|
||||
margin: 0; // Remove margin as we're using gap in the parent
|
||||
flex: 0 0 calc(50% - 0.5rem); // Create a 2-column grid layout for smaller screens
|
||||
max-width: calc(50% - 0.5rem); // Ensure consistent sizing
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 60px; // Further reduced width for very small screens
|
||||
height: auto; // Further reduced height for very small screens
|
||||
//flex: 0 0 calc(50% - 0.5rem); // Maintain 2-column grid layout for very small screens
|
||||
//max-width: calc(50% - 0.5rem); // Ensure consistent sizing
|
||||
flex: 0 0 calc(35% - 1rem);
|
||||
max-width: calc(35% - 1rem);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-testimonial-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
max-width: 100%; // Ensure image doesn't exceed container width
|
||||
}
|
||||
|
||||
.satag--home-testimonial-logo {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: transparent;
|
||||
filter: grayscale(1);
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
//display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box; // Include padding in width calculation
|
||||
overflow: hidden; // Prevent content from extending beyond container
|
||||
|
||||
img {
|
||||
max-width: 100%; // Ensure image doesn't exceed container width
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
bottom: 20px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Anpassungen
|
||||
@media (max-width: 1200px) {
|
||||
// Verbessertes Layout für Tablets und mobile Geräte
|
||||
.satag--home-testimonials-container {
|
||||
h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// iPad specific adjustments (both portrait and landscape)
|
||||
@media only screen and (min-width: 768px) and (max-width: 1200px) {
|
||||
.satag--home-testimonials {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.satag--home-testimonials-images {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap; // Allow wrapping to create grid-like layout
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
gap: 0.2rem; // Even smaller gap for iPad
|
||||
}
|
||||
|
||||
.satag--home-testimonial-image-wrapper {
|
||||
margin: 0; // Remove margin as we're using gap in the parent
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
// Zusätzliche Anpassungen für kleinere mobile Geräte
|
||||
.satag--home-testimonials-container {
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px){
|
||||
.satag--home-testimonials-text-container {
|
||||
min-height: 35rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// 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
|
||||
}
|
||||
|
||||
// Header and tabs background
|
||||
.md-header,
|
||||
.md-tabs {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
// Footer background
|
||||
.md-footer-meta {
|
||||
background-color: #000;
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
// Typography styling
|
||||
|
||||
body {
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
|
||||
.md-typeset,
|
||||
.md-nav {
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Underline for headings
|
||||
h1, h2, h3 {
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 85px;
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// H1 styling
|
||||
.md-typeset h1,
|
||||
h1 {
|
||||
color: #fff;
|
||||
margin-bottom: 1.75rem;
|
||||
text-align: left;
|
||||
font-size: 8rem;
|
||||
line-height: 1.1;
|
||||
|
||||
a.headerlink {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// H1 styling for blog articles
|
||||
.md-content--post h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
// H2 styling
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
line-height: 3rem;
|
||||
font-size: 2.7rem;
|
||||
|
||||
&:after {
|
||||
margin-top: .6rem;
|
||||
height: 7px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// H2 that looks like normal text (for first H2 in KI-Agenten subpages)
|
||||
.h2-as-text {
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem !important;
|
||||
line-height: 2rem !important;
|
||||
text-transform: none !important;
|
||||
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// H3 styling
|
||||
.md-typeset h3,
|
||||
h3 {
|
||||
font-size: 2.1rem;
|
||||
|
||||
&:after {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
height: 4px;
|
||||
width: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
// List styling
|
||||
.md-typeset ul {
|
||||
list-style-type: none;
|
||||
padding: 0 0 0 2rem;
|
||||
|
||||
li {
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
padding-right: 0.5rem;
|
||||
color: var(--md-primary-fg-color);
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir=ltr] .md-typeset ul li {
|
||||
margin-left: -1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Link styling
|
||||
a.headerlink {
|
||||
color: var(--md-primary-fg-color) !important;
|
||||
}
|
||||
|
||||
// Tooltip styling for MkDocs Material
|
||||
.md-tooltip {
|
||||
// Increase the z-index to ensure tooltips appear above other elements
|
||||
z-index: 999 !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 0 !important; // Start with opacity 0
|
||||
transition: opacity 0.3s ease !important; // Add transition for fade effect
|
||||
|
||||
// Style the tooltip content
|
||||
.md-tooltip__inner {
|
||||
font-size: 1.04rem !important; // 80% of normal font size (1.3rem)
|
||||
padding: 0.8rem !important;
|
||||
//margin-top: 0.5rem !important; // Add top spacing
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
border-radius: 4px !important;
|
||||
color: white !important;
|
||||
max-width: 300px !important;
|
||||
white-space: normal !important;
|
||||
transform: none !important;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// When parent element is hovered for 1.5 seconds, show the tooltip
|
||||
*:hover > .md-tooltip,
|
||||
*:focus > .md-tooltip,
|
||||
*:hover ~ .md-tooltip,
|
||||
*:focus ~ .md-tooltip,
|
||||
*:hover + .md-tooltip,
|
||||
*:focus + .md-tooltip {
|
||||
opacity: 1 !important;
|
||||
transition-delay: 0s !important; // Remove delay when showing
|
||||
}
|
||||
|
||||
// Global tooltip styling to ensure all tooltips are affected
|
||||
[data-md-tooltip],
|
||||
[data-md-tooltip]:before,
|
||||
[data-md-tooltip]:after,
|
||||
.md-tooltip:before,
|
||||
.md-tooltip:after,
|
||||
[class*="tooltip"],
|
||||
[class*="tooltip"]:before,
|
||||
[class*="tooltip"]:after {
|
||||
font-size: 1.04rem !important; // 80% of normal font size (1.3rem)
|
||||
//margin-top: 0.5rem !important; // Add top spacing
|
||||
visibility: visible !important;
|
||||
z-index: 9999 !important;
|
||||
pointer-events: auto !important;
|
||||
transition: opacity 0.3s ease !important; // Add transition for fade effect
|
||||
opacity: 0 !important; // Start with opacity 0
|
||||
}
|
||||
|
||||
// When parent element is hovered, show these tooltip elements
|
||||
*:hover > [data-md-tooltip],
|
||||
*:hover > [data-md-tooltip]:before,
|
||||
*:hover > [data-md-tooltip]:after,
|
||||
*:hover > .md-tooltip:before,
|
||||
*:hover > .md-tooltip:after,
|
||||
*:hover > [class*="tooltip"],
|
||||
*:hover > [class*="tooltip"]:before,
|
||||
*:hover > [class*="tooltip"]:after,
|
||||
*:hover ~ [data-md-tooltip],
|
||||
*:hover ~ [data-md-tooltip]:before,
|
||||
*:hover ~ [data-md-tooltip]:after,
|
||||
*:hover ~ .md-tooltip:before,
|
||||
*:hover ~ .md-tooltip:after,
|
||||
*:hover ~ [class*="tooltip"],
|
||||
*:hover ~ [class*="tooltip"]:before,
|
||||
*:hover ~ [class*="tooltip"]:after,
|
||||
*:hover + [data-md-tooltip],
|
||||
*:hover + [data-md-tooltip]:before,
|
||||
*:hover + [data-md-tooltip]:after,
|
||||
*:hover + .md-tooltip:before,
|
||||
*:hover + .md-tooltip:after,
|
||||
*:hover + [class*="tooltip"],
|
||||
*:hover + [class*="tooltip"]:before,
|
||||
*:hover + [class*="tooltip"]:after,
|
||||
*:focus > [data-md-tooltip],
|
||||
*:focus > [data-md-tooltip]:before,
|
||||
*:focus > [data-md-tooltip]:after,
|
||||
*:focus > .md-tooltip:before,
|
||||
*:focus > .md-tooltip:after,
|
||||
*:focus > [class*="tooltip"],
|
||||
*:focus > [class*="tooltip"]:before,
|
||||
*:focus > [class*="tooltip"]:after,
|
||||
*:focus ~ [data-md-tooltip],
|
||||
*:focus ~ [data-md-tooltip]:before,
|
||||
*:focus ~ [data-md-tooltip]:after,
|
||||
*:focus ~ .md-tooltip:before,
|
||||
*:focus ~ .md-tooltip:after,
|
||||
*:focus ~ [class*="tooltip"],
|
||||
*:focus ~ [class*="tooltip"]:before,
|
||||
*:focus ~ [class*="tooltip"]:after,
|
||||
*:focus + [data-md-tooltip],
|
||||
*:focus + [data-md-tooltip]:before,
|
||||
*:focus + [data-md-tooltip]:after,
|
||||
*:focus + .md-tooltip:before,
|
||||
*:focus + .md-tooltip:after,
|
||||
*:focus + [class*="tooltip"],
|
||||
*:focus + [class*="tooltip"]:before,
|
||||
*:focus + [class*="tooltip"]:after {
|
||||
opacity: 1 !important;
|
||||
transition-delay: 0s !important; // Remove delay when showing
|
||||
}
|
||||
|
||||
// Direct link tooltip handling - ensure tooltips appear when hovering directly on links
|
||||
a[title] {
|
||||
position: relative !important; // Ensure the link is a positioning context for the tooltip
|
||||
}
|
||||
|
||||
a[title]::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
z-index: 999 !important;
|
||||
display: block !important;
|
||||
visibility: hidden !important; // Start hidden
|
||||
opacity: 0 !important; // Start with opacity 0
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
color: white !important;
|
||||
padding: 0.8rem !important;
|
||||
border-radius: 4px !important;
|
||||
font-size: 1.04rem !important;
|
||||
max-width: 300px !important;
|
||||
white-space: normal !important;
|
||||
//margin-top: 0.5rem !important;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
|
||||
pointer-events: none !important;
|
||||
left: 0 !important; // Position at the left edge of the link
|
||||
//bottom: 100% !important; // Position above the link
|
||||
transform: translateY(-5px) !important; // Small offset for better appearance
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease !important; // Smooth transition
|
||||
}
|
||||
|
||||
a[title]:hover::after,
|
||||
a[title]:focus::after {
|
||||
visibility: visible !important; // Show on hover/focus
|
||||
opacity: 1 !important; // Full opacity on hover/focus
|
||||
}
|
||||
|
||||
// Hide tooltip when triggered by the logo
|
||||
.md-header__button.md-logo:hover + .md-tooltip,
|
||||
.md-header__button.md-logo:focus + .md-tooltip,
|
||||
.md-header__button.md-logo + .md-tooltip {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// Hide source file info
|
||||
.md-source-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Code styling in search results
|
||||
.md-search-result .md-typeset {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Remove underline in search results
|
||||
.md-search-result__list {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// Webinar form styling
|
||||
|
||||
.satag--webinar-form-container {
|
||||
#nextcloud-form {
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: 3600px;
|
||||
transition: height .3s ease;
|
||||
color-scheme: dark;
|
||||
|
||||
.ng-csp {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Webinar dates styling
|
||||
.satag--webinar-dates {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.satag--webinar-item {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.satag--webinar-date {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
i {
|
||||
margin-right: 0.5rem;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.satag--webinar-time {
|
||||
margin-bottom: 0.5rem;
|
||||
color: white;
|
||||
|
||||
i {
|
||||
margin-right: 0.5rem;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.satag--webinar-course {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.satag--webinar-type {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
Reference in New Issue
Block a user