Major redesign and rewrite

src/layouts/blogSection.astro

@@ -1,36 +1,59 @@
 ---
 export interface Props {
   title: string
+  titlehidden?: boolean
+  displayLine?: boolean
 }
-
-const { title } = Astro.props
+const { title, titlehidden, displayLine } = Astro.props
+const display = titlehidden ? "display: none" : ""
+const line = displayLine ? "flex" : "none"
 ---
 
 <section>
-  <h1>{title}</h1>
+  <h1 style={display}>{title}</h1>
   <div class="wrapper">
+    <div class="start hightlighter"></div>
     <div class="line"></div>
     <slot />
-    <div class="drop"></div>
+    <div class="drop hightlighter"></div>
   </div>
 </section>
 
-<style>
-  .drop {
+<style define:vars={{ line }}>
+  section {
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+    padding-bottom: 5rem;
+  }
+
+  .hightlighter {
+    left: 0;
+    right: 0;
     display: flex;
     position: absolute;
     visibility: visible;
-    left: 0;
-    right: 0;
-    bottom: -5rem;
     margin-left: auto;
     margin-right: auto;
     height: 1.5rem;
     width: 1.5rem;
+  }
+
+  .drop {
+    bottom: -5rem;
     border-radius: 0% 50% 50% 50%;
     transform: rotate(45deg);
     background-color: var(--c-darkpurple);
   }
+
+  .start {
+    top: -2rem;
+    border-radius: 40%;
+    border-style: solid;
+    border-width: 0.25rem;
+    border-color: var(--c-lightgray);
+    background-color: var(--c-darkpurple);
+  }
+
   .line {
     display: flex;
     position: absolute;
@@ -46,30 +69,31 @@ const { title } = Astro.props
     z-index: -1;
   }
   h1 {
-    font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
     color: white;
-    font-size: 2.25rem;
+    font-size: 1.6rem;
     margin-top: 1rem;
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
-    padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
     padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
+    justify-self: center;
+    text-align: center;
   }
   .wrapper {
-    margin: 2rem 3rem 0.5rem 3rem;
+    margin: 2rem 2rem 0.5rem 2rem;
     display: flex;
     flex-flow: column wrap;
     row-gap: 1em;
     column-gap: 1em;
     align-self: center;
     align-items: stretch;
+    align-content: center;
     justify-content: space-around;
     padding: 1em;
     color: white;
@@ -80,21 +104,41 @@ const { title } = Astro.props
     .drop {
       margin-left: 1.5rem;
     }
+    .start {
+      margin-left: 1.25rem;
+    }
     .line {
       margin-left: 2.1rem;
     }
     h1 {
       margin-left: 3rem;
+      font-size: 1.85rem;
     }
   }
   @media (min-width: 1500px) {
     .wrapper {
-      margin-left: 20rem;
-      margin-right: 20rem;
+      margin-left: 15rem;
+      margin-right: 15rem;
+      flex-direction: row;
+    }
+    section {
+      padding-bottom: unset;
+    }
+    .drop, .start, .line {
+      display: var(--line);
+      margin-left: 2rem;
+    }
+    .start {
+      margin-left: 1.75rem;
+    }
+    .line {
+      margin-left: 2.6rem;
+      height: calc(100% + 6rem);
+      translate: 0px -2rem;
     }
     h1 {
-      margin-left: 20rem;
-      margin-right: 20rem;
+      margin-left: 15rem;
+      margin-right: 15rem;
     }
   }
 </style>