diff --git a/src/app/(non-home)/events/Events.scss b/src/app/(non-home)/events/Events.scss index d215d0a..1d355de 100644 --- a/src/app/(non-home)/events/Events.scss +++ b/src/app/(non-home)/events/Events.scss @@ -1,58 +1,94 @@ -.events_page { - margin-inline: auto; - max-width: 2000px; - margin-block: 1rem; +@media screen and (max-width: 767px) { + .events_page { + h1 { + margin-block: 2.5rem; + } - @media screen and (min-width: 768px) { - padding-inline: clamp(24px, 5px + 5vw, 6rem); + .events-container { + margin-block: 1rem; + } + + margin-inline: 1.5rem; margin-block: 1rem; + } - h1 { - margin-block: 2rem; - } + .button-container { + display: flex; + gap: 1rem; + margin-block: 1rem; + } +} + +@media screen and (min-width: 767px) { + .events_page { + margin-inline: auto; + max-width: 2000px; + margin-block: 1rem; - .upcoming-event { - color: white; - background-color: #191919; - padding: 2rem 0; + @media screen and (max-width: 767px) { + .events-container { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + } - h2 { - margin-left: 1rem; + .button-container { + display: flex; + gap: 1rem; } } - .button-container { - display: flex; - gap: 1rem; - padding: 1rem 0; - - button { - --text-color: black; - --background-color: white; - color: var(--text-color); - background-color: var(--background-color); - border: 1.5px solid var(--text-color); - border-radius: 40px; - padding: 0.4rem 1rem 0.5rem; - font-size: 1.1rem; - font-family: $heading-font; - font-weight: 700; - cursor: pointer; - - &.active { - --text-color: white; - --background-color: black; + @media screen and (min-width: 768px) { + padding-inline: clamp(24px, 5px + 5vw, 6rem); + margin-block: 1rem; + + h1 { + margin-block: 2rem; + } + + .upcoming-event { + color: white; + background-color: #191919; + padding: 2rem 0; + + h2 { + margin-left: 1rem; } } - } - .events-container { - margin: 1rem 0; - margin-bottom: 1rem; - display: grid; - gap: 1px; - grid-template-columns: repeat(3, 1fr); - row-gap: 2rem; + .button-container { + display: flex; + gap: 1rem; + padding: 1rem 0; + + button { + --text-color: black; + --background-color: white; + color: var(--text-color); + background-color: var(--background-color); + border: 1.5px solid var(--text-color); + border-radius: 40px; + padding: 0.4rem 1rem 0.5rem; + font-size: 1.1rem; + font-family: $heading-font; + font-weight: 700; + cursor: pointer; + + &.active { + --text-color: white; + --background-color: black; + } + } + } + + .events-container { + margin: 1rem 0; + margin-bottom: 1rem; + display: grid; + gap: 1px; + grid-template-columns: repeat(3, 1fr); + row-gap: 2rem; + } } } } diff --git a/src/app/(non-home)/events/PastEventSection.tsx b/src/app/(non-home)/events/PastEventSection.tsx index b54aa91..eb3fcba 100644 --- a/src/app/(non-home)/events/PastEventSection.tsx +++ b/src/app/(non-home)/events/PastEventSection.tsx @@ -24,6 +24,7 @@ export default function EventSection() { return (
+

Past Events

-

2024-2025

+

2024-2025

Events coming soon!

-

2023-2024

+

2023-2024

{filteredEvents.map(item => ( {/* */} -

Past Events

); diff --git a/src/app/components/EventCard/EventCard.scss b/src/app/components/EventCard/EventCard.scss index 786925f..f880976 100644 --- a/src/app/components/EventCard/EventCard.scss +++ b/src/app/components/EventCard/EventCard.scss @@ -1,28 +1,41 @@ -.event-image { - display: inline-block; - vertical-align: middle; - -webkit-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: transform; - transition-property: transform; +/*@media screen and (max-width: 767px) { + .event-card { + + } } +*/ -.event-image:hover, -.event-image:focus, -.event-image:active { - -webkit-transform: scale(0.925); - transform: scale(0.925); -} +.event-card { + margin-block: 2rem; -.event-card-content { - .event-card-title { - padding: 1rem 0; + .event-image { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + width: 80%; + height: 80%; } - .event-card-description { - font-size: 15px; + .event-image:hover, + .event-image:focus, + .event-image:active { + -webkit-transform: scale(0.925); + transform: scale(0.925); + } + + .event-card-content { + .event-card-title { + padding: 1rem 0; + } + + .event-card-description { + font-size: 15px; + } } } diff --git a/src/app/components/EventCard/EventCard.tsx b/src/app/components/EventCard/EventCard.tsx index 5f4154e..e17b34e 100644 --- a/src/app/components/EventCard/EventCard.tsx +++ b/src/app/components/EventCard/EventCard.tsx @@ -26,8 +26,8 @@ export default function EventCard({ className="event-image" src={imgLink} alt={`graphic for ${{ event_title }}`} - width="250" - height="250" + width="500" + height="500" />