fix: small fixes

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()
 

src/components/ContactPerson2/styles.module.scss

@@ -19,3 +19,12 @@
 .hover:hover {
   text-decoration: underline;
 }
+
+@media screen and (max-width: 576px) {
+  .contact {
+    margin-top: 10px;
+    gap: 10px;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

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;
   }
 }

src/components/MassTable/MassTable.tsx

@@ -23,6 +23,7 @@ export const MassTable = ({ location, masses }: MassTableProps) => {
         <ChurchCard church={church(location)} backgroundColor={"#ffffff"} width={200} />
       </div>
 
+      <div>
         {masses.map((mass) => (
           <MassTableRow
             key={mass.id}
@@ -33,5 +34,7 @@ export const MassTable = ({ location, masses }: MassTableProps) => {
           />
         ))}
       </div>
+
+    </div>
   )
 }

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 (
     <Link
@@ -36,11 +36,12 @@ export const MassTableRow = ({
       <div
         className={styles.row}
         onMouseEnter={() => setSymbol('†')}
-        onMouseLeave={() => setSymbol('-')}
+        onMouseLeave={() => setSymbol('')}
       >
-        <div className={styles.time}>{day} {compactDate}</div>
+        <div className={styles.day}>{day}</div>
         <div className={styles.symbol}>{symbol}</div>
-        <div>{time}</div>
+        <div className={styles.time}>
+          {time}
 
           {type === 'FAMILY' && (
             <Image src={family} width={18} height={18} alt={'Familien Messe'} />
@@ -50,6 +51,7 @@ export const MassTableRow = ({
             <Image src={bible} width={18} height={18} alt={'Wortgottesfeier'} />
           )}
         </div>
+      </div>
     </Link>
   )
 }

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;

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 {

src/components/Menu/styles.module.scss

@@ -80,6 +80,7 @@
     flex-direction: column;
     padding: 15px 15px;
     align-items: inherit;
+    font-size: 20px;
   }
 
   .megaMenu {

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;
+  }
 }

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 {

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={<MoreInformation isCollapsed={isCollapsed} onClick={() => setIsCollapsed(!isCollapsed)} />}
       />
 

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 (
     <Section backgroundColor={backgroundColor}>
       <Container>
-        <Row alignItems={"center"}>
+        <Row alignItems={'center'}>
           <div className={classNames(styles.col, styles.imageCol)}>
             <Image
-              className={styles.image}
+              className={classNames({[styles.image]: true, [styles.imageOpaque]: opaque})}
               width={800}
               height={800}
               src={image}
-              objectFit={"cover"}
+              objectFit={'cover'}
               unoptimized={unoptimized}
-              alt={""} />
+              alt={''} />
           </div>
           <div className={styles.col}>
-            <Title title={title} size={"lg"} color={schema} />
+            <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} />
 

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;
 }
 

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"}
       />
     </>