Light Theme

.vitepress/theme/index.css

@@ -0,0 +1,270 @@
+@import '@arma-events/web-fonts/dist/index.css';
+
+: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: #f0efdf;
+
+  /* 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);
+
+  --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;
+}
+
+.outline-title {
+  font-weight: 700 !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" 700;
+}
+
+.dark .vp-doc strong, .dark .vp-doc b {
+  font-variation-settings: "wght" 650;
+}
+
+
+.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.level-0.is-link > .item > .link:hover .text, 
+.VPSidebarItem.level-1.is-link > .item > .link:hover .text, 
+.VPSidebarItem.level-2.is-link > .item > .link:hover .text, 
+.VPSidebarItem.level-3.is-link > .item > .link:hover .text,  
+.VPSidebarItem.level-4.is-link > .item > .link:hover .text, 
+.VPSidebarItem.level-5.is-link > .item > .link:hover .text{
+  color: var(--vp-c-text-1) !important;
+  font-weight: 700;
+}
+
+.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%);
+}
+
+img:not([src$=".svg"]).medium-zoom-image.avatar {
+  border-radius: 100%;
+}
+

.vitepress/theme/index.ts

@@ -3,7 +3,7 @@ import { defineComponent, h, nextTick, onMounted, watch } from 'vue';
 import { useRoute, type Theme } from 'vitepress';
 import mediumZoom from 'medium-zoom';
 import DefaultTheme from 'vitepress/theme';
-import './style.css';
+import './index.css';
 
 export default {
   extends: DefaultTheme,

package.json

@@ -13,6 +13,7 @@
     "vitepress": "^1.6.3"
   },
   "dependencies": {
+    "@arma-events/web-fonts": "^1.1.2",
     "medium-zoom": "^1.1.0"
   }
 }

src/de/team.md

@@ -7,28 +7,28 @@ cSpell: disable
 
 ## Concept
 
-<img src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
+<img class="avatar" src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
 
-<img src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
+<img class="avatar" src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
 
 ## Frontend
 
-<img src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
+<img class="avatar" src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
 
-<img src="https://github.com/rednecksrevenge.png" width="50" height="50" alt="RednecksRevenge"> [RednecksRevenge](https://github.com/rednecksrevenge "RednecksRevenge")
+<img class="avatar" src="https://github.com/rednecksrevenge.png" width="50" height="50" alt="RednecksRevenge"> [RednecksRevenge](https://github.com/rednecksrevenge "RednecksRevenge")
 
 ## Backend
 
-<img src="https://github.com/thewillard.png" width="50" height="50" alt="TheWillard"> [TheWillard](https://github.com/thewillard "TheWillard")
+<img class="avatar" src="https://github.com/thewillard.png" width="50" height="50" alt="TheWillard"> [TheWillard](https://github.com/thewillard "TheWillard")
 
-<img src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
+<img class="avatar" src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
 
 ## Artwork & Design
 
-<img src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
+<img class="avatar" src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
 
 ## QA & Docs
 
-<img src="https://github.com/y0014984.png" width="50" height="50" alt="nomisum"> [y0014984](https://github.com/y0014984 "y0014984")
+<img class="avatar" src="https://github.com/y0014984.png" width="50" height="50" alt="nomisum"> [y0014984](https://github.com/y0014984 "y0014984")
 
-<img src="https://github.com/gelir95.png" width="50" height="50" alt="nomisum"> [Gelir95](https://github.com/gelir95 "Gelir95")
+<img class="avatar" src="https://github.com/gelir95.png" width="50" height="50" alt="nomisum"> [Gelir95](https://github.com/gelir95 "Gelir95")

src/en/team.md

@@ -7,28 +7,28 @@ cSpell: disable
 
 ## Concept
 
-<img src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
+<img class="avatar" src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
 
-<img src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
+<img class="avatar" src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
 
 ## Frontend
 
-<img src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
+<img class="avatar" src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
 
-<img src="https://github.com/rednecksrevenge.png" width="50" height="50" alt="RednecksRevenge"> [RednecksRevenge](https://github.com/rednecksrevenge "RednecksRevenge")
+<img class="avatar" src="https://github.com/rednecksrevenge.png" width="50" height="50" alt="RednecksRevenge"> [RednecksRevenge](https://github.com/rednecksrevenge "RednecksRevenge")
 
 ## Backend
 
-<img src="https://github.com/thewillard.png" width="50" height="50" alt="TheWillard"> [TheWillard](https://github.com/thewillard "TheWillard")
+<img class="avatar" src="https://github.com/thewillard.png" width="50" height="50" alt="TheWillard"> [TheWillard](https://github.com/thewillard "TheWillard")
 
-<img src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
+<img class="avatar" src="https://github.com/derzade.png" width="50" height="50" alt="DerZade"> [DerZade](https://github.com/derzade "DerZade")
 
 ## Artwork & Design
 
-<img src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
+<img class="avatar" src="https://github.com/nomisum.png" width="50" height="50" alt="nomisum"> [nomisum](https://github.com/nomisum "nomisum")
 
 ## QA & Docs
 
-<img src="https://github.com/y0014984.png" width="50" height="50" alt="nomisum"> [y0014984](https://github.com/y0014984 "y0014984")
+<img class="avatar" src="https://github.com/y0014984.png" width="50" height="50" alt="nomisum"> [y0014984](https://github.com/y0014984 "y0014984")
 
-<img src="https://github.com/gelir95.png" width="50" height="50" alt="nomisum"> [Gelir95](https://github.com/gelir95 "Gelir95")
+<img class="avatar" src="https://github.com/gelir95.png" width="50" height="50" alt="nomisum"> [Gelir95](https://github.com/gelir95 "Gelir95")