package updates, stylelint updates

.stylelintrc

@@ -4,17 +4,35 @@
     "stylelint-config-css-modules",
     "stylelint-prettier/recommended"
   ],
-  "plugins": ["stylelint-prettier"],
+  "plugins": [
+    "stylelint-prettier"
+  ],
   "syntax": "css",
   "rules": {
     "prettier/prettier": true,
     "property-no-unknown": [
       true,
-      { "ignoreProperties": ["composes", "compose-with"] }
+      {
+        "ignoreProperties": [
+          "composes",
+          "compose-with"
+        ]
+      }
     ],
     "at-rule-no-unknown": [
       true,
-      { "ignoreAtRules": ["value", "include", "mixin", "extend"] }
+      {
+        "ignoreAtRules": [
+          "value",
+          "include",
+          "mixin",
+          "extend"
         ]
       }
+    ],
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "custom-property-pattern": null,
+    "selector-id-pattern": null
+  }
 }

content/photos/2020-02-14-the-light-that-never-goes-out.md

@@ -1,10 +0,0 @@
----
-date: 2020-02-14T00:00:09.000Z
-
-title: The Light That Never Goes Out
-image: 2020-02-14-the-light-that-never-goes-out.jpg
----
-
-The light that never goes out.
-And the planet circling around it.
-Well, the pleasure, the privilege is mine.

jest/jest.config.js

@@ -7,7 +7,8 @@ module.exports = {
     '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
     '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/jest/__mocks__/file-mock.js',
-    '\\.svg': '<rootDir>/jest/__mocks__/svgr-mock.js'
+    '\\.svg': '<rootDir>/jest/__mocks__/svgr-mock.js',
+    '^@reach/router(.*)': '<rootDir>/node_modules/@gatsbyjs/reach-router$1'
   },
   testPathIgnorePatterns: ['node_modules', '.cache', 'public', 'coverage'],
   transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],

package.json

@@ -28,25 +28,25 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@ethersproject/providers": "^5.4.5",
+    "@ethersproject/providers": "^5.5.0",
-    "@ethersproject/units": "^5.4.0",
+    "@ethersproject/units": "^5.5.0",
     "@loadable/component": "^5.15.0",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "classnames": "^2.3.1",
-    "date-fns": "^2.23.0",
+    "date-fns": "^2.26.0",
     "dms2dec": "^1.1.0",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.28.0",
-    "fraction.js": "^4.1.1",
+    "fraction.js": "^4.1.2",
     "gatsby": "^3.12.1",
     "gatsby-plugin-catch-links": "^3.12.0",
     "gatsby-plugin-feed": "^3.12.0",
     "gatsby-plugin-image": "^1.12.0",
     "gatsby-plugin-lunr": "^1.5.2",
     "gatsby-plugin-manifest": "^3.12.0",
-    "gatsby-plugin-matomo": "^0.10.0",
+    "gatsby-plugin-matomo": "^0.11.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^4.12.0",
     "gatsby-plugin-react-helmet": "^4.12.0",
@@ -55,7 +55,7 @@
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.25",
     "gatsby-plugin-webpack-size": "^2.0.1",
-    "gatsby-redirect-from": "^0.4.2",
+    "gatsby-redirect-from": "^0.4.3",
     "gatsby-remark-autolink-headers": "^4.9.0",
     "gatsby-remark-copy-linked-files": "^4.9.0",
     "gatsby-remark-images": "^5.9.0",
@@ -80,27 +80,26 @@
     "react-transition-group": "^4.4.2",
     "remark": "^13.0.0",
     "remark-react": "^8.0.0",
