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;
+    }
 }

assets/stylesheets/styles.css

@@ -10,6 +10,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    scrollbar-color: var(--accent-color) var(--accent-background);
 }
 
 @font-face {
@@ -31,6 +32,7 @@ header {
 
 aside {
     width: min-content;
+    user-select: none;
 }
 
 a {
@@ -44,6 +46,7 @@ main {
     background-color: black;
     height: fit-content;
     border-radius: 0 0 4px 4px;
+    width: 100%;
 }
 
 /* main:last-child {
@@ -84,6 +87,10 @@ img {
     image-rendering: pixelated;
 }
 
+hr {
+    margin-bottom: 1em;
+}
+
 #linksBox {
     padding: 2em;
     display: flex;