style: Add .editorconfig to ease editing & indentation in html

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{html.twig,html}]
+indent_size = 2

templates/kanji/grid.html.twig

@@ -41,10 +41,17 @@
   .sln     { border-bottom: 3px solid var(--bs-warning) !important; }
   .ebook   { border-top:  3px solid deeppink      !important; }
   .jimaku  { border-top:  3px solid lightgray     !important; }
+
+  .none  { opacity: 0.25; }
 </style>
 
 <div class="example-wrapper">
+  <div>
     <h1 class="text-center p-2 mb-2">{{ block('title') }}</h1>
+    <div>
+      <input>
+    </div>
+  </div>
   <div
     class="d-flex flex-wrap m-2"
 
@@ -54,7 +61,13 @@
   {% for char in characters %}
     <div style="width: calc(100% / 16);">
     <div
-            class="border text-center rounded {{ char.lists|keys|join(' ') }}"
+      class="
+        border text-center rounded
+        {{ char.lists|length == 0
+          ? 'none'
+          :  char.lists|keys|join(' ')
+        }}
+        "
       style="
         margin: 2px;
         overflow: hidden;