ref: extract some inline styles

Author: panstromek

webzebra/index.html

@@ -31,7 +31,6 @@
              preserveAspectRatio="xMidYMid meet"
              id="board"
              viewBox="0 0 800 800"
-             style="background-color: #3a7f46; border: 1vw brown solid;"
              >
             <g id="evals"></g>
             <g id="circles"></g>
@@ -56,9 +55,9 @@
     <div class="max-w-sm text-left p-1.5 w-full mt-3">
         <div class="flex justify-between items-center">
             <div class="flex items-center text-black text-2xl">
-                <div style="width: 1em; height: 1em; border-radius: 0.5em; background: black"></div>
+                <div class="circle-black"></div>
                 <div class="px-2" id="score-black">0</div>
-                <div style="width: 1em; height: 1em; border-radius: 0.5em; background: white"></div>
+                <div class="circle-white"></div>
                 <div class="px-2 text-white" id="score-white">0</div>
             </div>
 

webzebra/src/index.css

@@ -17,3 +17,22 @@ svg text {
 svg text::selection {
     background: none;
 }
+
+#board {
+    background-color: #3a7f46;
+    border: 1vw brown solid;
+}
+
+.circle-black, .circle-white {
+    width: 1em;
+    height: 1em;
+    border-radius: 0.5em;
+}
+
+.circle-black {
+    background: black
+}
+
+.circle-white {
+    background: white
+}