diff --git a/src/components/Sponsor/Section/Sponsors.styles.ts b/src/components/Sponsor/Section/Sponsors.styles.ts index a77fa10..5da670c 100644 --- a/src/components/Sponsor/Section/Sponsors.styles.ts +++ b/src/components/Sponsor/Section/Sponsors.styles.ts @@ -16,17 +16,7 @@ export const SponsorsContainer = styled.div` max-width: 1440px; @media screen and (max-width: 800px) { - position: relative; - justify-content: flex-start; - align-items: center; - max-width: calc(100vw); - padding: 0 1rem 0.5rem 1rem; - box-sizing: border-box; - height: fit-content; - flex-wrap: nowrap; - overflow: scroll; - -ms-overflow-style: none; /* IE and Edge */ - overflow-y: hidden; + width: fit-content; } `; diff --git a/src/components/Sponsor/Section/Sponsors.tsx b/src/components/Sponsor/Section/Sponsors.tsx index 84b5c0e..1fba50e 100644 --- a/src/components/Sponsor/Section/Sponsors.tsx +++ b/src/components/Sponsor/Section/Sponsors.tsx @@ -29,18 +29,20 @@ const SponsorsSection = ({ return ( - {Object.keys(tierSponsors).map((tier) => ( - - {tier && tier !== "undefined" && {tier}} - - {tierSponsors[tier] - .sort((a, b) => a.name.localeCompare(b.name)) - .map((sponsor, index) => ( - - ))} - - - ))} + {Object.keys(tierSponsors) + .sort((a, b) => b.localeCompare(a)) + .map((tier) => ( + + {tier && tier !== "undefined" && {tier}} + + {tierSponsors[tier] + .sort((a, b) => a.name.localeCompare(b.name)) + .map((sponsor, index) => ( + + ))} + + + ))} ); }; diff --git a/src/components/Sponsor/Sponsor.styles.ts b/src/components/Sponsor/Sponsor.styles.ts index 62bae22..0fd22ba 100644 --- a/src/components/Sponsor/Sponsor.styles.ts +++ b/src/components/Sponsor/Sponsor.styles.ts @@ -10,6 +10,8 @@ export const Wrapper = styled.a` text-decoration: none; gap: 1rem; transition: 0.3s; + padding: 0.2rem; + box-shadow: 0 0 3px #cdcdcd; &:hover { transform: scale(0.95); @@ -21,6 +23,14 @@ export const LogoImage = styled(Image)` border-radius: 4px; height: 100%; max-height: 8rem; - aspect-ratio: 1 / 1; - box-shadow: 0 0 3px #cdcdcd; + min-width: 4rem; + max-width: 100%; + width: fit-content; + object-fit: cover; + + @media screen and (max-width: 800px) { + width: fit-content; + max-height: 6rem; + min-width: 3rem; + } `; diff --git a/src/components/Sponsor/Sponsor.tsx b/src/components/Sponsor/Sponsor.tsx index ca74c48..01e6238 100644 --- a/src/components/Sponsor/Sponsor.tsx +++ b/src/components/Sponsor/Sponsor.tsx @@ -4,14 +4,22 @@ import { Wrapper, LogoImage } from "./Sponsor.styles"; const Sponsor = ({ data }: { data: ISponsor }) => { const { name, logo, link } = data; + console.log(logo); + return ( ); diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index e63df9d..643702f 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -1,6 +1,15 @@ export interface ISponsor { name: string; - logo: { fields: { file: { url: string } } } | string; + logo: + | { + fields: { + file: { + url: string; + details: { image: { width: number; height: number } }; + }; + }; + } + | string; link: string; tier: string; } @@ -8,7 +17,16 @@ export interface ISponsor { export interface ITeamMember { name: string; role: string; - avatar: { fields: { file: { url: string } } } | string; + avatar: + | { + fields: { + file: { + url: string; + details: { image: { width: number; height: number } }; + }; + }; + } + | string; github?: string; linkedin?: string; lattes?: string;