@eox/pages-theme-eox 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@eox/eslint-config": "^2.0.0",
-    "@eox/ui": "^0.1.9",
+    "@eox/ui": "^0.3.4",
     "vitepress": "^1.6.3"
   }
 }

package/src/Layout.vue

@@ -52,7 +52,7 @@
                     :rel="item.rel"
                     :class="
                       item.action
-                        ? `button responsive large ${item.action === 'primary' || item.action === 'secondary' ? `${item.action} medium-elevate` : 'border no-elevate'}`
+                        ? `button responsive large ${item.action} ${item.action === 'primary' || item.action === 'secondary' ? 'medium-elevate' : 'border no-elevate'}`
                         : 'primary-text'
                     "
                   >
@@ -99,11 +99,11 @@
               <li v-for="item in theme.nav.filter((item) => item.action)">
                 <a
                   class="button right-align"
-                  :class="
+                  :class="`${item.action} ${
                     item.action === 'primary' || item.action === 'secondary'
                       ? item.action
                       : 'border'
-                  "
+                  }`"
                   :href="withBase(item.link)"
                   :target="item.target"
                   :rel="item.rel"
@@ -136,6 +136,15 @@
             frameborder="0"
             allowfullscreen
           />
+          <video
+            v-else-if="frontmatter.hero.video"
+            class="hero-image large-elevate small-round"
+            :src="withBase(frontmatter.hero.video.src)"
+            style="grid-area: image; aspect-ratio: 16/9"
+            autoplay
+            muted
+            loop
+          />
           <img
             v-else-if="frontmatter.hero.image"
             class="hero-image large-elevate small-round"
@@ -284,7 +293,8 @@ if (!import.meta.env.SSR) {
   box-shadow: none;
 }
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.primary,
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary,
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.alt {
   display: none;
 }
 .Layout.layout-home .top-nav.at-top nav.actions {

package/src/components/CTASection.vue

@@ -1,45 +1,43 @@
 <template>
-  <section class="cta-section">
-    <div
-      class="center-align full-width"
-      :class="
-        dark !== undefined
-          ? 'primary primary-gradient-background'
-          : 'surface-container-low'
-      "
-    >
-      <div class="large-space"></div>
-      <div class="large-space"></div>
-      <div class="holder large-padding">
-        <h3 class="large bold">
-          {{ title }}
-        </h3>
-        <p class="large-text">{{ tagline }}</p>
-        <a
-          v-if="primaryButton"
-          class="button extra small-margin"
-          :class="dark !== undefined ? 'surface' : 'primary'"
-          :href="primaryLink"
-          >{{ primaryButton }} <i class="mdi mdi-arrow-right"></i
-        ></a>
-        <a
-          v-if="secondaryButton"
-          class="button extra small-margin secondary"
-          :href="secondaryLink"
-          >{{ secondaryButton }}<i class="mdi mdi-arrow-right"></i
-        ></a>
-        <a
-          v-if="altButton"
-          class="button border extra small-margin"
-          :class="dark !== undefined ? 'white-text' : ''"
-          :href="altLink"
-          >{{ altButton }}</a
-        >
-      </div>
-      <div class="large-space"></div>
-      <div class="large-space"></div>
-      <div class="large-space"></div>
+  <section
+    class="cta-section center-align full-width"
+    :class="
+      dark !== undefined
+        ? 'primary primary-gradient-background'
+        : 'surface-container-low'
+    "
+  >
+    <div class="large-space"></div>
+    <div class="large-space"></div>
+    <div class="holder large-padding">
+      <h3 class="large bold">
+        {{ title }}
+      </h3>
+      <p class="large-text">{{ tagline }}</p>
+      <a
+        v-if="primaryButton"
+        class="button extra small-margin"
+        :class="dark !== undefined ? 'surface' : 'primary'"
+        :href="primaryLink"
+        >{{ primaryButton }} <i class="mdi mdi-arrow-right"></i
+      ></a>
+      <a
+        v-if="secondaryButton"
+        class="button extra small-margin secondary"
+        :href="secondaryLink"
+        >{{ secondaryButton }}<i class="mdi mdi-arrow-right"></i
+      ></a>
+      <a
+        v-if="altButton"
+        class="button border extra small-margin"
+        :class="dark !== undefined ? 'white-text' : ''"
+        :href="altLink"
+        >{{ altButton }}</a
+      >
     </div>
+    <div class="large-space"></div>
+    <div class="large-space"></div>
+    <div class="large-space"></div>
   </section>
 </template>
 

package/src/components/FeatureSection.vue

@@ -50,10 +50,19 @@
         </div>
       </div>
       <img
+        v-if="image"
         :src="withBase(image)"
         :alt="title"
         class="small-round medium-elevate"
       />
+      <video
+        v-if="video"
+        :src="withBase(video)"
+        class="small-round medium-elevate"
+        autoplay
+        muted
+        loop
+      />
     </div>
   </section>
 </template>
@@ -64,6 +73,7 @@ const props = defineProps([
   "dark",
   "icon",
   "image",
+  "video",
   "landing",
   "primaryButton",
   "primaryLink",

package/src/components/FeaturesGallery.vue

@@ -24,8 +24,8 @@ const featuresExcerpts = features.map((f) => {
 </script>
 
 <template>
-  <div class="large-space"></div>
-  <div class="primary primary-gradient-background full-width">
+  <section class="primary primary-gradient-background full-width">
+    <div class="large-space"></div>
     <div class="large-space"></div>
     <div class="holder large-padding">
       <h5>More {{ site.title }} features:</h5>
@@ -45,9 +45,9 @@ const featuresExcerpts = features.map((f) => {
                   :src="withBase(feature.image)"
                 />
                 <div class="max">
-                  <h5 class="small">
+                  <h6 class="small">
                     <strong>{{ feature.title }}</strong>
-                  </h5>
+                  </h6>
                   <p>{{ feature.description }}</p>
                   <div class="max"></div>
                   <nav>
@@ -63,7 +63,8 @@ const featuresExcerpts = features.map((f) => {
       </div>
     </div>
     <div class="large-space"></div>
-  </div>
+    <div class="large-space"></div>
+  </section>
 </template>
 
 <style scoped>

package/src/components/PricingTable.vue

@@ -224,7 +224,8 @@
     </template>
 
     <p class="small grey-text m-4" v-if="showVAT">
-      * All prices are given excluding VAT. Prices are valid until 2025-06-30
+      * All prices are given excluding VAT. Prices are valid until
+      {{ showVAT }}.
     </p>
   </div>
 </template>
@@ -238,7 +239,7 @@ export default {
       default: () => ({
         title: "Pricing Options",
         showSales: true,
-        showVAT: true,
+        showVAT: "2025-06-30",
         options: [],
         plans: [],
         details: [],
@@ -250,7 +251,7 @@ export default {
       title: "",
       showSales: true,
       contactLink: "",
-      showVAT: true,
+      showVAT: "2025-06-30",
       localOptions: [],
       localPlans: [],
       localDetails: [],

package/src/style.css

@@ -1,7 +1,7 @@
 @import "@eox/ui/style.css";
 
 :root {
-  --vp-nav-height: 88px;
+  --vp-nav-height: 90px;
 }
 
 body {
@@ -99,6 +99,14 @@ body {
   font-size: 1.75rem;
 }
 
+.VPHome .vp-doc h1,
+.VPHome .vp-doc h2,
+.VPHome .vp-doc h3,
+.VPHome .vp-doc h4,
+.VPHome .vp-doc h5 {
+  line-height: normal;
+}
+
 .VPHome .vp-doc h1 a.header-anchor,
 .VPHome .vp-doc h2 a.header-anchor,
 .VPHome .vp-doc h3 a.header-anchor,
@@ -205,8 +213,7 @@ button.text:hover,
   background: var(--surface-bright);
 }
 @media (min-width: 1024px) {
-  .feature-section.landing,
-  .cta-section {
+  .feature-section.landing {
     padding: 64px;
     padding: clamp(64px, 10%, 128px);
   }
@@ -301,3 +308,8 @@ button.text:hover,
     hsl(from var(--primary) h s calc(l - 20)) 100%
   ) !important;
 }
+
+header[class*="background"],
+section[class*="background"] {
+  border-radius: 0 !important;
+}