Work on closed notice.

package.json

@@ -7,9 +7,15 @@
   "author": "Bert Peters <bert@bertptrs.nl>",
   "license": "GPLv3",
   "private": true,
-  "dependencies": {
+  "dependencies": {},
-  },
   "devDependencies": {
+    "autoprefixer": "^9.4.9",
+    "css-loader": "^2.1.0",
+    "node-sass": "^4.11.0",
+    "postcss": "^7.0.14",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3"
   }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')
+    ]
+};

public/foobar.css

@@ -61,27 +61,12 @@ transform: rotate(360deg);
 	}
 }
 
-@keyframes fadeOut {
-	0% {
-		opacity: 1;
-	}
-
-	100% {
-		opacity: 0;
-	}
-}
-
 body.open {
 height:100%;
 		  background-color: #a3d165;
 		  text-align: center;
 }
 
-body.closed {
-background: #f66;
-			text-align: center;
-}
-
 * {
 	font-family: verdana, sans-serif;
 }
@@ -107,13 +92,3 @@ animation:starrotation 10s;
 	   -o-animation-iteration-count: infinite;
 	   -o-animation-timing-function: linear;
 }
-
-.closed_notice {
-	position: absolute;
-	font-weight: bold;
-	font-size: 16pt;
-	text-transform: uppercase;
-	animation: fadeOut 3s forwards;
-	animation-timing-function: linear;
-	animation-iteration-count: 1;
-}

public/stop.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.0"
+        width="600"
+        height="600"
+        viewBox="0 0 1 1">
+    <polyline
+            id="polyline14"
+            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;letter-spacing:normal;word-spacing:normal;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#1e1916;stroke-width:0.20292;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10.43299961;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+            points="127.92,598.25 127.92,451.12 232.08,347.21 379.2,347.21 483.12,451.12 483.12,598.25 379.2,702.41 232.08,702.41 127.92,598.25 128.16,598.25 "
+            transform="matrix(2.579232e-3,0,0,-2.579232e-3,-0.288007,1.853607)"/>
+    <path
+            d="M 0.26663052,0.56192744 L 0.26655315,0.55787804 L 0.26632102,0.55390603 L 0.26595993,0.5499856 L 0.26541829,0.54614254 L 0.26474769,0.54232528 L 0.26392234,0.53858538 L 0.26291643,0.5348713 L 0.26178158,0.53120879 L 0.26046616,0.52759787 L 0.25899601,0.52403852 L 0.25737108,0.52050497 L 0.25559142,0.51702302 L 0.25365699,0.51356685 L 0.25154202,0.51016225 L 0.2492723,0.50675767 L 0.24682203,0.50343046 L 0.244217,0.50010325 L 0.24143144,0.49680184 L 0.23849111,0.49352622 L 0.23537024,0.49027638 L 0.23209462,0.48705235 L 0.22863844,0.48385409 L 0.22500173,0.48065585 L 0.22118446,0.4774834 L 0.21721245,0.47431093 L 0.2130341,0.47116427 L 0.20870099,0.46801761 L 0.20418732,0.46487095 L 0.19949312,0.46175008 L 0.19459258,0.45860341 L 0.18953728,0.45548254 L 0.18430145,0.45236167 C 0.16201689,0.43936235 0.15582673,0.43067033 0.15582673,0.41643298 C 0.15582673,0.39662447 0.17130213,0.38176811 0.19111063,0.38176811 C 0.21030011,0.38176811 0.22453746,0.39538644 0.2257755,0.41643298 L 0.26663052,0.41643298 C 0.2653925,0.37062581 0.23320369,0.338437 0.19111063,0.338437 C 0.14839854,0.338437 0.11497169,0.37310188 0.11497169,0.41643298 C 0.11497169,0.44305065 0.12797103,0.46595423 0.15149362,0.48266765 C 0.21215715,0.52352268 0.19544373,0.5123804 0.20163388,0.51859635 C 0.21958534,0.53221469 0.2257755,0.54518822 0.2257755,0.56192744 C 0.2257755,0.58666227 0.20720503,0.60894683 0.18430145,0.60894683 C 0.1545887,0.60894683 0.14220839,0.58109113 0.14220839,0.55509248 L 0.11497169,0.55509248 C 0.11497169,0.60647078 0.14406543,0.65227792 0.19111063,0.65227792 C 0.23320369,0.65227792 0.26663052,0.61204191 0.26663052,0.56192744 z "
+            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;letter-spacing:normal;word-spacing:normal;text-anchor:start;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10.43299961;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+            id="path2518"/>
+    <polygon
+            points="136.8,594.65 235.68,693.53 375.36,693.53 474.24,594.65 474.24,454.96 375.36,356.09 235.68,356.09 136.8,454.96 136.8,594.65 "
+            transform="matrix(2.579232e-3,0,0,-2.579232e-3,-0.288007,1.853607)"
+            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;letter-spacing:normal;word-spacing:normal;text-anchor:start;fill:#d8261c;fill-opacity:1;stroke:#d8261c;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10.43299961;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+            id="polygon16"/>
+    <text x="0.5" y="0.6" fill="#fff" style="font-size: 0.2pt; font-weight: bold" text-anchor="middle">STOP</text>
+    <text x="0.5" y="0.7" fill="#fff" style="font-size: 0.07pt; font-weight: bold" text-anchor="middle">De bar is nog</text>
+    <text x="0.5" y="0.8" fill="#fff" style="font-size: 0.07pt; font-weight: bold" text-anchor="middle">niet open</text>
+</svg>

src/closed.js

@@ -3,6 +3,7 @@
  *
  * In it, we fill the screen evenly with "closed" messages. The locations are
  */
+require('./closed.scss');
 /**
  * Contains the state for this demo.
  *

src/closed.scss

@@ -0,0 +1,34 @@
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+body.closed {
+  background: #f66;
+  text-align: center;
+
+  .closed_notice {
+    position: absolute;
+    font-weight: bold;
+    font-size: 16pt;
+    text-transform: uppercase;
+    animation: fadeOut 3s forwards;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+  }
+
+  #stop-overlay {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+  }
+}

templates/closed.html

@@ -8,5 +8,8 @@
     <script src="bundle.js"></script>
 </head>
 <body class="closed">
+<div id="stop-overlay">
+    <div id="octagon"></div>
+</div>
 </body>
 </html>

webpack.config.js

@@ -5,5 +5,16 @@ module.exports = {
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'public')
+    },
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use: [
+                "style-loader", // creates style nodes from JS strings
+                "css-loader", // translates CSS into CommonJS
+                "postcss-loader", // Will  run auto-prefixer for compatibility
+                "sass-loader" // compiles Sass to CSS, using Node Sass by default
+            ]
+        }]
     }
 };