-
+
{description}
diff --git a/src/components/EventRow/EventRow.tsx b/src/components/EventRow/EventRow.tsx
index b6302a8..1453e29 100644
--- a/src/components/EventRow/EventRow.tsx
+++ b/src/components/EventRow/EventRow.tsx
@@ -1,4 +1,6 @@
-import { useMemo } from 'react'
+"use client"
+
+import { useEffect, useMemo, useState } from 'react'
import styles from "./styles.module.scss"
import classNames from 'classnames'
import Link from 'next/link'
@@ -43,6 +45,12 @@ export const EventRow = ({date, title, location, cancelled, href, color = "base"
const day = useMemo(() => date.substring(8, 10), [date]);
const dateObj = useMemo(() => new Date(date), [date]);
const month = useMemo(() => shortMonth(date), [date]);
+ const [dayFormat, setDayFormat] = useState<"long" | "short">("long")
+ useEffect(() => {
+ if(window.innerWidth <= 576) {
+ setDayFormat("short")
+ }
+ }, [setDayFormat])
return (
@@ -67,7 +75,8 @@ export const EventRow = ({date, title, location, cancelled, href, color = "base"
[styles.cancelled]: cancelled
})}>
{title}
- {dateObj.toLocaleDateString("de-DE", { weekday: "long" })} {dateObj.toLocaleDateString("de-DE", { dateStyle: "medium" })}, {dateObj.toLocaleTimeString("de-DE", { timeStyle: "short" })} Uhr
+ {dateObj.toLocaleDateString("de-DE", { weekday: "long" })}
+ {dayFormat === "long" && " " + dateObj.toLocaleDateString("de-DE", { dateStyle: "medium" })}, {dateObj.toLocaleTimeString("de-DE", { timeStyle: "short" })} Uhr
{location}
diff --git a/src/components/EventRow/styles.module.scss b/src/components/EventRow/styles.module.scss
index 8b65669..28a80f9 100644
--- a/src/components/EventRow/styles.module.scss
+++ b/src/components/EventRow/styles.module.scss
@@ -5,7 +5,7 @@
font-size: 25px;
font-weight: bold;
text-align: center;
- margin-left: 30px;
+ width: 93px;
transition: color 0.2s ease-in;
}
@@ -25,7 +25,7 @@
width: 0.7px;
background: $shade1;
height: 96px;
- margin: 0 30px;
+ margin-right: 25px;
}
.lineWhite {
@@ -68,11 +68,12 @@
@media screen and (max-width: 576px) {
.day {
- margin-left: 15px;
+ font-size: 22px;
+ width: 70px;
}
.line {
- margin: 0 15px;
+ margin-right: 20px;
height: 70px;
}
}
\ No newline at end of file
diff --git a/src/components/MassTable/styles.module.scss b/src/components/MassTable/styles.module.scss
index 3bf89d7..4a62d16 100644
--- a/src/components/MassTable/styles.module.scss
+++ b/src/components/MassTable/styles.module.scss
@@ -36,6 +36,9 @@
.table {
width: 200px;
text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
.church {
diff --git a/src/components/Menu/styles.module.scss b/src/components/Menu/styles.module.scss
index c77d429..0ac7288 100644
--- a/src/components/Menu/styles.module.scss
+++ b/src/components/Menu/styles.module.scss
@@ -30,7 +30,6 @@
.menuLink {
color: inherit;
text-decoration: none;
- font-weight: 600;
transition: opacity 100ms ease-in;
cursor: pointer;
}
@@ -54,7 +53,6 @@
background-color: #eeeeee;
transition: background-color 0.1s ease-in-out;
font-family: inherit;
- font-weight: 600;
}
.button:hover {
diff --git a/src/compositions/Events/events.module.scss b/src/compositions/Events/events.module.scss
index dd7600c..2057dda 100644
--- a/src/compositions/Events/events.module.scss
+++ b/src/compositions/Events/events.module.scss
@@ -24,5 +24,11 @@
}
.buttons {
- padding-left: 130px;
+ padding-left: 115px;
+}
+
+@media screen and (max-width: 576px) {
+ .buttons {
+ padding-left: 70px;
+ }
}
\ No newline at end of file
diff --git a/src/compositions/PageHeader/PageHeader.tsx b/src/compositions/PageHeader/PageHeader.tsx
index faf78bc..c0058d2 100644
--- a/src/compositions/PageHeader/PageHeader.tsx
+++ b/src/compositions/PageHeader/PageHeader.tsx
@@ -19,9 +19,7 @@ export const PageHeader = ({ title, description, image, alt }: PageHeaderProps)