Merge pull request #5 from kpn/4-inline-code-within-a-quote-in-dark-t…

…heme-is-not-visible 4 inline code within a quote in dark theme is not visible
kpn · Jul 25, 2023 · d79ccc2 · d79ccc2
2 parents dc05def + 6011c89
commit d79ccc2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/docs/usage.md b/docs/usage.md
@@ -153,6 +153,14 @@ nix
 
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut tortor sed lorem auctor vulputate id hendrerit quam. Integer maximus molestie elit, non elementum libero rutrum ac. Suspendisse a gravida massa, vitae ullamcorper urna. Quisque varius finibus leo, et ornare est bibendum et. Donec feugiat vitae ipsum fringilla volutpat. Duis hendrerit iaculis pellentesque. Nullam sed egestas nisi. Proin aliquet faucibus mi lacinia maximus. Integer urna ligula, malesuada in purus et, cursus tincidunt tortor. Donec et nunc consectetur, gravida nulla eu, viverra lorem. Nullam suscipit nibh sed nisl fringilla, sit amet tristique ante vulputate. Sed ultrices purus vel erat lacinia pellentesque. Phasellus elit mi, auctor eget nisl vehicula, sollicitudin ultrices risus. Etiam venenatis tempus arcu at dignissim.
 
+## Quotes with code block
+
+```md
+> Lorem ipsum dolor `sit` amet, consectetur
+```
+
+> Lorem ipsum dolor `sit` amet, consectetur
+
 ## Titles
 
 # H1

diff --git a/kpn_theme/css/bundle.css b/kpn_theme/css/bundle.css
diff --git a/kpn_theme/css/colors.css b/kpn_theme/css/colors.css
@@ -38,9 +38,14 @@
   --repo-link-invert: 24%;
 
   --dark-mode-label-filter: inherit;
-  --dark-mode-label-filter-hover: brightness(20) sepia(100) hue-rotate(325deg) saturate(6);
+  /* --dark-mode-label-filter-hover: brightness(20) sepia(100) hue-rotate(325deg) saturate(6); */
+  --dark-mode-label-filter-hover: brightness(1.6) sepia(0.1) hue-rotate(290deg);
 
   --logo-filter: inherit;
+  --inline-code-bg: var(--grey-subtle);
+  --inline-code-border: 1px solid var(--grey-light);
+  --blockquote-bg: #fbf8f8;
+  --blockquote-color: var(--grey-dove);
 }
 
 #dark-mode:checked ~ .app-body {
@@ -57,7 +62,12 @@
   --dark-mode-label-filter: brightness(20) sepia(100) hue-rotate(325deg) saturate(6);
   --dark-mode-label-filter-hover: var(--green);
 
-  --logo-filter: brightness(100);
+  --logo-filter: brightness(50);
+  --inline-code-bg: #2a2828;
+  --inline-code-border: 1px solid var(--grey-subtle);
+
+  --blockquote-bg: #444343;
+  --blockquote-color: var(--grey-dove);
 
   color: var(--grey-dove);
 }
diff --git a/kpn_theme/css/theme.css b/kpn_theme/css/theme.css
@@ -42,13 +42,15 @@ h5 code,
 span code,
 table code,
 li code,
+blockquote code,
 p code {
   padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
   /* background-color: rgba(27, 31, 35, 0.05); */
-  background-color: var(--grey-subtle);
   border-radius: 6px;
+  background-color: var(--inline-code-bg);
+  border: var(--inline-code-border);
 }
 
 pre {
@@ -203,10 +205,14 @@ table {
 
   .side-bar .side-bar__sub-menu .side-bar__link {
     line-height: 40px;
+    padding-left: 25px;
   }
 
   .side-bar__sub-menu.side-bar__sub-menu--visible {
-    padding-left: 12px;
+    margin-left: calc(24px + 30px);
+    border-color: var(--grey-silver);
+    border-left-width: 1px;
+    border-left-style: solid;
   }
 
   .top-bar__item__version {
@@ -360,12 +366,12 @@ blockquote {
   margin: 64px auto;
   font-family: Open Sans;
   font-style: italic;
-  color: #555555;
-  padding: 1.2em 30px 15px 25px !important;
+  color: var(--blockquote-color);
+  padding: 1.2em 30px 10px 25px !important;
   border-left: 6px solid lightgray;
   line-height: 1.6;
   position: relative;
-  background: ghostwhite;
+  background: var(--blockquote-bg);
   border-radius: 4px;
 }
 
@@ -385,6 +391,11 @@ blockquote::after {
   content: "";
 }
 
+/* blockquote p code {
+  color: var(--grey-black);
+  background-color: var(--grey-silver);
+} */
+
 .tabbed-set {
   display: flex;
   position: relative;