From 03888712e3ab6a0168c875654a42a242ec2cd47d Mon Sep 17 00:00:00 2001
From: Claudia <claudiabarcelovaldes40@gmail.com>
Date: Wed, 4 Dec 2024 14:15:20 +0100
Subject: [PATCH 1/3] feat: set index hover color to blue, letter color to
 darker black, and inline code to light gray

---
 ui/src/css/globals/_typography.scss |  4 ++--
 ui/src/css/toc.scss                 | 14 +++++---------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/ui/src/css/globals/_typography.scss b/ui/src/css/globals/_typography.scss
index c56cb5aa..e2d57b24 100644
--- a/ui/src/css/globals/_typography.scss
+++ b/ui/src/css/globals/_typography.scss
@@ -19,7 +19,7 @@
 
 /* Body Styles */
 body {
-  color: var(--guk-color-neutral-600);
+  color: var(--guk-color-neutral-900);
   font-family: var(--guk-font-family);
   font-size: var(--guk-font-size-base); /* 1rem */
   line-height: var(--guk-line-height-normal); /* 1.5 */
@@ -85,7 +85,7 @@ h6 {
 
 /* Inline Code */
 code {
-  background-color: var(--guk-color-neutral-100); /* #f5f7fa */
+  background-color: var(--guk-color-neutral-50); /* #f5f7fa */
   border-radius: var(--guk-border-rounded); /* 4px */
   font-family: var(--guk-font-family-monospace, monospace);
   font-size: 0.95em;
diff --git a/ui/src/css/toc.scss b/ui/src/css/toc.scss
index 2936bedc..a00a2c28 100644
--- a/ui/src/css/toc.scss
+++ b/ui/src/css/toc.scss
@@ -1,5 +1,3 @@
-/* toc.scss */
-
 .toc-sidebar {
   font-size: 0.8em;
   opacity: 0.8;
@@ -26,7 +24,7 @@
   margin-bottom: 16px;
   padding: 0;
   font-family: var(--guk-font-family); /* Replaces var(--heading) */
-  color: var(--guk-color-neutral-900); /* Replaces var(--aluminum-5) */
+  color: var(--guk-color-neutral-400); /* Replaces var(--aluminum-5) */
   letter-spacing: 0.05em;
   font-weight: var(--guk-font-weight-semibold); /* Assuming bold weight */
   text-transform: uppercase;
@@ -39,13 +37,12 @@
   padding-right: var(--guk-space-3); /* 8px */
   overflow: hidden;
   text-overflow: ellipsis;
+  font-weight: var(--guk-font-weight-semibold);
   font-family: var(--guk-font-family); /* Replaces var(--sans-serif) */
- /* font-weight: var(--guk-font-weight-semibold); /* Replaces var(--weight-bold) */
   font-size: var(--guk-font-size-base); /* 1rem */
-  color: var(--guk-color-neutral-400); /* Replaces var(--aluminum-5) */
 
   &.subheading-item {
-    font-weight: var(--guk-font-weight-normal); /* Replaces var(--weight-normal) */
+    font-weight: var(--weight-normal); /* Replaces var(--weight-normal) */
    /* margin: 0.25rem 0 0; */
     margin-left: .7rem; 
   }
@@ -57,11 +54,10 @@
   padding-right: 8px;
 
   &:hover {
-    color: var(--guk-color-neutral-900); /* Replaces var(--core-violet-2) */
+    color: var(--guk-color-primary-300); /* Replaces var(--core-violet-2) */
   }
 }
 
 .toc .toc-menu li a.toc-active {
-  color: var(--guk-color-neutral-900); /* Replaces var(--core-violet-4) */
-  font-weight: var(--guk-font-weight-semibold); /* Assuming bold weight */
+  color: var(--guk-color-primary-400); /* Replaces var(--core-violet-4) */
 }

From 4b78899f5c75c32c1c2aa646da7500711cc34b99 Mon Sep 17 00:00:00 2001
From: Claudia <claudiabarcelovaldes40@gmail.com>
Date: Wed, 4 Dec 2024 16:32:31 +0100
Subject: [PATCH 2/3] feat: set all toc headers to normal weight

---
 ui/src/css/toc.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/css/toc.scss b/ui/src/css/toc.scss
index a00a2c28..091943c2 100644
--- a/ui/src/css/toc.scss
+++ b/ui/src/css/toc.scss
@@ -26,7 +26,7 @@
   font-family: var(--guk-font-family); /* Replaces var(--heading) */
   color: var(--guk-color-neutral-400); /* Replaces var(--aluminum-5) */
   letter-spacing: 0.05em;
-  font-weight: var(--guk-font-weight-semibold); /* Assuming bold weight */
+  font-weight: var(--guk-font-weight-normal); /* Assuming bold weight */
   text-transform: uppercase;
 }
 
@@ -37,12 +37,12 @@
   padding-right: var(--guk-space-3); /* 8px */
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: var(--guk-font-weight-semibold);
+  font-weight: var(--guk-font-weight-normal);
   font-family: var(--guk-font-family); /* Replaces var(--sans-serif) */
   font-size: var(--guk-font-size-base); /* 1rem */
 
   &.subheading-item {
-    font-weight: var(--weight-normal); /* Replaces var(--weight-normal) */
+    font-weight: var(--guk-font-weight-normall); /* Replaces var(--weight-normal) */
    /* margin: 0.25rem 0 0; */
     margin-left: .7rem; 
   }

From bf09d62ff3ed74bb7f5b779ff39234c9cc7e23c9 Mon Sep 17 00:00:00 2001
From: Claudia <claudiabarcelovaldes40@gmail.com>
Date: Wed, 4 Dec 2024 16:45:13 +0100
Subject: [PATCH 3/3] feat: make the nav bar and article divs flexible, so they
 increase/decrease based on the screen size

---
 ui/src/css/layout.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/css/layout.scss b/ui/src/css/layout.scss
index 7cabce1d..e5a30334 100644
--- a/ui/src/css/layout.scss
+++ b/ui/src/css/layout.scss
@@ -9,7 +9,8 @@
   overflow-y: auto;
   position: sticky;
   top: 0;
-  width: 300px;
+  width: 20%;
+  max-width: 300px;  
   flex: 0 0 auto;
 }
 
@@ -106,7 +107,6 @@ button.collapse-toggle {
 }
 
 .navbar, .article-wrapper {
-  max-width: 60rem;
   margin: 0 var(--side-margin);
 }
 
@@ -180,7 +180,8 @@ button.collapse-toggle {
   margin-left: var(--lg);
   flex-grow: 0;
   flex-shrink: 0;
-  width: 200px;
+  width: 20%;
+  max-width: 300px;  
   max-height: 80vh;
   position: sticky;
   top: 10vh;