Dark: For content pages using transparent images...

...which are unreadable in dark mode, use `has-dark-mode-background`
class.

    ![](/img.png){: class="has-dark-mode-background" }

Like this. And it will be given a nice light gray background and a
subtle padding & border.

1 files changed, 10 insertions, 4 deletions

diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index 903b2134..b174e8d7 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -114,10 +114,6 @@ li img {
     margin-top: 0.5em;
 }
 
-[data-theme="dark"] hr {
-    background-color: #4c515a;
-}
-
 .dropdown-menu {
     min-width: 15rem;
 }
@@ -126,3 +122,13 @@ a.dropdown-item {
     white-space: normal;
     padding-right: 0;
 }
+
+[data-theme="dark"] hr {
+    background-color: #4c515a;
+}
+
+[data-theme="dark"] .has-dark-mode-background {
+    background-color: #EDEDED;
+    border-radius: .1rem;
+    padding: .3rem;
+}