Separated Landing Page and Home Page

- Added a dedicated landing-page with an under-construction message for now
- Updated and separated home-page dedicated to the general overview contents of the websites
- Updated about-page based on the home-page adjustments

src/_assets/css/scss/_main.scss

@@ -2,10 +2,9 @@ main {
     margin: var(--three-spacing) 0 var(--five-spacing) 0;
     display: flex;
     flex-direction: column;
-    gap: var(--five-spacing);
+    gap: var(--three-spacing);
 
     @media screen and (max-width: 800px) {
         margin: var(--three-spacing) 0;
-        gap: var(--two-spacing);
     }
 }

src/_assets/css/scss/_style.scss

@@ -38,7 +38,7 @@
     }
 
     > div {
-        border-left: solid 1rem var(--bg-light);
+        border-left: solid 1rem var(--bg-lightgray);
         padding: 0 0 0 var(--default-spacing);
         margin: 0;
         color: var(--text-light);

src/_assets/css/scss/template/cards.scss

@@ -0,0 +1,50 @@
+.cards {
+    padding: var(--two-spacing);
+
+    @media screen and (max-width:800px) {
+        padding: var(--default-spacing);
+    }
+
+    &.cards-gray {
+        background-color: var(--bg-slategray);
+        border-radius: var(--quarter-spacing);
+    }
+
+    &__title {
+        font-family: var(--font-title);
+        font-size: var(--text-size-subtitle);
+        font-weight: bold;
+        color: var(--text-primary);
+    }
+
+    &__description {
+        margin: 0;
+        padding: 0;
+        font-size: small;
+        flex: 1;
+
+        @media screen and (max-width:800px) {
+            font-size: var(--text-size-default);
+            margin-top: 0;
+        }
+    }
+
+    &__meta {
+        border-top: solid 2px var(--bg-dark);
+        margin: var(--default-spacing) 0 0 0;
+        padding: var(--half-spacing) 0 0 0;
+        color: var(--text-lightgray);
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--default-spacing);
+
+        > .divider {
+            color: var(--text-dark);
+            font-size: var(--text-size-default);
+            font-weight: bold;
+        }
+    }
+}