Adjust button styles

Signed-off-by: Fred Boniface <fred@fjla.uk>

contact.php

@@ -14,9 +14,31 @@
       <div class="page-main-content">
         <a href="/downloads/vcard.vcf" class="download-link">Add me to your contacts</a>
         <h2>Find me elsewhere</h2>
-        <a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">Facebook</a>
+          <div class="social-links">
-        <a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">GitHub</a>
+            <a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
-        <a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">500px</a>
+              <picture>
+                <source media="(max-width: 600px)" srcset="/images/social-icons/fb_blue_58.png" type="image/png">
+                <source srcset="/images/social-icons/fb_blue_144.png" type="image/png">
+                <img src="/images/social-icons/fb_blue_144.png" alt="Facebook Logo">
+              </picture>
+            </a>
+            <a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
+              <picture>
+                <source media="(max-width: 400px)" srcset="/images/social-icons/gh_white_64.png" type="image/png">
+                <img src="/images/social-icons/gh_white_120.png" alt="GitHub Logo">
+              </picture>
+            </a>
+            <a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
+              <picture>
+                <source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
+                <source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
+                <source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.png" type="image/png">
+                <source srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
+                <source srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
+                <img src="/images/social-icons/500px_seek_114.png" alt="500px Logo">
+              </picture>
+            </a>
+          </div>
 
       </div>
 

css/styles.css

@@ -16,6 +16,7 @@ body {
   width: 95%;
   overflow: hidden;
   margin: auto;
+  margin-bottom: 20px;
 }
 
 .title-image img {
@@ -39,14 +40,22 @@ body {
   padding-top: 45px;
 }
 
-.download-link {
+.social-links img {
-  background-color: #444444;
+  max-width: 58px;
-  color: #f1f1f1;
+  padding: 10px;
-  border: 0px;
+}
+
+a.download-link {
+  text-decoration: none;
+  color: #242121;
+  background-color: #d1caca;
+  padding: 10px;
   border-radius: 10px;
   text-align: center;
+  margin: 7px;
 }
 
+
 footer {
   background-color: rgb(61, 61, 61);
   color: #eeeeee;
@@ -146,4 +155,7 @@ footer {
   /*Provice space for top menu*/
   .page-title {padding-top: 100px}
 
+  /*Increase social link image size*/
+  .social-links img {max-width: 75px;}
+
 }

error-pages/403.php

@@ -10,6 +10,9 @@
     <h1 class="page-title">Access Denied</h1>
       <div class="title-image">
         <picture>
+          <source media="(max-width: 1000px)" srcset="/images/error-pages/denied_200.jxl" type="image/jxl">
+          <source media="(max-width: 1000px)" srcset="/images/error-pages/denied_200.webp" type="image/webp">
+          <source media="(max-width: 1000px)" srcset="/images/error-pages/denied_200.png" type="image/png">
           <source srcset="/images/error-pages/denied.jxl" type="image/jxl">
           <source srcset="/images/error-pages/denied.webp" type="image/webp">
           <img src="/images/error-pages/denied.png" alt="Denied">

error-pages/404.php

@@ -10,6 +10,9 @@
     <h1 class="page-title">Not Found</h1>
     <div class="title-image">
         <picture>
+          <source media="(max-width: 1000px)" srcset="/images/error-pages/not-found_200.jxl" type="image/jxl">
+          <source media="(max-width: 1000px)" srcset="/images/error-pages/not-found_200.webp" type="image/webp">
+          <source media="(max-width: 1000px)" srcset="/images/error-pages/not-found_200.png" type="image/png">
           <source srcset="/images/error-pages/not-found.jxl" type="image/jxl">
           <source srcset="/images/error-pages/not-found.webp" type="image/webp">
           <img src="/images/error-pages/not-found.png" alt="Not Found">

error-pages/50x.html

@@ -13,9 +13,12 @@
     <h1 class="page-title">Server Error</h1>
     <div class="title-image">
       <picture>
-        <source srcset="/images/error-pages/denied.jxl">
+        <source media="(max-width: 1000px)" srcset="/images/error-pages/denied_200.jxl" type="image/jxl">
-        <source srcset="/images/error-pages/denied.webp">
+        <source media="(max-width: 1000px)" srcset="/images/error-pages/denied_200.webp" type="image/webp">
-        <img src="/images/error-pages/denied.png" alt="Server Error">
+        <source media="(max-width: 1000px)" srcset="/images/error-pages/denied_200.png" type="image/png">
+        <source srcset="/images/error-pages/denied.jxl" type="image/jxl">
+        <source srcset="/images/error-pages/denied.webp" type="image/webp">
+        <img src="/images/error-pages/denied.png" alt="Denied">
       </picture>
     </div>
       <div class="page-main-content">

images/navbar/home.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="26" height="26" viewBox="0 0 24 24">
-   <path fill="#ffffda" d="M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z" />
-</svg>