@eox/pages-theme-eox 0.5.0 → 0.5.1

package/package.json

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

package/src/Layout.vue

@@ -39,10 +39,6 @@
                   :class="item.action ? 'button large medium-elevate cta' : ''"
                 >
                   <span>{{ item.text }}</span>
-                  <i
-                    v-if="item.action === 'primary'"
-                    class="mdi mdi-arrow-right"
-                  ></i>
                 </a>
               </li>
             </ul>
@@ -56,13 +52,15 @@
                     :rel="item.rel"
                     :class="
                       item.action
-                        ? `button responsive large ${item.action === 'primary' ? 'primary medium-elevate' : 'border no-elevate'}`
+                        ? `button responsive large ${item.action === 'primary' || item.action === 'secondary' ? `${item.action} medium-elevate` : 'border no-elevate'}`
                         : 'primary-text'
                     "
                   >
                     <span>{{ item.text }}</span>
                     <i
-                      v-if="item.action === 'primary'"
+                      v-if="
+                        item.action === 'primary' || item.action === 'secondary'
+                      "
                       class="mdi mdi-arrow-right"
                     ></i>
                   </a>
@@ -101,14 +99,20 @@
               <li v-for="item in theme.nav.filter((item) => item.action)">
                 <a
                   class="button right-align"
-                  :class="item.action === 'primary' ? 'primary' : 'border'"
+                  :class="
+                    item.action === 'primary' || item.action === 'secondary'
+                      ? item.action
+                      : 'border'
+                  "
                   :href="withBase(item.link)"
                   :target="item.target"
                   :rel="item.rel"
                 >
                   <span>{{ item.text }}</span>
                   <i
-                    v-if="item.action === 'primary'"
+                    v-if="
+                      item.action === 'primary' || item.action === 'secondary'
+                    "
                     class="mdi mdi-arrow-right"
                   ></i>
                 </a>
@@ -146,9 +150,7 @@
           </div>
           <div style="grid-area: actions">
             <a
-              v-for="(action, i) in frontmatter.hero.actions.filter(
-                (a) => a.theme === 'brand',
-              )"
+              v-for="(action, i) in frontmatter.hero.actions"
               :href="withBase(action.link)"
               :target="action.target"
               :rel="action.rel"
@@ -156,15 +158,14 @@
               :class="
                 action.theme === 'brand'
                   ? 'primary-text surface medium-elevate'
-                  : 'border white-border no-elevate white-text'
+                  : action.theme === 'secondary'
+                    ? 'secondary'
+                    : 'border no-elevate white-text'
               "
               :style="i === 0 ? 'margin-left: 0 !important' : ''"
             >
               <span>{{ action.text }}</span>
-              <i
-                v-if="action.theme === 'brand'"
-                class="mdi mdi-arrow-right"
-              ></i>
+              <i v-if="action.theme !== 'alt'" class="mdi mdi-arrow-right"></i>
             </a>
           </div>
         </div>
@@ -282,10 +283,11 @@ if (!import.meta.env.SSR) {
 .top-nav.at-top {
   box-shadow: none;
 }
-.top-nav.at-top .button.primary {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary,
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary {
   display: none;
 }
-.top-nav.at-top nav.actions {
+.Layout.layout-home .top-nav.at-top nav.actions {
   gap: 0;
 }
 .top-nav:not(.at-top) > nav {
@@ -299,15 +301,15 @@ if (!import.meta.env.SSR) {
 .Layout .top-nav nav .button {
   color: var(--on-surface);
 }
-.Layout.layout-home .top-nav.at-top nav .button {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button {
   color: var(--on-surface);
   background: var(--surface);
 }
-.Layout.layout-home .top-nav.at-top nav .button.text {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text {
   color: #f7f8f8;
   background: none;
 }
-.Layout.layout-home .top-nav.at-top nav .button.border {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border {
   color: #f7f8f8;
   border-color: #f7f8f855;
   background: none;

package/src/components/CTASection.vue

@@ -16,6 +16,7 @@
         </h3>
         <p class="large-text">{{ tagline }}</p>
         <a
+          v-if="primaryButton"
           class="button extra small-margin"
           :class="dark !== undefined ? 'surface' : 'primary'"
           :href="primaryLink"
@@ -23,10 +24,16 @@
         ></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="secondaryLink"
-          >{{ secondaryButton }}</a
+          :href="altLink"
+          >{{ altButton }}</a
         >
       </div>
       <div class="large-space"></div>
@@ -43,6 +50,8 @@ const props = defineProps([
   "primaryLink",
   "secondaryButton",
   "secondaryLink",
+  "altButton",
+  "altLink",
   "tagline",
   "title",
 ]);

package/src/components/FeatureSection.vue

@@ -32,10 +32,20 @@
             v-if="secondaryLink !== undefined"
             :href="withBase(secondaryLink)"
             :target="secondaryLink.includes('https://') ? '_blank' : '_self'"
-            class="button border no-margin"
+            class="button secondary medium-elevate no-margin"
             style="color: var(--on-surface); margin-top: 12px !important"
           >
             <span>{{ secondaryButton || "Contact sales" }}</span>
+            <i class="mdi mdi-arrow-right"></i>
+          </a>
+          <a
+            v-if="altLink !== undefined"
+            :href="withBase(altLink)"
+            :target="altLink.includes('https://') ? '_blank' : '_self'"
+            class="button border no-margin"
+            style="color: var(--on-surface); margin-top: 12px !important"
+          >
+            <span>{{ altButton || "Contact sales" }}</span>
           </a>
         </div>
       </div>
@@ -60,6 +70,8 @@ const props = defineProps([
   "reverse",
   "secondaryButton",
   "secondaryLink",
+  "altButton",
+  "altLink",
   "tagline",
   "title",
 ]);

package/src/components/PricingTable.vue

@@ -28,7 +28,7 @@
     </div>
     <div
       class="grid m l surface-bright"
-      style="position: sticky; top: 88px; z-index: 1000; padding-top: 20px"
+      style="position: sticky; top: 72px; z-index: 1000; padding-top: 20px"
       v-if="localDetails.length"
     >
       <div class="s12 m3"></div>
@@ -213,10 +213,7 @@
                 plan.details[row]?.checkmark
               "
             >
-              <i
-                class="mdi mdi-check-circle-outline"
-                style="color: #4caf50"
-              ></i>
+              <i class="mdi mdi-check-circle-outline"></i>
             </template>
             <template v-else>
               <span v-html="plan.details[row]"></span>

package/src/style.css

@@ -68,6 +68,15 @@ body {
   padding-right: 0;
 }
 
+.VPHome .vp-doc a {
+  font-weight: 400;
+  color: inherit;
+}
+.VPHome .vp-doc a.button {
+  font-weight: 500;
+  color: var(--on-primary);
+}
+
 .VPHome .vp-doc h1 {
   font-size: 3.5625rem;
 }