add browser specific optimizations

- firefox has a problem with flashes of unstyled content - chrome only supports mask-image without -webkit prefix very recently
2024-09-13 16:40:49 +02:00 · 2024-09-13 16:40:49 +02:00 · c96af40b2d
commit c96af40b2d
parent 42ba20a075
2 changed files with 6 additions and 0 deletions
--- a/index.css
+++ b/index.css
@ -24,6 +24,8 @@ html::before {
    z-index: -1;

    background: conic-gradient(from 0deg in hsl longer hue, hsl(0deg 100% 12.5%) 0 0);
+    -webkit-mask-image: url("pattern.svg");
+    -webkit-mask-size: 5rem;
    mask-image: url("pattern.svg");
    mask-size: 5rem;
 }
--- a/index.html
+++ b/index.html
@ -9,6 +9,10 @@

    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
    <link href="index.css" rel="stylesheet"/>
+    <script>
+        /*to prevent Firefox FOUC, this must be here*/
+        let FF_FOUC_FIX;
+    </script>
 </head>
 <body>
 <main class="content">