finishing touches

changed icon to fit new style
minor layout changes
cleaned some stuff up

index.html

@@ -2,7 +2,7 @@
 
 <header>
     <link rel = "stylesheet" href = "pages\mainpage.css">
-    <link rel = "icon" href = "..\images\Favicon.ico">
+    <link rel = "icon" href = "images\Icon.ico">
 
     <meta charset="UTF-8">
 
@@ -41,10 +41,10 @@
     </div>
 
     <div id = "programGallery">
-        <a href = "pages/gallery/Cat_tower_defense/cat-tower-defense.html"  class = "galleryLink">
-            <img src = ""  class = "galleryImage">
-        </a>
         <p class = "galleryTitle"></p>
+        <a href = "pages/gallery/Cat_tower_defense/cat-tower-defense.html"  class = "galleryLink">
+            <img src = ""  class = "galleryImage" style = "">
+        </a>
         <p class = "galleryCaption"></p>
         <button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
         <button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>

pages/gallery-index.js

@@ -1,8 +1,9 @@
 export class slide{
-    constructor(title, caption, image, link){
+    constructor(title, caption, image, imagePos, link){
         this.title = title;
         this.caption = caption;
         this.image = image;
+        this.imagePos = imagePos;
         this.link = link;
     }
 }
@@ -14,6 +15,7 @@ export var slides = [
         environment.<br><br>This system was my introduction to Unreal Engine and mainly used its \"Blueprint\" visual language, however I later used C++ to try and add my own physics \
         to it.", 
         "./pages/gallery/epq-project/projectHeaderImage.png", 
+        "object-position: center;",
         "./pages/gallery/epq-project/epq-project.html"
         ),
     new slide(
@@ -21,6 +23,7 @@ export var slides = [
         "A project I created with a friend to help us gain a better understanding of pygame. <br><br> This was a basic tower defence game but featured a fully scalable and customisable \
         level system allowing users to add their own levels and towers. One of my earliest projects, this is something I have revisited and improved upon quite a few times.", 
         "./pages/gallery/cat-tower-defence/projectHeaderImage.png", 
+        "object-position: top;",
         "./pages/gallery/cat-tower-defence/cat-tower-defence.html"
         ),
     new slide(
@@ -29,6 +32,7 @@ export var slides = [
         a graphical interface that allowed the user to draw, move and label rooms as well as set the painting and carpeting price which could later be used to calculate \
         full decoration costs.", 
         "./pages/gallery/room-builder/projectHeaderImage.png", 
+        "object-position: top;",
         "./pages/gallery/room-builder/room-builder.html"
         )
 ];  

pages/gallery.js

@@ -24,6 +24,7 @@ function updateSlide(){
     document.querySelector(".galleryCaption").innerHTML = slides[currentSlide].caption;
     document.querySelector(".galleryLink").href = slides[currentSlide].link;
     document.querySelector(".galleryImage").src = slides[currentSlide].image;
+    document.querySelector(".galleryImage").style = slides[currentSlide].imagePos;
 
 }
 

pages/gallery/blog-post-default.css

@@ -57,6 +57,19 @@ iframe{
 
 
 @media (orientation:portrait){
+    body{
+        /*
+        touch-action: none;
+        touch-action: pan-y;
+        as well as disabling double tap, disables zoom which some people with bad eyes need, use something else
+        */
+        touch-action: manipulation; /*stops double tap zoom*/
+
+        -webkit-text-size-adjust: none; /*stops browsers messing with text size*/
+        -moz-text-size-adjust: none;
+        -ms-text-size-adjust: none;
+        text-size-adjust: none;
+    }
 
     h1{
         font-size: 10vw;
@@ -74,6 +87,32 @@ iframe{
 
     }
 
+    h2{
+        font-size: clamp(25px, 3.6vw, 50px);
+        padding: 0;
+    }
+
+    .textBox{
+        font-size: clamp(25px, 2vw, 50px);
+        padding: 15px;
+        margin-bottom: 5vh;
+    }
+
+    .backButton{
+        font-size: clamp(25px, 2.5vw, 50px);
+    }
+
+    .videoContainer{
+        text-align: center;
+    }
+    
+    iframe{
+        border: 2px solid #ffd256;
+        
+        width: 90vw;
+        height: 50vw;
+    }
+
 }
 
 

pages/mainpage.css

@@ -26,6 +26,11 @@ button:focus {
     outline: none;
 }
 
+a:link, a:visited{
+    color: #ffd256;
+    text-decoration: none;
+}
+
 h1{ 
     font-size: clamp(1.2rem, 4vw, 4rem);
 
@@ -163,7 +168,6 @@ h1{
 }
 
 #socialBar{
-    position: fixed;
     display: flex;
     margin-left: 1vh;
     margin-bottom: 1vh;   
@@ -183,9 +187,9 @@ h1{
         touch-action: pan-y;
         as well as disabling double tap, disables zoom which some people with bad eyes need, use something else
         */
-        touch-action: manipulation;
+        touch-action: manipulation; /*stops double tap zoom*/
 
-        -webkit-text-size-adjust: none;
+        -webkit-text-size-adjust: none; /*stops browsers messing with text size*/
         -moz-text-size-adjust: none;
         -ms-text-size-adjust: none;
         text-size-adjust: none;
@@ -211,62 +215,51 @@ h1{
         padding: 0;
         margin-top: 3vh;
         margin-bottom: 3vh;
-        margin-left: 5px;
-        margin-right: 5px;
+        margin-left: 15px;
+        margin-right: 15px;
 
         min-width: inherit;
         max-width: inherit;
 
-        border-radius: 0;
+        border: 0;
 
         text-align: left;
         font-size: clamp(25px, 3.6vw, 50px);
     }
 
     .profileImage{
-        margin: 0;
-        width: 100%; 
+        width: 90%; 
+    }
 
-        border: none;
-        border-radius: 0;
-        border-top:  5px solid #ffd256;
-        border-bottom:  5px solid #ffd256;
-
-        padding-left: 0;
-        padding-right: 0;
+    .orangeBorder{
+        border: 5px solid #ffd256;
+        border-radius: 10px;
     }
 
     #galleryHeader{
-        margin-left: 0; 
-        margin-right: 0;
-        border-radius: 0;
+        margin-left: 15px; 
+        margin-right: 15px;
         font-size: clamp(2rem, 4vw, 5rem);
     }
 
     #programGallery{
-        width: 100%;
+        width: 92vw;
+     
+        margin-left: 4vw;
+        margin-right: 4vw;
 
-        
-        margin-left: 0;
-        margin-right: 0;
-
-        border-bottom: 5px solid #ffd256;
-        border-top: 5px solid #ffd256;
+        border: 5px solid #ffd256;
+        border-radius: 10px;
     }
 
     .galleryImage{ /*all images should be 700x700*/
         grid-column: 1/13;
         grid-row: 2/7;
 
-        padding-left: 0;
-        padding-right: 0;
         border-radius: 0;
-
         border: 5px solid #ffd256;
         border-left: 0;
         border-right: 0;
-
-        object-position: center;
     
         object-fit: cover;