@eox/pages-theme-eox 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# [1.7.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.6.0...v1.7.0) (2026-05-11)
+
+### Bug Fixes
+
+- **style:** card link/border/elevation ([004611f](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/004611f20e46dd47030a6c835bd6380fd045369b))
+- **style:** nav menu rounding harmonization ([a5ff2e7](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/a5ff2e7a3b63e98b44f7b763ad79c2111c748286))
+- **style:** sizing adjustments for prices and plan names ([d61ef7a](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/d61ef7a37ae0a3cede844875b582965eb820e704))
+
 # [1.6.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.5.1...v1.6.0) (2026-04-30)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/components/FeatureCard/Index.vue

@@ -40,7 +40,10 @@ const iconStyle = {
 };
 </script>
 <template>
-  <article class="vertical large-padding">
+  <article
+    class="vertical large-padding no-margin"
+    :class="link && !link.text ? 'small-elevate' : 'no-elevate'"
+  >
     <div>
       <i
         v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
@@ -92,10 +95,10 @@ const iconStyle = {
     <nav
       v-if="link || secondaryLink"
       class="row wrap align-center"
-      style="gap: 1.5rem; margin-right: auto"
+      style="gap: 1.5rem; margin-right: auto; position: relative; z-index: 11"
     >
       <a
-        v-if="link"
+        v-if="link && !!link.text"
         :href="link.href"
         :target="link.target ?? '_blank'"
         class="button transparent bold primary-text no-padding"

package/src/components/FeatureCard/Poster.vue

@@ -48,7 +48,8 @@ const cardStyle = computed(() => ({
 
 <template>
   <article
-    class="no-padding fill small-elevate image-overlay-card"
+    class="no-padding no-margin fill image-overlay-card"
+    :class="link && !link.text ? 'small-elevate' : 'no-elevate'"
     :style="cardStyle"
   >
     <img v-if="image" :src="image" alt="" class="image-overlay-card-image" />
@@ -97,10 +98,10 @@ const cardStyle = computed(() => ({
       <nav
         v-if="link || secondaryLink"
         class="row wrap align-center"
-        style="gap: 0.5rem"
+        style="gap: 0.5rem; position: relative; z-index: 11"
       >
         <a
-          v-if="link"
+          v-if="link && link.text"
           class="button small white black-text"
           :href="link.href"
           :target="link.target ?? '_blank'"

package/src/components/FeaturesGallery.vue

@@ -179,19 +179,19 @@ section {
 }
 
 .link-card {
-  display: block;
+  display: flex;
+  flex: 1;
   text-decoration: none;
-  border: 0.0625rem solid transparent;
   position: relative;
 }
 .link-overlay {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 10;
 }
 .link-card:hover article {
-  box-shadow: none;
-  border: 0.0625rem solid var(--outline-variant);
+  box-shadow: var(--elevate2);
+  transform: translateY(-2px);
 }
 
 .card-wrapper {

package/src/components/NavBar.vue

@@ -138,19 +138,19 @@
           <li v-for="item in theme.nav.filter((i) => !i.action)">
             <div v-if="item.items">
               <button
-                class="button text"
+                class="button text no-round"
                 :class="{ active: isActive(item, route.path) }"
               >
                 <span>{{ t(item.text, theme.i18n) }}</span>
                 <i class="mdi mdi-chevron-down"></i>
               </button>
-              <menu class="no-wrap surface-container-lowest">
+              <menu class="no-wrap surface-container-lowest no-round">
                 <NavDropdown :items="item.items" />
               </menu>
             </div>
             <a
               v-else
-              class="button text"
+              class="button text no-round"
               :class="{ active: isActive(item, route.path) }"
               :href="withBase(item.link)"
               :target="item.target"
@@ -199,7 +199,7 @@
         <ul class="left-align no-margin" v-if="langs && langs.length > 1">
           <li>
             <div>
-              <button class="button text">
+              <button class="button text no-round">
                 <i class="mdi mdi-translate small"></i>
                 <i class="mdi mdi-chevron-down small"></i>
               </button>

package/src/components/PricingTable.vue

@@ -42,7 +42,9 @@
         :key="`header-${index}`"
         class="s12 m3 center-align"
       >
-        <h6 class="primary-text bold">{{ plan.name }}</h6>
+        <h6 class="primary-text bold" style="word-break: break-word">
+          {{ plan.name }}
+        </h6>
         <ClientOnly>
           <a
             :href="addPlanConfig(contactLink, plan)"
@@ -72,7 +74,9 @@
         class="cell surface-container-low top-cell bold top-margin"
         :class="`orig-col-${index + 2}`"
       >
-        <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
+        <h6 class="primary-text bold top-margin" style="word-break: break-word">
+          {{ plan.name }}
+        </h6>
       </div>
 
       <div v-if="showDescriptionColumn" class="cell orig-col-1 l">
@@ -88,10 +92,11 @@
           <h6
             v-if="typeof plan.basePrice === 'string'"
             class="primary-text bold"
+            :style="dynamicPriceStyleH6"
           >
             {{ t(plan.basePrice, theme.i18n) }}
           </h6>
-          <h4 v-else class="primary-text bold">
+          <h4 v-else class="primary-text bold" :style="dynamicPriceStyleH4">
             € {{ calculatePrice(plan) }},-
           </h4>
           <span
@@ -223,8 +228,14 @@
           class="surface-container-low primary-text bold top-margin top-cell"
           :class="`cell orig-col-${detailPlanIndex + 2}`"
         >
-          <h6 class="primary-text bold s">{{ plan.name }}</h6>
-          <h6 v-if="plan.additionalPrice" class="primary-text bold">
+          <h6 class="primary-text bold s" style="word-break: break-word">
+            {{ plan.name }}
+          </h6>
+          <h6
+            v-if="plan.additionalPrice"
+            class="primary-text bold"
+            :style="dynamicPriceStyleH6"
+          >
             + € {{ plan.additionalPrice }},-
           </h6>
         </div>
@@ -328,6 +339,73 @@ export default {
         };
       }
     },
+    maxPriceLength() {
+      let maxLen = 0;
+      this.localPlans.forEach((plan) => {
+        let text = "";
+        if (typeof plan.basePrice === "string") {
+          text = this.t(plan.basePrice, this.theme.i18n) || "";
+        } else {
+          text = `€ ${this.calculatePrice(plan)},-`;
+        }
+        if (text.length > maxLen) maxLen = text.length;
+      });
+      this.localDetails.forEach((detail) => {
+        if (detail.plans) {
+          detail.plans.forEach((plan) => {
+            if (plan.additionalPrice) {
+              const text = `+ € ${plan.additionalPrice},-`;
+              if (text.length > maxLen) maxLen = text.length;
+            }
+          });
+        }
+      });
+      return maxLen || 1;
+    },
+    dynamicPriceStyleH4() {
+      let fontSize = "";
+      if (!this.isMobile) {
+        // "€ 18000,-" is 11 chars. We want container to define this perfectly without pure JS guessing.
+        // Wait, pure CSS container queries / fluid typography is better here.
+        // Instead of calculating ratios manually, we can utilize container width scaling or vw based scaling
+        // if it exceeds length. Let's do a more robust JS calc.
+
+        const cols =
+          this.localPlans.length + (this.showDescriptionColumn ? 1 : 0);
+
+        // Base max chars before scaling based on how many cols are squished together
+        // 2 cols: allows ~16 chars
+        // 3 cols: allows ~12 chars
+        // 4 cols: allows ~9 chars
+        // 5 cols: allows ~7 chars
+        const maxCharsAtDefault = 19 - cols * 2.5;
+
+        if (this.maxPriceLength > maxCharsAtDefault) {
+          const ratio = maxCharsAtDefault / this.maxPriceLength;
+          fontSize = `${Math.max(ratio * 2.125, 0.8)}rem`; // Scale down, min ~12px equivalent
+        }
+      }
+      return {
+        whiteSpace: "nowrap",
+        ...(fontSize ? { fontSize } : {}),
+      };
+    },
+    dynamicPriceStyleH6() {
+      let fontSize = "";
+      if (!this.isMobile) {
+        const cols =
+          this.localPlans.length + (this.showDescriptionColumn ? 1 : 0);
+        const maxCharsAtDefault = 24 - cols * 3;
+        if (this.maxPriceLength > maxCharsAtDefault) {
+          const ratio = maxCharsAtDefault / this.maxPriceLength;
+          fontSize = `${Math.max(ratio * 1.25, 0.6)}rem`;
+        }
+      }
+      return {
+        whiteSpace: "nowrap",
+        ...(fontSize ? { fontSize } : {}),
+      };
+    },
   },
   methods: {
     calculatePrice(plan) {