Merge pull request #22 from mahmoud-sadder/fix/releases-and-perf

Fix releases page in dark theme + mobile performance pass

Author: mahmoud-sadder

website/about-us/index.html

@@ -31,7 +31,7 @@
     <meta property="og:updated_time" content=2025-09-03T13:59:04+0100>
     <meta name=twitter:site content="@airstrike">
     <meta name=twitter:creator content="@airstrike"><meta name=twitter:card content=summary_large_image><meta property=og:type content=website>
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel=sitemap type=application/xml title=Sitemap href=/sitemap.xml>
     <link rel=canonical href=/about-us/ itemprop=url>
     <meta name=twitter:url content="/about-us/">
@@ -106,7 +106,7 @@ <h2 id=airstrikes-founders>Airstrike&rsquo;s Founders</h2>
                     <td>
                         <p style=text-align:center>
                             <a href=https://www.linkedin.com/in/ahmad-alkadi/ target=_blank
-                                style=display:inline-block><img src=/images/team/alkadi.jpg alt="Ahmad Alkadi"></a>
+                                style=display:inline-block><img src=/images/team/alkadi.jpg alt="Ahmad Alkadi" loading=lazy decoding=async></a>
                         </p>
                     </td>
                     <td><strong>Ahmad Alkadi</strong> (<a href=https://www.linkedin.com/in/ahmad-alkadi/>@aliko97</a>)

website/attacks/index.html

@@ -31,7 +31,7 @@
     <meta property="og:updated_time" content=2025-01-01T00:00:00+0000>
     <meta name=twitter:site content="@airstrike">
     <meta name=twitter:creator content="@airstrike"><meta name=twitter:card content=summary_large_image><meta property=og:type content=website>
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel=sitemap type=application/xml title=Sitemap href=/sitemap.xml>
     <link rel=canonical href=/attacks/ itemprop=url>
     <meta name=twitter:url content="/attacks/">

website/contact/index.html

@@ -31,7 +31,7 @@
     <meta property="og:updated_time" content=2025-01-01T00:00:00+0000>
     <meta name=twitter:site content="@airstrike">
     <meta name=twitter:creator content="@airstrike"><meta name=twitter:card content=summary_large_image><meta property=og:type content=website>
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel=sitemap type=application/xml title=Sitemap href=/sitemap.xml>
     <link rel=canonical href=/contact/ itemprop=url>
     <meta name=twitter:url content="/contact/">

website/docs/index.html

@@ -31,7 +31,7 @@
     <meta property="og:updated_time" content=2025-01-01T00:00:00+0000>
     <meta name=twitter:site content="@airstrike">
     <meta name=twitter:creator content="@airstrike"><meta name=twitter:card content=summary_large_image><meta property=og:type content=website>
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel=sitemap type=application/xml title=Sitemap href=/sitemap.xml>
     <link rel=canonical href=/docs/ itemprop=url>
     <meta name=twitter:url content="/docs/">

website/faq/index.html

@@ -39,7 +39,7 @@
     <meta property="og:updated_time" content=2025-01-01T00:00:00+0000>
     <meta name=twitter:site content="@airstrike">
     <meta name=twitter:creator content="@airstrike"><meta name=twitter:card content=summary_large_image><meta property=og:type content=website>
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel=sitemap type=application/xml title=Sitemap href=/sitemap.xml>
     <link rel=canonical href=/faq/ itemprop=url>
     <meta name=twitter:url content="/faq/">

website/features/index.html

@@ -31,7 +31,7 @@
     <meta property="og:updated_time" content=2025-01-01T00:00:00+0000>
     <meta name=twitter:site content="@airstrike">
     <meta name=twitter:creator content="@airstrike"><meta name=twitter:card content=summary_large_image><meta property=og:type content=website>
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel=sitemap type=application/xml title=Sitemap href=/sitemap.xml>
     <link rel=canonical href=/features/ itemprop=url>
     <meta name=twitter:url content="/features/">

website/images/airstrike-jet-dragon-icon.webp

@@ -34,7 +34,7 @@
     <meta name="twitter:image" content="https://airstrike.dev/images/og-image.png">
 
     <!-- Favicon -->
-    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"><link rel="stylesheet" href="/themify/themify-icons.css">
+    <link rel="icon" href="/images/favicon.ico" sizes="any"><link rel="icon" type="image/png" href="/images/favicon-32.png" sizes="32x32"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><link rel="preload" as="image" href="/images/airstrike-home-banner.webp" type="image/webp" fetchpriority="high"><link rel="preload" as="image" href="/images/airstrike-jet-dragon-icon.webp" type="image/webp"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"></noscript><link rel="stylesheet" href="/themify/themify-icons.css">
     <link rel="stylesheet" href="/style.min.css?ver=899b114f4c20a4c758879ed0c8706282">
     <link rel="stylesheet" href="/index.min.css?ver=20241118a">
     <style>
@@ -210,11 +210,13 @@ <h4><i class="ti-comments"></i>Open Collaboration</h4>
             </li>
         </ul>
         <figure>
-            <img class="notebook-frame" src="images/notebook.svg" alt="Generic laptop PC">
+            <img class="notebook-frame" src="images/notebook.svg" alt="Airstrike control panel on a laptop" width="1340" height="800" loading="lazy" decoding="async">
             <div class="notebook-video">
-                <iframe src="https://www.youtube.com/embed/Xr3pgje8SO4" title="Airstrike demonstration video"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowfullscreen loading="lazy"></iframe>
+                <button type="button" class="yt-facade" data-yt-id="Xr3pgje8SO4"
+                    aria-label="Play the Airstrike demonstration video"
+                    style="background-image:url(/images/video-thumb.webp)">
+                    <span class="yt-facade__play" aria-hidden="true"></span>
+                </button>
             </div>
         </figure>
     </section>

website/images/video-thumb.webp

@@ -28,6 +28,8 @@ header.bg-cover::before {
 
 #banner-logo {
 	background: url(images/airstrike-jet-dragon-icon.png)no-repeat;
+	background-image: image-set(url(images/airstrike-jet-dragon-icon.webp) type("image/webp"), url(images/airstrike-jet-dragon-icon.png) type("image/png"));
+	background-repeat: no-repeat;
 	background-position: 100% 30px;
 	background-size: auto 410px;
 	filter: drop-shadow(20px 20px 20px #36f03c);
@@ -787,3 +789,8 @@ section div>p {
 }
 
 #banner-text .use-disclaimer{font-size:12.5px;opacity:.8;margin-top:20px;max-width:470px;line-height:1.5;text-shadow:0 0 10px #000}
+
+.yt-facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background-size:cover;background-position:center;border-radius:inherit;display:flex;align-items:center;justify-content:center}
+.yt-facade__play{width:68px;height:48px;border-radius:14px;background:rgba(0,0,0,.65);position:relative;transition:background .2s,transform .2s}
+.yt-facade:hover .yt-facade__play,.yt-facade:focus-visible .yt-facade__play{background:var(--primary-color);transform:scale(1.05)}
+.yt-facade__play::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}