Make images on dark mode darker

1 files changed, 14 insertions, 5 deletions

diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index d365591..f41580a 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -3,8 +3,8 @@ html {
     --c-bg-backdrop:        #0d1015;
     --c-bg-behind:          #1f232a;
     --c-bg-front:           #272c35;
-    --c-bg-highlight        #383f4c;
-    --c-bg-figure-backdrop: #b5bcc8;
+    --c-bg-highlight:       #383f4c;
+    --c-bg-figure-backdrop: #383f4c;
     --c-text:               #d0d0d0;
     --c-text-inverted:      #101010;
     --c-text-muted:         #a0a0a0;
@@ -333,8 +333,7 @@ figure.side-by-side {
 
 figure img, figure video {
     display: block;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto 0 auto;
     width: 100%;
 }
 
@@ -356,6 +355,12 @@ img {
     max-width: 100%;
     margin: 40px auto 40px auto;
     display: block;
+    filter: brightness(70%);
+    transition: filter 100ms;
+}
+
+img:hover {
+    filter: none;
 }
 
 .code {
@@ -492,7 +497,7 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
         --c-bg-backdrop:        hsl(220, 10%, 90%);
         --c-bg-behind:          hsl(220, 10%, 95%);
         --c-bg-front:           hsl(220, 10%, 96%);
-        --c-bg-highlight        #ffffff;
+        --c-bg-highlight:       #ffffff;
         --c-bg-figure-backdrop: #b5bcc8;
         --c-text:               hsl(220, 20%, 30%);
         --c-text-inverted:      hsl(220, 20%, 100%);
@@ -516,6 +521,10 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
     a:hover, nav a:hover {
         color: var(--c-text-inverted);
     }
+
+    img {
+        filter: none;
+    }
     
     .card {
         box-shadow: 0 0 3px 1px rgba(0, 0, 0, calc(0.5*var(--shadow-opacity)));