Light Theme

.vitepress/config.mts

@@ -9,7 +9,7 @@ export default defineConfig({
   srcDir: './src', // all *.md files in a subfolder called 'src'
   cleanUrls: true, // without extension like .html
   lastUpdated: true,
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  head: [['link', { rel: 'icon', href: '/favicon.ico' }], ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com'}], ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com'}],['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap' }]],
   markdown: {
     image: {
       lazyLoading: true

.vitepress/theme/index.css

@@ -1,7 +1,245 @@
-.medium-zoom-overlay {
-    z-index: 30;
-  }
+:root {
+  /* Brand colors */
+  --vp-c-brand-1: #4F9D69;
+  --vp-c-brand-2: #10497c;
+  --vp-c-brand-3: #4F9D69;
+
+  --vp-button-brand-hover-bg: #2e7e4c;
+  --vp-button-alt-bg: rgba(0, 0, 0, 0.1);
+  --vp-button-alt-hover-bg: rgba(0, 0, 0, 0.2);
+
+  /* Background colors */
+  --vp-c-bg: #E9E8D8;
+  --vp-c-bg-alt: #DDDBC3;
+  --vp-c-bg-elv: #DFDECE;
+  --vp-c-bg-soft: #DDDBC3;
+
+  /* Text colors */
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-c-text-3: rgba(60, 60, 67, 0.56);
+
+  /* Overlays and shadows */
+  --vp-c-divider: rgba(0,0,0,0.3);
+  --vp-c-gutter: rgba(0,0,0,0.3);
+  --vp-c-tip-soft: var(--vp-c-bg-soft);
+  --vp-c-important-soft: rgba(46,100,153,0.15);
+  --vp-c-warning-soft: rgba(173,153,0,0.15);
+  --vp-c-danger-soft: rgba(150,3,26,0.15);
+  --vp-c-caution: #8932a4;
+  --vp-c-danger: #ad262d;
+  --vp-c-important: #2e6499;
+
+  --vp-c-customblock-opacity: 0.15;
+  --vp-c-caution-soft: rgba(132,10,162, var(--vp-c-customblock-opacity));
+
+  /* Font settings */
+  --vp-font-family-base: "Raleway", sans-serif;
+  --vp-font-family-mono: "Source Code Pro", monospace;
+
+  --vp-custom-block-warning-text: #775D00;
+  --vp-custom-block-font-size: 1.2rem;
+  --vp-code-color: var(--vp-c-brand-2);
+  --vp-custom-block-important-text: var(--vp-c-brand-2);
+
+  --vp-custom-block-danger-text: var(--vp-c-danger);
+  --vp-custom-block-caution-text: var(--vp-c-caution);
+
+  /* Borders */
+  --vp-local-search-result-border: rgba(0,0,0,0.3);
+
+  --vp-input-switch-bg-color: var(--vp-c-brand-1);
+  --vp-input-border-color: var(--vp-c-bg-alt);
+
+  --vp-code-color: var(--vp-c-text-2);
+}
+
+.dark {
+  /* Dark mode background colors */
+  --vp-c-bg: #23272a;
+  --vp-c-bg-alt: #1e2225;  /* #171b1e; */
+  --vp-c-bg-elv: #3d4043;
+  --vp-c-bg-soft: #2F3438;
+
+  /* Dark mode text colors */
+  --vp-c-text-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-3: rgba(235, 235, 245, 0.38);
+
+  /* Dark mode overlays and shadows */
+  --vp-c-tip-soft: rgba(255, 255, 255, 0.15);
+  --vp-local-search-result-border: var(--vp-c-bg-soft);
+
+  /* Dark mode specific colors */
+  --vp-c-brand-1: #6EC089;
+  --vp-c-brand-2: #9cd3ff;
+  --vp-c-brand-3: #6EC089;
+  --vp-c-danger: #d34c4c;
+  --vp-c-warning: #ceb346;
+  --vp-c-caution: #ab55c7;
+  --vp-c-important: #4e84bb;
+
+  --vp-button-brand-text: var(--vp-c-black);
+  --vp-button-alt-bg: rgba(255, 255, 255, 0.1);
+  --vp-button-alt-hover-bg: rgba(255, 255, 255, 0.2);
+
+  --vp-custom-block-important-border: rgba(82,142,203,0.2);
+  --vp-custom-block-tip-border: rgba(255, 255, 255, 0.15);
+  --vp-custom-block-caution-border: rgba(202,111,225,0.2);
+  --vp-custom-block-warning-border: rgba(215,184,10,0.2);
+  --vp-custom-block-danger-border: rgba(234,87,109,0.2);
+
+  --vp-custom-block-warning-text: var( --vp-c-warning);
+  --vp-custom-block-danger-text: rgba(234,87,109,1);
+  --vp-custom-block-caution-text: var(--vp-c-caution);
 
-  .medium-zoom-image {
-    z-index: 31;
-  }
+  --vp-input-border-color: var(--vp-c-bg-alt);
+
+  --vp-c-divider: rgba(255,255,255,0.15);
+  --vp-c-gutter: rgba(255,255,255,0.07);
+
+  .DocSearch-Button .DocSearch-Button-Key {
+      background: var(--vp-c-bg-elv);
+      border: none;
+  }
+
+  button[class*="DocSearch"] {
+      background: var(--vp-c-bg-soft);
+  }
+}
+
+body {
+  font-size: 1.2rem;
+  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-base);
+}
+
+.dark .pager-link {
+  background: var(--vp-c-bg-elv);
+  border: none !important;
+}
+
+.VPSwitch  {
+  border: 1px solid var(--vp-input-switch-bg-color) !important;
+  background-color: var(--vp-input-switch-bg-color);
+  transition: border-color 0.25s !important;
+}
+
+.vp-doc .custom-block-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.1rem;
+}
+
+.outline-link {
+  font-weight: 600 !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--vp-c-text-1);
+}
+
+.VPNavBarMenuLink.active {
+  font-weight: 700;
+  border-bottom: 2pt solid;
+}
+
+.vp-doc strong, .vp-doc b {
+  font-variation-settings: "wght" 600;
+}
+
+.vp-doc p, .vp-doc ul {
+  font-family: "Source Sans 3";
+  line-height: 2rem;
+  /*font-weight: 450;*/
+  font-variation-settings: "wght" 450;
+}
+
+.dark .vp-doc p {
+  /* font-weight: 400;*/
+  font-variation-settings: "wght" 400;
+}
+
+.vp-doc a {
+  color: var(--vp-c-important);
+}
+
+.vp-doc a:hover {
+  color: var(--vp-custom-block-important-text);
+}
+
+/* Navigation and Sidebar */
+.VPLocalNav {
+  border-bottom: none !important;
+}
+
+.VPSidebarItem.level-1 > .item .link > .text, 
+.VPSidebarItem.level-2 > .item .link > .text {
+  font-weight: 600;
+}
+
+.VPSidebarItem .is-active {
+  border-radius: 0.25rem;
+  background: var(--vp-c-bg-soft);
+  padding-left: 1rem;
+}
+
+.VPSidebarItem.level-1.is-active > .item .link > .text, 
+.VPSidebarItem.level-2.is-active > .item .link > .text {
+  color: var(--vp-c-text-1) !important;
+}
+
+.VPSidebarItem.level-1.is-active > .item > .indicator, 
+.VPSidebarItem.level-2.is-active > .item > .indicator {
+  display: none;
+}
+
+/* Search Components */
+.search-bar, .result {
+  background: var(--vp-c-bg-alt);
+  border: none !important;
+}
+
+.result.selected {
+  border: solid 2px var(--vp-local-search-result-border) !important;
+}
+
+.result.selected .titles, .result.selected .title-icon {
+  color: var(--vp-c-text-1) !important; /* fix needed */
+}
+
+/* Image and Video Zoom */
+.medium-zoom-overlay {
+  z-index: 30;
+}
+
+.vp-doc table {
+  font-weight: 550;
+}
+
+img:not([src$=".svg"]).medium-zoom-image, video {
+  transition: all 0.2s ease-out !important; 
+  z-index: 31;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 1rem oklch(25% 0.0213 103.9 / 20%), 0 0 0.25rem oklch(25% 0.0213 103.9 / 15%);
+  display: inline-block;
+}
+
+.vp-doc p {
+  transition: transform 0.1s ease !important;
+  perspective: 1000px !important;
+  display: inline-block !important;
+}
+
+.vp-doc p > img:not([src$=".svg"]).medium-zoom-image, .vp-doc p > video {
+  transition: all 0.2s ease-out !important;
+  transform-style: preserve-3d;
+  display: inline-block !important;
+  transform: perspective(1000px) rotateY(0deg);
+}
+.vp-doc p:hover> img:not([src$=".svg"]).medium-zoom-image{
+  transition: all 0.2s ease-out !important;
+  transform: translateZ(2px) !important;
+  box-shadow: 0 0 5rem oklch(25% 0.0213 103.9 / 50%), 0 0 0.1rem oklch(25% 0.0213 103.9 / 30%);
+}
+

src/de/tech-stack.md

@@ -3,3 +3,19 @@ outline: deep
 ---
 
 # Tech-Stack
+
+
+> [!IMPORTANT]
+> Beispiel Important
+
+> [!WARNING]
+> Beispiel Important
+
+> [!TIP]
+> Beispiel Tip
+
+> [!CAUTION]
+> Beispiel Caution
+
+> [!DANGER]
+> Beispiel Danger