Star-count added

Author: Ashish241

assets/scss/_styles_project.scss

@@ -52,6 +52,7 @@
     padding-left: 0;
     padding-right: 0;
   }
+
   .td-sidebar {
     background-color: $td-sidebar-bg-color;
   }
@@ -62,14 +63,17 @@
     background-color: $td-sidebar-bg-color;
     height: unset;
   }
+
   .td-sidebar,
   .td-sidebar-toc {
     background-color: unset;
   }
+
   .td-main {
     padding-left: 0;
     padding-right: 0;
   }
+
   main {
     background-color: $body-bg;
   }
@@ -101,6 +105,7 @@
       //  - there is a left sidebar for md and above
       //  - there is a right sidebar for xl and above
       margin-left: 0;
+
       @include media-breakpoint-up(xl) {
         margin-right: 0;
       }
@@ -247,6 +252,7 @@ footer {
   @include media-breakpoint-down(md) {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
+
     .td-search {
       padding-right: 0.25rem;
     }
@@ -255,6 +261,7 @@ footer {
   @include media-breakpoint-up(md) {
     padding-left: 0;
     padding-right: 0;
+
     .td-search {
       padding-right: 0.5rem;
     }
@@ -304,8 +311,10 @@ nav.foldable-nav .without-child {
 
 // style the sidebar like a folder tree
 nav.foldable-nav {
+
   // apply styles to the main sidebar sections
   .ul-1 {
+
     // reduce padding of the sidebar links
     .with-child {
       padding-left: 1.5rem;
@@ -324,12 +333,12 @@ nav.foldable-nav {
     }
 
     // bold the chain of pages leading to the active page
-    .with-child.active-path > label a {
+    .with-child.active-path>label a {
       font-weight: 700;
     }
 
     // show a border on the left of open sections
-    .with-child > input:checked ~ ul {
+    .with-child>input:checked~ul {
       border-left: 0.1rem dotted $td-sidebar-left-stroke-color;
 
       // round the bottom left corner
@@ -342,29 +351,29 @@ nav.foldable-nav {
     }
 
     // color the border for the active path
-    .with-child.active-path > ul {
+    .with-child.active-path>ul {
       border-left: 0.1rem solid $td-sidebar-left-stroke-active-color !important;
     }
 
     // make the arrow for the non-active sections gray
-    .with-child > label:before {
+    .with-child>label:before {
       color: $td-sidebar-closed-color;
     }
 
     // make the arrow for open non-active sections gray
-    .with-child > input:checked ~ label:before {
+    .with-child>input:checked~label:before {
       color: $td-sidebar-closed-color;
     }
 
     // make the arrow for open active sections blue
-    .with-child.active-path > input:checked ~ label:before {
+    .with-child.active-path>input:checked~label:before {
       color: $primary;
     }
   }
 }
 
 // prevent overflow of long names in sidebar
-.td-sidebar-nav__section > ul {
+.td-sidebar-nav__section>ul {
   overflow-wrap: break-word;
 }
 
@@ -373,11 +382,11 @@ nav.foldable-nav {
 // --------------------------------------------------
 @media (hover: hover) and (pointer: fine) {
   nav.foldable-nav {
-    .ul-1 .with-child > label:hover:before {
+    .ul-1 .with-child>label:hover:before {
       transition: transform 0.3s;
     }
 
-    .ul-1 .with-child > input:checked ~ label:hover:before {
+    .ul-1 .with-child>input:checked~label:hover:before {
       transition: transform 0.3s;
     }
   }
@@ -402,7 +411,8 @@ nav.foldable-nav {
     background-color: rgba(255, 255, 255, 0.3);
     align-self: center;
     margin: 0 0.5rem;
-    @include media-breakpoint-down(md){
+
+    @include media-breakpoint-down(md) {
       rotate: 90deg;
     }
   }
@@ -497,6 +507,7 @@ nav.foldable-nav {
 // Home page
 // --------------------------------------------------
 .td-home {
+
   // make sure kubeflow title is white
   .display-1 {
     color: $white;
@@ -603,10 +614,59 @@ nav.foldable-nav {
     margin: 0 0 1.5em 1.5em;
   }
 
-  #overview, #pageContent, #cncf, #community, #adopters {
+  #overview,
+  #pageContent,
+  #cncf,
+  #community,
+  #adopters {
     padding: 4rem 0 4rem 0 !important;
   }
 
+  #pageContent {
+    .argo-github-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: #f8f9fa !important;
+      text-decoration: none !important;
+      transition: all 0.2s ease-in-out;
+      font-weight: 600;
+      font-size: 1.1rem;
+      border-bottom: none !important;
+
+      i {
+        transition: inherit;
+      }
+
+      .fa-github {
+        font-size: 1.4rem;
+      }
+
+      .fa-star {
+        font-size: 1.1rem;
+        margin-left: 0.2rem;
+        margin-right: -0.2rem;
+      }
+
+      &:hover {
+        color: #ef7b4d !important;
+        transform: translateY(-2px);
+      }
+    }
+
+    .project-github-link {
+      transition: all 0.2s ease;
+      display: inline-block;
+      border-bottom: none !important;
+
+      &:hover {
+        transform: scale(1.2);
+        color: #ffffff !important;
+        border-bottom: none !important;
+      }
+    }
+  }
+
   #overview {
     padding: 3rem 0 3rem 0 !important;
   }
@@ -718,26 +778,29 @@ nav.foldable-nav {
     margin: 0 1.5em 3em 1.5em;
   }
 
-  #pageContent .lead > .image {
+  #pageContent .lead>.image {
     padding: 0 1.5em;
     max-width: 60%;
     margin-bottom: 1.5em;
   }
 
-  #pageContent .lead > .text p {
+  #pageContent .lead>.text p {
     font-size: 1em;
   }
 
   @include media-breakpoint-up(sm) {
+
     #overview,
     #community {
       font-size: 1.125em;
     }
-    #pageContent .lead > .image {
+
+    #pageContent .lead>.image {
       max-width: 35%;
       margin-bottom: 3em;
     }
-    #pageContent .lead > .text p {
+
+    #pageContent .lead>.text p {
       font-size: 1em;
     }
   }
@@ -756,28 +819,34 @@ nav.foldable-nav {
       -ms-flex-align: stretch;
       align-items: stretch;
     }
-    #pageContent .lead > * {
+
+    #pageContent .lead>* {
       -ms-flex: 0 1 auto;
       flex: 0 1 auto;
     }
-    #pageContent .lead > .image {
+
+    #pageContent .lead>.image {
       display: block;
       margin: 0 auto;
       max-width: 100%;
     }
-    #pageContent .lead > .image > img {
+
+    #pageContent .lead>.image>img {
       max-width: 80%;
       margin: 0 auto;
     }
-    #pageContent .lead > .text {
+
+    #pageContent .lead>.text {
       -ms-flex-preferred-size: 70%;
       flex-basis: 70%;
     }
-    #pageContent .lead:nth-child(2n + 0) > .image {
+
+    #pageContent .lead:nth-child(2n + 0)>.image {
       -ms-flex-order: 2;
       order: 2;
     }
-    #pageContent .lead:nth-child(2n + 0) > .text {
+
+    #pageContent .lead:nth-child(2n + 0)>.text {
       -ms-flex-order: 1;
       order: 1;
     }
@@ -835,8 +904,8 @@ nav.foldable-nav {
   border-bottom: none !important;
 }
 
-.td-content > ul li,
-.td-content > ol li.nav-item {
+.td-content>ul li,
+.td-content>ol li.nav-item {
   margin-bottom: 0px;
 }
 
@@ -879,9 +948,10 @@ nav.foldable-nav {
 // code styling
 // --------------------------------------------------
 .td-content {
+
   // set the background color of inline code
   p code,
-  li > code,
+  li>code,
   table code {
     background-color: $code-inline-bg;
   }
@@ -892,7 +962,7 @@ nav.foldable-nav {
   }
 
   // ensure links with code in them have the correct color
-  a > code {
+  a>code {
     color: unset;
   }
 }
@@ -902,4 +972,4 @@ nav.foldable-nav {
 // --------------------------------------------------
 .alert {
   background-color: $alert-bg;
-}
+}