From 5563f1d19a2a2c593d380a1c6cb5023fce7c5c9e Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Mon, 4 Mar 2024 20:55:54 +0100
Subject: [PATCH] fix dark mode and layout of devices page

---
 assets/scss/dark.scss     |  3 +++
 assets/scss/features.scss | 12 +++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/assets/scss/dark.scss b/assets/scss/dark.scss
index f94f30a4..f364feab 100644
--- a/assets/scss/dark.scss
+++ b/assets/scss/dark.scss
@@ -37,4 +37,7 @@
     background: adjust-color(green, $alpha: -0.8);
   }
 
+  .device-type-cell img {
+    filter: #{"invert()"};
+  }
 }
diff --git a/assets/scss/features.scss b/assets/scss/features.scss
index 0a97241e..46561b74 100644
--- a/assets/scss/features.scss
+++ b/assets/scss/features.scss
@@ -346,7 +346,7 @@
 // Special device variants page
 
 .device-types-row {
-    background: #F8F8F8;
+    background: var(--background-1);
     padding: 0;
 }
 
@@ -378,7 +378,7 @@
     }
 
     &.light {
-        background: #FFF;
+      background: var(--background);
     }
 
     img {
@@ -399,6 +399,7 @@
     &.construction {
         .label {
             background: #ffd600;
+            color: black;
         }
         img {
             opacity: 0.3;
@@ -414,13 +415,18 @@
 
     ul {
         text-align: left;
-        // align-self: center;
+        padding-inline: 2rem;
     }
 
     .button {
       margin-top: auto;
       align-self: center;
     }
+
+    @media ($media-mobile) {
+      margin-inline: -1rem;
+      padding-inline: 1rem;
+    }
 }
 
 // Resistors