integrates mobile css into the main website

index.html

@@ -28,7 +28,7 @@
         
     </div>
     <div style = "text-align: center;">
-        <div class = "profileImageContainer orangeBorder" style = "margin: 0 auto;">
+        <div class = "profileImageContainer orangeBorder">
             <img src = "images/Profile3.png" alt = "me" class = "profileImage">
         </div>
     </div>
@@ -60,14 +60,14 @@
 
         <div class = "galleryPopup">
             <img src = "./pages/gallery/epq-project/projectHeaderImage.png"  class = "popupImage" style = "object-position: center;">
-            <div class = "popupTextContainer">
+            <a class = "popupTextContainer galleryLink" href = "./pages/gallery/epq-project/epq-project.html">
                 <p class = "galleryTitle">VR physics engine</p>
                 
                 <p class = "galleryCaption">A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based
                     environment. 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.
                 </p>
-            </div>
+            </a>
         </div>
 
 
@@ -80,13 +80,13 @@
 
         <div class = "galleryPopup">
             <img src = "./pages/gallery/mind-map/projectHeaderImage.png"  class = "popupImage" style = "object-position: center;">
-            <div class = "popupTextContainer">
+            <a class = "popupTextContainer galleryLink" href = "./pages/gallery/mind-map/mind-map.html">
                 <p class = "galleryTitle">Unity based Mind Map software</p>
                 
                 <p class = "galleryCaption">A project done as my final piece for my A-level computer science course. <br> <br> This was a program designed to create mind maps, it could have nodes made, and linked, have images added and 
                     included a pen tool to allow the user to draw notes on top of the mind maps. It also had a fully functional undo and redo system and the ability to save and load files.
                 </p>
-            </div>
+            </a>
         </div>
 
 
@@ -99,13 +99,13 @@
 
         <div class = "galleryPopup">
             <img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png"  class = "popupImage" style = "object-position: center;">
-            <div class = "popupTextContainer">
+            <a class = "popupTextContainer galleryLink" href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html">
                 <p class = "galleryTitle">Tower defence game</p>
                 
                 <p class = "galleryCaption">One of my first projects, this was created with a friend to help us gain a better understanding of python. <br><br> This was a basic tower defence game but featured a fully scalable 
                     level design system.
                 </p>
-            </div>
+            </a>
         </div>
 
 
@@ -118,14 +118,14 @@
 
         <div class = "galleryPopup">
             <img src = "./pages/gallery/aardvark-work/projectHeaderImage.png"  class = "popupImage" style = "object-position: center;">
-            <div class = "popupTextContainer">
+            <a class = "popupTextContainer galleryLink" href = "./pages/gallery/aardvark-work/aardvark-work.html">
                 <p class = "galleryTitle">Work on Aardvark XR</p>
                 
                 <p class = "galleryCaption">Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users VR experience.<br><br>
                     Over the course of its release I have attended its first hackathon and continued to support it long afterwards, having worked both on my own and with other developers to create apps 
                     for the system to help it gain traction.
                 </p>
-            </div>
+            </a>
         </div>
 
     </div>

pages/basic.css

@@ -28,15 +28,15 @@ button:focus {
     outline: none;
 }
 
-a:link:not(.galleryLink), a:visited:not(.galleryLink){
+a:not(.galleryLink), a:visited:not(.galleryLink){
     color: #ffd256;
     border-radius: 2px;
     transition: background-color 0.5s, color 0.5s;
 }
 
-.galleryLink{
+.galleryLink{ /*class to be given to any link that doesnt want fancy yellow backgrounds on hover*/
     text-decoration: none;
-    color:#ffd256;
+    color:#181818;
 }
 
 h1{ 

pages/mainpage.css

@@ -27,6 +27,7 @@
     width: 30vw; 
     height: 30vw; 
     text-align: center;
+    margin: 0 auto;
 }
 
 .profileImage{
@@ -147,5 +148,89 @@
     margin-right: 27vw;
 }
 
+@media (orientation:portrait){
+    #Title{ 
+        font-size: 10vw;
+        margin-right: 50vw;
+    }
+    
+    .textBox{
+        font-size: 0.7rem;
+        margin-left: 2vw;
+        margin-right: 2vw;
+    }
+
+    .profileImageContainer{
+        margin: 2vh;
+        width: auto;
+        height: auto;
+    }
+    
+    .profileImage{
+        border-radius: 1vw; 
+    }
+
+    #galleryHeader{
+        margin-left: 2vw; 
+        margin-right: 2vw;
+        font-size: 0.7rem;
+    } 
+    
+    .gallery{
+        margin-left: 2vw;
+        margin-right: 2vw;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        height: 100vw;
+    }
+    
+    .galleryItem{
+        width: 20vw;
+        height: 20vw;
+        margin-bottom: 3vw;;
+    }
+    
+    .galleryPopup{
+        visibility: visible;
+        opacity: 1;
+        z-index: 0;
+        position: static;
+        background-color: transparent;
+        color: #ffd256;
+        width: 73.5vw;
+        height: 20vw;
+        margin-top: 0vh;
+    }
+
+    .popupTongue{
+        display: none;
+    }
+    
+    .popupImage{
+        display: none;
+    }
+    
+    .galleryImage{
+        border-radius: 2px;
+    }
+
+    
+    #galleryOutroLink{
+        font-size: 0.7rem;
+    }
+    
+    #outroText{
+        margin-top: 12vh;
+        margin-bottom: 20vh;
+        margin-left: 2vw;
+        margin-right: 2vw;
+    }
+
+    .galleryLink{ /*this is set in basics, but the gallery on mobile will want to be different*/
+        text-decoration: none;
+        color:#ffd256;
+    }
+}
+