add CNCF info & update homepage (#3622)

* add CNCF info & update homepage Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com> * improve styling of homepage Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com> * use rlang logo instead of rstudio * update homepage content * fix typo * prevent homepage styles applying to docs --------- Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>
kubeflow · Nov 30, 2023 · 7a57219 · 7a57219
1 parent f80963d
commit 7a57219
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 220 deletions.
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -37,6 +37,15 @@
 // --------------------------------------------------
 footer {
   min-height: auto;
+
+  p {
+    margin-bottom: 0.4rem;
+    line-height: 1.0rem;
+  }
+
+  small {
+    font-size: 0.7rem;
+  }
 }
 
 // --------------------------------------------------
@@ -104,6 +113,177 @@ footer {
   }
 }
 
+// --------------------------------------------------
+// Home page
+// --------------------------------------------------
+.td-home {
+
+  .card-img-top {
+    object-fit: scale-down;
+  }
+
+  .text-white {
+    font-weight: 400;
+  }
+
+  .bg-primary-dark {
+    background-color: $dark;
+
+    a {
+      border-bottom: 0.1em dotted paleturquoise;
+
+      color: paleturquoise !important;
+      font-weight: 600;
+      padding: 0 0.2em 0.05em 0.2em;
+      text-decoration: none;
+
+      &:hover {
+        border-bottom: 1px dotted #fff;
+
+        color: #fff !important;
+      }
+    }
+  }
+
+  .border-primary-dark {
+    border-color: $info !important;
+  }
+
+  .section-head {
+    color: $primary;
+    font-weight: bold;
+    padding: 0 0 1.9rem 0;
+  }
+
+  .image {
+    display: block;
+  }
+
+  .image img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .image.left, .image.right {
+    max-width: 45%;
+  }
+
+  .image.left::after, .image.right::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+
+  .image.left {
+    float: left;
+    margin: 0 1.5em 1.5em 0;
+  }
+
+  .image.right {
+    float: right;
+    margin: 0 0 1.5em 1.5em;
+  }
+
+  #overview, .components, #cncf, #community {
+    padding: 4rem 0 4rem 0 !important;
+  }
+
+  #overview p, #community p {
+    font-size: 1.125em;
+  }
+
+  #overview {
+    border-bottom: 0.1rem solid #b6d0ff;
+    text-align: center;
+  }
+
+  #community {
+    border-top: 0.1rem solid #b6d0ff;
+    border-bottom: 0.1rem solid #b6d0ff;
+    text-align: center;
+  }
+
+  #cncf {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    text-align: center;
+
+    .cncf-title {
+      color: #6b7281;
+      font-weight: bold;
+      padding-top: 1.6rem;
+    }
+  }
+
+  #pageContent .lead {
+    margin: 0 1.5em 3em 1.5em;
+  }
+
+  #pageContent .lead > .image {
+    padding: 0 1.5em;
+    max-width: 60%;
+    margin-bottom: 1.5em;
+  }
+
+  #pageContent .lead > .text p {
+    font-size: 1em;
+  }
+
+  @media screen and (min-width: 480px) {
+    #overview, #community {
+      font-size: 1.125em;
+    }
+    #pageContent .lead > .image {
+      max-width: 35%;
+      margin-bottom: 3em;
+    }
+    #pageContent .lead > .text p {
+      font-size: 1em;
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    #pageContent .lead {
+      margin-top: 1em;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      -ms-flex-align: stretch;
+      align-items: stretch;
+    }
+    #pageContent .lead > * {
+      -ms-flex: 0 1 auto;
+      flex: 0 1 auto;
+    }
+    #pageContent .lead > .image {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%;
+    }
+    #pageContent .lead > .image > img {
+      max-width: 80%;
+      margin: 0 auto;
+    }
+    #pageContent .lead > .text {
+      -ms-flex-preferred-size: 70%;
+      flex-basis: 70%;
+    }
+    #pageContent .lead:nth-child(2n+0) > .image {
+      -ms-flex-order: 2;
+      order: 2;
+    }
+    #pageContent .lead:nth-child(2n+0) > .text {
+      -ms-flex-order: 1;
+      order: 1;
+    }
+  }
+}
 
 // --------------------------------------------------
 // 404 page

diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
@@ -20,132 +20,4 @@ $navbar-dark-hover-color: rgba($white, 0.75);
 $navbar-dark-active-color: $navbar-dark-color;
 
 // Fonts
-$google_font_family: "Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" !default;
-
-// Front page styling
-.card-img-top {
-  object-fit: scale-down;
-}
-
-.text-white {
-  font-weight: 400;
-}
-
-.bg-primary-dark {
-  background-color: $dark;
-
-  a {
-    border-bottom: 1px dotted paleturquoise;
-
-    color: paleturquoise !important;
-    font-weight: 600;
-    padding: 0 2px 1px 2px;
-    text-decoration: none;
-
-    &:hover {
-      border-bottom: 1px dotted #fff;
-
-      color: #fff !important;
-    }
-  }
-}
-
-.border-primary-dark {
-  border-color: $info !important;
-}
-
-.section-head {
-  font-size: 1.25em;
-  color: $primary;
-  font-weight: bold;
-  padding: 0 0 1em 0;
-}
-
-.contain {
-  margin: 0 auto;
-  max-width: 1200px; }
-
-.image {
-  display: block; }
-  .image img {
-    display: block;
-    width: 100%;
-    height: auto; }
-  .image.left, .image.right {
-    max-width: 45%; }
-    .image.left::after, .image.right::after {
-      clear: both;
-      content: "";
-      display: block; }
-  .image.left {
-    float: left;
-    margin: 0 1.5em 1.5em 0; }
-  .image.right {
-    float: right;
-    margin: 0 0 1.5em 1.5em; }
-
-#overview, #community {
-  padding: 6em 1.5em 3em 1.5em;
-  text-align: center;
-  margin: 0; }
-  #overview p, #community p {
-    font-size: 1.125em;}
-
-#overview {
-  border-bottom: 2px solid #b6d0ff;
-}
-
-#community {
-  border-top: 2px solid #b6d0ff;
-}
-
-#pageContent .lead {
-  margin: 0 1.5em 3em 1.5em;}
-  #pageContent .lead > .image {
-    padding: 0 1.5em;
-    max-width: 60%;
-    margin-bottom: 1.5em; }
-  #pageContent .lead > .text p {
-    font-size: 1em; }
-
-@media screen and (min-width: 480px) {
-  #overview, #community {
-    font-size: 1.125em; }
-  #pageContent .lead > .image {
-    max-width: 35%;
-    margin-bottom: 3em; }
-  #pageContent .lead > .text p {
-    font-size: 1em; } }
-
-@media screen and (min-width: 769px) {
-  #pageContent .lead {
-    margin-top: 1em;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-direction: row;
-        flex-direction: row;
-    -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
-    -ms-flex-pack: justify;
-        justify-content: space-between;
-    -ms-flex-align: stretch;
-        align-items: stretch; }
-    #pageContent .lead > * {
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto; }
-    #pageContent .lead > .image {
-      display: block;
-      margin: 0 auto;
-      max-width: 100%; }
-      #pageContent .lead > .image > img {
-        max-width: 80%;
-        margin: 0 auto; }
-    #pageContent .lead > .text {
-      -ms-flex-preferred-size: 70%;
-          flex-basis: 70%; }
-    #pageContent .lead:nth-child(2n+0) > .image {
-      -ms-flex-order: 2;
-          order: 2; }
-    #pageContent .lead:nth-child(2n+0) > .text {
-      -ms-flex-order: 1;
-          order: 1; } }
+$google_font_family: "Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" !default;
diff --git a/config.toml b/config.toml
@@ -108,6 +108,7 @@ enable = true
 
   copyright = "The Kubeflow Authors."
   privacy_policy = "https://policies.google.com/privacy"
+  trademark = "https://www.linuxfoundation.org/trademark-usage/"
 
   # Google Custom Search Engine ID.
   gcs_engine_id = "007239566369470735695:624rglujm-w"