Add modular SCSS structure and lightbox functionality
Introduce a modular SCSS structure to improve maintainability and organization of stylesheets. Add lightbox functionality for homepage screenshots, including responsive JavaScript behavior and custom styling for enhanced user experience. Update tasks documentation with improvement initiatives for the project.
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,201 @@
|
||||
// Lightbox functionality for the homepage screenshot
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get the screenshot image
|
||||
const screenshotImg = document.querySelector('.screenshot-container img');
|
||||
|
||||
// If the image exists
|
||||
if (screenshotImg) {
|
||||
// Create lightbox elements
|
||||
const lightbox = document.createElement('div');
|
||||
lightbox.className = 'satag-lightbox';
|
||||
|
||||
const closeBtn = document.createElement('span');
|
||||
closeBtn.className = 'satag-lightbox-close';
|
||||
closeBtn.innerHTML = '×';
|
||||
|
||||
const lightboxImg = document.createElement('img');
|
||||
lightboxImg.className = 'satag-lightbox-img';
|
||||
lightboxImg.src = screenshotImg.src;
|
||||
lightboxImg.alt = screenshotImg.alt;
|
||||
|
||||
// Append elements to the lightbox
|
||||
lightbox.appendChild(closeBtn);
|
||||
lightbox.appendChild(lightboxImg);
|
||||
|
||||
// Remove any existing lightbox to avoid duplicates
|
||||
const existingLightbox = document.querySelector('.satag-lightbox');
|
||||
if (existingLightbox) {
|
||||
document.body.removeChild(existingLightbox);
|
||||
}
|
||||
|
||||
// Append lightbox to the body instead of the screenshot container
|
||||
// This allows the lightbox to be as large as the viewport, not constrained by the container
|
||||
document.body.appendChild(lightbox);
|
||||
|
||||
// Function to position the lightbox directly over the original image
|
||||
function positionLightbox() {
|
||||
// Get the position and dimensions of the original image
|
||||
const imgRect = screenshotImg.getBoundingClientRect();
|
||||
const screenshotContainer = document.querySelector('.screenshot-container');
|
||||
const containerRect = screenshotContainer.getBoundingClientRect();
|
||||
|
||||
// Get the current scroll position
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
||||
|
||||
// Get viewport dimensions
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Position the lightbox directly over the original image
|
||||
lightbox.style.position = 'fixed';
|
||||
lightbox.style.top = imgRect.top + 'px';
|
||||
lightbox.style.left = imgRect.left + 'px';
|
||||
lightbox.style.width = imgRect.width + 'px';
|
||||
lightbox.style.height = imgRect.height + 'px';
|
||||
lightbox.style.display = 'flex';
|
||||
lightbox.style.alignItems = 'center';
|
||||
lightbox.style.justifyContent = 'center';
|
||||
|
||||
// Set the lightbox image to fill the lightbox container
|
||||
lightboxImg.style.position = 'relative';
|
||||
lightboxImg.style.width = '100%';
|
||||
lightboxImg.style.height = '100%';
|
||||
lightboxImg.style.objectFit = 'contain';
|
||||
|
||||
// Position the close button in the top-right corner of the lightbox
|
||||
closeBtn.style.top = '5px';
|
||||
closeBtn.style.right = '5px';
|
||||
}
|
||||
|
||||
// Function to check if lightbox should be enabled (screen width > 768px)
|
||||
function shouldEnableLightbox() {
|
||||
return window.innerWidth > 768;
|
||||
}
|
||||
|
||||
// Update cursor style based on screen width
|
||||
function updateCursorStyle() {
|
||||
screenshotImg.style.cursor = shouldEnableLightbox() ? 'pointer' : 'default';
|
||||
}
|
||||
|
||||
// Initial cursor style update
|
||||
updateCursorStyle();
|
||||
|
||||
// Update cursor style when window is resized
|
||||
window.addEventListener('resize', updateCursorStyle);
|
||||
|
||||
// Open lightbox when clicking on the screenshot (only if screen width > 768px)
|
||||
screenshotImg.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // Prevent default behavior
|
||||
|
||||
// Only activate lightbox if screen width > 768px
|
||||
if (!shouldEnableLightbox()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Position the lightbox over the original image
|
||||
positionLightbox();
|
||||
|
||||
// Display the lightbox - use flex to match our CSS
|
||||
lightbox.style.display = 'flex';
|
||||
|
||||
// Force a reflow to ensure the display change takes effect before adding the active class
|
||||
void lightbox.offsetWidth;
|
||||
|
||||
// Apply transform scale to the lightbox to make it larger
|
||||
const viewportWidth = window.innerWidth;
|
||||
if (viewportWidth <= 479) { // Mobile
|
||||
lightbox.style.transform = 'scale(1.2)';
|
||||
} else if (viewportWidth <= 959) { // Tablet
|
||||
lightbox.style.transform = 'scale(1.3)';
|
||||
} else if (viewportWidth <= 1219) { // Medium screens
|
||||
lightbox.style.transform = 'scale(1.4)';
|
||||
} else { // Large screens
|
||||
lightbox.style.transform = 'scale(1.5)';
|
||||
}
|
||||
|
||||
// Add the active class to trigger the transition
|
||||
lightbox.classList.add('active');
|
||||
});
|
||||
|
||||
// Function to handle closing with transition
|
||||
function closeLightboxWithTransition() {
|
||||
lightbox.style.opacity = '0';
|
||||
lightbox.style.transform = 'scale(1)'; // Reset scale to original size
|
||||
|
||||
// Wait for transition to complete before removing active class
|
||||
setTimeout(function() {
|
||||
lightbox.classList.remove('active');
|
||||
|
||||
// Reset display to none after the transition is complete
|
||||
lightbox.style.display = 'none';
|
||||
|
||||
// Reset all inline styles after the lightbox is hidden
|
||||
setTimeout(function() {
|
||||
// Reset opacity and transform
|
||||
lightbox.style.opacity = '';
|
||||
lightbox.style.transform = '';
|
||||
|
||||
// Reset position and size styles
|
||||
lightbox.style.position = '';
|
||||
lightbox.style.top = '';
|
||||
lightbox.style.left = '';
|
||||
lightbox.style.width = '';
|
||||
lightbox.style.height = '';
|
||||
lightbox.style.alignItems = '';
|
||||
lightbox.style.justifyContent = '';
|
||||
|
||||
// Reset image styles
|
||||
lightboxImg.style.width = '';
|
||||
lightboxImg.style.height = '';
|
||||
lightboxImg.style.objectFit = '';
|
||||
|
||||
// Reset close button styles
|
||||
closeBtn.style.top = '';
|
||||
closeBtn.style.right = '';
|
||||
}, 100);
|
||||
}, 400); // Match the transition duration from CSS
|
||||
}
|
||||
|
||||
// Close lightbox when clicking on the close button
|
||||
closeBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation(); // Prevent event from bubbling up
|
||||
closeLightboxWithTransition();
|
||||
});
|
||||
|
||||
// Close lightbox when clicking on the lightbox (outside the image)
|
||||
lightbox.addEventListener('click', function(e) {
|
||||
if (e.target === lightbox) {
|
||||
closeLightboxWithTransition();
|
||||
}
|
||||
});
|
||||
|
||||
// Close lightbox when pressing Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
|
||||
closeLightboxWithTransition();
|
||||
}
|
||||
});
|
||||
|
||||
// Update lightbox position when window is resized
|
||||
window.addEventListener('resize', function() {
|
||||
if (lightbox.classList.contains('active')) {
|
||||
// Reposition the lightbox based on new viewport dimensions
|
||||
positionLightbox();
|
||||
|
||||
// Apply appropriate transform scale based on viewport width
|
||||
const viewportWidth = window.innerWidth;
|
||||
if (viewportWidth <= 479) { // Mobile
|
||||
lightbox.style.transform = 'scale(1.2)';
|
||||
} else if (viewportWidth <= 959) { // Tablet
|
||||
lightbox.style.transform = 'scale(1.3)';
|
||||
} else if (viewportWidth <= 1219) { // Medium screens
|
||||
lightbox.style.transform = 'scale(1.4)';
|
||||
} else { // Large screens
|
||||
lightbox.style.transform = 'scale(1.5)';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
+6
-6
@@ -138,10 +138,10 @@ Für mich als Coach & Mediator ist Vertraulichkeit der Schlüssel. Top!"
|
||||
<span class="satag--home-testimonial-title">Project Manager at Company 2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="satag--home-testimonials-text" data-testimonial-id="3">
|
||||
<img class="satag--home-testimonial-text-logo" src="../../assets/images/home/testimonials/satware-ag.png" alt="satware AG Logo">
|
||||
|
||||
|
||||
<p>
|
||||
"The integration capabilities of satware AI with our existing tools made adoption seamless. Our team productivity has increased by 35% since implementation, and the custom agents continue to learn our specific needs."
|
||||
</p>
|
||||
@@ -173,13 +173,13 @@ Für mich als Coach & Mediator ist Vertraulichkeit der Schlüssel. Top!"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end section testimonials -->
|
||||
|
||||
<script src="../javascripts/lightbox.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,11 +3,54 @@
|
||||
{% block styles %}
|
||||
{{ super() }}
|
||||
|
||||
<!-- Direct CSS styles for cookie consent -->
|
||||
<style>
|
||||
/* Specific targeting for the center container */
|
||||
#uc-center-container {
|
||||
position: absolute !important;
|
||||
top: 40px !important;
|
||||
margin: 0 auto !important;
|
||||
text-align: left !important;
|
||||
left: 35% !important;
|
||||
}
|
||||
|
||||
/* Direct targeting of Usercentrics elements */
|
||||
#usercentrics-root,
|
||||
[class*="usercentrics"],
|
||||
[id*="usercentrics"],
|
||||
.uc-banner-content,
|
||||
.uc-container,
|
||||
[class*="banner"],
|
||||
[class*="consent"],
|
||||
[class*="cookie"] {
|
||||
top: 20px !important;
|
||||
bottom: auto !important;
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* Special styling for landscape mode on smaller height screens */
|
||||
@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: 0 !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="satag--cookie-consent-container">
|
||||
<script id="usercentrics-cmp" async data-eu-mode="true" data-settings-id="plHHr67Ul9jqQP" src="https://app.eu.usercentrics.eu/browser-ui/latest/loader.js"></script>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
|
||||
File diff suppressed because one or more lines are too long
+12
-561
@@ -9,6 +9,17 @@
|
||||
@import "fontawesome/sharp-thin";
|
||||
|
||||
// Module importieren
|
||||
@import "modules/fonts";
|
||||
@import "modules/base";
|
||||
@import "modules/theme";
|
||||
@import "modules/scrollbar";
|
||||
@import "modules/typography";
|
||||
@import "modules/navigation";
|
||||
@import "modules/search";
|
||||
@import "modules/webinar";
|
||||
@import "modules/code";
|
||||
@import "modules/buttons";
|
||||
@import "modules/header-logo";
|
||||
@import "modules/consent";
|
||||
@import 'modules/team';
|
||||
@import "modules/header";
|
||||
@@ -16,568 +27,8 @@
|
||||
@import 'modules/home';
|
||||
@import 'modules/testimonials';
|
||||
@import "modules/faq";
|
||||
@import "modules/lightbox";
|
||||
|
||||
//Responsive Design
|
||||
|
||||
@import "responsive/medium";
|
||||
@import "responsive/mobile";
|
||||
|
||||
@mixin transition {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
// satware.ai CI-Anpassungen
|
||||
|
||||
/* 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('../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. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
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. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../assets/fonts/assistant-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
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 {
|
||||
|
||||
font-size: 100% !important;
|
||||
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
|
||||
.md-typeset,
|
||||
.md-nav {
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 85px;
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
line-height: 3rem;
|
||||
font-size: 2.7rem;
|
||||
|
||||
&:after {
|
||||
margin-top: .6rem;
|
||||
height: 7px;
|
||||
width: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset h3,
|
||||
h3 {
|
||||
|
||||
font-size: 2.1rem;
|
||||
|
||||
&:after {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
height: 4px;
|
||||
width: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-search-result .md-typeset {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-tabs {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-nav__container>.md-nav__link{
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.md-tabs__item {
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: .3s all ease;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 22px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: .7;
|
||||
transition: .3s all ease;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-tabs__list {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.md-tabs__link {
|
||||
opacity: 1;
|
||||
font-size: 1.2rem;
|
||||
|
||||
}
|
||||
|
||||
.md-search__form {
|
||||
input::placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.md-search-result__meta {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.md-source-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.satag--padding-container {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.satag--webinar-form-container {
|
||||
#nextcloud-form {
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: 3500px;
|
||||
transition: height .3s ease;
|
||||
color-scheme: dark;
|
||||
|
||||
.ng-csp {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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-content__inner {
|
||||
margin: 0 0 1.2rem;
|
||||
padding-top: .6rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
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-search__form {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.md-footer__title {
|
||||
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.md-footer__direction {
|
||||
font-size: 100%;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.md-top {
|
||||
border-radius: 0;
|
||||
top: 4vh !important;
|
||||
font-size: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
|
||||
svg {
|
||||
vertical-align: -.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
@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;
|
||||
|
||||
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;
|
||||
font-size: 1.1rem;
|
||||
border: .15rem solid;
|
||||
|
||||
&.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: 325px; // Größeres Logo (Standardwert ist 40px)
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigationsleiste anpassen
|
||||
.md-header {
|
||||
height: auto;
|
||||
|
||||
&__inner {
|
||||
padding: 0.5rem;
|
||||
max-width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
// 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: 1080px;
|
||||
}
|
||||
|
||||
.satag--padding-container {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.satag-trademark {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
@@ -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,75 @@
|
||||
/*
|
||||
* Cookie Consent Styling
|
||||
* Position the cookie consent container at the top of the website, 20px from the top edge
|
||||
*/
|
||||
|
||||
.satag--cookie-consent-container {
|
||||
position: fixed !important;
|
||||
top: 20px !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-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,
|
||||
#uc-center-container,
|
||||
[class*="banner"],
|
||||
[class*="consent"],
|
||||
[class*="cookie"] {
|
||||
top: 20px !important;
|
||||
bottom: auto !important;
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* Specific targeting for the center container */
|
||||
#uc-center-container {
|
||||
position: absolute !important;
|
||||
top: 40px !important;
|
||||
margin: 0 auto !important;
|
||||
text-align: left !important;
|
||||
left: 35% !important;
|
||||
}
|
||||
|
||||
[id*="center-container"]:not(#uc-center-container),
|
||||
[class*="center-container"] {
|
||||
top: 0 !important;
|
||||
position: absolute !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: 0 !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional styling to ensure the cookie consent is at the top */
|
||||
body iframe[id^="usercentrics-"],
|
||||
body [class*="usercentrics"],
|
||||
body [id*="usercentrics"] {
|
||||
top: 20px !important;
|
||||
bottom: auto !important;
|
||||
}
|
||||
|
||||
@@ -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('../../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. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
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. */
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../../assets/fonts/assistant-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
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+ */
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// 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: 0.2rem;
|
||||
padding-left: 0;
|
||||
|
||||
img, svg {
|
||||
width: 325px; // Größeres Logo (Standardwert ist 40px)
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigationsleiste anpassen
|
||||
.md-header {
|
||||
height: auto;
|
||||
|
||||
&__inner {
|
||||
padding: 0.5rem;
|
||||
max-width: 98%;
|
||||
}
|
||||
}
|
||||
@@ -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,110 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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,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,140 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// H2 styling
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
line-height: 3rem;
|
||||
font-size: 2.7rem;
|
||||
|
||||
&:after {
|
||||
margin-top: .6rem;
|
||||
height: 7px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// 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: 10;
|
||||
|
||||
// Style the tooltip content
|
||||
.md-tooltip__inner {
|
||||
font-size: .9rem !important;
|
||||
padding: 0.5rem !important;
|
||||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||||
border-radius: 4px !important;
|
||||
color: white !important;
|
||||
max-width: 300px !important;
|
||||
white-space: normal !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,15 @@
|
||||
// Webinar form styling
|
||||
|
||||
.satag--webinar-form-container {
|
||||
#nextcloud-form {
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: 3500px;
|
||||
transition: height .3s ease;
|
||||
color-scheme: dark;
|
||||
|
||||
.ng-csp {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
+243
@@ -0,0 +1,243 @@
|
||||
# Improvement Tasks for satware.ai Documentation
|
||||
|
||||
This document contains a detailed list of actionable improvement tasks for the satware.ai documentation project. Each task is designed to enhance the quality, performance, and maintainability of the documentation site.
|
||||
|
||||
## Code Organization and Structure
|
||||
|
||||
[ ] 1. Reorganize SCSS files into a more modular structure
|
||||
- Split large SCSS files into smaller, purpose-specific files
|
||||
- Create a consistent naming convention for all SCSS files
|
||||
- Document the purpose of each SCSS module
|
||||
|
||||
[ ] 2. Implement a consistent file naming convention across the project
|
||||
- Standardize on kebab-case or snake_case for all filenames
|
||||
- Ensure all filenames clearly indicate their purpose
|
||||
|
||||
[ ] 3. Add missing dependencies to requirements.txt
|
||||
- Add libsass/sass package which is used in compile_scss.py
|
||||
- Verify all dependencies are properly versioned
|
||||
|
||||
[ ] 4. Create a proper project structure documentation
|
||||
- Document the purpose of each directory
|
||||
- Explain the relationship between different components
|
||||
|
||||
[ ] 5. Implement Git hooks for pre-commit validation
|
||||
- Add linting for Markdown files
|
||||
- Add validation for SCSS/CSS files
|
||||
- Ensure proper formatting before commits
|
||||
|
||||
## Documentation Quality
|
||||
|
||||
[ ] 6. Establish consistent documentation standards
|
||||
- Create a style guide for documentation content
|
||||
- Define standards for headings, lists, code blocks, etc.
|
||||
- Implement templates for common documentation types
|
||||
|
||||
[ ] 7. Review and improve all documentation content
|
||||
- Check for spelling and grammar issues
|
||||
- Ensure consistent terminology throughout
|
||||
- Verify all links are working correctly
|
||||
|
||||
[ ] 8. Add proper documentation for custom components
|
||||
- Document all custom HTML/CSS components
|
||||
- Provide usage examples for each component
|
||||
- Create a component showcase page
|
||||
|
||||
[ ] 9. Improve code documentation
|
||||
- Add docstrings to all Python functions
|
||||
- Document CSS/SCSS classes and their purposes
|
||||
- Add comments to complex code sections
|
||||
|
||||
[ ] 10. Create contributor guidelines
|
||||
- Document the process for contributing to the project
|
||||
- Provide setup instructions for new contributors
|
||||
- Define code review and merge processes
|
||||
|
||||
## Build Process
|
||||
|
||||
[ ] 11. Improve the SCSS compilation process
|
||||
- Add source maps for easier debugging
|
||||
- Implement proper error reporting
|
||||
- Add autoprefixing for better browser compatibility
|
||||
|
||||
[ ] 12. Create a proper build pipeline
|
||||
- Implement a CI/CD workflow using GitHub Actions or similar
|
||||
- Add automated testing for the build process
|
||||
- Create staging and production deployment workflows
|
||||
|
||||
[ ] 13. Optimize the development workflow
|
||||
- Add hot reloading for all file types
|
||||
- Improve error reporting during development
|
||||
- Create a unified development command
|
||||
|
||||
[ ] 14. Add build validation steps
|
||||
- Implement link checking
|
||||
- Add HTML validation
|
||||
- Check for accessibility issues during build
|
||||
|
||||
[ ] 15. Create a proper release process
|
||||
- Document version numbering scheme
|
||||
- Implement changelog generation
|
||||
- Create release tagging process
|
||||
|
||||
## Performance Optimizations
|
||||
|
||||
[ ] 16. Optimize image assets
|
||||
- Implement proper image compression
|
||||
- Convert images to modern formats (WebP, AVIF)
|
||||
- Add responsive image handling
|
||||
|
||||
[ ] 17. Improve JavaScript performance
|
||||
- Minify and bundle JavaScript files
|
||||
- Implement lazy loading for non-critical scripts
|
||||
- Add proper error handling and logging
|
||||
|
||||
[ ] 18. Enhance CSS performance
|
||||
- Remove unused CSS
|
||||
- Optimize CSS delivery
|
||||
- Implement critical CSS loading
|
||||
|
||||
[ ] 19. Implement proper caching strategies
|
||||
- Add cache headers for static assets
|
||||
- Implement service worker for offline support
|
||||
- Use content hashing for cache busting
|
||||
|
||||
[ ] 20. Optimize page load performance
|
||||
- Reduce time to first contentful paint
|
||||
- Implement lazy loading for below-the-fold content
|
||||
- Optimize third-party script loading
|
||||
|
||||
## Accessibility Improvements
|
||||
|
||||
[ ] 21. Conduct a comprehensive accessibility audit
|
||||
- Test with screen readers
|
||||
- Check keyboard navigation
|
||||
- Verify color contrast ratios
|
||||
|
||||
[ ] 22. Implement proper ARIA attributes
|
||||
- Add appropriate ARIA roles
|
||||
- Ensure all interactive elements have proper labels
|
||||
- Implement proper focus management
|
||||
|
||||
[ ] 23. Improve form accessibility
|
||||
- Add proper labels for all form fields
|
||||
- Implement error messaging for form validation
|
||||
- Ensure keyboard accessibility for all forms
|
||||
|
||||
[ ] 24. Enhance content readability
|
||||
- Implement proper heading hierarchy
|
||||
- Ensure sufficient text contrast
|
||||
- Add alt text for all images
|
||||
|
||||
[ ] 25. Create an accessibility statement page
|
||||
- Document the accessibility standards followed
|
||||
- Provide contact information for accessibility issues
|
||||
- List known accessibility limitations
|
||||
|
||||
## SEO Enhancements
|
||||
|
||||
[ ] 26. Implement proper meta tags
|
||||
- Add OpenGraph tags for social sharing
|
||||
- Implement Twitter card metadata
|
||||
- Ensure all pages have unique meta descriptions
|
||||
|
||||
[ ] 27. Improve URL structure
|
||||
- Create SEO-friendly URLs
|
||||
- Implement proper redirects for changed URLs
|
||||
- Add canonical URLs where appropriate
|
||||
|
||||
[ ] 28. Enhance content for SEO
|
||||
- Optimize heading structure for keywords
|
||||
- Improve content readability scores
|
||||
- Add structured data where appropriate
|
||||
|
||||
[ ] 29. Implement XML sitemap
|
||||
- Generate a comprehensive sitemap
|
||||
- Add sitemap to robots.txt
|
||||
- Submit sitemap to search engines
|
||||
|
||||
[ ] 30. Add analytics and monitoring
|
||||
- Implement privacy-friendly analytics
|
||||
- Set up performance monitoring
|
||||
- Create SEO performance dashboards
|
||||
|
||||
## Content Structure and Organization
|
||||
|
||||
[ ] 31. Review and improve navigation structure
|
||||
- Optimize main navigation for usability
|
||||
- Implement breadcrumbs for better orientation
|
||||
- Create a logical content hierarchy
|
||||
|
||||
[ ] 32. Standardize content templates
|
||||
- Create consistent page templates
|
||||
- Implement standard sections for similar content
|
||||
- Ensure consistent formatting across pages
|
||||
|
||||
[ ] 33. Improve search functionality
|
||||
- Enhance search result relevance
|
||||
- Add search filters and facets
|
||||
- Implement search analytics
|
||||
|
||||
[ ] 34. Create a proper content strategy
|
||||
- Define target audiences and their needs
|
||||
- Map content to user journeys
|
||||
- Establish content update processes
|
||||
|
||||
[ ] 35. Implement content versioning
|
||||
- Add version indicators for documentation
|
||||
- Create an archive for older versions
|
||||
- Implement version switching functionality
|
||||
|
||||
## Internationalization and Localization
|
||||
|
||||
[ ] 36. Prepare for multi-language support
|
||||
- Implement proper language selection
|
||||
- Extract all UI strings for translation
|
||||
- Create a translation workflow
|
||||
|
||||
[ ] 37. Add language-specific SEO
|
||||
- Implement hreflang tags
|
||||
- Create language-specific sitemaps
|
||||
- Optimize metadata for each language
|
||||
|
||||
[ ] 38. Implement right-to-left (RTL) support
|
||||
- Add RTL stylesheets
|
||||
- Test UI components in RTL mode
|
||||
- Ensure proper text rendering for all languages
|
||||
|
||||
[ ] 39. Create localization guidelines
|
||||
- Document translation processes
|
||||
- Define terminology glossaries
|
||||
- Establish quality control for translations
|
||||
|
||||
[ ] 40. Implement region-specific content
|
||||
- Add region detection
|
||||
- Create region-specific examples
|
||||
- Implement locale-aware formatting
|
||||
|
||||
## Testing and Quality Assurance
|
||||
|
||||
[ ] 41. Implement automated testing
|
||||
- Add unit tests for JavaScript functionality
|
||||
- Create visual regression tests
|
||||
- Implement end-to-end testing
|
||||
|
||||
[ ] 42. Create a cross-browser testing strategy
|
||||
- Define supported browsers and versions
|
||||
- Implement browser-specific fixes
|
||||
- Document browser compatibility issues
|
||||
|
||||
[ ] 43. Add mobile device testing
|
||||
- Test on various device sizes
|
||||
- Implement device-specific optimizations
|
||||
- Create a responsive design testing process
|
||||
|
||||
[ ] 44. Implement content quality checks
|
||||
- Add spelling and grammar checking
|
||||
- Implement readability scoring
|
||||
- Create a content review process
|
||||
|
||||
[ ] 45. Create a user feedback mechanism
|
||||
- Add page rating functionality
|
||||
- Implement user feedback forms
|
||||
- Create a process for addressing user feedback
|
||||
@@ -152,6 +152,7 @@ extra_javascript:
|
||||
- assets/javascript/testimonials.js
|
||||
- assets/javascript/wcag.js
|
||||
- assets/javascript/faq.js
|
||||
- assets/javascript/lightbox.js
|
||||
|
||||
|
||||
# Navigation
|
||||
|
||||
Reference in New Issue
Block a user