navigation alignment changed and Author bubbles added

Author: bokulbackiibm

index.qmd

@@ -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"
 ---

src/custom.scss

@@ -184,8 +184,33 @@ 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: 12pt
+}
+
+
 /* Only apply hover effect to nav items with content */
 .nav-page:has(a):hover {
     background-color: #E8E8E8;
@@ -226,6 +251,7 @@ nav .nav-link i, nav .dropdown-item i {
     }
 }
 
+
 /* Footer Styling */
 .footer {
     font-size: 1rem; /* Base font size */