feat: add css isolation

fbuireu · Dec 15, 2023 · 23d3425 · 23d3425
1 parent 8d5db58
commit 23d3425
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 77 deletions.
diff --git a/src/ui/styles/base/base.css b/src/ui/styles/base/base.css
@@ -0,0 +1,76 @@
+@layer base {
+    *::selection {
+        background-color: var(--primary-main);
+        color: var(--white);
+    }
+
+    html,
+    body {
+        width: 100dvw;
+        font-size: var(--base-font-size);
+        font-family: 'Literata Variable', serif;
+        overflow: hidden auto;
+        scroll-behavior: smooth;
+        scrollbar-gutter: stable;
+
+        @media (prefers-reduced-motion: reduce) {
+            scroll-behavior: auto;
+        }
+    }
+
+    main {
+        max-width: var(--grid-extra-large);
+        width: 100%;
+        margin: var(--header-height) auto 0;
+    }
+
+    body,
+    html,
+    p,
+    article {
+        color: var(--neutral-main);
+        font-size: var(--base-font-size);
+    }
+
+    p,
+    article {
+        font-family: 'Zilla Slab', sans-serif;
+
+        @supports (text-wrap: pretty) {
+            text-wrap: pretty;
+        }
+    }
+
+    img {
+        height: 100%;
+        max-width: 100%;
+        width: 100%;
+    }
+
+
+    body {
+        -webkit-font-smoothing: antialiased;
+        -webkit-tap-highlight-color: var(--base-font-size);
+        -webkit-touch-callout: none;
+        text-rendering: optimizeLegibility;
+    }
+
+    a {
+        -webkit-tap-highlight-color: transparent;
+        color: inherit;
+        cursor: pointer;
+    }
+
+    summary {
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    mark {
+        background-color: var(--primary-main);
+    }
+
+    svg {
+        -webkit-tap-highlight-color: transparent;
+        fill: var(--neutral-main);
+    }
+}
diff --git a/src/ui/styles/base/index.css b/src/ui/styles/base/index.css
@@ -1,77 +1 @@
-@layer base {
-    *::selection {
-        background-color: var(--primary-main);
-        color: var(--white);
-    }
-
-    html,
-    body {
-        width: 100dvw;
-        font-size: var(--base-font-size);
-        font-family: 'Literata Variable', serif;
-        overflow: hidden auto;
-        scroll-behavior: smooth;
-        scrollbar-gutter: stable;
-
-        @media (prefers-reduced-motion: reduce) {
-            scroll-behavior: auto;
-        }
-    }
-
-    main {
-        max-width: var(--grid-extra-large);
-        width: 100%;
-        margin: var(--header-height) auto 0;
-    }
-
-    body,
-    html,
-    p,
-    article {
-        color: var(--neutral-main);
-        font-size: var(--base-font-size);
-    }
-
-    p,
-    article {
-        font-family: 'Zilla Slab', sans-serif;
-        font-size: calc(var(--base-font-size) * 3);
-
-        @supports (text-wrap: pretty) {
-            text-wrap: pretty;
-        }
-    }
-
-    img {
-        height: 100%;
-        max-width: 100%;
-        width: 100%;
-    }
-
-
-    body {
-        -webkit-font-smoothing: antialiased;
-        -webkit-tap-highlight-color: var(--base-font-size);
-        -webkit-touch-callout: none;
-        text-rendering: optimizeLegibility;
-    }
-
-    a {
-        -webkit-tap-highlight-color: transparent;
-        color: inherit;
-        cursor: pointer;
-    }
-
-    summary {
-        -webkit-tap-highlight-color: transparent;
-    }
-
-    mark {
-        background-color: var(--primary-main);
-    }
-
-    svg {
-        -webkit-tap-highlight-color: transparent;
-        fill: var(--neutral-main);
-    }
-}
+@import url('base.css');