Home Page

+ Added Information + First and Second Entrie
2025-11-22 22:50:05 +01:00
parent a118026b04
commit 99af5fe13e
11 changed files with 225 additions and 43 deletions
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  title: String,
+  noMarginTop: Boolean,
+  extraBesideText: {
+    type: Boolean,
+    default: false,
+  },
+  extraWidthPercent: {
+    type: Number,
+    default: 30,
+  },
+  titleInSplitRight: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const normalizedExtraWidth = computed(() => {
+  const width = Number.isFinite(props.extraWidthPercent)
+    ? props.extraWidthPercent
+    : 30;
+
+  return Math.min(100, Math.max(0, width));
+});
+
+const textWidthPercent = computed(() => 100 - normalizedExtraWidth.value);
+
+const extraWidthStyle = computed(() => ({
+  flexBasis: `${normalizedExtraWidth.value}%`,
+  maxWidth: `${normalizedExtraWidth.value}%`,
+}));
+
+const textWidthStyle = computed(() => ({
+  flexBasis: `${textWidthPercent.value}%`,
+  maxWidth: `${textWidthPercent.value}%`,
+}));
+</script>
+
+<template>
+  <div :class="{ 'mt-5': !noMarginTop }">
+    <template v-if="props.extraBesideText">
+      <h3 v-if="!props.titleInSplitRight" class="text-h4 font-weight-bold">
+        {{ props.title }}
+      </h3>
+      <div class="entry-content entry-content--split">
+        <div class="entry-content__extra" :style="extraWidthStyle">
+          <slot name="extra" />
+        </div>
+        <div class="entry-content__text" :style="textWidthStyle">
+          <h3
+            v-if="props.titleInSplitRight"
+            class="text-h4 font-weight-bold"
+          >
+            {{ props.title }}
+          </h3>
+          <p class="text-subtitle-1">
+            <slot name="text" />
+          </p>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <h3 class="text-h4 font-weight-bold">{{ props.title }}</h3>
+      <p class="text-subtitle-1">
+        <slot name="text" />
+      </p>
+      <slot name="extra" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.entry-content {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+
+.entry-content--split {
+  align-items: center;
+}
+
+.entry-content__extra,
+.entry-content__text {
+  min-width: 0;
+}
+
+.entry-content__extra {
+  flex: 0 0 auto;
+}
+
+.entry-content__text {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 600px) {
+  .entry-content--split {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .entry-content__extra,
+  .entry-content__text {
+    flex-basis: auto !important;
+    max-width: 100% !important;
+    width: 100%;
+  }
+}
+</style>