Merge pull request #223 from online-go/postcss

Switch from stylus to css

Author: anoek

Makefile

@@ -6,7 +6,7 @@ all dev:
 	yarn run dev
 
 build: build-debug build-production
-	cp src/Goban.styl build/Goban.styl
+	cp src/Goban.css build/Goban.css
 
 build-debug:
 	yarn run build-debug

package.json

@@ -84,7 +84,6 @@
         "react-dom": "19.2.0",
         "react-router": "^7.9.4",
         "react-router-dom": "7.9.4",
-        "stylus": "0.64.0",
         "svg-inline-loader": "0.8.2",
         "thread-loader": "^3.0.4",
         "ts-jest": "^29.4.5",

src/Goban.styl src/Goban.csssrc/Goban.styl renamed to src/Goban.css

@@ -18,7 +18,7 @@
     position: relative;
     background-color: #DCB35C;
     display: inline-block;
-    themed box-shadow goban-shadow
+    box-shadow: var(--goban-shadow);
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -27,7 +27,6 @@
     -ms-user-select: none;
     user-select: none;
 
-
     .GobanMessage {
         position: absolute;
         top: 0;
@@ -38,26 +37,26 @@
         height: 100%;
         font-size: large;
         text-align: center;
-        z-index: z.goban.message;
+        z-index: var(--z-goban-message);
     }
 
     .PenLayer {
         position: absolute;
         left: 0;
         right: 0;
-        z-index: z.goban.pen-layer;
+        z-index: var(--z-goban-pen-layer);
     }
 
     .StoneLayer {
         position: absolute;
         left: 0;
         right: 0;
-        z-index: z.goban.stone-layer;
+        z-index: var(--z-goban-stone-layer);
     }
 
     .ShadowLayer {
         position: absolute;
-        z-index: z.goban.shadow-layer;
+        z-index: var(--z-goban-shadow-layer);
         left: 0;
         right: 0;
     }
@@ -86,9 +85,8 @@
         display: none;
     }
 
-
     &.borderless {
-        themed box-shadow goban-shadow-borderless
+        box-shadow: var(--goban-shadow-borderless);
         width: 100%;
         text-align: center;
         margin: 0;
@@ -97,7 +95,8 @@
 
     &.small {
         font-size: small;
-        box-shadow:0px 2px 5px rgba(0, 0, 0, 0.26);
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
+
         canvas {
             box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
         }
@@ -113,5 +112,3 @@
         }
     }
 }
-
-