Improve dependency injection

1 files changed, 7 insertions, 5 deletions

diff --git a/_css/style.css b/_css/style.css
index af502d7..fa15219 100644
--- a/_css/style.css
+++ b/_css/style.css
@@ -20,6 +20,7 @@
     --block-bg: var(--black);
     --fade-fg: var(--bright-black);
     --link-fg: var(--green);
+    --overlay-bg: #8881;
     --text-bg: #121212;
     --text-fg: var(--bright-white);
 }
@@ -42,7 +43,7 @@ html {
     font-size: min(max(100%, 2vw), 150%);
     margin: auto;
     max-width: 36rem;
-    scrollbar-color: var(--fade-fg) var(--block-bg);
+    scrollbar-color: var(--fade-fg) var(--overlay-bg);
 }
 
 body { margin: 0 1rem }
@@ -50,7 +51,7 @@ body { margin: 0 1rem }
 .franklin-content .row { display: block }
 
 /* Text geometry */
-.franklin-content p {
+p, details {
     hyphens: auto;
     line-height: 1.4rem;
     text-align: justify;
@@ -129,7 +130,7 @@ body { margin: 0 1rem }
 .note p:first-child { font-weight: bold }
 
 .franklin-content blockquote {
-    background: var(--block-bg);
+    background: var(--overlay-bg);
     border-left: 0.25rem solid var(--fade-fg);
 }
 
@@ -228,13 +229,14 @@ code, .hljs {
 .hljs-addition { color: var(--red) }
 
 .comment {
-    background-color: #8881;
+    background-color: var(--overlay-bg);
     clear: both;
     margin: 1ex 0;
     overflow: hidden;
     padding: 1ex;
 }
 .comment p { margin: 1ex }
+.comment blockquote, .comment .note { margin: -1ex -1ex 0 }
 
 .openring {
     display: flex;
@@ -244,7 +246,7 @@ code, .hljs {
 }
 .openring h3 { margin: 0 0 1ex }
 .openring article {
-    background: var(--block-bg);
+    background: var(--overlay-bg);
     display: flex;
     flex-direction: column;
     flex: 1 1 0;