Added support for images on project and author pages.

assets/styles.css

@@ -1,3 +1,8 @@
+:root {
+    --accent-color: greenyellow;
+    --accent-secondary: green;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -22,7 +27,7 @@ header {
 
 a {
     text-decoration: none;
-    color:greenyellow;
+    color: var(--accent-color);
 }
 
 main {
@@ -130,7 +135,7 @@ img {
 
 .featuredProject img {
     width: 100%;
-    border: medium solid yellowgreen;
+    border: medium solid var(--accent-color);
 }
 
 .featuredProject p {
@@ -159,12 +164,14 @@ img {
     padding-top: 20px;
     gap: 20px;
     display: flex;
+    margin-bottom: 1em;
 }
 
 #downloadButton {
     border: none;
-    background: linear-gradient(yellowgreen, green);
+    background: linear-gradient(var(--accent-color), var(--accent-secondary));
     border-radius: 2px;
+    color: white;
 }
 
 #downloadLink {
@@ -179,7 +186,6 @@ img {
 
 #downloadButton:hover {
     cursor: pointer;
-    border-color: white;
 }
 
 #projectHeader img {
@@ -207,6 +213,38 @@ img {
     margin-bottom: 6px;
 }
 
+#projectImageCarrousel {
+    outline: 2px solid gray;
+    padding: 1rem;
+    height: 12em;
+    display: flex;
+    flex-direction: column;
+}
+
+#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; */
+}
+
 #credits {
     margin-left: auto;
 }