More styles improvements

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; 
+  height: 0;
-  background: transparent; 
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -147,7 +149,8 @@ a {
   color: var(--text);
 }
 
-a, button {
+a,
+button {
   cursor: pointer;
 }
 

assets/css/index.css

@@ -1,8 +1,8 @@
 :root {
   --first-action-dark-background: #353535;
-  --first-action-light-background: var(--black);
+  --first-action-light-background: var(--partial-dark-background);
-  --second-action-dark-background: #F3F3F3;
+  --second-action-dark-background: #f3f3f3;
-  --second-action-light-background: #ECECEC;
+  --second-action-light-background: var(--partial-light-background);
 }
 
 main h1 {

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;

assets/css/partials.css

@@ -1,20 +1,20 @@
 :root {
-  --about-card-light-background: #ececec;
+  --about-card-light-background: var(--partial-light-background);
-  --about-card-dark-background: var(--black);
+  --about-card-dark-background: var(--partial-dark-background);
-  --button-light-background: var(--black);
+  --button-light-background: var(--partial-dark-background);
   --button-dark-background: #353535;
-  --card-light-background: #ececec;
+  --card-light-background: var(--partial-light-background);
-  --card-dark-background: var(--black);
+  --card-dark-background: var(--partial-dark-background);
-  --input-light-background: #ececec;
+  --input-light-background: var(--partial-light-background);
   --input-dark-background: #2d2d2d;
-  --footer-light-background: #ececec;
+  --footer-light-background: var(--partial-light-background);
-  --footer-dark-background: var(--black);
+  --footer-dark-background: var(--partial-dark-background);
-  --header-light-background: #ececec;
+  --header-light-background: var(--partial-light-background);
   --header-dark-background: #676666;
-  --nav-light-background: #ececec;
+  --nav-light-background: var(--partial-light-background);
-  --nav-dark-background: var(--black);
+  --nav-dark-background: var(--partial-dark-background);
-  --toc-light-background: #f2f2f2;
+  --toc-light-background: var(--partial-light-background);
-  --toc-dark-background: var(--black);
+  --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;
+  height: 25rem;
-  max-height: 20rem;
+  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;

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;
 }
 

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 }}