-    "slugify": "^1.6.0"
+    "slugify": "^1.6.3"
   },
   "devDependencies": {
     "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.1",
-    "@types/classnames": "^2.3.1",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^27.0.3",
     "@types/loadable__component": "^5.13.4",
     "@types/lunr": "^2.3.4",
-    "@types/node": "^16.7.4",
+    "@types/node": "^16.11.10",
-    "@types/node-fetch": "^2.5.12",
+    "@types/react": "^17.0.37",
-    "@types/react": "^17.0.26",
+    "@types/react-dom": "^17.0.11",
-    "@types/react-dom": "^17.0.9",
     "@types/react-helmet": "^6.1.2",
     "@types/react-transition-group": "^4.4.2",
     "@types/shortid": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.32.0",
     "@welldone-software/why-did-you-render": "^6.2.1",
+    "babel-preset-gatsby": "^2.2.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-graphql": "^4.0.0",
@@ -110,21 +109,21 @@
     "eslint-plugin-testing-library": "^4.12.0",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.1.0",
+    "jest": "^27.3.1",
-    "markdownlint-cli": "^0.28.1",
+    "markdownlint-cli": "^0.30.0",
     "node-iptc": "^1.0.5",
     "npm-run-all": "^4.1.5",
     "ora": "^6.0.1",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.4",
-    "prettier": "^2.3.2",
+    "prettier": "^2.5.0",
     "shortid": "^2.2.16",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.1.0",
-    "stylelint-config-css-modules": "^2.2.0",
+    "stylelint-config-css-modules": "^2.3.0",
-    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^24.0.0",
-    "stylelint-prettier": "^1.2.0",
+    "stylelint-prettier": "^2.0.0",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.4.0",
-    "typescript": "^4.4.2",
+    "typescript": "^4.5.0",
     "typescript-plugin-css-modules": "^3.4.0"
   },
   "repository": {

src/components/Layout.module.css

@@ -18,9 +18,8 @@
   transform: translate3d(0, 0, 0);
   transition: 0.4s var(--easing);
   transition-property: transform, background, border, box-shadow;
-  border-top: 1px solid rgba(255, 255, 255, 0.85);
+  border-top: 1px solid rgba(255 255 255 / 85%);
-  box-shadow: 0 1px 10px rgba(1, 85, 101, 0.1),
+  box-shadow: 0 1px 10px rgba(1 85 101 / 10%), 0 -1px 4px rgba(1 85 101 / 5%);
-    0 -1px 4px rgba(1, 85, 101, 0.05);
 }
 
 :global(.has-menu-open) .document {
@@ -28,8 +27,8 @@
 }
 
 :global(.dark) .document {
-  border-top-color: rgba(255, 255, 255, 0.05);
+  border-top-color: rgba(255 255 255 / 5%);
-  box-shadow: 0 1px 8px rgba(0, 7, 8, 0.3), 0 -1px 4px rgba(0, 21, 25, 0.8);
+  box-shadow: 0 1px 8px rgba(0 7 8 / 30%), 0 -1px 4px rgba(0 21 25 / 80%);
 }
 
 @media (min-width: 60rem) {

src/components/atoms/Copy.module.css

@@ -8,7 +8,6 @@
   box-shadow: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  background: rgba(var(--brand-grey), 0.3);
   padding: calc(var(--spacer) / 3);
 }
 

src/components/atoms/Image.module.css

@@ -1,5 +1,5 @@
 .frame {
-  border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
+  border: var(--stroke-width) solid rgba(255 255 255 / 20%);
   border-radius: var(--border-radius);
   overflow: hidden;
   transition: 0.2s ease-out;

src/components/atoms/Input.module.css

@@ -15,12 +15,14 @@
   appearance: none;
 }
 
+/* stylelint-disable selector-no-vendor-prefix */
 .input::-moz-placeholder,
 .input::-webkit-input-placeholder,
 .input:-ms-input-placeholder {
   color: var(--input-color-placeholder);
   opacity: 1;
 }
+/* stylelint-enable selector-no-vendor-prefix */
 
 .input:focus {
   border-color: var(--input-border-focus);

src/components/molecules/Menu.module.css

@@ -31,7 +31,7 @@
   text-transform: uppercase;
   margin: 0 calc(var(--spacer) / 4);
   font-size: var(--font-size-small);
-  text-shadow: 0 1px 0 rgba(255 255 255 0.5);
+  text-shadow: 0 1px 0 rgba(255 255 255 / 50%);
   padding: var(--padding-base-horizontal);
   display: block;
   text-align: center;

src/components/molecules/Pagination.module.css

@@ -20,7 +20,7 @@
 
 .number:hover,
 .number:focus {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255 255 255 / 10%);
 }
 
 .number:first-child {

src/components/molecules/PostTeaser.module.css

@@ -32,7 +32,7 @@
   composes: frame from '../atoms/Image.module.css';
   display: block;
   min-height: 95px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACaADAAQAAAABAAAACQAAAAAvQpmhAAAAHElEQVQYGWNgoBL4T8gcggoIGcBA0ASCCmhsBQBhFwX7u70C8QAAAABJRU5ErkJggg==);
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACaADAAQAAAABAAAACQAAAAAvQpmhAAAAHElEQVQYGWNgoBL4T8gcggoIGcBA0ASCCmhsBQBhFwX7u70C8QAAAABJRU5ErkJggg==');
 }
 
 a:hover .empty {

src/components/templates/Post/Actions.module.css

@@ -36,10 +36,8 @@
 .action {
   display: block;
   margin: 0;
-  padding-top: var(--spacer);
+  padding: var(--spacer) calc(var(--spacer) * 1.5) var(--spacer)
-  padding-bottom: var(--spacer);
+    calc(var(--spacer) / 2);
-  padding-left: calc(var(--spacer) * 1.5);
-  padding-right: calc(var(--spacer) / 2);
   position: relative;
   text-align: left;
 }

src/global/_alerts.css

@@ -25,7 +25,7 @@
 
 .dark .alert-info {
   color: var(--alert-info);
-  background: rgba(248, 241, 227, 0.2);
+  background: rgba(248 241 227 / 20%);
 }
 
 /* .dark & {

src/global/_buttons.css

@@ -12,7 +12,7 @@ a.btn {
   padding: var(--padding-base-vertical) var(--padding-base-horizontal);
   font-size: var(--font-size-small);
   border-radius: var(--border-radius);
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255 255 255 / 10%);
   border: 1px solid var(--border-color);
   font-family: var(--font-family-headings);
   font-weight: var(--font-weight-headings);
@@ -25,7 +25,7 @@ a.btn {
 .btn:focus {
   text-decoration: none;
   outline: 0;
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: rgba(255 255 255 / 15%);
 }
 
 .btn:active {
@@ -68,7 +68,7 @@ button.link:focus {
 a.btn-primary {
   /* dark variant of  `--body-background-color` */
   color: #161a1b;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-shadow: 0 1px 0 rgba(255 255 255 / 30%);
   background: var(--link-color);
   border-color: var(--link-color);
 }
