More Redesign

src/components/listings/eventListingLine.astro

@@ -22,7 +22,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
   <article>
     <h2>{title}</h2>
     <h3>{render_date}</h3>
-    <p>{shortdescription}</p>
+    <!-- <p>{shortdescription}</p> -->
   </article>
 </a>
 

src/components/smallTitle.astro

@@ -6,16 +6,18 @@ export interface Props {
   subtext: string
   fadeout?: boolean
   baseurl?: string
+  returnbutton?: boolean
 }
-const { maintext, subtext, fadeout, baseurl } = Astro.props
-const display = fadeout ? "": "display: none"
+const { maintext, subtext, fadeout, baseurl, returnbutton } = Astro.props
+const displayFadeout = fadeout ? "": "display: none"
+const displayBackButton = returnbutton ? "": "display: none"
 ---
 
 <div class="wrap">
   <div class="head">{maintext}</div>
   <div class="sub">{subtext}</div>
-  <a href=`/${baseurl}`>&lt&lt Back to database</a>
-  <div class="fade" style={display}></div>
+  <a href=`/${baseurl}` style={displayBackButton}>&lt&lt Back to {baseurl}</a>
+  <div class="fade" style={displayFadeout}></div>
 </div>
 
 <style>
@@ -23,8 +25,19 @@ const display = fadeout ? "": "display: none"
     font-weight: 600;
     font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
     color: white;
-    padding: 0.5rem 0px;
+    margin: 1rem 0px 0px;
+    padding: 0.5rem 0.75rem;
     text-decoration: none;
+    background-color: var(--c-lightgray);
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--c-lightgray);
+    text-transform: capitalize;
+  }
+
+  a:hover {
+    border-color: var(--c-darkpurple);
   }
 
   .wrap {