diff --git a/src/app/icon.ico b/src/app/icon.ico index 91b0b52..3b0d1c7 100644 Binary files a/src/app/icon.ico and b/src/app/icon.ico differ diff --git a/src/app/page.tsx b/src/app/page.tsx index b431fbf..0f4e73c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,13 +3,19 @@ import { fetchWorship } from '@/fetch/worship' import { fetchBlog } from '@/fetch/blog' import { fetchHighlights } from '@/fetch/highlights' import { Home } from '@/pageComponents/Home/Home' +import moment from 'moment' export const dynamic = 'force-dynamic' export default async function HomePage() { + const fromDate = moment().isoWeekday(1); + const tillDate = moment().isoWeekday(7); const events = await fetchEvents() - const worship = await fetchWorship() + const worship = await fetchWorship({ + fromDate: fromDate.toDate(), + tillDate: tillDate.toDate(), + }); const blog = await fetchBlog() const highlights = await fetchHighlights() diff --git a/src/components/ContactPerson2/styles.module.scss b/src/components/ContactPerson2/styles.module.scss index 5760b5d..d721266 100644 --- a/src/components/ContactPerson2/styles.module.scss +++ b/src/components/ContactPerson2/styles.module.scss @@ -18,4 +18,13 @@ .hover:hover { text-decoration: underline; +} + +@media screen and (max-width: 576px) { + .contact { + margin-top: 10px; + gap: 10px; + align-items: flex-start; + flex-direction: column; + } } \ No newline at end of file diff --git a/src/components/EventExcerpt/styles.module.scss b/src/components/EventExcerpt/styles.module.scss index 3bb02cf..571afdc 100644 --- a/src/components/EventExcerpt/styles.module.scss +++ b/src/components/EventExcerpt/styles.module.scss @@ -31,9 +31,8 @@ } .container { - width: 100%; + width: 95%; padding: 20px; - border: 4px solid $base-color; border-radius: 0; } } diff --git a/src/components/MassTable/MassTable.tsx b/src/components/MassTable/MassTable.tsx index 9126553..e2d5b46 100644 --- a/src/components/MassTable/MassTable.tsx +++ b/src/components/MassTable/MassTable.tsx @@ -23,15 +23,18 @@ export const MassTable = ({ location, masses }: MassTableProps) => { - {masses.map((mass) => ( - - ))} +
+ {masses.map((mass) => ( + + ))} +
+ ) } diff --git a/src/components/MassTable/MassTableRow.tsx b/src/components/MassTable/MassTableRow.tsx index 6b9fde4..e24fa46 100644 --- a/src/components/MassTable/MassTableRow.tsx +++ b/src/components/MassTable/MassTableRow.tsx @@ -8,7 +8,6 @@ import { useState } from 'react' import Link from 'next/link' import classNames from 'classnames' import { useTime } from '@/hooks/useTime' -import { useCompactDate, useShortDayName } from '@/hooks/useCompactDate' export type MassTableRowProps = { id: string @@ -23,10 +22,11 @@ export const MassTableRow = ({ type, cancelled, }: MassTableRowProps) => { - const [symbol, setSymbol] = useState('-') + const [symbol, setSymbol] = useState('') const time = useTime(date) - const compactDate = useCompactDate(date) - const day = useShortDayName(date) + //const compactDate = useCompactDate(date) + //const day = useShortDayName(date) + const day = new Date(date).toLocaleDateString("de-DE", {weekday: 'long'}) return ( setSymbol('†')} - onMouseLeave={() => setSymbol('-')} + onMouseLeave={() => setSymbol('')} > -
{day} {compactDate}
+
{day}
{symbol}
-
{time}
+
+ {time} {type === 'FAMILY' && ( {'Familien @@ -49,6 +50,7 @@ export const MassTableRow = ({ {type === 'WORD' && ( {'Wortgottesfeier'} )} +
) diff --git a/src/components/MassTable/styles.module.scss b/src/components/MassTable/styles.module.scss index 4a62d16..e353045 100644 --- a/src/components/MassTable/styles.module.scss +++ b/src/components/MassTable/styles.module.scss @@ -2,11 +2,12 @@ .row { display: flex; - gap: 10px; + gap: 5px; height: 24px; cursor: pointer; - align-items: center; font-size: 18px; + align-items: flex-start; + margin-bottom: 3px; } .link { @@ -25,17 +26,24 @@ } .symbol { + flex-shrink: 0; width: 14px; text-align: center; } +.day { + flex-shrink: 0; + width: 90px; +} + .time { - width: 80px; + display: inline-flex; + gap: 3px; + align-items: center; } .table { width: 200px; - text-align: center; display: flex; flex-direction: column; align-items: center; diff --git a/src/components/MegaMenu/styles.module.scss b/src/components/MegaMenu/styles.module.scss index 3b5c452..140894a 100644 --- a/src/components/MegaMenu/styles.module.scss +++ b/src/components/MegaMenu/styles.module.scss @@ -67,7 +67,7 @@ line-height: 95%; } -@media screen and (max-width: 576px) { +@media screen and (max-width: 1100px) { .menu { flex-direction: column; gap: 30px; @@ -75,7 +75,7 @@ } .menu, .itemGroup, .groupTitle, .itemTitle { - font-size: 15px; + font-size: 16px; } .itemGroup { @@ -90,7 +90,7 @@ .itemGroupContent { display: flex; flex-wrap: wrap; - gap: 10px + gap: 11px } .itemDescription { diff --git a/src/components/Menu/styles.module.scss b/src/components/Menu/styles.module.scss index a3d84d6..469fe22 100644 --- a/src/components/Menu/styles.module.scss +++ b/src/components/Menu/styles.module.scss @@ -80,6 +80,7 @@ flex-direction: column; padding: 15px 15px; align-items: inherit; + font-size: 20px; } .megaMenu { diff --git a/src/components/RawHTML/styles.module.scss b/src/components/RawHTML/styles.module.scss index ec0ddcf..743e454 100644 --- a/src/components/RawHTML/styles.module.scss +++ b/src/components/RawHTML/styles.module.scss @@ -9,6 +9,16 @@ } .content h3 { - font-size: 33px; - margin: 33px 0 20px 0; + font-size: 28px; + margin: 25px 0 20px 0; +} + +.content p { + margin-bottom: 30px; +} + +@media screen and (max-width: 576px) { + .content h3 { + font-size: 24px; + } } \ No newline at end of file diff --git a/src/components/Title/styles.module.scss b/src/components/Title/styles.module.scss index b891cc7..88bfe1d 100644 --- a/src/components/Title/styles.module.scss +++ b/src/components/Title/styles.module.scss @@ -9,7 +9,7 @@ .subtitle { position: relative; - top: -30px; + top: -20px; } .base { @@ -59,11 +59,11 @@ @media screen and (max-width: 576px) { .extraLarge { - font-size: 60px; + font-size: 40px; } .large { - font-size: 40px; + font-size: 35px; } .medium { diff --git a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx index 7bc4d0b..d6c30e0 100644 --- a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx +++ b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx @@ -73,6 +73,7 @@ export const CollapsibleImageWithText = ({backgroundColor, title, image, text, s schema={schema} backgroundColor={backgroundColor} unoptimized={false} + opaque={true} link={ setIsCollapsed(!isCollapsed)} />} /> diff --git a/src/compositions/ImageWithText/ImageWithText.tsx b/src/compositions/ImageWithText/ImageWithText.tsx index 00ad564..dd6aaf5 100644 --- a/src/compositions/ImageWithText/ImageWithText.tsx +++ b/src/compositions/ImageWithText/ImageWithText.tsx @@ -2,7 +2,7 @@ import { BackgroundColor, Section } from '@/components/Section/Section' import { Title } from '@/components/Title/Title' import { Container } from '@/components/Container/Container' import Image, { StaticImageData } from 'next/image' -import styles from "./styles.module.scss" +import styles from './styles.module.scss' import classNames from 'classnames' import { Row } from '@/components/Flex/Row' import { TextDiv } from '@/components/Text/TextDiv' @@ -14,35 +14,45 @@ type ImageWithTextProps = { text: string link?: React.ReactNode schema?: 'base' | 'contrast', - unoptimized?: boolean + unoptimized?: boolean, + opaque?: boolean } -export const ImageWithText = ({backgroundColor, title, image, text, link, schema = "base", unoptimized=true}: ImageWithTextProps) => { +export const ImageWithText = ( + { + backgroundColor, + title, + image, + text, link, + schema = 'base', + unoptimized = true, + opaque = false, + }: ImageWithTextProps) => { return (
- +
{""} + alt={''} />
- + <Title title={title} size={'lg'} color={schema} /> <Image className={styles.imageMobile} width={500} height={500} src={image} - objectFit={"cover"} + objectFit={'cover'} unoptimized={unoptimized} - alt={""} /> + alt={''} /> <TextDiv text={text} /> diff --git a/src/compositions/ImageWithText/styles.module.scss b/src/compositions/ImageWithText/styles.module.scss index 7dccf61..1d18c84 100644 --- a/src/compositions/ImageWithText/styles.module.scss +++ b/src/compositions/ImageWithText/styles.module.scss @@ -5,13 +5,16 @@ .image { border-radius: 13px; - opacity: 0.6; transition: opacity 3s; width: 100%; height: 100%; } -.image:hover { +.imageOpaque { + opacity: 0.6; +} + +.imageOpaque:hover { opacity: 1; } @@ -20,7 +23,6 @@ width: 70vw; height: 100%; border-radius: 13px; - opacity: 0.6; margin-bottom: 40px; } diff --git a/src/pageComponents/Home/Home.tsx b/src/pageComponents/Home/Home.tsx index b24bd54..17e91f2 100644 --- a/src/pageComponents/Home/Home.tsx +++ b/src/pageComponents/Home/Home.tsx @@ -113,7 +113,7 @@ export const Home = ({ <div className={styles.center}> <Button href={"/gottesdienst"} - size={"lg"} + size={"md"} >Alle Gottesdienste</Button> </div> </Section> @@ -138,6 +138,7 @@ export const Home = ({ color={'white'} key={highlight.id} date={highlight.date} + showDate={false} title={highlight.text} href={highlightLink(highlight)} cancelled={false} @@ -159,7 +160,9 @@ export const Home = ({ <ContactSection title={'Kontakt'} - description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec molestie ligula. Maecenas sollicitudin molestie velit id ultricies. Nulla luctus eleifend est, et hendrerit nunc pretium in. Nullam leo tortor, tincidunt in sodales dapibus, faucibus vel lacus. Nunc ornare lacus eu dui consequat, fermentum tincidunt felis blandit. Vivamus a turpis eros. Donec faucibus mi in magna cursus maximus. Duis ac elit posuere, bibendum nunc vel, consectetur neque. Aliquam non bibendum quam. Nulla facilisi. Vivamus eu iaculis felis. Donec elit augue, pretium eget pretium ullamcorper, vestibulum eu lorem. Praesent gravida condimentum tortor, in dignissim mauris elementum quis. Morbi a venenatis odio. Vivamus quis magna eget elit pellentesque elementum. Nulla facilisi.'} + description={'Haben Sie Fragen zum Glauben, den Sakramenten oder unseren Angeboten? Benötigen Sie Hilfe in einer schwierigen Situation oder möchten Sie einfach Ihre Gedanken mit uns teilen?\n' + + '\n' + + 'Zögern Sie nicht, uns über das Kontaktformular zu schreiben. Wir freuen uns über jede Nachricht und sind gerne für Sie da.'} schema={"base"} /> </>