Merge branch 'main' into ross-updates

Author: kramerro-ibm

README.md

@@ -16,5 +16,5 @@ If the command line install does not work, you can download quarto here: https:/
 
 ## How do I use it?
 1. Change line 9 of the `_quarto.yml` file to the appropriate Project Name of the solution doc.
-2. Change line 19 of the `_quarto.yml` file to the reflect the link to the repo of the newly created solution doc. Ex. https://github.com/ibm-client-engineering/[repo-name]
+2. Change line 21 of the `_quarto.yml` file to the reflect the link to the repo of the newly created solution doc. Ex. https://github.com/ibm-client-engineering/[repo-name]
 3. Assuming that Quarto is already installed, navigate to the appropriate directory with the cloned solution doc repository and run `quarto preview index.qmd` to preview your build locally.

_quarto.yml

@@ -6,7 +6,7 @@ language:
       search-text-placeholder: Search
 
 website:
-  title: Project Name
+  title: Solutions Hub
   favicon: images/bee.png
   page-navigation: true
   search: 

images/IBMlogo.png

@@ -2,10 +2,15 @@
 ---
 title: "Project Name"
 subtitle: "Subtitle"
-author: List Authors 
 format: html
 ---
-
+```{=html}
+<span class="dot">SL</span> &ensp;Samuel Lee&ensp;
+```
+```{=html}
+<span class="dot">BK</span> &ensp;Bo Kulbacki&ensp;
+```
+<br>
 ---
 Description: "Project Name"
 ---

index.qmd

@@ -60,16 +60,6 @@ div.sidebar-item-container .active, div.sidebar-item-container .show > .nav-link
     margin-left: -0.75rem; /* Adjust alignment with the left margin */
 }
 
-/* Bold Top-Level Headings in Sidebar */
-.sidebar nav[role=doc-toc] ul>li>a {
-    font-weight: 800; /* Bold font weight for primary headings */
-}
-
-/* Normal Font Weight for Subheadings */
-.sidebar nav[role=doc-toc] ul>li>ul>li>a {
-    font-weight: 100; /* Normal font weight for subheadings */
-}
-
 /* General Sidebar Item Padding */
 .sidebar-item {
     padding: .2rem; /* Adds padding for better spacing */
@@ -88,9 +78,26 @@ div.sidebar-item-container .active, div.sidebar-item-container .show > .nav-link
 /* Navbar Brand Text Styling */
 .navbar-brand {
     color: black; /* Default color */
-    font-size: 18pt; /* Large font size */
+    font-weight: 600;
+    position: relative;
+    display: block;
+    -webkit-padding-start: 1rem;
+    padding-inline-start: 1rem;
 }
 
+.navbar-brand:not(.navbar-brand-logo):before {
+    position: absolute;
+    display: block;
+    background-color: #DEE2E6;
+    block-size: 2rem;
+    content: "";
+    inline-size: .0625rem;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+}
+
+
 /* Navbar Brand Hover State */
 .navbar-brand:hover {
     color: black; /* Prevents color change on hover */
@@ -102,19 +109,25 @@ div.sidebar-item-container .active, div.sidebar-item-container .show > .nav-link
 }
 
 /* Remove Border and Padding for Sidebar TOC Links */
+.sidebar nav[role=doc-toc] {
+    opacity: .8;
+    font-weight: 400;
+    font-size: .925rem;
+    line-height: 17px;
+    padding: 0.5rem 0.75rem; /* Internal padding for spacing */
+}
+
 .sidebar nav[role=doc-toc] ul>li>ul>li>a, .sidebar nav[role=doc-toc]>ul a {
     border-left: none; /* Removes border from TOC links */
-    padding-left: 0; /* No extra padding on the left */
+    padding-left: calc(1rem + 4px);
 }
 
 /* Highlight Active State in Sidebar TOC */
 .sidebar nav[role=doc-toc] ul>li>a.active, .sidebar nav[role=doc-toc] ul>li>ul>li>a.active {
     border-left: 4px solid #0f62fe; /* Thin blue left border */
-    color: #0f62fe !important; /* Blue text color */
-    background-color: #E9E9E9; /* Light blue background */
     border-radius: 0 4px 4px 0; /* Rounded right corners */
-    padding: 0.50em 0.75rem; /* Internal spacing */
-    margin-left: -0.75rem; /* Aligns active items to the left */
+    padding-left: 1rem;
+    color: black !important;
 }
 
 /* Autocomplete Search Form Width */
@@ -153,7 +166,7 @@ nav .nav-link i, nav .dropdown-item i {
 }
 /* Specific styling for brand icons */
 .bi-linkedin {
-    color: #0077B5; /* LinkedIn icon in blue */
+    color: black; /* LinkedIn icon in blue */
     font-size: 24px !important;
     height: 50px; /* Icon height */
     width: 50px; /* Icon width */
@@ -184,8 +197,37 @@ nav .nav-link i, nav .dropdown-item i {
     align-items: center;      /* Align arrow with text */
     text-decoration: none;
     width: 100%;             /* Take full width of container */
+    justify-content: inherit;
 }
 
+/* Style the navigation next button - right align */
+.nav-page-next{
+    justify-content: end; /* Justifies the navigation links to the end */
+}
+
+/* Style the navigation previous button - left align */
+.nav-page-previous {
+    justify-content: start; /* Justifies the navigation links to the start */
+}
+
+/* Style the dot for the authors section  */
+.dot {
+    height: 25px;
+    width: 25px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    text-align: center;
+    color: white;
+    background-color: #0072C3; 
+    font-size: 9pt;
+    align-items: center;
+    vertical-align: bottom;
+    justify-content: center;
+    display: inline-flex;
+}
+
+
 /* Only apply hover effect to nav items with content */
 .nav-page:has(a):hover {
     background-color: #E8E8E8;