fix background tiling

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:46:26 +02:00 · 2024-09-13 16:40:49 +02:00
3 changed files with 10 additions and 1 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">
--- a/pattern.svg
+++ b/pattern.svg
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-86.6025 -150 173.205 300">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-86.6025 -450 173.205 600">
    <defs>
        <path id="star" stroke-linejoin="round" stroke="white" fill="white"
              d="M0 -100 1.73205 -1 86.6025 50 0 2 -86.6025 50 -1.73205 -1 Z" />
@ -11,4 +11,7 @@
        <use href="#star" x="86.6025" y="100"/>
    </g>
    <use href="#group" x="0" y="0" transform="scale(-1)"/>
+
+    <use href="#group" x="0" y="-300"/>
+    <use href="#group" x="0" y="300" transform="scale(-1)"/>
 </svg>
Author	SHA1	Message	Date
jbb01	6e5d53e554	fix background tiling	2024-09-13 16:46:26 +02:00
jbb01	c96af40b2d	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