From b790da4c734913f18069a21ad05e735454df3386 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 22 Nov 2023 14:31:52 +0100
Subject: [PATCH] More styles improvements

---
 assets/css/baseof.css                   |  9 ++++--
 assets/css/index.css                    |  6 ++--
 assets/css/list.css                     |  2 +-
 assets/css/partials.css                 | 41 ++++++++++++++++---------
 assets/css/single.css                   |  2 +-
 layouts/partials/table-of-contents.html |  2 +-
 6 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/assets/css/baseof.css b/assets/css/baseof.css
index f4a0204..215a908 100644
--- a/assets/css/baseof.css
+++ b/assets/css/baseof.css
@@ -19,6 +19,8 @@
   --light-gray: #e7e7e7;
   --dark-background: #1d1b1b;
   --light-background: #fbfbfb;
+  --partial-dark-background: var(--black);
+  --partial-light-background: #ececec;
   --card-radius: 1.875rem;
   --form-radius: 0.563rem;
   --shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
@@ -36,8 +38,8 @@
 
 ::-webkit-scrollbar {
   width: 0;
-  height: 0; 
-  background: transparent; 
+  height: 0;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -147,7 +149,8 @@ a {
   color: var(--text);
 }
 
-a, button {
+a,
+button {
   cursor: pointer;
 }
 
diff --git a/assets/css/index.css b/assets/css/index.css
index 97aeea4..acbad26 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1,8 +1,8 @@
 :root {
   --first-action-dark-background: #353535;
-  --first-action-light-background: var(--black);
-  --second-action-dark-background: #F3F3F3;
-  --second-action-light-background: #ECECEC;
+  --first-action-light-background: var(--partial-dark-background);
+  --second-action-dark-background: #f3f3f3;
+  --second-action-light-background: var(--partial-light-background);
 }
 
 main h1 {
diff --git a/assets/css/list.css b/assets/css/list.css
index 8ceb2c3..5898f86 100644
--- a/assets/css/list.css
+++ b/assets/css/list.css
@@ -7,7 +7,7 @@ main #tags {
 
 main #tags a {
   border-radius: 0.5625rem;
-  background-color: #5A5A5A;
+  background-color: #5a5a5a;
   color: var(--white);
   padding: 0.5rem 1rem;
   text-decoration: none;
diff --git a/assets/css/partials.css b/assets/css/partials.css
index 279f978..d35a213 100644
--- a/assets/css/partials.css
+++ b/assets/css/partials.css
@@ -1,20 +1,20 @@
 :root {
-  --about-card-light-background: #ececec;
-  --about-card-dark-background: var(--black);
-  --button-light-background: var(--black);
+  --about-card-light-background: var(--partial-light-background);
+  --about-card-dark-background: var(--partial-dark-background);
+  --button-light-background: var(--partial-dark-background);
   --button-dark-background: #353535;
-  --card-light-background: #ececec;
-  --card-dark-background: var(--black);
-  --input-light-background: #ececec;
+  --card-light-background: var(--partial-light-background);
+  --card-dark-background: var(--partial-dark-background);
+  --input-light-background: var(--partial-light-background);
   --input-dark-background: #2d2d2d;
-  --footer-light-background: #ececec;
-  --footer-dark-background: var(--black);
-  --header-light-background: #ececec;
+  --footer-light-background: var(--partial-light-background);
+  --footer-dark-background: var(--partial-dark-background);
+  --header-light-background: var(--partial-light-background);
   --header-dark-background: #676666;
-  --nav-light-background: #ececec;
-  --nav-dark-background: var(--black);
-  --toc-light-background: #f2f2f2;
-  --toc-dark-background: var(--black);
+  --nav-light-background: var(--partial-light-background);
+  --nav-dark-background: var(--partial-dark-background);
+  --toc-light-background: var(--partial-light-background);
+  --toc-dark-background: var(--partial-dark-background);
 }
 
 #about-card {
@@ -328,14 +328,25 @@ header #nav-toggler {
 }
 
 #table-of-contents {
+  position: sticky;
+  top: 3rem;
   margin-top: 3rem;
-  height: 30rem;
-  max-height: 20rem;
+  height: 25rem;
+  max-height: 25rem;
   padding: 1.2rem 1.6rem;
   border-radius: 0.75rem;
   background-color: var(--toc-background);
 }
 
+#table-of-contents span {
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+#table-of-contents nav {
+  margin-top: 0.5rem;
+}
+
 #table-of-contents nav ul {
   list-style-type: none;
   padding-inline-start: 2rem;
diff --git a/assets/css/single.css b/assets/css/single.css
index 69bcf79..ed16358 100644
--- a/assets/css/single.css
+++ b/assets/css/single.css
@@ -1,6 +1,6 @@
 main #container {
   display: grid;
-  grid-template-columns: auto 15rem;
+  grid-template-columns: auto minmax(15rem, 20rem);
   column-gap: 2rem;
 }
 
diff --git a/layouts/partials/table-of-contents.html b/layouts/partials/table-of-contents.html
index 06ccce2..9cc2598 100644
--- a/layouts/partials/table-of-contents.html
+++ b/layouts/partials/table-of-contents.html
@@ -1,6 +1,6 @@
 {{ with .TableOfContents }}
     <aside id="table-of-contents">
-        <h3>Table of contents</h3>
+        <span>Table of contents</span>
         {{ . }}
     </aside>
 {{ end }}
\ No newline at end of file