Smaller tag logo on small displays. Centering tag tile lazy image to prevent load jumps. Including SASS breakpoint variable file automatically.

assets/components/album/logo.vue

@@ -56,4 +56,11 @@ module.exports = {
 	transition: transform .25s ease, opacity .25s ease;
 	filter: drop-shadow(0 0 2px var(--shadow-weak));
 }
+
+@media(max-width: $breakpoint-small) {
+	.album-logo {
+		max-height: .5rem;
+		max-width: 3.5rem;
+	}
+}
 </style>

assets/components/releases/release.vue

@@ -69,7 +69,7 @@
 			/>
 
 			<div
-				v-if="release.directors"
+				v-if="release.directors && release.directors.length > 0"
 				class="row"
 			>
 				<span class="row-label">Director</span>

assets/components/tags/tile.vue

@@ -93,8 +93,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
-
 .tile {
     box-sizing: border-box;
     position: relative;
@@ -118,6 +116,7 @@ export default {
 	height: 13.5rem;
 	object-fit: cover;
 	background-size: cover;
+	background-position: center;
     box-shadow: 0 0 3px var(--darken-weak);
 }
 

package-lock.json

@@ -10,7 +10,6 @@
             "dependencies": {
                 "@graphile-contrib/pg-order-by-related": "^1.0.0-beta.6",
                 "@graphile-contrib/pg-simplify-inflector": "^5.0.0-beta.1",
-                "@thependulum/bhttp": "^1.2.6",
                 "acorn": "^8.0.4",
                 "array-equal": "^1.0.0",
                 "aws-sdk": "^2.847.0",
@@ -1386,57 +1385,6 @@
                 "upath": "^1.1.1"
             }
         },
-        "node_modules/@thependulum/bhttp": {
-            "version": "1.2.6",
-            "resolved": "https://registry.npmjs.org/@thependulum/bhttp/-/bhttp-1.2.6.tgz",
-            "integrity": "sha512-jqYVj99upU9vfMq4cjMEi87lbmf381e2A8dM91IPgU7TVF9ryN0rYHDK/IcIWbPBJwa8q9l0GzazN2xC2R9TgA==",
-            "dependencies": {
-                "bluebird": "^2.8.2",
-                "concat-stream": "^1.4.7",
-                "debug": "^2.1.1",
-                "dev-null": "^0.1.1",
-                "errors": "^0.2.0",
-                "extend": "^2.0.0",
-                "form-data2": "^1.0.0",
-                "form-fix-array": "^1.0.0",
-                "lodash.clonedeep": "^4.5.0",
-                "lodash.merge": "^4.6.2",
-                "stream-length": "^1.0.2",
-                "through2-sink": "^1.0.0",
-                "through2-spy": "^1.2.0",
-                "tough-cookie": "^2.3.1"
-            }
-        },
-        "node_modules/@thependulum/bhttp/node_modules/bluebird": {
-            "version": "2.11.0",
-            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
-            "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE="
-        },
-        "node_modules/@thependulum/bhttp/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/@thependulum/bhttp/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "node_modules/@thependulum/bhttp/node_modules/tough-cookie": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-            "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-            "dependencies": {
-                "psl": "^1.1.28",
-                "punycode": "^2.1.1"
-            },
-            "engines": {
-                "node": ">=0.8"
-            }
-        },
         "node_modules/@tokenizer/token": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",
@@ -16750,56 +16698,6 @@
                 "upath": "^1.1.1"
             }
         },
-        "@thependulum/bhttp": {
-            "version": "1.2.6",
-            "resolved": "https://registry.npmjs.org/@thependulum/bhttp/-/bhttp-1.2.6.tgz",
-            "integrity": "sha512-jqYVj99upU9vfMq4cjMEi87lbmf381e2A8dM91IPgU7TVF9ryN0rYHDK/IcIWbPBJwa8q9l0GzazN2xC2R9TgA==",
-            "requires": {
-                "bluebird": "^2.8.2",
-                "concat-stream": "^1.4.7",
-                "debug": "^2.1.1",
-                "dev-null": "^0.1.1",
-                "errors": "^0.2.0",
-                "extend": "^2.0.0",
-                "form-data2": "^1.0.0",
-                "form-fix-array": "^1.0.0",
-                "lodash.clonedeep": "^4.5.0",
-                "lodash.merge": "^4.6.2",
-                "stream-length": "^1.0.2",
-                "through2-sink": "^1.0.0",
-                "through2-spy": "^1.2.0",
-                "tough-cookie": "^2.3.1"
-            },
-            "dependencies": {
-                "bluebird": {
-                    "version": "2.11.0",
-                    "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
-                    "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE="
-                },
-                "debug": {
-                    "version": "2.6.9",
-                    "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-                    "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-                    "requires": {
-                        "ms": "2.0.0"
-                    }
-                },
-                "ms": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-                },
-                "tough-cookie": {
-                    "version": "2.5.0",
-                    "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-                    "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-                    "requires": {
-                        "psl": "^1.1.28",
-                        "punycode": "^2.1.1"
-                    }
-                }
-            }
-        },
         "@tokenizer/token": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",

package.json

@@ -71,7 +71,6 @@
     "dependencies": {
         "@graphile-contrib/pg-order-by-related": "^1.0.0-beta.6",
         "@graphile-contrib/pg-simplify-inflector": "^5.0.0-beta.1",
-        "@thependulum/bhttp": "^1.2.6",
         "acorn": "^8.0.4",
         "array-equal": "^1.0.0",
         "aws-sdk": "^2.847.0",

src/utils/http.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const config = require('config');
-const bhttp = require('@thependulum/bhttp');
+const bhttp = require('bhttp');
 const util = require('util');
 const stream = require('stream');
 const tunnel = require('tunnel');

webpack.config.js

@@ -60,6 +60,7 @@ module.exports = {
 						loader: 'sass-loader',
 						options: {
 							sourceMap: true,
+							additionalData: '@import "assets/css/_breakpoints.scss";',
 						},
 					},
 				],