Browse Source

docs: Add beta badge

Michael Bromley 2 years ago
parent
commit
7c80a18023
2 changed files with 19 additions and 2 deletions
  1. 15 1
      docs/src/pages/index.module.css
  2. 4 1
      docs/src/pages/index.tsx

+ 15 - 1
docs/src/pages/index.module.css

@@ -13,6 +13,21 @@
 .tagline {
 .tagline {
     font-size: 2rem;
     font-size: 2rem;
     text-align: center;
     text-align: center;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.betaBadge {
+    background-color: var(--ifm-badge-background-color);
+    border-radius: var(--ifm-badge-border-radius);
+    color: var(--ifm-badge-color);
+    font-size: 75%;
+    font-weight: var(--ifm-font-weight-bold);
+    line-height: 1;
+    padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
+    color: var(--ifm-color-warning-darkest);
+    border: 1px solid var(--ifm-color-warning-darkest);
 }
 }
 
 
 .description {
 .description {
@@ -41,4 +56,3 @@
     margin: auto;
     margin: auto;
     padding-bottom: 4rem;
     padding-bottom: 4rem;
 }
 }
-

+ 4 - 1
docs/src/pages/index.tsx

@@ -34,7 +34,10 @@ export default function Home(): JSX.Element {
                         d="M529.39 28.096c.621 0 1.073-.124 1.344-.361.272-.226.419-.61.419-1.153 0-.531-.147-.904-.419-1.141-.271-.226-.723-.34-1.344-.34h-1.266v2.995h1.266Zm-1.266 2.068v4.407h-3.005V22.92h4.587c1.537 0 2.656.26 3.367.78.724.508 1.074 1.322 1.074 2.44 0 .769-.181 1.401-.554 1.899-.373.485-.926.858-1.683 1.084.418.102.779.317 1.107.644.328.328.655.825.983 1.503l1.638 3.3h-3.197l-1.424-2.893c-.283-.576-.576-.983-.87-1.187-.294-.214-.689-.327-1.175-.327h-.848Z"
                         d="M529.39 28.096c.621 0 1.073-.124 1.344-.361.272-.226.419-.61.419-1.153 0-.531-.147-.904-.419-1.141-.271-.226-.723-.34-1.344-.34h-1.266v2.995h1.266Zm-1.266 2.068v4.407h-3.005V22.92h4.587c1.537 0 2.656.26 3.367.78.724.508 1.074 1.322 1.074 2.44 0 .769-.181 1.401-.554 1.899-.373.485-.926.858-1.683 1.084.418.102.779.317 1.107.644.328.328.655.825.983 1.503l1.638 3.3h-3.197l-1.424-2.893c-.283-.576-.576-.983-.87-1.187-.294-.214-.689-.327-1.175-.327h-.848Z"
                     ></path>
                     ></path>
                 </svg>
                 </svg>
-                <div className={styles.tagline}>Developer Documentation</div>
+                <div className={styles.tagline}>
+                    <div>Developer Documentation</div>
+                    <span className={styles.betaBadge}>beta</span>
+                </div>
                 <div className={styles.description}>
                 <div className={styles.description}>
                     Vendure is an open-source headless commerce platform built on Node.js, TypeScript and
                     Vendure is an open-source headless commerce platform built on Node.js, TypeScript and
                     GraphQL
                     GraphQL