Fix BASE_URL paths for images, CSS, and navigation, also update CSS file

Author: ColmN-Dev

project/Planning Analysis Sheet.pdf

@@ -5,5 +5,5 @@ import { defineConfig } from 'astro/config';
 export default defineConfig({
 
     site: 'https://Silv3rP.github.io',
-    base: '/project/',
+    base: '/project',
 });

project/astro.config.mjs

@@ -1,24 +1,17 @@
-
-/* Code I did not know about was found on W3Schools and other tutorial sites */
-
-
-/* reset box sizing */
 *{
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
 }
 
-/* main layout - black background with flexbox */
 body, html{
     background-color: black;
     min-height: 100vh;
-    margin: 0;
-    padding: 0;
     display: flex;
     flex-direction: column;
     color: white;
 }
 
-/* header with yellow background */
 header {
     background-color: yellow;
     padding: 10px;
@@ -29,18 +22,15 @@ header {
     justify-content: center;
     align-items: center;   
     position: relative; 
-    
 }
 
-/* logo positioned on the left */
 .logo{
     height: 50px;
     margin-right: 15px;
     position: absolute;
     left: 10px;
 }
 
-/* sticky nav bar */
 nav{
     margin-top: 20px;
     text-align: center;
@@ -52,7 +42,6 @@ nav{
     border: solid black 2px;
 }
 
-/* nav links styling */
 nav a{ 
     display: inline-block;
     text-decoration: none;
@@ -61,27 +50,23 @@ nav a{
     background-color: yellow;
     font-weight: bold;
     font-size: 1.5em;
-    padding:  15px;
+    padding: 15px;
     border-radius: 5px;
     transition: background-color 0.5s, color 0.5s;
-    
 }
 
-/* hover effect for nav links */
 nav a:hover{
     background-color: black;
     color: yellow;
     text-decoration: underline;
 }
 
-/* main content area */
 main{
     flex: 1;
     padding: 2rem;
 }
 
-/* images centered and responsive */
-.img{
+img{
     width: 50%;
     height: auto;
     display: block;
@@ -91,33 +76,41 @@ main{
 
 .gallery-images{
     display: flex;
-    flex-wrap: nowrap;
-    gap: 5em;
-    width: 25%;
+    flex-wrap: wrap;
+    gap: 2em;
+    width: 100%;
+    justify-content: center;
+}
 
+.gallery-images img {
+    max-width: 100%;
+    height: auto;
+}
 
+iframe{
+    display: block;
+    margin: 20px auto;
+    width: 560px;
+    max-width: 100%;
+    height: 315px;
 }
 
-/* main heading */
 h1 {
     font-size: 3em;
-    margin: 0;
     padding: 20px;
     color: black;
     background-color: yellow;
     font-style: italic;
     text-align: center;
 }
 
-/* paragraph text */
 p{
     font-size: 1.2em;
     line-height: 1.6;
     margin-top: 20px;
     text-align: center;
 }
 
-/* h2 subheading */
 h2 {
     font-size: 2em;
     color: white;
@@ -126,8 +119,7 @@ h2 {
     margin-bottom: 20px;
 }
 
-/* ordered list styling */
-.ol {
+ol {
     background-color: yellow;
     color: black;
     padding: 20px 40px;
@@ -137,22 +129,20 @@ h2 {
     line-height: 1.8;
 }
 
-/* table styling */
-.table {
+table {
     width: 50%;
     border-collapse: separate;
-    border-spacing: 10px 10px;
+    border-spacing: 10px;
     background-color: yellow;
     color: black;
     margin: auto;
 }
 
-.table th,
-.table td {
+table th,
+table td {
     text-align: left;
 }
 
-/*form submission css*/
 form {
     background-color: yellow;
     color: black;
@@ -170,28 +160,29 @@ form {
     padding: 10px 20px;
     font-size: 1em;
     border-radius: 5px;
+    cursor: pointer;
 }
 
 .submit-button:hover {
     background-color: red;
     color: black;
 }
 
-/* footer at bottom */
 footer{
-    bottom: 0;
     width: 100%;
     padding: 10px;
     background-color: yellow;
     font-style: italic;
     font-size: 1.5em;
     text-align: center;
     color: black;
-    display: block;
-    
 }
 
-/* hover effect for footer links */
+footer a{
+    color: black;
+    text-decoration: none;
+}
+
 footer a:hover {
     background-color: black;
     color: yellow;
@@ -200,7 +191,6 @@ footer a:hover {
     border-radius: 5px;
 }
 
-/* laptop and smaller screens */
 @media (max-width: 1024px) {
     .logo {
         height: 45px;
@@ -215,12 +205,11 @@ footer a:hover {
         font-size: 2.5em;
     }
 
-    .img {
+    img {
         width: 70%;
     }
 }
 
-/* tablets */
 @media (max-width: 768px) {
     .logo {
         height: 35px;
@@ -248,29 +237,44 @@ footer a:hover {
         font-size: 1em;
     }
 
-    .img {
+    img {
         width: 90%;
     }
 
     main {
         padding: 1rem;
     }
+    
+    .gallery-images {
+        flex-direction: column;
+        align-items: center;
+        gap: 1em;
+    }
+    
+    iframe {
+        width: 100%;
+    }
+    
+    table {
+        width: 100%;
+        font-size: 0.9em;
+    }
 }
 
-/* mobile phones */
 @media (max-width: 480px) {
     nav a {
         font-size: 1em;
         padding: 8px;
         display: block;
-        margin: 5px 0;
+        margin: 5px auto;
+        width: 90%;
     }
 
     h1 {
         font-size: 1.5em;
     }
 
-    .img {
+    img {
         width: 100%;
     }
 }

project/public/css/styles.css

@@ -3,8 +3,4 @@
 
 ---
 
-<picture class="img">
-  <source srcset="images/logo.png" media="(max-width: 400px)" />
-  <img src="images/logo.png" alt="Banner Image" style="width: 100%; height: auto;" />
-</picture>
-<br>
+  <img src={`${import.meta.env.BASE_URL}/images/logo.png`} alt="Banner Image"/>

project/src/components/banner.astro

@@ -2,13 +2,13 @@
 
 ---
 <footer>
-        <a href="./">Home</a>
+        <a href={`${import.meta.env.BASE_URL}/`}>Home</a>
 
-        <a href="./about">About</a>
+        <a href={`${import.meta.env.BASE_URL}/about`}>About</a>
 
-        <a href="./gallery">Gallery</a>
+        <a href={`${import.meta.env.BASE_URL}/gallery`}>Gallery</a>
 
-        <a href="./contact">Contact</a>
+        <a href={`${import.meta.env.BASE_URL}/contact`}>Contact</a>
   <p>&copy; 2025 Saykan Combat. All rights reserved.</p>
   <p>Designed by C</p>
   <strong><a href="mailto:example@example.com">Contact Designer</a></strong>

project/src/components/footer.astro

@@ -6,8 +6,8 @@
 
 <header>
 <picture class="logo">
-  <source srcset="images/logo.png" media="(max-width: 400px)" />
-  <img src="images/logo.png" alt="Banner Image" style="width: 25%; height: auto;" />
+  <source srcset={`${import.meta.env.BASE_URL}/images/logo.png`} media="(max-width: 400px)" />
+  <img src={`${import.meta.env.BASE_URL}/images/logo.png`} alt="Banner Image" style="width: 25%; height: auto;" />
 </picture>
   <h1>SAYKAN COMBAT</h1>
   <br>

project/src/components/header.astro

@@ -4,8 +4,8 @@
 ---
 
 <nav>
-        <a href="./">Home</a>
-        <a href="./about">About</a>
-        <a href="./gallery">Gallery</a>
-        <a href="./contact">Contact</a>
+        <a href={`${import.meta.env.BASE_URL}/`}>Home</a>
+        <a href={`${import.meta.env.BASE_URL}/about`}>About</a>
+        <a href={`${import.meta.env.BASE_URL}/gallery`}>Gallery</a>
+        <a href={`${import.meta.env.BASE_URL}/contact`}>Contact</a>
     </nav>

project/src/components/nav.astro

@@ -4,13 +4,7 @@ import Footer from '../components/footer.astro';
 import Banner from '../components/banner.astro';
 import Nav from '../components/nav.astro';
 
-let baseURL = "";
-const isProd = import.meta.env.PROD; 
-if (isProd) {
-	baseURL = import.meta.env.SITE + import.meta.env.BASE_URL;
-} else {
-	baseURL = import.meta.env.BASE_URL;
-}
+const baseURL = import.meta.env.BASE_URL;
 ---
 
 <!DOCTYPE html>
@@ -20,7 +14,7 @@ if (isProd) {
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Saykan Combat</title>
   <base href={baseURL} />
-  <link rel="stylesheet" href="./css/styles.css" />
+  <link rel="stylesheet" href={`${import.meta.env.BASE_URL}/css/styles.css`} />
 </head>
 <body>
   <Header />