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,36 @@
|
||||
//Fontawesome importieren
|
||||
|
||||
@import "fontawesome/fontawesome";
|
||||
@import "fontawesome/regular";
|
||||
@import "fontawesome/solid";
|
||||
@import "fontawesome/brands";
|
||||
@import "fontawesome/light";
|
||||
@import "fontawesome/sharp-light";
|
||||
@import "fontawesome/sharp-thin";
|
||||
|
||||
// Module importieren
|
||||
@import "modules/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";
|
||||
@import 'modules/footer';
|
||||
@import 'modules/home';
|
||||
@import 'modules/testimonials';
|
||||
@import "modules/faq";
|
||||
@import "modules/lightbox";
|
||||
@import "modules/blog";
|
||||
|
||||
|
||||
//Responsive Design
|
||||
@import "responsive/medium";
|
||||
@import "responsive/mobile";
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
// animating icons
|
||||
// --------------------------
|
||||
|
||||
.#{$fa-css-prefix}-beat {
|
||||
animation-name: #{$fa-css-prefix}-beat;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-bounce {
|
||||
animation-name: #{$fa-css-prefix}-bounce;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-fade {
|
||||
animation-name: #{$fa-css-prefix}-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-beat-fade {
|
||||
animation-name: #{$fa-css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip {
|
||||
animation-name: #{$fa-css-prefix}-flip;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-shake {
|
||||
animation-name: #{$fa-css-prefix}-shake;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin-reverse {
|
||||
--#{$fa-css-prefix}-animation-direction: reverse;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
|
||||
}
|
||||
|
||||
// if agent or operating system prefers reduced motion, disable animations
|
||||
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.#{$fa-css-prefix}-beat,
|
||||
.#{$fa-css-prefix}-bounce,
|
||||
.#{$fa-css-prefix}-fade,
|
||||
.#{$fa-css-prefix}-beat-fade,
|
||||
.#{$fa-css-prefix}-flip,
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-shake,
|
||||
.#{$fa-css-prefix}-spin,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-delay: -1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat {
|
||||
0%, 90% { transform: scale(1); }
|
||||
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-bounce {
|
||||
0% { transform: scale(1,1) translateY(0); }
|
||||
10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
|
||||
50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
|
||||
64% { transform: scale(1,1) translateY(0); }
|
||||
100% { transform: scale(1,1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-fade {
|
||||
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-flip {
|
||||
50% {
|
||||
transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-shake {
|
||||
0% { transform: rotate(-15deg); }
|
||||
4% { transform: rotate(15deg); }
|
||||
8%, 24% { transform: rotate(-18deg); }
|
||||
12%, 28% { transform: rotate(18deg); }
|
||||
16% { transform: rotate(-22deg); }
|
||||
20% { transform: rotate(22deg); }
|
||||
32% { transform: rotate(-12deg); }
|
||||
36% { transform: rotate(12deg); }
|
||||
40%, 100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// bordered + pulled icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-border {
|
||||
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
|
||||
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
|
||||
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
|
||||
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
|
||||
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
// base icon class definition
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix} {
|
||||
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
|
||||
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
|
||||
}
|
||||
|
||||
.fas,
|
||||
.fass,
|
||||
.far,
|
||||
.fasr,
|
||||
.fal,
|
||||
.fasl,
|
||||
.fat,
|
||||
.fast,
|
||||
.fad,
|
||||
.fadr,
|
||||
.fadl,
|
||||
.fadt,
|
||||
.fasds,
|
||||
.fasdr,
|
||||
.fasdl,
|
||||
.fasdt,
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.#{$fa-css-prefix}-regular,
|
||||
.#{$fa-css-prefix}-light,
|
||||
.#{$fa-css-prefix}-thin,
|
||||
.#{$fa-css-prefix}-brands,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-duotone,
|
||||
.#{$fa-css-prefix}-sharp,
|
||||
.#{$fa-css-prefix}-sharp-duotone,
|
||||
.#{$fa-css-prefix} {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.fas::before,
|
||||
.fass::before,
|
||||
.far::before,
|
||||
.fasr::before,
|
||||
.fal::before,
|
||||
.fasl::before,
|
||||
.fat::before,
|
||||
.fast::before,
|
||||
.fad::before,
|
||||
.fadr::before,
|
||||
.fadl::before,
|
||||
.fadt::before,
|
||||
.fasds::before,
|
||||
.fasdr::before,
|
||||
.fasdl::before,
|
||||
.fasdt::before,
|
||||
.fab::before,
|
||||
.#{$fa-css-prefix}-solid::before,
|
||||
.#{$fa-css-prefix}-regular::before,
|
||||
.#{$fa-css-prefix}-light::before,
|
||||
.#{$fa-css-prefix}-thin::before,
|
||||
.#{$fa-css-prefix}-brands::before,
|
||||
.#{$fa-css-prefix}-classic::before,
|
||||
.#{$fa-css-prefix}-duotone::before,
|
||||
.#{$fa-css-prefix}-sharp::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone::before,
|
||||
.fa::before {
|
||||
content: var(#{$fa-icon-property});
|
||||
}.fad::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-solid::after,
|
||||
.#{$fa-css-prefix}-duotone::after,
|
||||
.fadr::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular::after,
|
||||
.fadl::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light::after,
|
||||
.fadt::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin::after,
|
||||
.fasds::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone::after,
|
||||
.fasdr::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular::after,
|
||||
.fasdl::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light::after,
|
||||
.fasdt::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin::after {
|
||||
content: var(#{$fa-duotone-icon-property});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-classic.#{$fa-css-prefix}-duotone {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-sharp {
|
||||
font-weight: 900;
|
||||
}
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-duotone {
|
||||
font-weight: 900;
|
||||
}
|
||||
.fasds,
|
||||
.#{$fa-css-prefix}-sharp-duotone {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular,
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-light,
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
}
|
||||
.#{$fa-css-prefix}-duotone,
|
||||
.fad,
|
||||
.fadr,
|
||||
.fadl,
|
||||
.fadt {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
}
|
||||
.#{$fa-css-prefix}-brands,
|
||||
.fab {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
}
|
||||
.#{$fa-css-prefix}-sharp,
|
||||
.fass,
|
||||
.fasr,
|
||||
.fasl,
|
||||
.fast {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
}
|
||||
.#{$fa-css-prefix}-sharp-duotone,
|
||||
.fasds,
|
||||
.fasdr,
|
||||
.fasdl,
|
||||
.fasdt {
|
||||
font-family: 'Font Awesome 6 Sharp Duotone';
|
||||
}
|
||||
|
||||
%fa-icon {
|
||||
@include fa-icon;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// fixed-width icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-fw {
|
||||
text-align: center;
|
||||
width: $fa-fw-width;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// functions
|
||||
// --------------------------
|
||||
|
||||
// fa-content: convenience function used to set content property
|
||||
@function fa-content($fa-var) {
|
||||
@return unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
|
||||
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
|
||||
//
|
||||
// Licensed under: The MIT License (MIT)
|
||||
//
|
||||
// Copyright (c) 2011-2021 Twitter, Inc.
|
||||
// Copyright (c) 2011-2021 The Bootstrap Authors
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
|
||||
@function fa-divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
$quotient: 0;
|
||||
$remainder: $dividend;
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
@if $divisor == 1 {
|
||||
@return $dividend;
|
||||
}
|
||||
@while $remainder >= $divisor {
|
||||
$quotient: $quotient + 1;
|
||||
$remainder: $remainder - $divisor;
|
||||
}
|
||||
@if $remainder > 0 and $precision > 0 {
|
||||
$remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
|
||||
}
|
||||
@return ($quotient + $remainder) * $sign;
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
// specific icon class definition
|
||||
// -------------------------
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
|
||||
@each $name, $icon in $fa-icons {
|
||||
.#{$fa-css-prefix}-#{$name} {
|
||||
#{$fa-icon-property}: unquote("\"#{ $icon }\"");
|
||||
#{$fa-duotone-icon-property}: unquote("\"#{$icon}#{$icon}\"");
|
||||
}
|
||||
}
|
||||
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
// icons in a list
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
|
||||
padding-left: 0;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-li {
|
||||
left: calc(-1 * var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}));
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
|
||||
line-height: inherit;
|
||||
}
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
// mixins
|
||||
// --------------------------
|
||||
|
||||
// base rendering for an icon
|
||||
@mixin fa-icon {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// sets relative font-sizing and alignment (in _sizing)
|
||||
@mixin fa-size ($font-size) {
|
||||
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
|
||||
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
||||
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
|
||||
}
|
||||
|
||||
// only display content to screen readers
|
||||
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
||||
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
@mixin fa-sr-only() {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
@mixin fa-sr-only-focusable() {
|
||||
&:not(:focus) {
|
||||
@include fa-sr-only();
|
||||
}
|
||||
}
|
||||
|
||||
// sets a specific icon family to use alongside style + icon mixins
|
||||
@mixin fa-family-classic() {
|
||||
@extend .fa-classic;
|
||||
}
|
||||
@mixin fa-family-duotone() {
|
||||
@extend .fa-duotone;
|
||||
}
|
||||
@mixin fa-family-sharp() {
|
||||
@extend .fa-sharp;
|
||||
}
|
||||
@mixin fa-family-sharp-duotone() {
|
||||
@extend .fa-sharp-duotone;
|
||||
}
|
||||
|
||||
// convenience mixins for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties
|
||||
@mixin fa-icon-solid($fa-var) {
|
||||
@extend .fa-solid;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-regular($fa-var) {
|
||||
@extend .fa-regular;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-light($fa-var) {
|
||||
@extend .fa-light;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-thin($fa-var) {
|
||||
@extend .fa-thin;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-duotone($fa-var) {
|
||||
@extend .fa-duotone;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-brands($fa-var) {
|
||||
@extend .fa-brands;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// rotating + flipping icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-both,
|
||||
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0));
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// screen-reader utilities
|
||||
// -------------------------
|
||||
|
||||
// only display content to screen readers
|
||||
.sr-only,
|
||||
.#{$fa-css-prefix}-sr-only {
|
||||
@include fa-sr-only;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
.sr-only-focusable,
|
||||
.#{$fa-css-prefix}-sr-only-focusable {
|
||||
@include fa-sr-only-focusable;
|
||||
}
|
||||
+1578
File diff suppressed because it is too large
Load Diff
+16
@@ -0,0 +1,16 @@
|
||||
// sizing icons
|
||||
// -------------------------
|
||||
|
||||
// literal magnification scale
|
||||
@for $i from 1 through 10 {
|
||||
.#{$fa-css-prefix}-#{$i}x {
|
||||
font-size: $i * 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// step-based scale (with alignment)
|
||||
@each $size, $value in $fa-sizes {
|
||||
.#{$fa-css-prefix}-#{$size} {
|
||||
@include fa-size($value);
|
||||
}
|
||||
}
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
// stacking icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: $fa-stack-vertical-align;
|
||||
width: $fa-stack-width;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
|
||||
}
|
||||
+9734
File diff suppressed because it is too large
Load Diff
+30
@@ -0,0 +1,30 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
|
||||
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@each $name, $icon in $fa-brand-icons {
|
||||
.#{$fa-css-prefix}-#{$name} { #{$fa-icon-property}: unquote("\"#{ $icon }\""); }
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-duotone: 'Font Awesome 6 Duotone';
|
||||
--#{$fa-css-prefix}-font-duotone-light: normal 300 1em/1 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-duotone-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-duotone-light-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fadl,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light {
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fadl::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fadl::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fadl::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light::before,
|
||||
.fadl.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fadl::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light::after,
|
||||
.fadl.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fadl.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fadl.#{$fa-css-prefix}-stack-1x,
|
||||
.fadl.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-duotone: 'Font Awesome 6 Duotone';
|
||||
--#{$fa-css-prefix}-font-duotone-regular: normal 400 1em/1 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-duotone-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-duotone-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fadr,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular {
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fadr::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fadr::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fadr::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular::before,
|
||||
.fadr.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fadr::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular::after,
|
||||
.fadr.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fadr.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fadr.#{$fa-css-prefix}-stack-1x,
|
||||
.fadr.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-duotone: 'Font Awesome 6 Duotone';
|
||||
--#{$fa-css-prefix}-font-duotone-thin: normal 100 1em/1 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-duotone-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-duotone-thin-100.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fadt,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin {
|
||||
position: relative;
|
||||
font-weight: 100;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fadt::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fadt::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fadt::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin::before,
|
||||
.fadt.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fadt::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin::after,
|
||||
.fadt.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fadt.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fadt.#{$fa-css-prefix}-stack-1x,
|
||||
.fadt.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-duotone: 'Font Awesome 6 Duotone';
|
||||
--#{$fa-css-prefix}-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-duotone-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-duotone-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-duotone {
|
||||
position: relative;
|
||||
font-weight: 900;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fad::before,
|
||||
.#{$fa-css-prefix}-duotone::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fad::after,
|
||||
.#{$fa-css-prefix}-duotone::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fad::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .fa-duotone::before,
|
||||
.fad.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.fa-duotone.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fad::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .fa-duotone::after,
|
||||
.fad.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.fa-duotone.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fad.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fad.#{$fa-css-prefix}-stack-1x, .fad.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
// Font Awesome core compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'core';
|
||||
@import 'sizing';
|
||||
@import 'fixed-width';
|
||||
@import 'list';
|
||||
@import 'bordered-pulled';
|
||||
@import 'animated';
|
||||
@import 'rotated-flipped';
|
||||
@import 'stacked';
|
||||
@import 'icons';
|
||||
@import 'screen-reader';
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp-duotone: 'Font Awesome 6 Sharp Duotone';
|
||||
--#{$fa-css-prefix}-font-sharp-duotone-light: normal 300 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-duotone-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-duotone-light-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasdl,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light {
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fasdl::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasdl::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasdl::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light::before,
|
||||
.fasdl.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasdl::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light::after,
|
||||
.fasdl.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasdl.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fasdl.#{$fa-css-prefix}-stack-1x,
|
||||
.fasdl.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-light.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp-duotone: 'Font Awesome 6 Sharp Duotone';
|
||||
--#{$fa-css-prefix}-font-sharp-duotone-regular: normal 400 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-duotone-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-duotone-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasdr,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular {
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fasdr::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasdr::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasdr::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular::before,
|
||||
.fasdr.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasdr::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular::after,
|
||||
.fasdr.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasdr.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fasdr.#{$fa-css-prefix}-stack-1x,
|
||||
.fasdr.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-regular.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp-duotone: 'Font Awesome 6 Sharp Duotone';
|
||||
--#{$fa-css-prefix}-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-duotone-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-duotone-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasds,
|
||||
.#{$fa-css-prefix}-sharp-duotone,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid {
|
||||
position: relative;
|
||||
font-weight: 900;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fasds::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasds::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasds::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid::before,
|
||||
.fasds.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasds::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid::after,
|
||||
.fasds.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasds.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fasds.#{$fa-css-prefix}-stack-1x,
|
||||
.fasds.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-solid.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp-duotone: 'Font Awesome 6 Sharp Duotone';
|
||||
--#{$fa-css-prefix}-font-sharp-duotone-thin: normal 100 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-duotone-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-duotone-thin-100.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasdt,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin {
|
||||
position: relative;
|
||||
font-weight: 100;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fasdt::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasdt::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasdt::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin::before,
|
||||
.fasdt.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fasdt::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin::after,
|
||||
.fasdt.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fasdt.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fasdt.#{$fa-css-prefix}-stack-1x,
|
||||
.fasdt.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-sharp-duotone.#{$fa-css-prefix}-thin.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-light-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasl,
|
||||
.#{$fa-css-prefix}-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasr,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-thin-100.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fast,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
// V4 shims compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'shims';
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
|
||||
@media (max-width: 1219px) {
|
||||
body{
|
||||
|
||||
.md-grid {
|
||||
padding: 2rem;
|
||||
}
|
||||
.md-grid .md-content{
|
||||
padding: 4rem;
|
||||
}
|
||||
.md-footer-container,
|
||||
.md-footer-custom-links{
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.md-typeset h1,
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) and (min-width: 769px) {
|
||||
body{
|
||||
.satag--home-landing .satag--home-companies{
|
||||
padding: 4rem 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label.md-header__button.md-icon:last-of-type{
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
content: "\f002";
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: 100;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
|
||||
.md-nav__link {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.satag--padding-container{
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.satag--home-companies{
|
||||
padding: 4rem 3rem;
|
||||
width: 100vw !important;
|
||||
left: 50% !important;
|
||||
right: 50% !important;
|
||||
margin-left: -50vw !important;
|
||||
margin-right: -50vw !important;
|
||||
|
||||
|
||||
.satag--home-companies-logo--container{
|
||||
.satag--home-companies-logo{
|
||||
img {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-button{
|
||||
padding: 1em 2.3em !important;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@media (max-width: 768px) {
|
||||
.md-nav--primary .md-nav__title{
|
||||
padding: 3rem 1rem !important;
|
||||
img{
|
||||
margin-top: -1.7rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide desktop logo in mobile view */
|
||||
.md-header__button.md-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show and style mobile logo */
|
||||
.md-header__mobile-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.5rem;
|
||||
|
||||
img {
|
||||
height: 1.8rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body{
|
||||
|
||||
|
||||
|
||||
.md-typeset .headerlink{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
padding: 2rem;
|
||||
}
|
||||
.md-grid .md-content{
|
||||
padding: 1rem;
|
||||
}
|
||||
.md-footer-container,
|
||||
.md-footer-custom-links{
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.md-nav__link {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.satag--home-companies{
|
||||
width: 100vw !important;
|
||||
left: 50% !important;
|
||||
right: 50% !important;
|
||||
margin-left: -50vw !important;
|
||||
margin-right: -50vw !important;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
|
||||
.md-typeset h1,
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
|
||||
&:after{
|
||||
height: 7px;
|
||||
width: 46px;
|
||||
margin-top: .7rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
&:after{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
height: 5px;
|
||||
width: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-agent-position{
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
{% extends "main.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h1>BLOG</h1>
|
||||
|
||||
<div class="md-posts">
|
||||
{% for post in posts %}
|
||||
<article class="md-post md-post--excerpt">
|
||||
<!--<div class="md-post__meta">
|
||||
<time datetime="{{ post.meta.date }}">{{ post.meta.date }}</time>
|
||||
{% if post.meta.categories %}
|
||||
<span class="md-post__categories">
|
||||
{% for category in post.meta.categories %}
|
||||
{{ category }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if post.meta.readtime %}
|
||||
<span>{{ post.meta.readtime }} Min. Lesezeit</span>
|
||||
{% endif %}
|
||||
</div>-->
|
||||
|
||||
<h2 class="md-post__title">
|
||||
<a href="{{ post.url | replace('blog/', '') }}" title="{{ post.title }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
|
||||
<!-- Post-Excerpt hinzufügen -->
|
||||
<div class="md-post__excerpt">
|
||||
{% if post.excerpt %}
|
||||
{{ post.excerpt }}
|
||||
{% elif post.content | length > 0 %}
|
||||
{{ post.content | striptags | truncate(200, true, "...") }}
|
||||
{% else %}
|
||||
<!-- Fallback, falls kein Excerpt oder Inhalt verfügbar ist -->
|
||||
<p>Mehr Informationen im vollständigen Artikel.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<a href="{{ post.url | replace('blog/', '') }}" class="md-button" title="Weiterlesen: {{ post.title }}">Weiterlesen</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,51 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
{% include "partials/title.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ super() }}
|
||||
<!-- Social card meta tags -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="{{ page.title }}">
|
||||
<meta property="og:description" content="{{ config.site_description }}">
|
||||
<meta property="og:image" content="{{ config.site_url }}assets/images/home/share.jpg">
|
||||
<meta property="og:image:type" content="image/jpeg">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:url" content="{{ page.canonical_url }}">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ page.title }}">
|
||||
<meta name="twitter:description" content="{{ config.site_description }}">
|
||||
<meta name="twitter:image" content="{{ config.site_url }}assets/images/home/share.jpg">
|
||||
|
||||
<!-- Usercentrics CMP von eRecht24 -->
|
||||
<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>
|
||||
|
||||
<!-- Matomo - mit eRecht24 Integration -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
_paq.push(["setExcludedQueryParams", ["utm_source","utm_medium","utm_campaign","utm_content","utm_term","fbclid","gclid","_ga","ref","osCsid","uKey"]]);
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://ut.literama.de/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '63']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block styles %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<div class="md-footer-container">
|
||||
<div class="satag--custom-footer-column left">
|
||||
<div class="satag--footer-text">
|
||||
satware AG<br>
|
||||
Friedrich-Ebert-Str. 34<br>
|
||||
67549 Worms
|
||||
</div>
|
||||
</div>
|
||||
<div class="satag--custom-footer-column right">
|
||||
<div class="satag--footer-text">
|
||||
<a href="tel:+496241987280" title="Rufen Sie uns jetzt an">06241 987280</a><br><a
|
||||
href="mailto:info@satware.com"
|
||||
title="Schreiben Sie uns direkt eine E-Mail">info@satware.com</a>
|
||||
</div>
|
||||
<div class="satag--footer-social-icons">
|
||||
<a target="_blank" href="https://www.facebook.com/satwareAG/"
|
||||
title="satware AG auf Facebook"><i class="fa-brands fa-square-facebook"></i></a><a
|
||||
target="_blank" href="https://www.instagram.com/satware.ag/"
|
||||
title="Zur Instagram Page der satware AG"><i class="fa-brands fa-instagram"></i></a><a
|
||||
target="_blank" href="https://www.linkedin.com/company/satware-ag/?originalSubdomain=de"
|
||||
title="satware AG auf LinkedIn"><i class="fa-brands fa-linkedin"></i></a><a
|
||||
target="_blank" href="https://twitter.com/satwareAG" title="satware AG auf X"><i
|
||||
class="fa-brands fa-x-twitter"></i></a><a target="_blank"
|
||||
href="https://www.xing.com/pages/satwareag"
|
||||
title="satware AG auf xing"><i
|
||||
class="fa-brands fa-xing"></i></a><a target="_blank"
|
||||
href="https://www.youtube.com/channel/UChfn2XBDE9yfZrWnMzs1k0g"
|
||||
title="Zum YouTube Kanal der satware AG"><i
|
||||
class="fa-brands fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer-custom-links">
|
||||
<a href="https://satware.com/custom/index/sCustom/1" target="_blank" title="Kontakt">Kontakt</a>
|
||||
<a href="{{ config.site_url }}impressum/" title="Impressum">Impressum</a>
|
||||
<a href="{{ config.site_url }}/datenschutz/" title="sDatenschutzerklärung">Datenschutz</a>
|
||||
<!--<a href="/barrierefreiheitserklaerung" title="Barrierefreiheitserklärung">Barrierefreiheitserklärung</a>-->
|
||||
<a href="{{ config.site_url }}satway/" title="satWay Prinzipien">saTway</a>
|
||||
<a href="https://satware.com/newsletter" target="_blank" title="Newsletter">Newsletter</a>
|
||||
</div>
|
||||
@@ -0,0 +1,73 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% set class = "md-header" %}
|
||||
{% if "navigation.tabs.sticky" in features %}
|
||||
{% set class = class ~ " md-header--shadow md-header--lifted" %}
|
||||
{% elif "navigation.tabs" not in features %}
|
||||
{% set class = class ~ " md-header--shadow" %}
|
||||
{% endif %}
|
||||
<header class="{{ class }}" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
|
||||
<a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}" data-md-component="logo">
|
||||
{% include "partials/logo.html" %}
|
||||
</a>
|
||||
<label class="md-header__button md-icon" for="__drawer">
|
||||
{% set icon = config.theme.icon.menu or "material/menu" %}
|
||||
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||
</label>
|
||||
<!-- Mobile view: Logo next to burger menu -->
|
||||
<a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__mobile-logo" aria-label="{{ config.site_name }}">
|
||||
<img src="{{ config.theme.logo | url }}" alt="logo">
|
||||
</a>
|
||||
<div class="md-header__title" data-md-component="header-title">
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
{{ config.site_name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
<span class="md-ellipsis">
|
||||
{% if page.meta and page.meta.title %}
|
||||
{{ page.meta.title }}
|
||||
{% else %}
|
||||
{{ page.title }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if config.theme.palette %}
|
||||
{% if not config.theme.palette is mapping %}
|
||||
{% include "partials/palette.html" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if not config.theme.palette is mapping %}
|
||||
{% include "partials/javascripts/palette.html" %}
|
||||
{% endif %}
|
||||
{% if config.extra.alternate %}
|
||||
{% include "partials/alternate.html" %}
|
||||
{% endif %}
|
||||
{% if "material/search" in config.plugins %}
|
||||
{% set search = config.plugins["material/search"] | attr("config") %}
|
||||
{% if search.enabled %}
|
||||
<label class="md-header__button md-icon" for="__search">
|
||||
{% set icon = config.theme.icon.search or "material/magnify" %}
|
||||
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||
</label>
|
||||
{% include "partials/search.html" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if config.repo_url %}
|
||||
<div class="md-header__source">
|
||||
{% include "partials/source.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% if "navigation.tabs.sticky" in features %}
|
||||
{% if "navigation.tabs" in features %}
|
||||
{% include "partials/tabs.html" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</header>
|
||||
@@ -0,0 +1,48 @@
|
||||
{% if config.plugins.blog.post_url_format %}
|
||||
<div class="md-posts">
|
||||
{% for post in posts %}
|
||||
<article class="md-post md-post--excerpt">
|
||||
<header class="md-post__header">
|
||||
{% if post.authors %}
|
||||
<nav class="md-post__authors md-typeset">
|
||||
{% for author in post.authors %}
|
||||
<span class="md-author">
|
||||
<img src="{{ author.avatar }}" alt="{{ author.name }}">
|
||||
</span>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
<div class="md-post__meta md-typeset">
|
||||
<time datetime="{{ post.config.date.created }}">
|
||||
{{ post.config.date.created | date }}
|
||||
</time>
|
||||
{% if post.categories %}
|
||||
<span class="md-post__categories">
|
||||
{% for category in post.categories %}
|
||||
<a href="{{ category.url | url }}" title="Kategorie: {{ category.title }}">{{ category.title }}</a>
|
||||
{%- if not loop.last %}, {% endif -%}
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if post.config.readtime %}
|
||||
<span>{{ post.config.readtime }} Min. Lesezeit</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
<div class="md-post__content md-typeset">
|
||||
<h2>
|
||||
<a href="{{ post.url | replace('blog/', '') | url }}" title="{{ post.config.title }}">{{ post.config.title }}</a>
|
||||
</h2>
|
||||
|
||||
<!-- Wir zeigen nur die Überschrift an, kein Excerpt oder weiterer Inhalt -->
|
||||
|
||||
<nav class="md-post__action">
|
||||
<a href="{{ post.url | replace('blog/', '') | url }}" class="md-button" title="Weiterlesen: {{ post.config.title }}">
|
||||
Weiterlesen
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -0,0 +1,62 @@
|
||||
<!-- docs/overrides/partials/search.html -->
|
||||
<div class="md-search" data-md-component="search" role="dialog">
|
||||
<label class="md-search__overlay" for="__search"></label>
|
||||
<div class="md-search__inner" role="search">
|
||||
<form class="md-search__form" name="search">
|
||||
<input
|
||||
type="text"
|
||||
class="md-search__input"
|
||||
name="query"
|
||||
aria-label="{{ lang.t('search.placeholder') }}"
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
data-md-component="search-query"
|
||||
required
|
||||
/>
|
||||
<label class="md-search__icon md-icon" for="__search">
|
||||
{% include ".icons/material/magnify.svg" %}
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</label>
|
||||
<nav class="md-search__options" aria-label="{{ lang.t('search.title') }}">
|
||||
{% if "search.share" in features %}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="md-search__icon md-icon"
|
||||
title="{{ lang.t('search.share') }}"
|
||||
aria-label="{{ lang.t('search.share') }}"
|
||||
data-clipboard
|
||||
data-clipboard-text=""
|
||||
data-md-component="search-share"
|
||||
tabindex="-1"
|
||||
>
|
||||
{% include ".icons/material/share-variant.svg" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button
|
||||
type="reset"
|
||||
class="md-search__icon md-icon"
|
||||
title="{{ lang.t('search.reset') }}"
|
||||
aria-label="{{ lang.t('search.reset') }}"
|
||||
tabindex="-1"
|
||||
>
|
||||
{% include ".icons/material/close.svg" %}
|
||||
</button>
|
||||
</nav>
|
||||
{% if "search.suggest" in features %}
|
||||
<div class="md-search__suggest" data-md-component="search-suggest"></div>
|
||||
{% endif %}
|
||||
</form>
|
||||
<div class="md-search__output">
|
||||
<div class="md-search__scrollwrap" tabindex="-1">
|
||||
<div class="md-search-result" data-md-component="search-result">
|
||||
<div class="md-search-result__meta">
|
||||
{{ lang.t("search.result.initializer") }}
|
||||
</div>
|
||||
<ol class="md-search-result__list" role="presentation"></ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
{% if page and page.meta and page.meta.title %}
|
||||
{{ page.meta.title }}
|
||||
{% elif page and page.title and not page.is_homepage %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ config.site_name }}
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user