diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css new file mode 100644 index 0000000..e89fb9c --- /dev/null +++ b/assets/stylesheets/style.css @@ -0,0 +1,49 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + background-color: #3b82f6; +} + +@keyframes shake { + + 0%, + 100% { + transform: translateX(0); + } + + 25%, + 75% { + transform: translateX(-10px); + } + + 50% { + transform: translateX(10px); + } +} + +.main-c::after { + content: ""; + display: block; + position: absolute; + background-image: url(../concert.webp); + top: 0; + bottom: 0; + left: 0; + right: 0; + background-size: cover; + z-index: 0; + opacity: 0.03; + filter: blur(3px); + pointer-events: none; +} + +.sr-only { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); +} diff --git a/assets/stylesheets/style.scss b/assets/stylesheets/style.scss deleted file mode 100644 index 57dd5f1..0000000 --- a/assets/stylesheets/style.scss +++ /dev/null @@ -1,81 +0,0 @@ -@import "modern-css-reset"; - -:root { - /* Fonts */ - --font-main: "Open Sans", sans-serif; - --font-header: "Roboto", sans-serif; - - /* Colors */ - --background-light: #d8dbe2; - --background-color: #a9bcd0; - --background-dark: #373f51; - --main-color: #58a4b0; - --main-dark: #1b1b1e; -} - -* { - box-sizing: border-box; -} - -svg { - fill: currentColor; -} - -@keyframes shake { - 0%, - 100% { - transform: translateX(0); - } - 25%, - 75% { - transform: translateX(-10px); - } - 50% { - transform: translateX(10px); - } -} - -body { - background: linear-gradient(238.72deg, #ffe5c7 0%, #00c288 100%), - radial-gradient(90.88% 100% at 50% 0%, #439246 0%, #183766 100%), - linear-gradient(121.28deg, #ffeab6 0%, #003c2a 100%), - radial-gradient(64.89% 100% at 50% 0%, #80baff 0%, #001e41 100%), - linear-gradient(65.05deg, #6f0072 0%, #ffc700 100%); - background-blend-mode: overlay, screen, color-burn, lighten, normal; - font-family: var(--font-main); - &:after { - content: ""; - display: block; - position: absolute; - background-image: url(../concert.webp); - top: 0; - bottom: 0; - left: 0; - right: 0; - background-size: cover; - z-index: -1; - opacity: 0.05; - filter: blur(3px); - } -} - -.container { - display: flex; - flex-direction: column; - height: 100vh; - article { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-around; - } -} - -.sr-only { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); -} diff --git a/components/Events/Events.module.scss b/components/Events/Events.module.scss deleted file mode 100644 index 626c5cd..0000000 --- a/components/Events/Events.module.scss +++ /dev/null @@ -1,57 +0,0 @@ -.container { - background-color: #000; - padding-bottom: 1rem; -} - -.event { - background-color: #000; - max-width: 425px; - margin: 0 auto; - padding: 12px 5%; - display: flex; - text-decoration: none; - align-items: center; -} - -.date { - height: 60px; - text-align: center; - width: 60px; - margin-right: 0.5rem; - flex-shrink: 0; -} - -.dateMonth { - color: #fff; - background-color: #d47069; - font-size: 12px; - line-height: 16px; - padding: 1px; -} - -.dateDay { - color: #000; - background-color: #f2f2f2; - font-size: 20px; - padding: 0.5rem; -} - -.details { - display: table-cell; - line-height: 1.5; - padding-left: 15px; - text-align: left; - vertical-align: middle; - width: 100%; - & p { - overflow: hidden; - padding: 3px 0; - text-overflow: ellipsis; - white-space: nowrap; - color: #fff; - } -} - -.venue { - opacity: 0.7; -} diff --git a/components/Events/Events.tsx b/components/Events/Events.tsx index fa9832e..05bbfad 100644 --- a/components/Events/Events.tsx +++ b/components/Events/Events.tsx @@ -2,33 +2,27 @@ import React from "react"; import { Event } from "types"; -import styles from "./Events.module.scss"; +import { Calendar } from "lucide-react"; interface EventsProps { events: Event[]; } const Events = ({ events }: EventsProps) => ( -
+
{events.map(({ date, venueName, location, buyUrl }) => { const eventDate = new Date(date); return ( - -
-

- {eventDate.toLocaleDateString("en-gb", { month: "short" })} -

-

{eventDate.getDate()}

-
-
-

{venueName}

-

{location}

+ +
+

Next Gig

+
+ +

+ {eventDate.toLocaleDateString("en-gb", { month: "short" })}{" "} + {eventDate.getDate()} - {venueName}, {location} +

+
); diff --git a/components/Footer/Footer.module.scss b/components/Footer/Footer.module.scss deleted file mode 100644 index 71c49fa..0000000 --- a/components/Footer/Footer.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -.footer { - background-color: var(--background-dark); - font-size: 14px; - & p { - color: #e5e5e5; - line-height: 1.5; - padding: 20px; - text-align: center; - } - & a { - color: #fff; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - & span { - display: inline-block; - white-space: nowrap; - } -} diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index b30f4b8..4a26811 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -1,17 +1,30 @@ +import classNames from "classnames"; import React from "react"; interface FooterProps { + className?: string; showCredits?: boolean; } -import styles from "./Footer.module.scss"; - -const Footer = ({ showCredits }: FooterProps) => ( -