Revamped software section

docs/static/main.css

@@ -258,12 +258,72 @@ div.hs.selected {
     color: #ff85e1;
 }
 
+.hsProjects {
+    gap: .6em;
+    display: flex;
+    flex-direction: column;
+}
+
+.hsProject {
+    margin-bottom: .4em;
+    /* padding: 1em; */
+    border: medium solid rgba(255, 255, 255, 0.6);
+    width: 100%;
+    height: fit-content;
+    transition: .2s;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.4),
+    0px -4px 10px rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.hsProjectHeader {
+    transition: .2s;
+    display: flex;
+    height: 7em;
+    border-bottom: medium solid rgba(255, 255, 255, 0.6);
+    padding: 1em;
+}
+
+.hsProjectHeaderIcon {
+    fill: white;
+    stroke: white;
+    height: 50%;
+    width: auto;
+    margin: auto 0;
+}
+
+.hsProjectHeaderIcon img {
+    height: 100%;
+}
+
+.hsProject:hover {
+    border-color: white;
+}
+
+.hsProject:hover .hsProjectHeader {
+    border-color: white;
+}
+
 .hsProjectImage {
-    margin: auto;
+    width: 100%;
+    max-height: 100%;
 }
 
 .hsProjectImage img {
-    height: 10vh;
+    height: 100%;
+    width: auto;
+}
+
+.hsProjectContent {
+    padding: 1em;
+}
+
+.invertedc {
+    filter: invert();
 }
 
 #hsCode {
@@ -484,6 +544,27 @@ div.hs.selected {
     #postHeader {
         /* border-bottom: 8px dashed rgba(255, 255, 255, 0.1); */
     }
+
+    .hsProjectHeader {
+        height: fit-content;
+        flex-direction: column;
+        gap: 1em;
+    }
+
+    .hsProjectImage {
+        max-height: 5em;
+        margin: auto;
+        width: fit-content;
+    }
+    
+    .hsProjectImage img {
+        height: 100%;
+        max-height: 100%;
+    }
+
+    .hsProjectHeaderIcon {
+        margin: auto;
+    }
 }
 
 @media screen and (max-width: 800px) {

docs/static/visual/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>