fix: use layers

ricardocasares · Nov 2, 2020 · 2ca6b2c · 2ca6b2c
1 parent f51c912
commit 2ca6b2c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx
@@ -25,13 +25,15 @@ export const Logo = () => {
           stroke: "var(--accents-4)",
           transform: `scale(${opacity})`,
           transformOrigin: "center",
+          willChange: "transform, stroke",
         }}
       />
       <path
         d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"
         style={{
           opacity,
           stroke: "var(--success)",
+          willChange: "opacity",
         }}
       />
     </svg>

diff --git a/src/css/global.ts b/src/css/global.ts
@@ -11,13 +11,16 @@ export const styles = css`
     min-height: 100%;
   }
 
-  body,
-  input,
-  button {
+  *,
+  *::before,
+  *::after {
     font-family: var(--font-family);
+    will-change: color, background;
+    transition: color 0.1s, background 0.3s, border-color 0.3s;
   }
 
   body {
+    font-size: 16px;
     color: var(--foreground);
     background: var(--background);
     margin: 0;

diff --git a/src/css/reset.ts b/src/css/reset.ts
@@ -57,7 +57,6 @@ export const reset = css`
   *::before,
   *::after {
     box-sizing: inherit;
-    transition: color 0.1s, background 0.3s, border-color 0.3s;
   }
 
   img,