docs: design-qa (#1189)

* update welcome page

* replicate styling

* add repo_url back

* fixing lint issue

* fix lint issue

Author: Huongg

kedro-datasets/docs/overrides/welcome.html

@@ -0,0 +1,3 @@
+<!-- The welcome page is rendered from the Kedro repository.
+   Any updates to the welcome page must be made in the Kedro repo:
+   https://github.com/kedro-org/kedro/blob/main/docs/overrides/welcome.html -->

kedro-datasets/docs/stylesheets/footer.css

@@ -118,8 +118,9 @@
   .md-footer__link:hover {
     .md-footer__direction,
     .md-ellipsis,
-    .footer__button {
+    .md-footer__button {
       color: var(--text-hover-color);
+      opacity: 1;
     }
   }
 }

kedro-datasets/docs/stylesheets/globals.css

@@ -130,16 +130,21 @@
     padding: 0;
     padding: 24px 10px;
 
-    /* Colour for the section labels */
+    /* Colour for the section label, which is the header of each section in the left sidebar */
     .md-nav__item--section > .md-nav__link[for] {
         color: var(--text-primary-color);
         align-items: center;
+        margin-left: 20px;
+    }
+
+    /* Apply border-radius to scrollbar container */
+    .md-sidebar__scrollwrap {
+      border-radius: 12px;
     }
 
     .md-sidebar__inner {
       background-color: var(--primary-sidebar-bg-color);
-      padding: 24px 0;
-      border-radius: 12px;
+      padding: 24px 10px;
     }
 
     .md-nav__item--section {
@@ -163,6 +168,11 @@
         line-height: 32px;
     }
 
+    /* Target the arrow circle on the nav link list */
+    .md-nav__link .md-icon:last-child:hover {
+      background-color: var(--primary-sidebar-bg-color);
+    }
+
     .md-nav__link--active,
     .md-nav__link[href]:hover,
     .md-nav__link[href]:focus,
@@ -188,6 +198,7 @@
 /* Secondary sidebar styles */
 .md-sidebar--secondary {
   margin-right: 64px;
+  margin-top: 48px;
 
   .md-nav__title {
     background: transparent;
@@ -203,10 +214,6 @@
     padding-bottom: 10px;
   }
 
-  .md-nav {
-    padding-top: 10px;
-  }
-
   .md-nav__link {
     color: var(--text-secondary-color);
   }
@@ -225,23 +232,29 @@
   max-width: none;
 }
 
-.md-content {
-  padding: 48px 64px 48px 64px;
-}
-
 .md-main__inner {
   margin: 0;
 }
 
+/* Add margin to the h1 for each page section content */
+.md-content__inner.md-typeset {
+  margin-top: 48px;
+}
+
 /* Code Block Styles */
 
 .md-typeset pre {
   background-color: var(--admonition-bg-color);
 }
 
-.md-typeset pre code {
+.md-typeset pre code,
+.md-typeset code {
   background-color: var(--admonition-bg-color);
   color: var(--text-primary-color);
+
+}
+
+.md-typeset pre code {
   margin: 20px; /* this is to ensure there's no overlap with the copy icon */
 }
 
@@ -250,7 +263,7 @@
   color: var(--text-secondary-color);
 }
 
-/** hightlight the copy icon buton on hover */
+/** highlight the copy icon button on hover */
 .md-clipboard:hover,
 pre:hover .md-clipboard {
   color: var(--text-hover-color);
@@ -385,8 +398,6 @@ pre:hover .md-clipboard {
   #__nav_4_label {
     display: none;
   }
-
-
 }
 
 /** MOBILE STYLES */

kedro-datasets/docs/stylesheets/typography.css

@@ -20,14 +20,24 @@ body {
   line-height: 24px;;
 }
 
+/* All headings color */
+h1, h2, h3, h4, h5, h6,
+.md-typeset h1,
+.md-typeset h2,
+.md-typeset h3,
+.md-typeset h4,
+.md-typeset h5,
+.md-typeset h6 {
+  color: var(--text-primary-color);
+}
+
 h1,
 .md-typeset h1 {
   font-family: Inter;
   font-size: 32px;
   font-style: normal;
   font-weight: 400;
   line-height: 40px;
-  color: var(--text-primary-color);
   margin-bottom: 32px;
 }
 
@@ -38,7 +48,6 @@ h2,
   font-style: normal;
   font-weight: 400;
   line-height: 32px;
-  color: var(--text-primary-color);
   margin: 32px 0 24px 0;
 }
 
@@ -49,11 +58,41 @@ h3,
   font-style: normal;
   font-weight: 400;
   line-height: 28px;
-  color: var(--text-primary-color);
   margin: 24px 0 12px 0;
 }
 
+h4,
+.md-typeset h4 {
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px;
+  margin: 20px 0 12px 0;
+}
+
+h5,
+.md-typeset h5 {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin: 16px 0 8px 0;
+}
+
+h6,
+.md-typeset h6 {
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  margin: 16px 0 8px 0;
+}
+
 p,
+.md-typeset,
 .md-typeset thead ,
 .md-typeset td {
   font-family: Inter;