Small dark mode and mobile fixes (#90)

* Change color palette

Change to the palette that has light/dark mode variations

* Update custom.css

* Update custom.css

* Fix padding on smaller screens

Author: remotesynth

src/styles/custom.css

@@ -147,21 +147,21 @@
   font-family: 'AeonikFono', sans-serif !important;
   font-size: 15px !important;
   font-weight:500;
-  color: var(--gray-neutral-400);
+  color: var(--sl-color-gray-3);
 }
 
 .sidebar-content .top-level li details ul > li > a:hover,
 .sidebar-content .top-level li details ul > li > details > summary:hover,
 .sidebar-content .top-level > li .large:hover,
 .sidebar-content .top-level > li summary:hover {
-    background-color: var(--gray-neutral-100) !important;
+    background-color: var(--sl-color-gray-5) !important;
     border-radius: 4px;
 }
 
 /* Third level navigation text styles */
 .sidebar-content .top-level li details ul li details ul li a span {
   font-size: 14px !important;
-  color: var(--gray-neutral-500) !important;
+  color: var(--sl-color-gray-3) !important;
   font-weight: normal !important;
 }
 
@@ -174,15 +174,15 @@
     font-size: 16px !important;
     font-weight:500;
     line-height: 1.0;
-    color: var(--gray-neutral-400);
+    color: var(--sl-color-gray-3);
     letter-spacing: -0.15%;
     line-height: 1.4;
 }
 
 select.astro-oojz3yon {
     border-radius: 6px;
     border: 1px solid #999CAD;
-    color: var(--gray-neutral-400);
+    color: var(--sl-color-gray-3);
     font-family: 'Aeonikpro', sans-serif;
     font-size: 18px;
 }
@@ -234,12 +234,12 @@ a[rel="prev"], a[rel="next"] {
 }
 
 a[rel="prev"] span, a[rel="next"] span {
-    color: #707385;
+    color: var(--sl-color-gray-4);
     font-size: 12px;
 }
 
 a[rel="prev"] span span, a[rel="next"] span span {
-    color: #4B4E5C;
+    color: var(--sl-color-gray-2);
     font-family: "Aeonikpro";
     font-size: 16px;
     font-weight: 400;
@@ -256,7 +256,7 @@ footer .pagination-links {
 }
 
 h2#starlight__on-this-page {
-    color: #707385;
+    color: var(--sl-color-gray-4);
     font-family: "Aeonikpro";
     font-size: 16px;
     font-style: normal;

src/styles/global.css

@@ -35,7 +35,7 @@
 	--sl-color-gray-1: #24272f;
 	--sl-color-gray-2: #4B4E5C;
 	--sl-color-gray-3: #545861;
-	--sl-color-gray-4: #888b96;
+	--sl-color-gray-4: #707385;
 	--sl-color-gray-5: #c0c2c7;
 	--sl-color-gray-6: #eceef2;
 	--sl-color-gray-7: #f5f6f8;
@@ -67,6 +67,13 @@ h3 {
   padding-right: 7rem;
 }
 
+@media (max-width: 1024px) {
+  .main-pane {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
 /* Product Cards Styles */
 .product-card {
   color: #ffffff !important;