Replace hardcoded style tag in index.html with new style.css (#42)

* Setup styling.css and add stylelint as a dependency * Remove unnecessary rect node styling * Refactor styling of circle nodes from visualize.js into style.css Co-authored-by: Edward <[email protected]>
0xedward · Jun 21, 2021 · 1493344 · 1493344
1 parent e936ac8
commit 1493344
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 52 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}
diff --git a/index.html b/index.html
@@ -4,54 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>DOM Visualizer</title>
-  <style>
-    body {
-      font: 13px/13px Arial;
-      background-color: #f1f1f1;
-      margin: 20px;
-    }
-
-    rect {
-      fill: #ddd;
-    }
-
-    .remove-icon {
-      fill: #eee;
-    }
-
-    .remove-icon-group {
-      cursor: pointer;
-    }
-
-    .remove-icon-group:hover .remove-icon {
-      fill: #fff;
-    }
-
-    .line {
-      position: relative;
-      z-index: 0;
-    }
-
-    .node {
-      cursor: pointer;
-    }
-
-    .node circle {
-      fill: #fff;
-      stroke: steelblue;
-      stroke-width: 3px;
-    }
-
-    .node text {
-      font: 12px sans-serif;
-    }
-
-    .link {
-      fill: none;
-      stroke: #ccc;
-      stroke-width: 2px;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -81,4 +34,4 @@
 
 </body>
 
-</html>
+</html>
diff --git a/js/visualize.js b/js/visualize.js
@@ -36,7 +36,7 @@ function createAndAppendDOMTree(root) {
       })
       .on('collapseNodes', collapseNodes);
 
-  nodeEnter.append('circle').attr('r', 10).style('fill', '#fff');
+  nodeEnter.append('circle').attr('r', 10);
 
   nodeEnter
       .append('text')

diff --git a/package.json b/package.json
@@ -13,14 +13,18 @@
     "url": "git+https://github.com/0xedward/EQKL.git"
   },
   "author": "0xedward",
-  "contributors": ["kelvinlin97"],
+  "contributors": [
+    "kelvinlin97"
+  ],
   "bugs": {
     "url": "https://github.com/0xedward/EQKL/issues"
   },
   "homepage": "https://github.com/0xedward/EQKL#readme",
   "devDependencies": {
     "eslint": "^7.17.0",
     "eslint-config-google": "^0.14.0",
-    "live-server": "1.2.1"
+    "live-server": "1.2.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0"
   }
 }
diff --git a/style.css b/style.css
@@ -0,0 +1,54 @@
+html {
+  font-family: monospace;
+  text-shadow: 0 0.04em, 0.04em rgba(0, 0, 0, 0, 0.35);
+}
+
+body {
+  font-size: 18px;
+  background-color: #efefef;
+  overflow: hidden;
+}
+
+.graph-svg-component {
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: #f4f5f5;
+}
+
+#html-input-box {
+  background-color: #002b36;
+  color: white;
+}
+
+.node {
+  cursor: pointer;
+}
+
+.node circle {
+  stroke: steelblue;
+  fill: #FFFFFF;
+}
+
+.link {
+  fill: none;
+  stroke: black;
+  stroke-width: 1.5px;
+}
+
+#visualize-btn {
+  background-color: #91c4f2;
+  box-sizing: border-box;
+  color: white;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 300;
+  padding: 5px 10px;
+  text-decoration: none;
+  text-shadow: inherit;
+  text-align: center;
+}
+
+#visualize-btn:hover {
+  text-shadow: 0 0 2em rgba(255, 255, 255, 1);
+  color: #fff;
+}