Preparing for deploying with GitHub pages.

_site/assets/stylesheets/project.css

@@ -0,0 +1,121 @@
+#projectTitle {
+    font-size: xx-large;
+}
+
+#projectTitleSubtitle {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+#projectTitleSubtitle h1 {
+    margin-bottom: 0;
+}
+
+#projectHeader {
+    padding-top: 20px;
+    gap: 20px;
+    display: flex;
+}
+
+#project {
+    display: flex;
+    flex-direction: column;
+    gap: var(--box-gap);
+    width: 100%;
+}
+
+#downloadLink {
+    color: gray;
+    height: fit-content;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: auto;
+    text-align: right;
+    /* text-shadow: 2px 2px black; */
+}
+
+#downloadButton:hover {
+    cursor: pointer;
+}
+
+#projectHeader img {
+    outline: 2px solid gray;
+    height: 5em;
+    image-rendering: pixelated;
+}
+
+#projectTitleAuthor {
+    display: flex;
+}
+
+#projectAuthor {
+    margin-left: .6em;
+    margin-top: auto;
+    /* margin-bottom: .4em; */
+}
+
+#projectImageCarrousel {
+    outline: 2px solid gray;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+
+#projectCarrouselImageHolder {
+    height: 100%;
+    gap: 1em;
+    overflow: auto;
+    scroll-margin-left: 10px;
+    overflow-x: scroll;
+    white-space: nowrap;
+}
+
+.projectImage {
+    transition: .4s;
+    height: 95%;
+    max-width: 10em;
+    object-fit: cover;
+    /* filter: grayscale(); */
+}
+
+/* .projectImage:hover {
+    filter: none;
+    opacity: .8;
+    max-width: 100%;
+    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;
+    }
+}