ContentUpdate: link styling and footer changes

Author: QixyQix

src/components/Button.astro

@@ -21,7 +21,7 @@ const {
   target={external ? "_blank" : "_self"}
   class:list={[
     type == "main" ? "btn-main-outline" : "btn-white-outline",
-    "flex flex-row gap-1.5 justify-between",
+    "flex flex-row gap-1.5 justify-between no-underline",
     className,
   ]}
 >

src/components/Footer.astro

@@ -2,15 +2,21 @@
 const today = new Date();
 ---
 
-<footer class="p-10 bg-neutral-200">
-  <p class="font-bold">
-    &copy; {today.getFullYear()} WolvHaven. All rights reserved.
-  </p>
-  <p class="text-sm text-gray-500">
-    This website is related to WolvHaven – a server within the popular game
-    'Minecraft'. Content in the website is mostly for roleplaying/information
-    purposes and should not be confused with real-life events or organizations.<br
-    />Any content that bears resemblance to real-life individuals or
-    organizations is purely coincidental.
-  </p>
+<footer class="p-10 bg-gray-100 border-t">
+  <h4>&copy; {today.getFullYear()} WolvHaven &mdash; All rights reserved</h4>
+  <div class="max-w-3xl text-sm text-gray-500">
+    <p>
+      This website is for WolvHaven, a privately-run Minecraft server.
+    </p>
+    <p>
+      Content in this website is for roleplaying/information purposes and
+      should not be confused with real-life events or organizations. Any content
+      that bears resemblance to real-life individuals or organizations is
+      coincidental.
+    </p>
+    <p>
+      Disclaimer: The WolvHaven server is not an official Minecraft server, and is not
+      approved, associated, or affiliated with Mojang or Microsoft.
+    </p>
+  </div>
 </footer>

src/components/Messages.astro

@@ -60,14 +60,7 @@ const { messages = [] } = Astro.props;
                 href={msg.link}
               >
                 {msg.linkText ?? "More info"}
-                <Icon
-                  class="inline-block -mt-1"
-                  name={
-                    msg.externalLink
-                      ? "fa7-solid:external-link-alt"
-                      : "fa7-solid:arrow-right"
-                  }
-                />
+                <span class="my-auto" set:html={msg.externalLink ? "&#8599;" : "&#8594;"} />
               </a>
             )}
           </p>
@@ -95,14 +88,7 @@ const { messages = [] } = Astro.props;
                 href={messages[0].link}
               >
                 {messages[0].linkText ?? "More info"}
-                <Icon
-                  class="inline-block -mt-1"
-                  name={
-                    messages[0].externalLink
-                      ? "fa7-solid:external-link-alt"
-                      : "fa7-solid:arrow-right"
-                  }
-                />
+                <span class="my-auto" set:html={messages[0].externalLink ? "&#8599;" : "&#8594;"} />
               </a>
             )}
           </p>

src/pages/news/index.astro

@@ -27,7 +27,7 @@ const mdToText = function(markdown) {
 							</div>
 						</div>
 						<div class="w-full lg:w-2/3 px-0 lg:px-5 py-5">
-							<a class="text-black" href={`/news/${post.slug}/`}><h3>{post.data.title}</h3></a>
+							<a class="text-black no-underline" href={`/news/${post.slug}/`}><h3>{post.data.title}</h3></a>
 							<p><FormattedDate date={post.data.pubDate} /></p>
 							{
 								post.data.description && <p>{post.data.description}</p>

src/pages/ranks.astro

@@ -130,8 +130,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   <section>
     <h2>Staff Ranks</h2>
     <p>
-      <a href="/staff" target="_blank">Click here </a>for more information on
-      server staff.
+      For more information on server staff, visit the <a href="/staff">Staff page</a>.
     </p>
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
       <!-- Helper -->

src/styles/global.css

@@ -37,6 +37,11 @@
   a {
     @apply text-main-50;
   }
+
+  main a{
+    @apply underline underline-offset-6;
+  }
+  
   a:hover {
     @apply text-main-100;
   }