From b4500d21b1cc803e167e7dc3329e09a1b0736e16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?=
 <dgonzalezr@users.noreply.github.com>
Date: Wed, 21 Jun 2023 12:00:30 +0300
Subject: [PATCH] feat(CSS reset): improve  global custom CSS reset (#287)

Following this article here: https://www.joshwcomeau.com/css/custom-css-reset/
---
 .../bee-q/src/global/styles/tailwind.pcss     | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/bee-q/src/global/styles/tailwind.pcss b/packages/bee-q/src/global/styles/tailwind.pcss
index 01cc06953..8aa53d3e4 100644
--- a/packages/bee-q/src/global/styles/tailwind.pcss
+++ b/packages/bee-q/src/global/styles/tailwind.pcss
@@ -80,16 +80,7 @@
   }
 
   /* Remove default margin */
-  body,
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  figure,
-  blockquote,
-  dl,
-  dd {
+  * {
     margin: 0;
   }
 
@@ -106,9 +97,11 @@
 
   /* Set core body defaults */
   body {
+    line-height: var(--bq-font-line-height--large);
     min-height: 100vh;
     text-rendering: optimizeSpeed;
-    line-height: 1.5;
+
+    -webkit-font-smoothing: antialiased;
   }
 
   /* A elements that don't have a class get default styles */
@@ -118,9 +111,12 @@
 
   /* Make images easier to work with */
   img,
-  picture {
-    max-width: 100%;
+  picture,
+  video,
+  canvas,
+  svg {
     display: block;
+    max-width: 100%;
   }
 
   /* Inherit fonts for inputs and buttons */
@@ -131,6 +127,17 @@
     font: inherit;
   }
 
+  /* Avoid text overflows */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
   /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
   @media (prefers-reduced-motion: reduce) {
     html:focus-within {