From 18acd2e26dd91cd9ad33e0792d83092174e8b15a Mon Sep 17 00:00:00 2001 From: David Bolack Date: Wed, 14 Oct 2026 13:29:36 -0500 Subject: [PATCH 1/6] Simple FAQ change for username updates --- faq.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/faq.md b/faq.md index d3b6d24f6..a8e2c6977 100644 --- a/faq.md +++ b/faq.md @@ -131,4 +131,8 @@ Your ad-blocking software is mistakenly assuming your text to be an ad. We recom ### My username appears as _hidden_ when checking my brews in the Vault, why is that? -Your username is most likely your e-mail adress, and our code is picking that up and protecting your identity. This will remain as is, but you can ask for a name change by contacting the moderators on [the subreddit](https://www.reddit.com/r/homebrewery) with your Homebrewery username, and your desired new name. You will also be asked to provide details about some of your unpublished brews, to verify your identity. No information will be leaked or shared. +Your username is most likely your e-mail adress, and our code is picking that up and protecting your identity. + +### I would like to change my username. How do I do that? + +You can change your username on your [NaturalCrit Account](https://www.naturalcrit.com/account) page. From c32ca98e093e47d1e65d3116c1e9519bd39c10d0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 19 Oct 2026 03:26:11 +0000 Subject: [PATCH 2/6] Bump the prod-dependencies group across 1 directory with 7 updates Bumps the prod-dependencies group with 7 updates in the / directory: | Package | From | To | | --- | --- | --- | | [express](https://github.com/expressjs/express) | `5.2.1` | `5.3.0` | | [js-yaml](https://github.com/nodeca/js-yaml) | `5.4.3` | `5.5.0` | | [mongoose](https://github.com/Automattic/mongoose) | `9.11.1` | `9.11.2` | | [node](https://github.com/aredridel/node-bin-gen) | `26.11.1` | `26.12.0` | | [prettier](https://github.com/prettier/prettier) | `3.9.9` | `3.9.10` | | [react](https://github.com/react/react/tree/HEAD/packages/react) | `19.3.0` | `19.3.1` | | [react-dom](https://github.com/react/react/tree/HEAD/packages/react-dom) | `19.3.0` | `19.3.1` | Updates `express` from 5.2.1 to 5.3.0 - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/master/History.md) - [Commits](https://github.com/expressjs/express/compare/v5.2.1...v5.3.0) Updates `js-yaml` from 5.4.3 to 5.5.0 - [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md) - [Commits](https://github.com/nodeca/js-yaml/compare/5.4.3...5.5.0) Updates `mongoose` from 9.11.1 to 9.11.2 - [Release notes](https://github.com/Automattic/mongoose/releases) - [Changelog](https://github.com/Automattic/mongoose/blob/master/CHANGELOG.md) - [Commits](https://github.com/Automattic/mongoose/compare/9.11.1...9.11.2) Updates `node` from 26.11.1 to 26.12.0 - [Commits](https://github.com/aredridel/node-bin-gen/commits) Updates `prettier` from 3.9.9 to 3.9.10 - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.9.9...3.9.10) Updates `react` from 19.3.0 to 19.3.1 - [Release notes](https://github.com/react/react/releases) - [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md) - [Commits](https://github.com/react/react/commits/v19.3.1/packages/react) Updates `react-dom` from 19.3.0 to 19.3.1 - [Release notes](https://github.com/react/react/releases) - [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md) - [Commits](https://github.com/react/react/commits/v19.3.1/packages/react-dom) --- updated-dependencies: - dependency-name: express dependency-version: 5.3.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-dependencies - dependency-name: js-yaml dependency-version: 5.5.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-dependencies - dependency-name: mongoose dependency-version: 9.11.2 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-dependencies - dependency-name: node dependency-version: 26.12.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-dependencies - dependency-name: prettier dependency-version: 3.9.10 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-dependencies - dependency-name: react dependency-version: 19.3.1 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-dependencies - dependency-name: react-dom dependency-version: 19.3.1 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-dependencies ... Signed-off-by: dependabot[bot] --- package-lock.json | 111 ++++++++++++++++++++++++---------------------- package.json | 14 +++--- 2 files changed, 66 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e4277d3a..dd2c214fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,27 +38,27 @@ "cors": "^2.8.5", "create-react-class": "^15.7.0", "dedent": "^1.7.2", - "express": "^5.1.0", + "express": "^5.3.0", "express-async-handler": "^1.2.0", "express-static-gzip": "3.0.2", "fflate": "^0.8.3", "fs-extra": "^11.4.1", "hash-wasm": "^4.12.0", "idb-keyval": "^6.2.5", - "js-yaml": "^5.4.3", + "js-yaml": "^5.5.0", "jwt-simple": "^0.5.6", "less": "^4.9.1", "lodash": "^4.18.1", "marked-hbfm": "^1.0.1", "markedLegacy": "npm:marked@^0.3.19", "moment": "^2.31.0", - "mongoose": "^9.11.1", + "mongoose": "^9.11.2", "nanoid": "6.0.2", "nconf": "^0.13.0", - "node": "^26.11.1", - "prettier": "^3.9.9", - "react": "^19.3.0", - "react-dom": "^19.3.0", + "node": "^26.12.0", + "prettier": "^3.9.10", + "react": "^19.3.1", + "react-dom": "^19.3.1", "react-frame-component": "^5.3.2", "react-router": "^8.4.0", "sanitize-filename": "1.6.4", @@ -6375,9 +6375,9 @@ "license": "MIT" }, "node_modules/content-disposition": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz", - "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-2.0.1.tgz", + "integrity": "sha512-e+H0ZXHSWYrENhQzw1LPuP4oF5MzVKmDU6d3hxlvaPEYLLg62MxtQNPRx4SYSuYJSBUgnQIG4HIN2tEtNv7Dog==", "license": "MIT", "engines": { "node": ">=18" @@ -7531,15 +7531,15 @@ "license": "MIT" }, "node_modules/express": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz", - "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/express/-/express-5.3.0.tgz", + "integrity": "sha512-qCqy1xSoaugxOD4IVHb1ZWdkvCF2W3aE2okKouWj8VwJ+ztskSiXoBnCSJqfKT+cVPJhuJqe9YLbY425+Zh00g==", "license": "MIT", "dependencies": { "accepts": "^2.0.0", - "body-parser": "^2.2.1", - "content-disposition": "^1.0.0", - "content-type": "^1.0.5", + "body-parser": "^2.3.0", + "content-disposition": "^2.0.1", + "content-type": "^2.0.0", "cookie": "^0.7.1", "cookie-signature": "^1.2.1", "debug": "^4.4.0", @@ -7555,14 +7555,14 @@ "on-finished": "^2.4.1", "once": "^1.4.0", "parseurl": "^1.3.3", - "proxy-addr": "^2.0.7", - "qs": "^6.14.0", + "proxy-addr": "^2.0.8", + "qs": "^6.16.0", "range-parser": "^1.2.1", "router": "^2.2.0", "send": "^1.1.0", "serve-static": "^2.2.0", "statuses": "^2.0.1", - "type-is": "^2.0.1", + "type-is": "^2.1.0", "vary": "^1.1.2" }, "engines": { @@ -7590,15 +7590,6 @@ "serve-static": "^2.2.0" } }, - "node_modules/express/node_modules/content-type": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", - "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/express/node_modules/cookie-signature": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz", @@ -10867,9 +10858,9 @@ "license": "MIT" }, "node_modules/js-yaml": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-5.4.3.tgz", - "integrity": "sha512-yzzNtgczwgoVHNigCyKTXcQJU4Y8t/ikU4UxXW0BvrLfHTGWZhsNcOT2s/a7vn81/4KqVnNmHjaUEPlvWnNwVw==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-5.5.0.tgz", + "integrity": "sha512-paNr4LFIFPjeeSmwNYdrb8FafLLG/Cr2Af3GjbsHJ5CxIjH4r0c2emlmRdAtpPAieP1gRVzk6buBbVP5gBMGAg==", "funding": [ { "type": "github", @@ -10882,12 +10873,28 @@ ], "license": "MIT", "dependencies": { - "argparse": "^2.0.1" + "argparse": "^3.0.3" }, "bin": { "js-yaml": "bin/js-yaml.mjs" } }, + "node_modules/js-yaml/node_modules/argparse": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-3.0.3.tgz", + "integrity": "sha512-Sn98ftV3KfsO8xfLPHG6oT8y+b0yvbrLgZjgPDXsharNY15tTAjqIsIju4S32nl6/iEUNNE4v+yL2Zhm8ooP3w==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/puzrin" + }, + { + "type": "github", + "url": "https://github.com/sponsors/nodeca" + } + ], + "license": "PSF-2.0" + }, "node_modules/jsdom": { "version": "30.1.2", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-30.1.2.tgz", @@ -11054,9 +11061,9 @@ } }, "node_modules/kareem": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/kareem/-/kareem-3.4.0.tgz", - "integrity": "sha512-JAKhnR4S027v/8949QXNInRskgETCg9rFUMi1VjhGbjX+XltCAAEFcXykkSocNkom1kc66EMJfjWvhj87BDQKg==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/kareem/-/kareem-3.4.1.tgz", + "integrity": "sha512-UlgCAFNAdk/HLSsbfkmbH8pJqpEN52Ek8RG53Ys1i3Q3gbCQruSrWpplZlgIGyDHX/LNoLW97ei3OG43s7UhUA==", "license": "Apache-2.0", "engines": { "node": ">=18.0.0" @@ -11886,13 +11893,13 @@ } }, "node_modules/mongoose": { - "version": "9.11.1", - "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.11.1.tgz", - "integrity": "sha512-fVtjTVACOtAb0PjDDF+O5NebcEJy5JpAH+AXk16/5i36w38YkW6MZ+KWV54bdIOJFymDz1VjjA5Xg6L2QfjQjQ==", + "version": "9.11.2", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.11.2.tgz", + "integrity": "sha512-hFkl/2dccpD58coRAya3a/ht8ooAx9YPLzBfxVX9bEsgcrjsNkvuWQe8gplGfDdmzpw2RfFX1IB/G8PiFwyvwg==", "license": "MIT", "dependencies": { "@standard-schema/spec": "^1.1.0", - "kareem": "3.4.0", + "kareem": "3.4.1", "mongodb": "~7.7", "mpath": "0.9.0", "mquery": "6.0.0", @@ -12131,9 +12138,9 @@ } }, "node_modules/node": { - "version": "26.11.1", - "resolved": "https://registry.npmjs.org/node/-/node-26.11.1.tgz", - "integrity": "sha512-KimXTKFoiWoakmW/7c2B3EFwZYrAjTjllg7kKSIQAQ7Ai+gRkkIoCrtrURJDrql+6hLshRWvZUmhkbE+JfKkFw==", + "version": "26.12.0", + "resolved": "https://registry.npmjs.org/node/-/node-26.12.0.tgz", + "integrity": "sha512-/P4rDRs4lOBFW0UUDb1Yuy02aDd9oh/RHZfl3haBnatqUcDnY0np4fo9EgK7zhX09bzZ/uroJfyzW+Tgo5kyiA==", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -12833,9 +12840,9 @@ } }, "node_modules/prettier": { - "version": "3.9.9", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.9.tgz", - "integrity": "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==", + "version": "3.9.10", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.10.tgz", + "integrity": "sha512-skGHTH1Yb9QvaTC4hWnRTzEYtCpApF0UMBPz+t/0ZPzP8ihefo/btKd+QA7pUE0fEwA1SbS/NmhyEcstdXOIdA==", "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" @@ -13085,24 +13092,24 @@ } }, "node_modules/react": { - "version": "19.3.0", - "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", - "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", + "version": "19.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.3.1.tgz", + "integrity": "sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.3.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", - "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==", + "version": "19.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.1.tgz", + "integrity": "sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==", "license": "MIT", "dependencies": { "scheduler": "^0.28.0" }, "peerDependencies": { - "react": "^19.3.0" + "react": "^19.3.1" } }, "node_modules/react-frame-component": { diff --git a/package.json b/package.json index 6f1269f97..facfe3b3d 100644 --- a/package.json +++ b/package.json @@ -115,27 +115,27 @@ "cors": "^2.8.5", "create-react-class": "^15.7.0", "dedent": "^1.7.2", - "express": "^5.1.0", + "express": "^5.3.0", "express-async-handler": "^1.2.0", "express-static-gzip": "3.0.2", "fflate": "^0.8.3", "fs-extra": "^11.4.1", "hash-wasm": "^4.12.0", "idb-keyval": "^6.2.5", - "js-yaml": "^5.4.3", + "js-yaml": "^5.5.0", "jwt-simple": "^0.5.6", "less": "^4.9.1", "lodash": "^4.18.1", "marked-hbfm": "^1.0.1", "markedLegacy": "npm:marked@^0.3.19", "moment": "^2.31.0", - "mongoose": "^9.11.1", + "mongoose": "^9.11.2", "nanoid": "6.0.2", "nconf": "^0.13.0", - "node": "^26.11.1", - "prettier": "^3.9.9", - "react": "^19.3.0", - "react-dom": "^19.3.0", + "node": "^26.12.0", + "prettier": "^3.9.10", + "react": "^19.3.1", + "react-dom": "^19.3.1", "react-frame-component": "^5.3.2", "react-router": "^8.4.0", "sanitize-filename": "1.6.4", From 86866c9dd2cabb114737d8410e6a8af32867fef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 19 Oct 2026 12:59:12 +0200 Subject: [PATCH 3/6] refactor uipage to be functional --- .../homebrew/pages/basePages/uiPage/uiPage.jsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.jsx b/client/homebrew/pages/basePages/uiPage/uiPage.jsx index 400dbb28e..bd16b85e5 100644 --- a/client/homebrew/pages/basePages/uiPage/uiPage.jsx +++ b/client/homebrew/pages/basePages/uiPage/uiPage.jsx @@ -1,7 +1,4 @@ import './uiPage.less'; -import React from 'react'; -import createReactClass from 'create-react-class'; - import Nav from '../../../navbar/nav.jsx'; import Navbar from '../../../navbar/navbar.jsx'; import NewBrewItem from '../../../navbar/newbrew.navitem.jsx'; @@ -10,15 +7,12 @@ import RecentNavItems from '../../../navbar/recent.navitem.jsx'; const { both: RecentNavItem } = RecentNavItems; import Account from '../../../navbar/account.navitem.jsx'; +const UIPage = ({brew, children})=>{ -const UIPage = createReactClass({ - displayName : 'UIPage', - - render : function(){ - return
+ return
- {this.props.brew.title} + {brew?.title} @@ -30,10 +24,9 @@ const UIPage = createReactClass({
- {this.props.children} + {children}
; - } -}); +}; export default UIPage; From eaa23f51fc97552ae0ca861cabf7556eedefe120 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 19 Oct 2026 13:00:57 +0200 Subject: [PATCH 4/6] lint --- .../pages/basePages/uiPage/uiPage.jsx | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.jsx b/client/homebrew/pages/basePages/uiPage/uiPage.jsx index bd16b85e5..9fa7e08bb 100644 --- a/client/homebrew/pages/basePages/uiPage/uiPage.jsx +++ b/client/homebrew/pages/basePages/uiPage/uiPage.jsx @@ -7,26 +7,22 @@ import RecentNavItems from '../../../navbar/recent.navitem.jsx'; const { both: RecentNavItem } = RecentNavItems; import Account from '../../../navbar/account.navitem.jsx'; -const UIPage = ({brew, children})=>{ +const UIPage = ({ brew, children })=>
+ + + {brew?.title} + + + + + + + + - return
- - - {brew?.title} - - - - - - - - - - -
- {children} -
-
; -}; +
+ {children} +
+
; export default UIPage; From d639caf245c8372f11fe5072d1290ae1fc0d26ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 19 Oct 2026 14:48:09 +0200 Subject: [PATCH 5/6] make vault use similar styles to metadata editor --- .../homebrew/pages/vaultPage/vaultPage.less | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index 85eabe7a0..dd10fc6fb 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -1,9 +1,20 @@ +@import '@themes/assets/assets.less'; @import '@sharedStyles/core.less'; .vaultPage { height : 100%; overflow-y : hidden; + --bg-clr : white; + --bg-image : @backgroundImageAlt; + --h1-clr : black; + --h2-clr : #000077; + --label-clr : black; + --input-bg : white; + --input-bg-hover : #DDDDDD; + --input-text-clr : black; + --input-placeholder-clr : grey; + *:not(input) { user-select : none; } .form { background : white; } @@ -13,8 +24,14 @@ height : 100%; &.form .brewLookup { + color : var(--label-clr); + background-color : var(--bg-clr); + background-image : var(--bg-image); + background-size : cover; + position : relative; padding : 50px clamp(20px, 4vw, 50px); + small { font-size : 10pt; @@ -33,6 +50,7 @@ h1, h2, h3, h4 { font-family : 'CodeBold'; letter-spacing : 2px; + color : var(--h1-clr); } legend { @@ -87,14 +105,14 @@ align-items : center; margin : 10px 0; } - select { margin : 0 10px; } - - input { + input[type='text'], textarea, select { margin : 0 10px; - - &:invalid { background : rgb(255, 188, 181); } - - + color : var(--input-text-clr); + background-color : var(--input-bg); + border : 1px solid var(--input-placeholder-clr); + &:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); } + &::placeholder { color : var(--input-placeholder-clr); } + &:invalid { background : #ffbcb5; } } #searchButton { From f9aceeb296aede174ce83a29e69f9b503c8ed913 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 19 Oct 2026 15:46:20 +0200 Subject: [PATCH 6/6] update form height vault --- client/homebrew/pages/vaultPage/vaultPage.less | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index dd10fc6fb..72ff916fe 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -28,6 +28,7 @@ background-color : var(--bg-clr); background-image : var(--bg-image); background-size : cover; + height:100%; position : relative; padding : 50px clamp(20px, 4vw, 50px);