@eox/pages-theme-eox 1.5.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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
+
+- **style:** link display in sidebar and footer ([766d4f4](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/766d4f40ec9a185c270211f40280848b90c32fe5))
+- **style:** more compact footer layout ([b190cb9](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/b190cb9038887ad19cffc2419aea93762aee98a2))
+
+### Features
+
+- custom CTAs in pricing table ([8900a3c](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/8900a3c148630e86ef84cf433b7d8008daeba8f5))
+
 ## [1.5.1](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.5.0...v1.5.1) (2026-04-30)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.5.1",
+  "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/Footer.vue

@@ -3,32 +3,34 @@
     <div class="holder large-padding">
       <div class="large-space"></div>
       <div class="grid">
-        <div class="s12 l6">
-          <img
-            :src="withBase(theme.logo.light)"
-            :alt="`${site.title} logo`"
-            class="logo"
-          />
-          <div class="small-space"></div>
-          <a
-            v-if="theme.nav.find((i) => i.link && i.link.includes('contact'))"
-            :href="
-              theme.nav.find((i) => i.link && i.link.includes('contact')).link
-            "
-            class="button small border no-margin"
-            style="color: var(--on-surface)"
-            @click="trackEvent(['CTA', 'Click', 'Footer', action.text])"
-            >{{
-              theme.nav.find((i) => i.link && i.link.includes("contact")).text
-            }}</a
-          >
-          <p v-html="theme.footer.message"></p>
-          <p v-html="theme.footer.copyright"></p>
+        <div class="s12 l6 footer-info">
+          <div class="footer-info-content">
+            <img
+              :src="withBase(theme.logo.light)"
+              :alt="`${site.title} logo`"
+              class="logo"
+            />
+            <div class="small-space"></div>
+            <a
+              v-if="theme.nav.find((i) => i.link && i.link.includes('contact'))"
+              :href="
+                theme.nav.find((i) => i.link && i.link.includes('contact')).link
+              "
+              class="button small border no-margin"
+              style="color: var(--on-surface)"
+              @click="trackEvent(['CTA', 'Click', 'Footer', action.text])"
+              >{{
+                theme.nav.find((i) => i.link && i.link.includes("contact")).text
+              }}</a
+            >
+            <p v-html="theme.footer.message"></p>
+          </div>
+          <p class="footer-copyright" v-html="theme.footer.copyright"></p>
         </div>
         <div class="s12 l6">
-          <div class="grid large-line">
+          <div class="footer-columns">
             <div
-              class="s6 l4"
+              class="footer-column-item"
               v-if="theme.nav.filter((i) => !i.action && i.link).length"
             >
               <p class="bold">{{ t("About", theme.i18n) }}</p>
@@ -42,7 +44,10 @@
                 >
               </p>
             </div>
-            <div class="s6 l4" v-for="item in theme.nav.filter((i) => i.items)">
+            <div
+              class="footer-column-item"
+              v-for="item in theme.nav.filter((i) => i.items)"
+            >
               <p class="bold">{{ item.text }}</p>
               <p v-for="subItem in getFlatList(item.items)">
                 <a
@@ -54,7 +59,7 @@
                 >
               </p>
             </div>
-            <div class="s6 l4">
+            <div class="footer-column-item">
               <p class="bold">{{ t("Legal", theme.i18n) }}</p>
               <p>
                 <a
