Move templatized CSS to inline styles to allow djlint to format

front-seat · Mar 29, 2024 · 138525a · 138525a
1 parent bd2a08d
commit 138525a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -45,7 +45,7 @@ blank_line_before_tag = "block"
 blank_line_after_tag = "endblock"
 use_gitignore = true
 profile = "django"
-# format_css = true
+format_css = true
 
 [tool.djlint.css]
 indent_size = 2

diff --git a/server/vb/templates/components/logo_specimen.dhtml b/server/vb/templates/components/logo_specimen.dhtml
@@ -3,16 +3,13 @@
     <style>
       me {
         display: flex;
-        gap: 0.5rem;        
+        gap: 0.5rem;
       }
 
       me .bubble {
         display: flex;
         align-items: center;
         overflow: hidden;
-        width: {{ width }};
-        height: {{ height }};
-        background-color: {{ logo.bg_color }};
       }
 
       me .bubble img {
@@ -29,8 +26,6 @@
         justify-content: center;
         padding-left: 0.5rem;
         padding-right: 0.5rem;
-        background-color: {{ logo.bg_color }};
-        color: {{ logo.bg_text_color }};
       }
 
       me .action {
@@ -40,14 +35,25 @@
         justify-content: center;
         padding-left: 0.5rem;
         padding-right: 0.5rem;
-        background-color: {{ logo.action_color }};
-        color: {{ logo.action_text_color }};
+        transition: opacity 0.2s;
+      }
+
+      me .action:hover {
+        opacity: 0.7;
+        transition: opacity 0.2s ease-in-out;
       }
     </style>
-    <div class="bubble">
+    <div class="bubble"
+         style="width: {{ width }};
+                height: {{ height }};
+                background-color: {{ logo.bg_color }}">
       <img src="{{ logo.url }}" alt="TODO alt" />
     </div>
-    <div class="bg">background text</div>
-    <div class="action">action text</div>
+    <div class="bg"
+         style="background-color: {{ logo.bg_color }};
+                color: {{ logo.bg_text_color }}">text</div>
+    <div class="action"
+         style="background-color: {{ logo.action_color }};
+                color: {{ logo.action_text_color }}">action</div>
   </div>
 {% endwith %}