Add gradient mask fade effect to screenshot slider edges

404.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Infinity X - 404 Not Found</title>
-    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
-    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
+    <link rel="icon" href="/assets/favicon/favicon.png" type="image/png">
     <link rel="preload" href="assets/css/layout-404.css" as="style">
     <link rel="stylesheet" href="assets/css/layout-404.css">
     <link rel="preload" as="style" href="assets/css/fa-minimal.css" onload="this.onload=null;this.rel='stylesheet'">

apply-for-maintainership/index.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Apply to become an official Infinity X maintainer. Help bring optimized, customizable Android builds to more devices." />
     <title>Infinity X - Maintainership</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
     <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
     <link rel="preload" href="../assets/css/layout.css" as="style">
     <link rel="stylesheet" href="../assets/css/layout.css">

assets/css/main.css

@@ -484,6 +484,9 @@ header {
     perspective: 1500px;
     margin: 0 auto;
     max-width: 1200px;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 150px, black calc(100% - 150px), transparent 100%);
+    mask-image: linear-gradient(to right, transparent 0%, black 150px, black calc(100% - 150px), transparent 100%);
 }
 
 .swiper {
@@ -496,6 +499,9 @@ header {
     transform: translateZ(0);
     backface-visibility: hidden;
     touch-action: pan-y pinch-zoom;
+    overflow: visible;
+    padding-left: 50px;
+    padding-right: 50px;
 }
 
 @media (max-width: 480px) {
@@ -567,6 +573,15 @@ header {
     will-change: transform;
 }
 
+.swiper-slide-prev,
+.swiper-slide-next {
+    filter: brightness(0.7) blur(2px);
+}
+
+.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
+    filter: brightness(0.5) blur(8px);
+}
+
 .swiper-slide-active {
     transform: scale(1) translateZ(0);
     z-index: 10;
@@ -591,6 +606,9 @@ header {
 @media (max-width: 780px) {
     .swiper-slide { transition: transform 0.35s ease; }
     .swiper-slide:not(.swiper-slide-active) { filter: none; }
+    .swiper-slide-prev,
+    .swiper-slide-next { filter: blur(2px); }
+    .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) { filter: blur(5px); }
     .swiper-slide:not(.swiper-slide-active)::after { display: none; }
     .swiper { padding-top: 40px; padding-bottom: 40px; }
     .swiper, .swiper-wrapper, .swiper-slide, .swiper-slide img { will-change: auto !important; }

assets/js/main.js

@@ -169,7 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 swiperEl.addEventListener('touchend', removeTouching, { passive: true });
                 swiperEl.addEventListener('touchcancel', removeTouching, { passive: true });
 
-                new Swiper('.swiper', {
+                const swiper = new Swiper('.swiper', {
                     // Use lighter config on small screens to avoid heavy 3D transforms / filters
                     ...(function(){
                         const isSmall = window.matchMedia('(max-width: 780px)').matches;
@@ -235,7 +235,8 @@ document.addEventListener('DOMContentLoaded', () => {
                                 992: { slidesPerView: 'auto', spaceBetween: 30 }
                             }
                         };
-                    })()
+                    })(),
+                    keyboard: { enabled: true, onlyInViewport: false }
                 });
             };
             document.head.appendChild(script);

downloads/index.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Download official Infinity X custom ROM builds for supported Android devices. Find the latest release / flashguide / changelog for your phone." />
     <title>Infinity X - Download</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
     <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
     <link rel="preconnect" href="https://api.github.com">
     <link rel="preconnect" href="https://raw.githubusercontent.com">

faq/index.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Infinity X - FAQ</title>
     <meta name="description" content="Frequently Asked Questions about Infinity X custom ROM." />
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
     <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
     <link rel="preload" href="../assets/css/layout.css" as="style">
     <link rel="stylesheet" href="../assets/css/layout.css">
@@ -43,7 +46,7 @@ <h3>Which devices are supported?</h3>
 
                 <div class="faq-item">
                     <h3>Is Project Infinity X free?</h3>
-                    <p>Yes! Project Infinity X is completely free and open-source as per GPL v3 compliance. We believe in providing quality software without any cost barriers.</p>
+                    <p>Yes! Project Infinity X is completely free and open-source as per "Apache-2.0" compliance. We believe in providing quality software without any cost barriers.</p>
                 </div>
 
                 <div class="faq-item">

index.html

@@ -6,8 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Infinity X</title>
   <meta name="description" content="Infinity X is an AOSP custom ROM that brings refined performance, stunning visuals and endless customization to your Android device." />
-  <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
-  <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+        <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+        <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
+        <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
 
   <!-- Critical above-the-fold CSS inlined to avoid FOUC while keeping full stylesheet async -->
   <link rel="preload" href="assets/css/critical.css" as="style">

legal/index.html

@@ -3,9 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Legal information for Infinity X: open-source licensing (GPLv3), compliance policies, contributor requirements, and acceptable use guidelines." />
+    <meta name="description" content="Legal information for Infinity X: licensing, compliance policies, contributor requirements, and acceptable use guidelines." />
     <title>Infinity X - Legal</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
     <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
     <link rel="preload" href="../assets/css/layout.css" as="style">
     <link rel="stylesheet" href="../assets/css/layout.css">
@@ -24,7 +27,7 @@
             <h2>Legal Compliance & Licensing</h2>
             <div class="legal-content">
                 <h3>Open-Source Licensing</h3>
-                <p>Project Infinity X is released under the GNU General Public License version 3 (GPLv3). This means:</p>
+                <p>Project Infinity X includes code originating from AOSP and is distributed with attribution to the Apache License 2.0 (Apache-2.0). This means:</p>
                 <ul>
                     <li>You have the freedom to run the software for any purpose</li>
                     <li>You can study how the software works and modify it</li>
@@ -34,7 +37,7 @@ <h3>Open-Source Licensing</h3>
                 <h3>Compliance Requirements</h3>
                 <p>All maintainers and contributors must adhere to:</p>
                 <ul>
-                    <li>Full GPLv3 compliance for all distributed software</li>
+                    <li>Ensure distributed resources show proper authorship and note reasons for any commit reverts</li>
                     <li>Complete pushes of codes used</li>
                     <li>No enforcements of private exclusivity</li>
                     <li>Timely release of kernel sources for all device builds</li>