Preparing for deploying with GitHub pages.

assets/stylesheets/project.css

@@ -57,9 +57,9 @@
 #projectImageCarrousel {
     outline: 2px solid gray;
     padding: 1rem;
-    height: 12em;
     display: flex;
     flex-direction: column;
+    width: 50%;
 }
 
 #projectCarrouselImageHolder {
@@ -79,9 +79,43 @@
     /* filter: grayscale(); */
 }
 
-.projectImage:hover {
+/* .projectImage:hover {
     filter: none;
     opacity: .8;
     max-width: 100%;
-    /* object-fit: unset; */
+    object-fit: unset;
+} */
+
+#projectImagesAndInfo {
+    display: flex;
+    gap: 2em;
+    height: 12em;
+}
+
+#projectInfo {
+    outline: 2px solid var(--accent-color);
+    background-color: var(--accent-background);
+    flex-grow: 1;
+    padding: 1em;
+    overflow-y: auto;
+}
+
+@media only screen and (max-width: 1280px) {
+    #projectImagesAndInfo {
+        flex-direction: column;
+        flex-grow: unset;
+    }
+
+    #projectImagesAndInfo {
+        height: unset;
+    }
+
+    #projectInfo {
+        height: 13em;
+    }
+
+    #projectImageCarrousel {
+        height: 13em;
+        width: unset;
+    }
 }