add broken css calc stuff

Author: loxy

angular.json

@@ -119,6 +119,10 @@
           }
         }
       }
-    }},
-  "defaultProject": "calc-bug"
-}
+    }
+  },
+  "defaultProject": "calc-bug",
+  "cli": {
+    "analytics": false
+  }
+}

package-lock.json

@@ -5,9 +5,11 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "serve:prod": "http-server ./dist/calc-bug -p 8199 -o"
   },
   "private": true,
   "dependencies": {
@@ -27,10 +29,11 @@
     "@angular-devkit/build-angular": "~0.901.7",
     "@angular/cli": "~9.1.7",
     "@angular/compiler-cli": "~9.1.9",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
+    "http-server": "^0.12.3",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~5.0.0",

package.json

@@ -342,6 +342,8 @@
   <h2>Resources</h2>
   <p>Here are some links to help you get started:</p>
 
+  <div class="box"></div>
+
   <div class="card-container">
     <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>

src/app/app.component.html

@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+:root {
+    --width-a: 10em;
+}
+
+.box {
+    background-color: #ccc;
+    width: calc(var(--width-a)/2 + var(--width-a)/2);
+    height: calc(var(--width-a)/2 + var(--width-a)/2);
+}