Merge pull request #87 from Blazity/error-handle

fix: style tweaks
Blazity · Nov 7, 2023 · f2619f9 · f2619f9
2 parents 01d8267 + 1a87457
commit f2619f9
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 7 deletions.
diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
@@ -81,6 +81,7 @@ export function ArticleCard({
  alt={imageAlt ?? "lack of description"}
  width={780}
  height={264}
+ quality={100}
  sizes="(max-width: 220px) 82px, 480px, (max-width: 640px) 480px, 780px, (max-width: 1024px) 780px, 1020px"
  className={cn(
  "h-[82px] min-h-[82px] w-full rounded-xl object-cover text-center brightness-90 md:h-[264px] md:min-h-[264px] md:rounded-none",
@@ -144,7 +145,7 @@ export function ArticleCard({
  lines === "1" && "md:line-clamp-1",
  lines === "2" && "md:line-clamp-2",
  lines === "3" && "md:line-clamp-3",
- "line-clamp-3 text-lg font-bold tracking-[1px] md:text-[1.5rem] md:leading-10"
+ "line-clamp-3 text-lg font-bold tracking-[1px] md:text-[1.5rem] md:leading-9"
  )}
  >
  {title}

diff --git a/src/components/ArticleCard/Buttons/Tag.tsx b/src/components/ArticleCard/Buttons/Tag.tsx
@@ -16,7 +16,7 @@ export function Tag({
  variant === "transparent" && "bg-custom-gray-100 text-white",
  variant === "dark" && "bg-gray-500/90 text-white",
  variant === "light" && "bg-gray-200 text-black",
- " max-w-[150px] overflow-hidden text-ellipsis rounded-xl px-3 py-2 text-left font-semibold",
+ " max-w-[150px] overflow-hidden text-ellipsis rounded-xl px-3 py-2 text-left text-sm font-semibold",
  className
  )}
  >

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -53,7 +53,7 @@ export async function Footer({ footer, logoUrl }: FooterProps) {
  const categoryUrl = footerElement.element?.__typename === "Category" ? "/category" : ""
  const url = `/${locale}${categoryUrl}/${footerElement?.element?.slug}`
  return (
- <li key={footerElement?.element?.slug}>
+ <li key={footerElement?.element?.slug} className="w-fit">
  <Link prefetch={false} href={url} hrefLang={locale}>
  {footerElement?.element?.title}
  </Link>
@@ -63,7 +63,7 @@ export async function Footer({ footer, logoUrl }: FooterProps) {
  </ul>
  </nav>
  <div className="flex flex-col justify-between gap-10 lg:items-end lg:gap-3">
- <div className="w-1/3">
+ <div className="w-1/3 lg:w-auto">
  <NextIntlClientProvider locale={locale}>
  <DynamicLangSelect />
  </NextIntlClientProvider>
@@ -73,9 +73,9 @@ export async function Footer({ footer, logoUrl }: FooterProps) {
  hrefLang={locale}
  target="_blank"
  href={"https://blazity.com/"}
- className="flex max-h-[100px] w-full max-w-full lg:justify-end "
+ className="flex max-h-[100px] w-[100px] lg:justify-end "
  >
- <Image src={logoUrl} width={300} height={300} alt="Blazity logo" quality={100} className="w-1/3" />
+ <Image src={logoUrl} width={300} height={300} alt="Blazity logo" className="w-full" quality={100} />
  </Link>
  )}
  <p className="text-sm">

diff --git a/src/components/HighlightedArticles/HighlightedArticles.tsx b/src/components/HighlightedArticles/HighlightedArticles.tsx
@@ -16,6 +16,8 @@ export async function HighlightedArticles({ title, articles }: HighlightedArticl
  <ArticleCard
  orientation="vertical"
  key={`highlighted-${article.id}`}
+ tagsPosition="over"
+ lines={"2"}
  article={hygraphArticleToCardProps(article)}
  />
  )

diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx
@@ -30,7 +30,7 @@ export function RichText({
  h4: (props) => <h4 {...props} className="text-lg font-semibold dark:text-white" />,
  h5: (props) => <h5 {...props} className="text-base font-semibold dark:text-white" />,
  h6: (props) => <h6 {...props} className="text-sm font-semibold dark:text-white" />,
- p: (props) => <p {...props} className={cn(`my-4 text-lg text-gray-800 dark:text-white`, pClassName)} />,
+ p: (props) => <p {...props} className={cn(`text-md my-4 text-gray-800 dark:text-white`, pClassName)} />,
  ul: (props) => <ul {...props} className="my-4 list-inside list-disc text-lg text-gray-800 dark:text-white" />,
  ol: (props) => (
  <ol {...props} className="my-4 list-inside list-decimal text-lg text-gray-800 dark:text-white" />