Updated About page

static/css/style.css

@@ -263,6 +263,36 @@ h5 {
     margin: 0px;
 }
 
+h3 {
+        font-size: 1.3rem;
+        font-weight: 700;
+        line-height: 1.75rem;
+        margin-bottom: unset;
+    }
+
+h4 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    letter-spacing: 0.16px;
+    font-weight: bold;
+    margin: 1rem 0 1rem 0;
+}
+
+.bottom-url h5 {
+    position: relative;
+    display: inline-block;
+    color: #161616;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 1rem;
+    line-height: 1.375rem;
+    font-weight: 600;
+}
+
+.text-red {
+    color: #e12a26;
+}
+
 .footer-col-content {
     position: relative;
     margin-left: 1.5rem;
@@ -336,4 +366,70 @@ footer {
     padding-top: 15px;
     height: 70%;
     width: auto;
+}
+
+/* ################ about ################# */
+/* Delete to remove visual carrots entirely ˘˘ */
+.panel .panel-content-section {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+/*.panel .panel-column {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  flex: 1 0 100%;
+}*/
+@media (min-width: 64rem) {
+  .panel .panel-column {
+    flex: 1 0 calc(50% - 1rem);
+  }
+}
+/* Questionable part ^^ */
+/*.panel-small {
+  padding: 1.5rem;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  min-height: 13.5rem;
+  padding: 1rem 5.5rem 1rem 1.5rem;
+  transition: transform 0.3s ease-out;
+  position: relative;
+  box-shadow: 0 1px 1px 0 #e0e0e0;
+  border-radius: 2px;
+  cursor: pointer;
+  transform-origin: center center;
+  /* Ensure the scale transformation occurs from the center */
+  /*will-change: transform;*/
+  /* Optimize for the transform property */
+
+.panel-small {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 13.5rem;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+  transition: transform 0.3s ease-out;
+  position: relative;
+  cursor: pointer;
+  transform-origin: center center;
+  will-change: transform;
+}
+
+.panel .panel-small.no-content {
+  cursor: unset !important;
+}
+.panel .panel-small:hover {
+  border-left: 2px solid #e0e0e0;
+  transform: scale(1.02);
+  /*box-shadow: 0 1px 3px 0 #e0e0e0;*/
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.panel .panel-small.active {
+  border-left: 2px solid #e12a26 !important;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

static/js/about.js

@@ -0,0 +1,28 @@
+document.querySelectorAll('.panel-small')?.forEach(el => {
+    el.addEventListener('click', (event) => {
+        let self = event.target;
+        if (self.classList.contains('panel-small') || self.closest('.panel-small')){
+            if (!self.classList.contains('panel-small')){
+                self = self.closest('.panel-small');
+            }
+
+            if (self.classList.contains('source_code')) {
+                window.open('https://github.com/clarinsi/STARK', '_blank');
+                return; // Skip further handling
+            }
+
+            const id = self?.id;
+            if (id){
+                document.querySelectorAll('.panel-content-section')?.forEach(section => {
+                    section.hidden = true;
+                });
+                document.querySelectorAll('.panel-small')?.forEach(el => el.classList.remove('active'))
+                self.classList.add('active');
+                const targetSection = document.querySelector(`[data-content-for="${id}"]`);
+                if (targetSection) {
+                    targetSection.hidden = false;
+                }
+            }
+        }
+    })
+})