Light cosmetic changes

Author: ChristopherMarais

public/css/style.css

@@ -14,6 +14,7 @@
     --font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
     --transition-speed: 0.3s;
     --color-scheme: light;
+    --footer-text-color: #888;
 }
 
 /* Basic Reset */
@@ -22,6 +23,21 @@
     padding: 0;
     box-sizing: border-box;
 }
+
+/* text weblinks */
+main a {
+    color: grey;
+  }
+  
+  main a:visited {
+    color: rgb(60, 60, 60);
+  }
+  
+  main a:hover,
+  main a:active {
+    color: rgb(60, 60, 60);
+  }
+
 
 /* Body Styling */
 body {

src/layouts/Layout.astro

@@ -66,7 +66,7 @@ const { title, bodyClass, activePage } = Astro.props;
             </li>
           </ul>
         </nav>
-        <p>&copy; 2025 G. Christopher Marais. All rights reserved.</p>
+        <p style="color: var(--footer-text-color)">&copy; 2025 G. Christopher Marais. All rights reserved.</p>
       </div>
     </footer>
   </body>

src/pages/gallery/[page].astro

@@ -28,7 +28,28 @@ const images = files.slice(start, start + perPage);
 <Layout title={`Gallery - Page ${currentPage}`} activePage="gallery">
   <h1>My Photos - Page {currentPage}</h1>
   <p>Here is a collection of pictures I have taken over the years to record my memories, experiences and travels.</p>
-  
+  <br>
+  <br>
+  <nav class="pagination">
+    {currentPage > 1 && (
+      <a href={`/gallery/${currentPage - 1}`}>&laquo; Previous</a>
+    )}
+    {Array.from({ length: totalPages }, (_, i) => {
+      const pageNum = i + 1;
+      return (
+        <a
+          href={`/gallery/${pageNum}`}
+          class={pageNum === currentPage ? 'active' : ''}
+        >
+          {pageNum}
+        </a>
+      );
+    })}
+    {currentPage < totalPages && (
+      <a href={`/gallery/${currentPage + 1}`}>Next &raquo;</a>
+    )}
+  </nav>
+
   <div class="gallery-full">
     {images.map((image) => (
       <img src={`/images/${image}`} alt="Gallery image" loading="lazy" />

src/pages/index.astro

@@ -10,11 +10,15 @@ const activePage = "home";
 <Layout {title} {bodyClass} {activePage}>
   <section class="welcome-message" style="text-align: center;">
     <h1>Hello and Welcome!</h1>
+    <br>
+    <br>
     <img
     src="/page_images/profile_picture.jpg"
     alt="G. Christopher Marais"
     class="profile-image"
     />
+    <br>
+    <br>
     <p class="lead">
 
       I'm Christopher Marais, and this is my little corner of the web where I share some of my projects and ideas.