Tweaks to styles

SU-SWS · Jan 17, 2025 · 88bc6cc · 88bc6cc
1 parent e36ca42
commit 88bc6cc
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 63 deletions.
diff --git a/src/components/paragraph/sul-home-banner/sul-home-banner.client.tsx b/src/components/paragraph/sul-home-banner/sul-home-banner.client.tsx
@@ -22,28 +22,29 @@ export const SulHomeBannerFormClient = () => {
   return (
     <form
       action={formAction}
-      className="flex w-full flex-wrap items-center justify-between gap-15 rounded-2xl bg-white p-10 sm:flex-nowrap lg:w-fit lg:justify-start"
+      className="flex w-full flex-wrap items-center justify-between gap-10 rounded-2xl bg-white px-16 py-8 md:w-fit md:justify-start md:px-24 md:py-16 lg:gap-32 lg:px-40 lg:py-24 xs:flex-nowrap"
     >
-      <div className="flex w-full items-center border-black-40 sm:border-r md:w-1/2 lg:w-fit">
+      <div className="flex w-full items-center xs:w-fit">
         <label className="sr-only" htmlFor={inputId}>
           Search for books, articles, and more
         </label>
-        <MagnifyingGlassIcon width={50} className="hidden lg:block" />
+        <MagnifyingGlassIcon width={40} className="hidden sm:block" />
         <input
-          className="h-50 w-full min-w-150 border-0 text-2xl font-semibold lg:min-w-300"
+          className="h-40 w-full min-w-150 border-0 text-4xl md:min-w-300"
           name="q"
           id={inputId}
           placeholder="Search for books, articles, and more"
         />
       </div>
+      <div className="hidden h-50 w-[.5px] shrink-0 bg-black xs:block" />
 
-      <div className="relative w-2/3 sm:w-1/2 md:w-fit">
+      <div className="relative w-2/3 md:w-fit">
         <label className="sr-only" htmlFor={`${inputId}-action`}>
           Search all resources or only this site.
         </label>
         <select
           id={`${inputId}-action`}
-          className="h-50 w-full border-0 bg-none text-2xl font-semibold hover:cursor-pointer md:w-auto"
+          className="h-40 w-full border-0 bg-none text-2xl font-semibold hover:cursor-pointer md:w-auto md:min-w-[150px]"
           onChange={e => setFormAction(e.target.value)}
           value={formAction}
         >
@@ -53,14 +54,14 @@ export const SulHomeBannerFormClient = () => {
         <PlayIcon className="pointer-events-none absolute right-0 top-1/2 z-10 -translate-y-1/2 rotate-90" width={20} />
       </div>
       <button
-        className="button relative m-0 block h-40 w-40 shrink-0 p-0 lg:h-auto lg:w-auto lg:px-20 lg:py-10"
+        className="button relative m-0 block h-40 w-40 shrink-0 p-0 md:h-auto md:w-auto md:px-20 md:py-10"
         type="submit"
       >
         <MagnifyingGlassIcon
           width={30}
-          className="absolute left-1/2 top-1/2 block -translate-x-1/2 -translate-y-1/2 lg:hidden"
+          className="absolute left-1/2 top-1/2 block -translate-x-1/2 -translate-y-1/2 md:hidden"
         />
-        <span aria-hidden className="hidden lg:block">
+        <span aria-hidden className="hidden md:block">
           Search
         </span>
         <span className="sr-only">Submit Search</span>

diff --git a/src/components/paragraph/sul-home-image/sul-home-image.tsx b/src/components/paragraph/sul-home-image/sul-home-image.tsx
@@ -21,11 +21,11 @@ const SulHomeImage = ({paragraph, ...props}: Props) => {
         <Wave className="absolute bottom-0 translate-y-1 -scale-x-100" />
       </div>
       {paragraph.sulHomeImageCredits && (
-        <div className="bottom-50 w-full lg:absolute">
+        <div className="bottom-50 w-full md:absolute">
           <div className="centered">
-            <div className="p-20 lg:ml-auto lg:w-500 lg:bg-black lg:bg-opacity-50 lg:text-white">
+            <div className="p-32 md:ml-auto md:w-[633px] md:bg-black md:bg-opacity-50 md:text-white">
               {paragraph.sulHomeImageCredits?.processed && (
-                <div className="text-right font-sans [&_a]:text-white">
+                <div className="font-sans md:text-right [&_a]:md:text-white">
                   {formatHtml(paragraph.sulHomeImageCredits.processed)}
                 </div>
               )}

diff --git a/src/components/paragraph/sul-location-hour/sul-location-hours.client.tsx b/src/components/paragraph/sul-location-hour/sul-location-hours.client.tsx
@@ -50,60 +50,61 @@ const LibrariesTodayHours = ({libraries, alert, ...props}: {libraries: HoursProp
   const imageUrl = library?.suLibraryContactImg?.mediaImage.url || library?.suLibraryBanner?.mediaImage.url
 
   return (
-    <div {...props}>
-      <Card
-        className="rounded border-0"
-        image={
-          imageUrl && (
-            <span className="relative block h-full w-full">
-              <Image
-                className="object-cover object-center"
-                src={buildUrl(imageUrl).toString()}
-                alt=""
-                fill
-                sizes="500px"
-              />
-              <span className="absolute bottom-0 z-10 flex w-full items-center gap-10 bg-black bg-opacity-50 p-10 font-semibold text-white">
+    <Card
+      {...props}
+      className=""
+      image={
+        imageUrl && (
+          <span className="relative block h-full w-full">
+            <Image
+              className="object-cover object-center"
+              src={buildUrl(imageUrl).toString()}
+              alt=""
+              fill
+              sizes="500px"
+            />
+            <span className="absolute bottom-0 z-10 w-full bg-black bg-opacity-80 p-10 font-semibold text-white">
+              <span className="mx-auto flex w-fit items-center gap-10">
                 <MoonStarsIcon className="ml-10" />
                 {alert}
               </span>
             </span>
-          )
-        }
-        footer={
-          <div className="relative pb-140 md:rs-pb-8">
-            <div className="absolute w-full">
-              <div className="flex items-center justify-between">
-                <h2 id={formId} className="type-2 mb-03em font-bold leading-tight text-black">
-                  Library hours
-                </h2>
-                <a href="https://library-hours.stanford.edu/libraries">See all hours</a>
-              </div>
+          </span>
+        )
+      }
+      footer={
+        <div className="relative pb-140 md:rs-pb-8">
+          <div className="absolute w-full">
+            <div className="flex items-center justify-between">
+              <h2 id={formId} className="type-2 mb-03em font-sans font-bold leading-tight text-black">
+                Library hours
+              </h2>
+              <a href="https://library-hours.stanford.edu/libraries">See all hours</a>
+            </div>
 
-              <div className="mb-10">
-                <SelectList
-                  ariaLabelledby={formId}
-                  options={libraryOptions}
-                  defaultValue={libraryOptions.find(option => option.value === selectedLibrary)?.value}
-                  onChange={(_e, value) => setSelectedLibrary(value as string)}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                {library?.suLibraryHours && <TodayLibraryHours branchId={library.suLibraryHours} />}
+            <div className="mb-10">
+              <SelectList
+                ariaLabelledby={formId}
+                options={libraryOptions}
+                defaultValue={libraryOptions.find(option => option.value === selectedLibrary)?.value}
+                onChange={(_e, value) => setSelectedLibrary(value as string)}
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              {library?.suLibraryHours && <TodayLibraryHours branchId={library.suLibraryHours} />}
 
-                {library?.suLibraryMapLink?.url && (
-                  <Link href={library.suLibraryMapLink.url} prefetch={false} className="flex items-center">
-                    <span className="sr-only">{library.title}&nbsp;</span>
-                    <MapPinIcon title="Map" width={25} className="mr-5" />
-                    Location
-                  </Link>
-                )}
-              </div>
+              {library?.suLibraryMapLink?.url && (
+                <Link href={library.suLibraryMapLink.url} prefetch={false} className="flex items-center">
+                  <span className="sr-only">{library.title}&nbsp;</span>
+                  <MapPinIcon title="Map" width={25} className="mr-5" />
+                  Location
+                </Link>
+              )}
             </div>
           </div>
-        }
-      />
-    </div>
+        </div>
+      }
+    />
   )
 }
 

diff --git a/src/components/patterns/card.tsx b/src/components/patterns/card.tsx
@@ -2,11 +2,11 @@ import {ReactNodeLike} from "prop-types"
 
 import formatHtml from "@/lib/format-html"
 import {DrupalLink} from "@/components/patterns/link"
-import {ElementType, JSX} from "react"
+import {ElementType, HTMLAttributes, JSX} from "react"
 import {Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d"
 import {twMerge} from "tailwind-merge"
 
-interface CardProps {
+type Props = HTMLAttributes<HTMLDivElement> & {
   video?: Maybe<ReactNodeLike>
   image?: Maybe<ReactNodeLike>
   caption?: string
@@ -35,7 +35,8 @@ const Card = ({
   linkStyle,
   headingLevel,
   hideHeading,
-}: CardProps) => {
+  ...props
+}: Props) => {
   const Heading: ElementType = headingLevel || "h2"
 
   const linkAttributes: Record<string, string> = {}
@@ -45,8 +46,17 @@ const Card = ({
     linkAttributes["aria-labelledby"] = headerId
     delete linkAttributes["aria-label"]
   }
+
+  const CardWrapper = header ? "article" : "div"
   return (
-    <div className="card basefont-20 block w-full border border-solid border-black-10 bg-white leading-display text-black shadow-md">
+    <CardWrapper
+      {...props}
+      aria-labelledby={header ? headerId : undefined}
+      className={twMerge(
+        "card basefont-20 block w-full border border-solid border-black-10 bg-white leading-display text-black shadow-md",
+        props.className
+      )}
+    >
       {image && (
         <div className="relative h-fit w-full">
           <div className="relative aspect-[16/9] overflow-hidden" aria-hidden="true">
@@ -80,7 +90,7 @@ const Card = ({
 
         {link?.url && <DrupalLink url={link.url} title={link.title} linkStyle={linkStyle} {...linkAttributes} />}
       </div>
-    </div>
+    </CardWrapper>
   )
 }
 export default Card
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -36,6 +36,7 @@ module.exports = {
         '15xl': '150rem',
       },
       screens: {
+        'xs': "440px",
         '3xl': "1600px"
       },
       scale: {