chore: adjust colors and grid layout

5 files changed, 25 insertions, 13 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 416b3c0..4e8e33a 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -151,17 +151,18 @@ $light-theme_black: hsl(207, 47%, 11%);
 $light-theme_blue: hsl(206, 75%, 31%);
 $light-theme_blue-o30: hsla(206, 75%, 31%, 0.3);
 $light-theme_blue-bright: hsl(206, 77%, 36%);
-$light-theme_blue-brighter: hsl(206, 77%, 48%);
+$light-theme_blue-brighter: hsl(206, 80%, 47%);
 $light-theme_blue-dark: hsl(206, 76%, 28%);
 $light-theme_blue-darker: hsl(206, 60%, 20%);
 $light-theme_grey: hsl(206, 15%, 80%);
 $light-theme_grey-bright: hsl(206, 20%, 86%);
-$light-theme_grey-brighter: hsl(206, 20%, 92%);
-$light-theme_grey-dark: hsla(206, 10%, 25%);
+$light-theme_grey-brighter: hsl(206, 15%, 90%);
+$light-theme_grey-dark: hsla(206, 30%, 30%);
 $light-theme_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
 $light-theme_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
 $light-theme_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
 $light-theme_white: hsl(206, 15%, 97%);
+$light-theme_white-dark: hsl(206, 20%, 93%);
 $light-theme_white-o90: hsl(206, 15%, 97%, 0.9);
 $light-theme_orange: hsl(28, 91%, 22%);
 $light-theme_red: hsl(1, 72%, 29%);
@@ -174,7 +175,7 @@ $light-theme_cyan: hsl(187, 84%, 17%);
 $dark-theme_black: hsl(208, 25%, 11%);
 $dark-theme_black-o90: hsla(208, 25%, 11%, 0.9);
 $dark-theme_black-bright: hsl(208, 21%, 15%);
-$dark-theme_black-brighter: hsl(208, 18%, 20%);
+$dark-theme_black-brighter: hsl(208, 25%, 17%);
 $dark-theme_blue: hsl(200, 50%, 68%);
 $dark-theme_blue-o30: hsla(200, 60%, 70%, 0.3);
 $dark-theme_blue-bright: hsl(200, 55%, 70%);
@@ -186,6 +187,7 @@ $dark-theme_grey-dark: hsl(208, 20%, 25%);
 $dark-theme_grey-dark-o70: hsla(208, 20%, 25%, 0.7);
 $dark-theme_grey-dark-o40: hsla(208, 20%, 25%, 0.4);
 $dark-theme_grey-dark-o20: hsla(208, 20%, 25%, 0.2);
+$dark-theme_grey-darker: hsl(208, 18%, 20%);
 $dark-theme_white: hsl(208, 25%, 92%);
 $dark-theme_orange: hsl(35, 55%, 66%);
 $dark-theme_red: hsl(2, 70%, 76%);
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index e6e2612..1f90968 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -3,8 +3,9 @@
 :root {
   --color-bg: #{var.$light-theme_white};
   --color-bg-opacity: #{var.$light-theme_white-o90};
-  --color-bg-secondary: #{var.$light-theme_grey-brighter};
+  --color-bg-secondary: #{var.$light-theme_white-dark};
   --color-bg-tertiary: #{var.$light-theme_grey-bright};
+  --color-bg-code: #{var.$light-theme_grey-brighter};
   --color-fg: #{var.$light-theme_black};
   --color-fg-light: #{var.$light-theme_grey-dark};
   --color-fg-inverted: #{var.$light-theme_white};
@@ -36,7 +37,8 @@
   --color-bg-opacity: #{var.$dark-theme_black-o90};
   --color-bg-light: #{var.$dark-theme_grey};
   --color-bg-secondary: #{var.$dark-theme_black-bright};
-  --color-bg-tertiary: #{var.$dark-theme_black-brighter};
+  --color-bg-tertiary: #{var.$dark-theme_grey-darker};
+  --color-bg-code: #{var.$dark-theme_black-brighter};
   --color-fg: #{var.$dark-theme_white};
   --color-fg-light: #{var.$dark-theme_grey};
   --color-fg-inverted: #{var.$dark-theme_black};
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index a6d8e50..272d2c7 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -99,7 +99,7 @@ ol {
   }
 
   ::marker {
-    color: var(--color-secondary);
+    color: var(--color-primary-dark);
   }
 }
 
@@ -206,15 +206,23 @@ var {
   font-family: var(--font-family-mono);
 }
 
-:not(pre) > code {
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border-light);
+:not(pre) > code,
+kbd,
+var {
+  background: var(--color-bg-code);
+  border: fun.convert-px(1) solid var(--color-border);
   border-radius: fun.convert-px(3);
   color: var(--color-primary-darker);
+  font-style: normal;
   padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1)
     fun.convert-px(5);
 }
 
+kbd {
+  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 fun.convert-px(1)
+    var(--color-shadow);
+}
+
 pre {
   display: block;
   max-width: 100%;
diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss
index 9efea72..7948c5f 100644
--- a/src/styles/layout/_grid.scss
+++ b/src/styles/layout/_grid.scss
@@ -12,7 +12,7 @@
 
   @include mix.media("screen") {
     @include mix.dimensions("md") {
-      --grid-gap: var(--spacing-lg);
+      --grid-gap: var(--spacing-xl);
       grid-template-columns:
         minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
         var(--column-3, minmax(0, 3fr));
@@ -20,7 +20,7 @@
 
     @include mix.dimensions("lg") {
       grid-template-columns:
-        minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+        minmax(0, 1fr) clamp(47ch, 47vw, 80ch)
         var(--column-3, minmax(0, 1fr));
     }
   }
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
index e636eae..8328114 100644
--- a/src/styles/vendors/_prism.scss
+++ b/src/styles/vendors/_prism.scss
@@ -36,7 +36,7 @@
     order: 1;
     margin-right: auto;
     padding: 0 var(--spacing-xs);
-    background: var(--color-bg-secondary);
+    background: var(--color-bg-code);
     border-right: fun.convert-px(1) solid var(--color-border);
     color: var(--color-primary-darker);
     font-size: var(--font-size-sm);