optimize for apple touch

optimize for mobile

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Exploring open-source, privacy, and decentralization - a commitment to the small and slow web.">
+    <meta name="HandheldFriendly" content="true">
     <title>Classic Web - Embracing Open-Source and Privacy</title> <!-- Improved title -->
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <link type="text/plain" rel="author" href="/humans.txt">
@@ -23,6 +24,7 @@
     </script>
     <link rel="icon" sizes="192x192" href="/android-chrome-192x192.png">
     <link rel="icon" sizes="512x512" href="/android-chrome-512x512.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <style>
         /* CSS for mobile, tablet, and print optimization */
         @media screen and (max-width: 600px) {
@@ -77,63 +79,63 @@
 	    <!-- Carbon Badge -->
 	    <p>
 		<a href="https://www.websitecarbon.com/website/classic-zoemp-be/">
-		    <img src="https://img.shields.io/badge/Carbon_Rating-A%2B-green.png" alt="Carbon Rating A+" style="width:116px; height:20px;" loading="lazy">
+		    <img src="/Carbon_Rating-A%2B-green.png" alt="Carbon Rating A+" style="width:116px; height:20px;" loading="lazy">
 		</a>
 	    </p>
 
 	    <!-- HTML Validator Badge -->
 	    <p>
 		<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fclassic.zoemp.be%2F">
-		    <img style="border:0; width:88px; height:31px;" src="https://jigsaw.w3.org/css-validator/images/vcss" alt="Valid HTML Badge" loading="lazy">
+		    <img style="border:0; width:88px; height:31px;" src="vcss.gif" alt="Valid HTML Badge" loading="lazy">
 		</a>
 	    </p>
 
 	    <!-- CSS Validator Badge -->
 	    <p>
 		<a href="http://jigsaw.w3.org/css-validator/validator?lang=en&profile=css3svg&uri=https%3A%2F%2Fclassic.zoemp.be&usermedium=all&vextwarning=&warning=1">
-		    <img src="https://img.shields.io/badge/CSS-valid-green.png" alt="Valid CSS Badge" style="width:70px; height:20px;" loading="lazy">
+		    <img src="/CSS-valid-green.png" alt="Valid CSS Badge" style="width:70px; height:20px;" loading="lazy">
 		</a>
 	    </p>
 
 	    <!-- Pingdom Validator Badge -->
 	    <p>
 		<a href="https://tools.pingdom.com/#632ad94444400000">
-		    <img src="https://img.shields.io/badge/pingdom-valid-blue.png" alt="Pingdom Validation Badge" style="width:94px; height:20px;" loading="lazy">
+		    <img src="/pingdom-valid-blue.png" alt="Pingdom Validation Badge" style="width:94px; height:20px;" loading="lazy">
 		</a>
 	    </p>
 
 	    <!-- WebPageTest Validator Badge -->
 	    <p>
 		<a href="https://www.webpagetest.org/result/231227_AiDcKA_9CY/2/experiments/#Usable">
-		    <img src="https://img.shields.io/badge/WebPageTest-valid-red.png" alt="WebPageTest Validation Badge" style="width:122px; height:20px;" loading="lazy">
+		    <img src="/WebPageTest-valid-red.png" alt="WebPageTest Validation Badge" style="width:122px; height:20px;" loading="lazy">
 		</a>
 	    </p>
 
 	    <!-- Big Tech Detective Badge -->
 	    <p>
 		<a href="https://bigtechdetective.net/">
-		    <img src="https://img.shields.io/badge/Big_Tech-free-purple.png" alt="Big Tech-free" style="width:88px; height:20px;" loading="lazy">
+		    <img src="/Big_Tech-free-purple.png" alt="Big Tech-free" style="width:88px; height:20px;" loading="lazy">
 		</a>
 	    </p>
 
 	    <!-- WebAIM Validation Badge -->
 	    <p>
 		<a href="https://wave.webaim.org/report#/https://classic.zoemp.be">
-		    <img src="https://img.shields.io/badge/WebAIM-validated-green.png" alt="WebAIM Validated" style="width:116px; height:20px;">
+		    <img src="/WebAIM-validated-green.png" alt="WebAIM Validated" style="width:116px; height:20px;">
 		</a>
 	    </p>
 
 	    <!-- Nibbler Test Badge -->
 	    <p>
 		<a href="https://nibbler.insites.com/en_US/reports/classic.zoemp.be">
-		    <img src="https://img.shields.io/badge/Nibbler-tested-orange.png" alt="Nibbler Tested" style="width:94px; height:20px;">
+		    <img src="/Nibbler-tested-orange.png" alt="Nibbler Tested" style="width:94px; height:20px;">
 		</a>
 	    </p> 
 
 	    <!-- Lighthouse (PageSpeed) Test Badge -->
 	    <p>
 		<a href="https://pagespeed.web.dev/analysis/https-classic-zoemp-be/07mbtp60gc?form_factor=mobile">
-		    <img src="https://img.shields.io/badge/Lighthouse-tested-green.png" alt="Lighthouse Tested" style="width:116px; height:20px;" loading="lazy">
+		    <img src="/Lighthouse-tested-green.png" alt="Lighthouse Tested" style="width:116px; height:20px;" loading="lazy">
 		</a>
 	    </p>
     </main>