add roboto font, adjust lockup for mobile, add arrow right link optio…

…n, adjust footer styles
SU-SWS · Apr 11, 2024 · 591abc9 · 591abc9
1 parent 4dba650
commit 591abc9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
@@ -63,13 +63,13 @@ const LocalFooter = ({
   return (
     <div className="local-footer bg-foggy-light py-20">
       <div className="centered">
-        <div className="grid md:grid-cols-12 gap-x-32 [&_a]:font-normal [&_a]:no-underline [&_a:hover]:underline [&_a:hover]:text-black [&_a:focus]:underline [&_a:focus]:text-black [&_a]:transition">
+        <div className="grid grid-cols-6 md:grid-cols-12 gap-32 md:gap-y-0 [&_a]:font-semibold [&_a]:no-underline [&_a:hover]:underline [&_a:hover]:text-black [&_a:focus]:underline [&_a:focus]:text-black [&_a]:transition">
 
-          <div className="col-start-2 col-span-5 rs-mb-4">
+          <div className="col-span-6 md:col-start-2 md:col-span-5 md:rs-mb-4">
             <FooterLockup {...lockupProps} />
           </div>
 
-          <div className="col-start-2 col-span-5">
+          <div className="col-span-6 md:col-start-2 md:col-span-5">
 
             {suLocalFootAddress &&
               <Address {...suLocalFootAddress}/>
@@ -90,15 +90,15 @@ const LocalFooter = ({
               </ul>
             }
 
-            <Wysiwyg html={suLocalFootPrCo?.processed}/>
+            <Wysiwyg html={suLocalFootPrCo?.processed} className="[&_a]:rounded-full"/>
 
             {suLocalFootSocial &&
               <ul className="rs-mt-4 list-unstyled flex gap-2">
                 {suLocalFootSocial.map((link, index) => {
                   if (!link.url) return;
                   return (
                     <li key={`footer-action-link-${index}`}>
-                      <Link href={link.url} className="text-black hocus:text-digital-blue">
+                      <Link href={link.url} className="text-archway">
                         <SocialIcon url={link.url}/>
                         <span className="sr-only">{link.title}</span>
                       </Link>
@@ -109,16 +109,16 @@ const LocalFooter = ({
             }
           </div>
 
-          <div className="col-start-7 col-span-2">
+          <div className="col-span-6 sm:col-span-3 md:col-start-7 md:col-span-2 font-roboto">
             {suLocalFootPrimeH &&
-              <H2 className="text-m1">{suLocalFootPrimeH}</H2>}
+              <H2 className="text-m1 font-normal">{suLocalFootPrimeH}</H2>}
             {suLocalFootPrimary &&
               <ul className="list-unstyled">
                 {suLocalFootPrimary.map((link, index) => {
                   if (!link.url) return;
                   return (
                     <li key={`footer-primary-link-${index}`}>
-                      <Link href={link.url}>
+                      <Link href={link.url} className="link--arrow-right">
                         {link.title}
                       </Link>
                     </li>
@@ -130,17 +130,17 @@ const LocalFooter = ({
 
           </div>
 
-          <div className="col-start-9 col-span-2">
+          <div className="col-span-6 sm:col-span-3 md:col-start-9 md:col-span-2 font-roboto">
             {suLocalFootSecondH &&
-              <H2 className="text-m1">{suLocalFootSecondH}</H2>}
+              <H2 className="text-m1 font-normal">{suLocalFootSecondH}</H2>}
 
             {suLocalFootSecond &&
               <ul className="list-unstyled">
                 {suLocalFootSecond.map((link, index) => {
                   if (!link.url) return;
                   return (
                     <li key={`footer-second-link-${index}`}>
-                      <Link href={link.url}>
+                      <Link href={link.url} className="link--arrow-right">
                         {link.title}
                       </Link>
                     </li>
@@ -194,7 +194,7 @@ const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: Foo
       return (
         <div className="py-10">
           <Link href="/"
-                className="flex flex-col lg:flex-row gap-4 no-underline">
+                className="flex flex-row gap-4 no-underline font-roboto">
             <LockupLogo {...lockupProps}/>
           </Link>
         </div>
@@ -240,7 +240,7 @@ const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: Foo
 
   return (
     <div className="py-10">
-      <Link href="/" className="flex flex-col lg:flex-row gap-4 no-underline">
+      <Link href="/" className="flex flex-row gap-4 no-underline">
         <LockupLogo {...lockupProps}/>
 
         <div className="w-[1px] bg-black shrink-0"/>

diff --git a/src/components/elements/link.tsx b/src/components/elements/link.tsx
@@ -4,6 +4,7 @@ import {EnvelopeIcon} from "@heroicons/react/24/outline";
 import ActionLink from "@components/elements/action-link";
 import Button from "@components/elements/button";
 import {LinkProps} from "next/dist/client/link";
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & LinkProps & {
   /**
@@ -48,6 +49,9 @@ const DrupalLink = ({href, className, children, ...props}: Props) => {
       {href.startsWith("mailto") &&
         <EnvelopeIcon width={20} className="ml-4 inline-block"/>
       }
+      {className?.includes("link--arrow-right") &&
+        <ArrowRightIcon width={20} className="ml-4 inline-block"/>
+      }
     </Link>
   )
 }

diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx
@@ -1,7 +1,14 @@
-import {Source_Sans_3} from "next/font/google";
+import {Roboto, Source_Sans_3} from "next/font/google";
 
 export const sourceSans3 = Source_Sans_3({
   subsets: ["latin"],
   display: "swap",
   variable: "--font-sans",
-})
+})
+
+export const roboto = Roboto({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-roboto",
+  weight: "100"
+})