@eox/pages-theme-eox 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/style.css

@@ -2,6 +2,7 @@
 
 :root {
   --vp-nav-height: 58px;
+  --vp-nav-logo-height: 28px;
 }
 :root:has(.top-nav.at-top) {
   --vp-nav-height: 90px;
@@ -49,6 +50,11 @@ body {
   transition: padding-top 0.3s ease-in-out;
 }
 
+main {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
 *:has(> nav.top:not(.s, .m, .l)) {
   padding-block-start: 0;
 }
@@ -92,6 +98,85 @@ body {
   margin-block-end: 0 !important;
 }
 
+.layout-blog .cta-section {
+  margin-block-end: 0 !important;
+}
+
+/* When a section follows a title (title plus section combination), eliminate start padding */
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + :not(section, hr)
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + :not(section, hr)
+  + :not(section, hr)
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + :not(section, hr)
+  + :not(section, hr)
+  + :not(section, hr)
+  + section {
+  padding-block-start: 0 !important;
+  padding-top: 0 !important;
+}
+
 .VPHome .vp-doc a {
   font-weight: 400;
   color: inherit;
@@ -149,7 +234,8 @@ footer {
   margin-top: 0 !important;
   position: relative;
   z-index: var(--vp-z-index-footer);
-  background: var(--surface-container-low);
+  background: var(--surface-container-lowest);
+  border-top: 1px solid var(--vp-c-divider, rgba(0, 0, 0, 0.08));
 }
 
 /**/
@@ -174,14 +260,24 @@ button.text:hover,
   }
 }
 
-.primary-gradient-bg {
+.hero-gradient-bg {
   /*Fallback*/
-  background: var(--primary);
-  background: radial-gradient(
-    74.48% 130.95% at 50% -12.27%,
-    hsl(from var(--primary) h s calc(l + 7)) 0%,
-    var(--primary) 45%,
-    hsl(from var(--primary) h s calc(l - 20)) 100%
+  background: #000c14;
+  background: linear-gradient(
+    180deg,
+    #000c14 0%,
+    var(--primary, #004170) 100%
+  ) !important;
+}
+
+.primary-gradient-bg,
+.dark-section-gradient-bg {
+  /*Fallback*/
+  background: #000c14;
+  background: linear-gradient(
+    180deg,
+    var(--primary, #004170) 0%,
+    #000c14 100%
   ) !important;
 }
 
@@ -365,7 +461,7 @@ eox-feedback-button {
   margin-inline: auto;
   padding-block-start: 66px; /* Exactly 156px from top of viewport (90px navbar + 66px padding) */
   padding-block-end: 96px;
-  padding-inline: 32px;
+  padding-inline: 24px;
 }
 
 /* Remove double inner padding on custom layout elements to ensure absolute alignment */
@@ -374,7 +470,11 @@ eox-feedback-button {
 }
 
 /* Constrain standard reading elements to 1000px max-width, while letting full-width custom page components span 1200px */
-.layout-page .VPPage > div > div > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
+.layout-page
+  .VPPage
+  > div
+  > div
+  > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
   max-width: 1000px;
   margin-inline-start: 0;
   margin-inline-end: auto;
@@ -473,7 +573,9 @@ eox-feedback-button {
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
 }
 
 .layout-page .VPPage a:not(.button):hover {
@@ -505,3 +607,122 @@ eox-feedback-button {
   overflow-x: auto;
 }
 
+/* Local Search styles overrides */
+.VPLocalSearchBox .search-actions button {
+  height: 36px !important;
+  width: 36px !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--vp-c-text-2) !important;
+  transition:
+    background-color 0.15s,
+    color 0.15s !important;
+}
+
+.VPLocalSearchBox .search-actions button:not([disabled]):hover {
+  background-color: var(--vp-c-default-soft) !important;
+  color: var(--vp-c-brand-1) !important;
+}
+
+.VPLocalSearchBox .search-actions button:disabled {
+  opacity: 0.37 !important;
+  background: transparent !important;
+  color: var(--vp-c-text-3) !important;
+}
+
+.VPLocalSearchBox .results {
+  list-style: none !important;
+  padding-left: 0 !important;
+  margin: 0 !important;
+}
+
+.VPLocalSearchBox .results li {
+  list-style: none !important;
+  margin: 0 !important;
+}
+
+/* Screen Reader Only Utility */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+/* ==========================================================================
+   Links in text hover underline
+   ========================================================================== */
+
+a.link {
+  text-decoration: none;
+}
+
+:is(p, li, blockquote, figcaption, td, th, dd, dt, .card-body-text)
+  a:not(
+    .button,
+    [role="button"],
+    .chip,
+    .badge,
+    .circle,
+    .header-anchor,
+    .card-cover-link,
+    .grid-link,
+    .sidebar-tag,
+    .post-tag,
+    .clickable-chip,
+    .tag-link,
+    .social-link-btn,
+    .custom-cta-button,
+    :has(> img:only-child),
+    :has(> svg:only-child)
+  ):hover,
+a.link:hover,
+.vp-doc
+  a:not(
+    .button,
+    [role="button"],
+    .header-anchor,
+    .card-cover-link,
+    .grid-link,
+    .sidebar-tag,
+    .post-tag,
+    .clickable-chip,
+    .tag-link,
+    .social-link-btn,
+    .custom-cta-button,
+    :has(> img:only-child),
+    :has(> svg:only-child)
+  ):hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Ensure navigation bars, dropdown menus, sidebars, and outline links do not get hover underline unless explicitly marked .link */
+:is(
+    nav,
+    menu,
+    dialog,
+    .top-nav,
+    .social-links,
+    .VPSidebar,
+    .VPDocAsideOutline,
+    .VPLocalSearchBox
+  )
+  a:not(.link):hover,
+menu a:hover,
+menu li a:hover {
+  text-decoration: none !important;
+}

package/src/tagUtils.js

@@ -103,31 +103,31 @@ export function getTagStyle(tag) {
     return {
       backgroundColor: "rgba(255, 94, 94, 0.15)",
       border: "1px solid rgb(255, 94, 94)",
-      color: "#d32f2f"
+      color: "#d32f2f",
     };
   } else if (color.startsWith("rgb(0, 177, 176)")) {
     return {
       backgroundColor: "rgba(0, 177, 176, 0.15)",
       border: "1px solid rgb(0, 177, 176)",
-      color: "#00796b"
+      color: "#00796b",
     };
   } else if (color.startsWith("rgb(219, 173, 66)")) {
     return {
       backgroundColor: "rgba(219, 173, 66, 0.15)",
       border: "1px solid rgb(219, 173, 66)",
-      color: "#f57c00"
+      color: "#f57c00",
     };
   } else if (color.startsWith("rgb(218, 71, 228)")) {
     return {
       backgroundColor: "rgba(218, 71, 228, 0.15)",
       border: "1px solid rgb(218, 71, 228)",
-      color: "#c2185b"
+      color: "#c2185b",
     };
   }
   return {
     backgroundColor: "rgba(0, 0, 0, 0.05)",
     border: "1px solid rgba(0, 0, 0, 0.1)",
-    color: "#475569"
+    color: "#475569",
   };
 }
 

package/src/vitepressConfig.mjs

@@ -98,8 +98,8 @@ export const generate = (brandConfig) => {
     cleanUrls: true,
     markdown: {
       headers: {
-        level: [2, 3, 4, 5, 6]
-      }
+        level: [2, 3, 4, 5, 6],
+      },
     },
     rewrites: {
       ...getBlogRewrites(),
@@ -212,7 +212,7 @@ export const generate = (brandConfig) => {
           ></span>`,
         copyright:
           brandConfig.theme?.footer?.copyright ||
-          'Copyright © 2014-present <a href="https://eox.at" target="_blank">EOX IT Services GmbH</a>',
+          'Copyright © 2008-present <a href="https://eox.at" target="_blank">EOX IT Services GmbH</a>',
       },
     },
     title: brandConfig.meta?.title,
@@ -220,6 +220,9 @@ export const generate = (brandConfig) => {
       ssr: {
         noExternal: ["@eox/pages-theme-eox"],
       },
+      optimizeDeps: {
+        exclude: ["@eox/pages-theme-eox"],
+      },
     },
     vue: {
       template: {