fix README.md typos

jmau111 · Aug 27, 2022 · c812cc7 · c812cc7
1 parent 587f163
commit c812cc7
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ Then customize the favicon in `./images/`.
 As the idea with TypeScript is to type, there's a command for that:
 
 ```
-yarn typecheck
+yarn type-check
 ```
 
 ## 🎃 Change styles
@@ -47,14 +47,14 @@ Don't remove `import "nes.css/css/nes.min.css";` I add in the main Layout  `./sr
 Open `./gatsby-config.ts` and modify:
 
 ```js
-  pathPrefix: `/gatsby-nes`,
-  siteMetadata: {
-    title: `Gatsby nes`,
-    author: `Julien Maury`,
-    about: `A Gatsby Theme using typescript and Nostalgic NES css`,
-    description: `A nostalgic Gatsby theme`,
-    siteUrl: `https://demos.julien-maury.dev`,
-  },
+pathPrefix: `/gatsby-nes`,
+siteMetadata: {
+  title: `Gatsby nes`,
+  author: `Julien Maury`,
+  about: `A Gatsby Theme using typescript and Nostalgic NES css`,
+  description: `A nostalgic Gatsby theme`,
+  siteUrl: `https://demos.julien-maury.dev`,
+},
 ```
 
 I use `pathPrefix` because I host the demo in a subfolder, but **you don't have to use this parameter if your production URL is a root URL**. 
@@ -64,18 +64,18 @@ I use `pathPrefix` because I host the demo in a subfolder, but **you don't have
 If you need google, add the plugin:
 
 ```
-npm install gatsby-plugin-google-analytics
+yarn add gatsby-plugin-google-analytics
 ```
 
 Then, add the entry in `./gatsby-config.js`:
 
 ```js
-   {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        trackingId: `XXXX`,// replace with yours
-      },
-    },
+{
+  resolve: `gatsby-plugin-google-analytics`,
+  options: {
+    trackingId: `XXXX`,// replace with yours
+  },
+},
 ```
 
 Also consider alternatives such as [Gatsby Matomo](https://www.gatsbyjs.com/plugins/gatsby-plugin-matomo/) instead.

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -1,26 +1,31 @@
-/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
+/***
+    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
 
-/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
-*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
   all: unset;
   display: revert;
 }
 
-/* stylelint-disable */
 /* Preferred box-sizing value */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
-/* stylelint-enable */
 
-/*
-  Remove list styles (bullets/numbers)
-  in case you use it with normalize.css
-*/
-ol,
-ul {
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
   list-style: none;
 }
 
@@ -29,12 +34,50 @@ img {
   max-width: 100%;
 }
 
-/* Removes spacing between cells in tables */
+/* removes spacing between cells in tables */
 table {
   border-collapse: collapse;
 }
 
-/* Revert the 'white-space' property for textarea elements on Safari */
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
 textarea {
   white-space: revert;
 }
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+ display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+ - fix for the content editable attribute will work properly.
+ - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}