More Redesign 2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fgo-ta-com-website",
   "type": "module",
-  "version": "0.2.2-pre.5",
+  "version": "0.2.2-pre.6",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/listings/eventListingLine.astro

@@ -90,16 +90,19 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
       position: relative;
       display: flex;
       visibility: visible;
-      height: 1.5rem;
+      height: 1rem;
-      width: 1.5rem;
+      width: 1rem;
-      border-radius: 40%;
       background-color: var(--c-darkpurple);
+      border-style: solid;
+      border-width: 0.25rem;
+      border-color: var(--c-lightgray);
+      border-radius: 40%;
       transition: transform var(--speed) var(--ease);
     }
 
     a:hover > .circle {
-      height: 1.75rem;
+      height: 1.25rem;
-      width: 1.75rem;
+      width: 1.25rem;
       translate: -0.125rem;
       margin-right: 0.825rem;
     }

src/components/listings/questListingLine.astro

@@ -91,16 +91,19 @@ const render_date = releaseDate.toLocaleDateString(
       position: relative;
       display: flex;
       visibility: visible;
-      height: 1.5rem;
+      height: 1rem;
-      width: 1.5rem;
+      width: 1rem;
-      border-radius: 40%;
       background-color: var(--c-darkpurple);
+      border-style: solid;
+      border-width: 0.25rem;
+      border-color: var(--c-lightgray);
+      border-radius: 40%;
       transition: transform var(--speed) var(--ease);
     }
 
     a:hover > .circle {
-      height: 1.75rem;
+      height: 1.25rem;
-      width: 1.75rem;
+      width: 1.25rem;
       translate: -0.125rem;
       margin-right: 0.825rem;
     }

src/layouts/databaseSection.astro

@@ -12,9 +12,10 @@ const line = displayLine ? "flex" : "none"
 <section>
   <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>
 
@@ -24,21 +25,35 @@ const line = displayLine ? "flex" : "none"
     padding-right: 0.25em;
     padding-bottom: 5rem;
   }
-  .drop {
+
+  .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;
@@ -89,6 +104,9 @@ const line = displayLine ? "flex" : "none"
     .drop {
       margin-left: 1.5rem;
     }
+    .start {
+      margin-left: 1.25rem;
+    }
     .line {
       margin-left: 2.1rem;
     }
@@ -106,15 +124,17 @@ const line = displayLine ? "flex" : "none"
     section {
       padding-bottom: unset;
     }
-    .drop {
+    .drop, .start, .line {
       display: var(--line);
       margin-left: 2rem;
     }
+    .start {
+      margin-left: 1.75rem;
+    }
     .line {
-      display: var(--line);
       margin-left: 2.6rem;
-      height: calc(100% + 4rem);
+      height: calc(100% + 6rem);
-      translate: unset;
+      translate: 0px -2rem;
     }
     h1 {
       margin-left: 15rem;

src/pages/database/index.astro

@@ -6,7 +6,7 @@ import EventListing from '../../components/listings/eventListingLine.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
 import SmallTitle from '../../components/smallTitle.astro'
 
-const description = 'FGO NA TA Database'
+const description = 'A mostly up-to-date list of NA TA runs'
 const fulldata = await getCollection('taInfoData')
 const groups = await getCollection('groups')
 const changes = await getCollection('changes')
@@ -30,7 +30,7 @@ combined.sort(
   descriptionOverride={description}
 >
   <SmallTitle
-    maintext="TA DATA­BASE"
+    maintext="TA DATA&shy;BASE"
     subtext="A mostly up-to-date list of NA TA runs"
     fadeout={true}
   />