feat: add hero CNCF label

Signed-off-by: Raman Yasel <raman.yasel@gmail.com>
cilium · May 10, 2024 · 0457bd6 · 0457bd6
1 parent f25079e
commit 0457bd6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/docs/assets/scss/home/features.scss b/docs/assets/scss/home/features.scss
@@ -1,5 +1,5 @@
 .features {
-  margin: 7rem 0 0 0;
+  margin: 152px 0 0 0;
 
   @media (max-width: $desktop) {
     margin-top: 6rem;

diff --git a/docs/assets/scss/home/hero.scss b/docs/assets/scss/home/hero.scss
@@ -13,6 +13,7 @@
     grid-template-areas: "intro logo" "users users";
 
     padding: 3rem 0;
+    padding-bottom: 104px;
 
     @media (max-width: $desktop) {
       padding-top: 2.5rem !important;
@@ -30,12 +31,49 @@
     }
   }
 
+  &__label {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 54px;
+    padding: 5px 10px;
+    font-size: 14px;
+    line-height: 1.375;
+    color: #58595E;
+    background: #fff;
+    box-shadow: 0 3px 6px rgba(0, 102, 102, 0.12);
+    border-radius: 6px;
+
+    img {
+      margin: 0 6px 0 -4px;
+    }
+
+    @media (max-width: $desktop) {
+      margin-top: 32px;
+      font-size: 13px;
+    }
+
+    @media (max-width: $tablet) {
+      margin-top: 22px;
+      font-size: 12px;
+    }
+
+    @media (max-width: $mobile) {
+      margin-top: 18px;
+      padding: 5px;
+
+      img {
+        max-width: 20px;
+        margin: 0 2px 0 -2px;
+      }
+    }
+  }
+
   &__intro {
     grid-area: intro;
     padding-right: 4rem;
 
     .title {
-      margin-top: 5rem;
+      margin-top: 22px;
       margin-bottom: 0;
     }
 
@@ -94,7 +132,7 @@
 
   &__logo {
     grid-area: logo;
-    margin-top: 9px;
+    margin-top: 14px;
     margin-left: 20px;
 
     img {
@@ -131,7 +169,7 @@
     margin-top: -21px;
 
     @media (max-width: $desktop) {
-      margin-top: 0;
+      margin-top: 40px;
     }
 
     @media (max-width: $tablet) {

diff --git a/docs/content/en/_index.html b/docs/content/en/_index.html
@@ -8,6 +8,12 @@
     <div class="hero">
         <div class="container">
             <div class="hero__intro">
+                <span class="hero__label">
+                    <img src="/svgs/logos/cncf-logo.svg" width="26" height="26" loading="eager" alt="" />
+                    <span>
+                        We are proud to be a <b>CNCF Graduation</b> level project!
+                    </span>
+                </span>
                 <h1 class="title title--xl">
                     eBPF-based Security Observability and Runtime Enforcement
                 </h1>

diff --git a/docs/static/svgs/logos/cncf-logo.svg b/docs/static/svgs/logos/cncf-logo.svg