implemented the new design navbar (#5965)

* fixed the home page mobile responsive issue * implemented new design of navbar
knative · Jun 26, 2024 · c671f90 · c671f90
1 parent 8e559a9
commit c671f90
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 5 deletions.
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -65,16 +65,20 @@ a.md-header__button.md-logo img {
 .md-header__source {
   color: var(--md-primary-fg-color--dark);
 }
-
+.md-search__form{
+  border-radius: 10px;
+}
 .md-search__input {
   background-color: white;
   border: black 1px solid;
+  border-radius: 10px;
 }
 
 .md-search__input::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #4d4d4d;
   opacity: 1;
+  border-radius: 10px;
   /* Firefox */
 }
 
@@ -95,6 +99,9 @@ a.md-header__button.md-logo img {
 .md-search__icon[for=__search] {
   color: var(--md-default-fg-color--light);
 }
+.md-source{
+  margin-left:-1.4rem;
+}
 
 .md-source__icon+.md-source__repository {
   font-weight: bold;
@@ -111,6 +118,13 @@ a.md-header__button.md-logo img {
   color: white;
   padding: 0 2em;
 }
+.md-tabs__list li:nth-last-child(3){
+border-radius: 20% 0 0 0 ;
+}
+.md-tabs__list li:nth-last-child(1){
+  border-radius:0 18% 0 0 ;
+  }
+
 
 .md-tabs__list li:nth-last-child(1) a,
 .md-tabs__list li:nth-last-child(2) a,

diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css
@@ -349,7 +349,7 @@ h2.secondary-headline, h3.trusted-by {
   justify-content: center;
   color: black;
   display: flex;
-  background-color: white;
+  background-color: #f3f1f2;
 }
 
 .case-studies-container h1 {
@@ -459,8 +459,8 @@ h2.secondary-headline, h3.trusted-by {
 
 .cncf-notice-container h3 {
   font-weight: bold;
-  color: var(--md-primary-fg-color--light);
-  margin-top: 0;
+  color: var(--md-default-fg-color--light);
+  margin-top: 1rem;
 }
 
 .md-typeset img.cncf-logo {
@@ -510,6 +510,61 @@ footer nav.md-footer__inner {
   padding: 0;
 }
 
-footer .md-footer-meta .md-footer-meta__inner {
+.md-footer-meta{
   padding: 1em 0;
 }
+.md-footer-copyright{
+  margin-right: 18px;
+}
+@media (max-width: 1024px){
+.md-footer-copyright{
+  margin: auto;
+  text-align: center;
+}
+.md-social{
+  margin: auto;
+}
+}
+@media (max-width: 861px) {
+  .md-footer-meta{
+    flex-direction: column;
+  }
+
+  .md-footer__link {
+    display: block;
+    margin-bottom: 1rem;
+  }
+
+  .md-footer__title {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  .md-footer__button {
+    display: none;
+  }
+
+  .md-footer-meta__inner {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .md-footer-copyright {
+    order: 2;
+    margin: 2rem;
+    flex-wrap: wrap;
+  }
+  .md-footer-copyright a{
+    margin: 8px;
+  }
+
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    order: 1;
+
+  }
+
+  .md-social {
+    margin-top: 1rem;
+  }
+}