About fix, blog redesign

src/components/blogCard.astro

@@ -25,28 +25,29 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 
 <style>
   a {
+    display: flex;
     text-decoration: none;
     height: auto;
     margin: 0.5rem;
+    width: 100%;
   }
   p {
     color: white;
-    padding: 0em 0.5em;
     text-align: left;
     font-size: 1.1em;
     margin: 0.5em;
   }
   article > h2 {
-    margin: 0.3em 0px;
+    margin: 0.3rem 0.5rem;
     color: var(--c-darkpurple);
-    font-size: 1.3em;
+    font-size: 1.5rem;
     line-height: normal;
     text-decoration: none;
   }
   article > h3 {
-    margin: 0.2em;
+    margin: 0.2em 0.5rem;
     color: white;
-    font-size: 0.8em;
+    font-size: 1rem;
     line-height: normal;
     text-decoration: none;
   }
@@ -55,17 +56,16 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
     flex: 1;
     flex-wrap: wrap;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     align-content: flex-start;
-    justify-content: baseline;
+    justify-content: center;
     background-color: var(--c-darkergray);
     padding: 10px;
     text-align: center;
     transition: transform var(--speed) var(--ease);
     min-height: 100%;
-    width: 11rem;
   }
   a:hover {
-    transform: scale(var(--hover-scale));
+    transform: scale(102%);
   }
 </style>

src/layouts/blogSection.astro

@@ -8,12 +8,43 @@ const { title } = Astro.props
 
 <section>
   <h1>{title}</h1>
-  <div>
+  <div class="holder">
+    <div class="line"></div>
     <slot />
+    <div class="circle"></div>
   </div>
 </section>
 
 <style>
+  .circle {
+    display: flex;
+    position: absolute;
+    visibility: visible;
+    left: 0;
+    right: 0;
+    bottom: -20%;
+    margin-left: auto;
+    margin-right: auto;
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 0% 50% 50% 50%;
+    transform: rotate(45deg);
+    background-color: var(--c-darkpurple);
+  }
+  .line {
+    display: flex;
+    position: absolute;
+    visibility: visible;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: var(--c-darkpurple);
+    height: 120%;
+    translate: 0% 7.5%;
+    width: 0.25rem;
+    z-index: -1;
+  }
   h1 {
     color: white;
     margin: 0.5rem 0px 0.5rem 0.5em;
@@ -21,9 +52,10 @@ const { title } = Astro.props
     width: max-content;
     background-color: var(--c-darkgray);
   }
-  div {
+  .holder {
+    margin: 2rem 3rem 0.5rem 3rem;
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: column wrap;
     row-gap: 1em;
     column-gap: 1em;
     align-self: center;
@@ -32,10 +64,18 @@ const { title } = Astro.props
     padding: 1em;
     color: white;
     font-size: 1em;
+    position: relative;
   }
   @media (min-width: 512px) {
-    div {
+  }
-      justify-content: left;
+  @media (min-width: 1500px) {
+    .holder {
+      margin-left: 15rem;
+      margin-right: 15rem;
+    }
+    h1 {
+      margin-left: 15rem;
+      margin-right: 15rem;
     }
   }
 </style>

src/pages/about.astro

@@ -30,6 +30,11 @@ const techologydata = [
     link: 'https://alpinelinux.org/',
     image: 'alpine-linux',
   },
+  {
+    title: 'Ubuntu',
+    link: 'https://ubuntu.com/',
+    image: 'ubuntu',
+  },
 ]
 
 const description =