add homepage config

2026-03-19 20:24:37 +01:00
parent f79b93ecc9
commit 84d44c559a
28 changed files with 1226 additions and 0 deletions
--- a/configs/custom.css
+++ b/configs/custom.css
@@ -0,0 +1,214 @@
+/*==================================
+  FONT SETTINGS
+==================================*/
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Merriweather:wght@400;700&display=swap');
+
+/*==================================
+  ROOT VARIABLES
+==================================*/
+:root {
+  --font-primary: 'Poppins', sans-serif;
+  --font-secondary: 'Merriweather', serif;
+
+  --color-border: #4d4e5e;
+  --color-tab-border: #4a4a54;
+  --color-tab-hover: #AC2747;
+  --color-background-primary: #11141d;
+  --color-background-hover: #08081c;
+  --color-block: #222432;
+  --color-block-hover: #2d2d4a;
+  --color-bookmark-icon: #1f233c;
+
+  --gradient-border: linear-gradient(90deg, #F75050, #6C033D, #F75050);
+
+  --spacing-xs: 5px;
+  --spacing-sm: 8px;
+  --spacing-md: 10px;
+  --spacing-lg: 30px;
+  --spacing-xl: 40px;
+
+  --border-width: 2px;
+  --border-radius: .375rem;
+  --border-radius-sm: .275rem;
+
+  --animation-duration: 3s;
+  --transition-duration: 0.3s;
+
+  --logo-size: 66px;
+
+  --tab-border-width: 2px;
+  --tab-border-radius: .375rem;
+  --tab-backdrop-filter: blur(1px);
+
+  /* 👇 Abstand zwischen Kacheln (verdoppelt) */
+  --card-gap: 4px;
+}
+
+/*==================================
+  GLOBAL FONT
+==================================*/
+* {
+  font-family: var(--font-primary) !important;
+}
+
+/*==================================
+  TAB STYLES
+==================================*/
+#myTab {
+  padding: var(--spacing-xs);
+  background: none;
+  backdrop-filter: none;
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--spacing-xl);
+}
+
+button[id$='-tab'] {
+  border-width: var(--tab-border-width);
+  border-radius: var(--tab-border-radius);
+  border-color: var(--color-tab-border);
+  backdrop-filter: var(--tab-backdrop-filter);
+  padding: 1px;
+  margin: 1px;
+  border-spacing: 0;
+  transition: border-color var(--transition-duration) ease;
+}
+
+button[id$='-tab']:hover {
+  border-color: var(--color-tab-hover);
+}
+
+/*==================================
+  HEADER
+==================================*/
+.information-widget-logo + .information-widget-greeting span {
+  font-family: var(--font-secondary) !important;
+  font-weight: 700 !important;
+}
+
+.information-widget-logo img {
+  width: var(--logo-size) !important;
+  height: var(--logo-size) !important;
+  max-width: none;
+  max-height: none;
+  margin-left: var(--spacing-lg);
+}
+
+/*==================================
+  SERVICE CARD
+==================================*/
+.service-card {
+  position: relative;
+  padding: 0;
+  margin: 0 !important;
+  border-radius: var(--border-radius);
+  background: transparent;
+  border: var(--border-width) solid var(--color-border);
+  overflow: visible;
+}
+
+/* Hintergrund */
+.bg-theme-200\/50,
+.flex-1.service-block {
+  background-color: var(--color-block) !important;
+  transition: background-color var(--transition-duration) ease;
+}
+
+.service-card:hover [class*="bg-theme-200/50"],
+.service-card:hover .flex-1.service-block {
+  background-color: var(--color-block-hover) !important;
+}
+
+/*==================================
+  KARTEN ABSTAND
+==================================*/
+
+.services-group ul,
+.services-group .flex.flex-col,
+.services-group [class*="flex-col"] {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--card-gap) !important;
+}
+
+.services-group li {
+  margin: 0 !important;
+}
+
+/*==================================
+  ANIMATED BORDER
+==================================*/
+.service-card::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-width));
+  background: var(--gradient-border);
+  z-index: -2;
+  border-radius: var(--border-radius);
+  background-size: 200% 100%;
+  animation: wave var(--animation-duration) linear infinite;
+  opacity: 0;
+  transition: opacity var(--transition-duration) ease;
+}
+
+.service-card:hover::before {
+  opacity: 1;
+}
+
+@keyframes wave {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+.service-card::after {
+  content: '';
+  position: absolute;
+  inset: var(--border-width);
+  background: var(--color-background-primary);
+  border-radius: var(--border-radius-sm);
+  z-index: -1;
+  transition: background-color var(--transition-duration) ease;
+}
+
+.service-card:hover::after {
+  background: var(--color-background-hover);
+}
+
+.service-card:hover {
+  border-color: transparent;
+}
+
+/*==================================
+  BOOKMARK
+==================================*/
+.flex.flex-col.mt-3.bookmark-list {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md) var(--spacing-sm) 0 var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+.bookmark-icon {
+  background-color: var(--color-bookmark-icon) !important;
+}
+
+/*==================================
+  TEXT
+==================================*/
+.text-sm {
+  white-space: pre-line;
+  text-align: center;
+  font-size: 1em;
+}
+
+[data-name^="_hidden"] .service-title,
+.bookmark-group .bookmark-group-name {
+  display: none;
+}
+
+/*==================================
+  FOOTER
+==================================*/
+#footer {
+  display: none;
+}