@@ -76,7 +76,7 @@ a.btn-primary {
 .btn-primary:hover,
 .btn-primary:focus {
   background: var(--link-color-hover);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-shadow: 0 1px 0 rgba(255 255 255 / 30%);
 }
 
 .btn-primary:active {
@@ -103,6 +103,7 @@ a.btn-primary {
 .dark .btn[class*='icon-']::before {
   filter: invert(0.75);
 }
+
 .dark .btn.btn-primary[class*='icon-']::before {
   filter: invert(0);
 }

src/global/_code.css

@@ -23,7 +23,7 @@ kbd {
   background-color: var(--box-background-color);
   border-radius: var(--border-radius);
   border: 1px solid var(--box-background-color);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  box-shadow: inset 0 1px 0 rgba(255 255 255 / 40%);
   padding: 0.15rem 0.4rem;
 }
 

src/global/_toast.css

@@ -27,6 +27,7 @@
   0% {
     transform: translateY(3rem);
   }
+
   100% {
     transform: translateY(0);
   }

src/global/_variables.css

@@ -14,7 +14,7 @@
   --brand-grey-light: #7f97a1;
   --brand-grey-dimmed: #c3d8e0;
 
-  --alert-info: rgb(248, 241, 227);
+  --alert-info: rgb(248 241 227);
   --alert-success: #dff0d8;
   --alert-error: #f2dede;
 
@@ -22,10 +22,10 @@
   ///////////////////////////////////// */
 
   --body-background-color: var(--brand-light);
-  --box-background-color: rgba(255, 255, 255, 0.4);
+  --box-background-color: rgba(255 255 255 / 40%);
 
-  --box-shadow: 0 1.3px 5.4px rgba(1, 85, 101, 0.15),
+  --box-shadow: 0 1.3px 5.4px rgba(1 85 101 / 15%),
-    0 4.5px 18.1px rgba(1, 85, 101, 0.05), 0 20px 81px rgba(1, 85, 101, 0.025);
+    0 4.5px 18.1px rgba(1 85 101 / 5%), 0 20px 81px rgba(1 85 101 / 2.5%);
 
   /* Text Colors
   ///////////////////////////////////// */
@@ -56,7 +56,7 @@
   --font-size-h6: var(--font-size-base);
 
   --line-height: 1.65;
-  --line-height-small: 1.1428571429;
+  --line-height-small: 1.1429;
 
   --font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
     'Helvetica', 'Arial', 'sans-serif';
@@ -117,15 +117,15 @@
 
   --maxWidthContent: 42rem;
   --maxWidthContainer: 60rem;
-  --easing: cubic-bezier(0.75, 0, 0.08, 1);
+  --easing: cubic-bezier(0.75, 0, 0.08, 100%);
 }
 
 .dark {
   --body-background-color: #161a1b;
-  --box-background-color: rgba(255, 255, 255, 0.03);
+  --box-background-color: rgba(255 255 255 / 3%);
 
-  --box-shadow: 0 1.3px 5.4px rgba(0, 7, 8, 0.6),
+  --box-shadow: 0 1.3px 5.4px rgba(0 7 8 / 60%),
-    0 4.5px 18.1px rgba(0, 7, 8, 0.4), 0 20px 81px rgba(0, 7, 8, 0.1);
+    0 4.5px 18.1px rgba(0 7 8 / 40%), 0 20px 81px rgba(0 7 8 / 10%);
 
   --text-color: var(--brand-grey-light);
   --text-color-light: var(--brand-grey);

src/global/global.css

@@ -60,7 +60,7 @@ button {
   cursor: pointer;
   background: transparent;
   border: 0;
-  -webkit-appearance: none;
+  appearance: none;
   outline: 0;
 }
 
@@ -329,6 +329,7 @@ td {
 /* Selection
 ///////////////////////////////////// */
 
+/* stylelint-disable selector-no-vendor-prefix */
 ::-moz-selection {
   background: #2e4f5c;
   color: #fff;
@@ -338,6 +339,7 @@ td {
   background: #2e4f5c;
   color: #fff;
 }
+/* stylelint-enable selector-no-vendor-prefix */
 
 /* More basic elements
 ///////////////////////////////////// */

src/pages/404.module.css

@@ -55,9 +55,9 @@
   top: 0;
   background-image: linear-gradient(
     135deg,
-    rgba(255, 255, 255, 0.07) 0%,
+    rgba(255 255 255 / 7%) 0%,
-    rgba(255, 255, 255, 0.07) 40%,
+    rgba(255 255 255 / 7%) 40%,
-    rgba(255, 255, 255, 0) 41%
+    rgba(255 255 255 / 0%) 41%
   );
 }