From 9722c3eb495341f34362df5ea0397f41b43aba7e Mon Sep 17 00:00:00 2001
From: "fred.boniface" <fred@fjla.uk>
Date: Sat, 29 Oct 2022 21:09:16 +0100
Subject: [PATCH] Attempt

---
 page-blocks/head-img.php |  4 ++--
 page-blocks/head.php     |  2 +-
 style/new_style.css      | 16 ++++++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/page-blocks/head-img.php b/page-blocks/head-img.php
index 7a5e70b..e1f9f7c 100644
--- a/page-blocks/head-img.php
+++ b/page-blocks/head-img.php
@@ -1,4 +1,4 @@
-    <div class="header_image" id="header_index"> <!-- id needs to match $page_title and CSS adjusting -->
+    <div class="header_image" id="<?php echo $page_title; ?>">
       <div id="page_title" class="hide_micro">
 
 <?php 
@@ -6,6 +6,6 @@ global $page_title;
 if (strcmp($page_title, 'home') == 0){
   include "./php/head-img-face.php";
 } ?>
-        <h1><?php echo ucwords($page_title); ?></h1> <!-- Apply Title Case To This Output -->
+        <h1><?php echo ucwords($page_title); ?></h1>
       </div>
     </div>
\ No newline at end of file
diff --git a/page-blocks/head.php b/page-blocks/head.php
index e1e487b..7aadda0 100644
--- a/page-blocks/head.php
+++ b/page-blocks/head.php
@@ -4,5 +4,5 @@
     <meta name="author" content="Frederick Boniface">
     <link rel="icon" type="image/png" href="/images/favicon.png">
     <link rel="stylesheet" href="/style/new_style.css">
-    <title><?php echo $page_title ?></title> <!-- Apply Title Case To This Output -->
+    <title><?php echo ucwords($page_title); ?></title> <!-- Apply Title Case To This Output -->
   </head>
\ No newline at end of file
diff --git a/style/new_style.css b/style/new_style.css
index ef852de..6a2f4b5 100644
--- a/style/new_style.css
+++ b/style/new_style.css
@@ -59,14 +59,14 @@ body {
     position: sticky;
     top: -145px;
 }
-#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats */
-@media(min-width:  50px){#header_index{background-image:url("/images/headers/index/300.webp")}}
-@media(min-width: 301px){#header_index{background-image:url("/images/headers/index/500.webp")}}
-@media(min-width: 501px){#header_index{background-image:url("/images/headers/index/800.webp")}}
-@media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}}
-@media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}}
-@media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}}
-@media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}}
+#home{background-color: #a04911} /* Try using image-set() here to offer different formats */
+@media(min-width:  50px){#home{background-image:url("/images/headers/index/300.webp")}}
+@media(min-width: 301px){#home{background-image:url("/images/headers/index/500.webp")}}
+@media(min-width: 501px){#home{background-image:url("/images/headers/index/800.webp")}}
+@media(min-width: 801px){#home{background-image:url("/images/headers/index/1024.webp")}}
+@media(min-width:1025px){#home{background-image:url("/images/headers/index/1920.webp")}}
+@media(min-width:1921px){#home{background-image:url("/images/headers/index/2800.webp")}}
+@media(min-width:2801px){#home{background-image:url("/images/headers/index/4096.webp")}}
 #header_face {
     display: flex;
     position: absolute;