@@ -123,9 +128,66 @@ const termsLinks = computed(() => {
 </script>
 
 <style>
-@media screen and (max-width: 600px) {
-  footer > .holder > .grid > div:first-child {
+footer .grid > div:not(:first-child) p,
+.footer-column-item p {
+  margin: 0 !important;
+}
+
+footer .link {
+  text-decoration: none;
+}
+
+.footer-columns {
+  columns: 1;
+  column-gap: 2rem;
+}
+
+.footer-column-item {
+  break-inside: avoid;
+  margin-bottom: 2rem;
+}
+
+@media screen and (min-width: 601px) {
+  .footer-columns {
+    columns: 2;
+  }
+}
+
+@media screen and (min-width: 993px) {
+  .footer-columns {
+    columns: 3;
+  }
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+@media screen and (max-width: 992px) {
+  footer .grid {
+    display: flex;
+    flex-direction: column;
+  }
+  .footer-info {
+    order: -1;
+    margin-bottom: 0;
+    display: contents;
+  }
+  .footer-info-content {
+    order: -2;
+    margin-bottom: 2rem;
+  }
+  .footer-columns {
     order: 1;
   }
+  .footer-copyright {
+    order: 2;
+    margin-top: 2rem !important;
+  }
+}
+
+@media screen and (max-width: 600px) {
 }
 </style>

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,13 +42,19 @@
         :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)"
             class="button responsive bold margin-top-1 margin-bottom-2"
           >
-            {{ t("Contact us", theme.i18n) }}
+            {{
+              plan.salesCTA
+                ? t(plan.salesCTA, theme.i18n)
+                : t("Contact us", theme.i18n)
+            }}
           </a>
         </ClientOnly>
       </div>
@@ -68,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">
@@ -84,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
@@ -159,7 +168,7 @@
       <div v-if="showDescriptionColumn" class="cell orig-col-1 l"></div>
       <div
         v-for="(plan, index) in localPlans"
-        :key="'cta-' + index"
+        :key="'features-' + index"
         :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <a v-if="plan.link" :href="plan.link"
@@ -181,7 +190,7 @@
       <div
         v-if="showSales"
         v-for="(plan, index) in localPlans"
-        :key="'cta-' + index"
+        :key="'sales-' + index"
         :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <ClientOnly>
@@ -189,8 +198,13 @@
             v-if="showSales"
             :href="addPlanConfig(contactLink, plan)"
             class="button responsive bold"
-            >{{ t("Contact us", theme.i18n) }}</a
           >
+            {{
+              plan.salesCTA
+                ? t(plan.salesCTA, theme.i18n)
+                : t("Contact us", theme.i18n)
+            }}
+          </a>
         </ClientOnly>
       </div>
     </div>
@@ -214,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>
@@ -319,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) {
@@ -357,13 +444,13 @@ export default {
       this.$forceUpdate();
     },
     initializeData() {
-      this.title = this.config.title ?? this.title;
-      this.showSales = this.config.showSales ?? this.showSales;
-      this.contactLink = this.config.contactLink ?? this.contactLink;
-      this.showVAT = this.config.showVAT ?? this.showVAT;
-      this.localOptions = this.config.options ?? this.localOptions;
-      this.localPlans = this.config.plans ?? this.localPlans;
-      this.localDetails = this.config.details ?? this.localDetails;
+      this.title = this.config.title ?? "Pricing Options";
+      this.showSales = this.config.showSales ?? true;
+      this.contactLink = this.config.contactLink ?? "";
+      this.showVAT = this.config.showVAT ?? "2025-06-30";
+      this.localOptions = this.config.options ?? [];
+      this.localPlans = this.config.plans ?? [];
+      this.localDetails = this.config.details ?? [];
     },
     handleResize() {
       if (typeof window !== "undefined") {
@@ -386,35 +473,52 @@ export default {
       }
     },
     addPlanConfig(contactLink, plan) {
-      if (typeof document === "undefined") {
-        return contactLink; // Return original link as fallback
+      const baseLink = plan.salesLink || contactLink;
+      if (!baseLink) {
+        return "";
       }
-      const parts = contactLink.split("?");
-      let search = parts[1] || "";
+
+      const [url, ...searchParts] = baseLink.split("?");
+      let search = searchParts.join("?");
       const params = new URLSearchParams(search);
-      params.append("plan", plan.name);
-      const alternative = Object.entries(plan.details).find(
-        ([key, value]) => value.alternative,
-      );
-      if (alternative) {
-        const checked = document.querySelector(
-          `[id='${plan.name}-${alternative[0]}']`,
-        )?.checked;
-        if (checked) {
-          params.append("alternative", alternative[1].alternative.name);
+
+      // Only automatically add "plan" if it's the default contact link
+      // and not already present
+      if (!plan.salesLink && !params.has("plan") && plan.name) {
+        params.append("plan", plan.name);
+      }
+
+      // Add alternatives if they are checked
+      if (plan.details) {
+        Object.entries(plan.details).forEach(([key, value]) => {
+          if (
+            value &&
+            typeof value === "object" &&
+            value.alternative?.checked
+          ) {
+            params.append("alternative", value.alternative.name);
+          }
+        });
+      }
+
+      // Add global options
+      if (this.localOptions && this.localOptions.length > 0) {
+        this.localOptions.forEach((o) => {
+          if (o.checked) {
+            params.append("option", o.label);
+          }
+        });
+      }
+
+      // Add custom salesParams
+      if (plan.salesParams) {
+        for (const [key, value] of Object.entries(plan.salesParams)) {
+          params.set(key, value);
         }
       }
-      if (this.localOptions.length > 0)
-        [
-          this.localOptions.forEach((o) => {
-            const checked = document.querySelector(`input#${o.id}`)?.checked;
-            if (checked) {
-              params.append("option", o.label);
-            }
-          }),
-        ];
+
       search = params.toString();
-      return `${parts[0]}${search ? `?${search}` : ""}`;
+      return `${url}${search ? `?${search}` : ""}`;
     },
   },
   created() {
@@ -431,19 +535,7 @@ export default {
     window.removeEventListener("resize", this.handleResize);
   },
   watch: {
-    options: {
-      handler() {
-        this.initializeData();
-      },
-      deep: true,
-    },
-    plans: {
-      handler() {
-        this.initializeData();
-      },
-      deep: true,
-    },
-    details: {
+    config: {
       handler() {
         this.initializeData();
       },

package/src/style.css

@@ -201,7 +201,7 @@ details[open] > summary > i.mdi-chevron-down {
   top: var(--vp-nav-height) !important;
   padding-top: 0 !important;
   padding-left: 0 !important;
-  margin-top: -2px;
+  margin-top: -2px !important;
 }
 
 .VPSidebar > nav,
@@ -238,6 +238,11 @@ details[open] > summary > i.mdi-chevron-down {
   padding: 3px 0 !important;
   font-size: 14px;
   line-height: 20px;
+  text-decoration: none;
+}
+
+.VPSidebar .VPLink p {
+  margin: 0;
 }
 
 .social-links {