Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Event Cards Update und alle links sind Orange, einheitlich auf der ganzen Seite

Browse Source
This commit is contained in:
Selina Erci
2025-07-23 14:56:34 +02:00
parent f356b37c9e
commit f0afa677a0
9 changed files with 171 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/crepes_sucette.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/images/karaoke.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
public/images/pub_quiz.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

36
src/components/EventsGrid.astro
View File

@ -3,26 +3,28 @@
import HoverCard from "./HoverCard.astro"; import HoverCard from "./HoverCard.astro";
interface Event { interface Event {
image: string; image: string;
title: string; title: string;
date: Date; date: string;
description: string; description: string;
} }
const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string }; const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
import '../../styles/components/EventsGrid.css'; events?: Event[];
id?: string;
};
import "../../styles/components/EventsGrid.css";
--- ---
<h2 class="section-title">Events</h2> <h2 class="section-title">Events</h2>
<section id={id} class="events-gird container"> <section id={id} class="events-gird container">
{
{events.map((event: Event) => ( events.map((event: Event) => (
<HoverCard
<HoverCard title={event.title}
title={event.title} date={event.date}
date={event.date} description={event.description}
description={event.description} image={event.image}
image={event.image} />
/> ))
))} }
</section> </section>

11
src/components/HoverCard.astro
View File

@ -1,7 +1,7 @@
--- ---
// src/components/HoverCard.astro // src/components/HoverCard.astro
import "../../styles/components/HoverCard.css" import "../../styles/components/HoverCard.css";
const { title, description, image = "", date} = Astro.props; const { title, description, image = "", date } = Astro.props;
--- ---
<article class="hover-card"> <article class="hover-card">
@ -9,13 +9,10 @@ const { title, description, image = "", date} = Astro.props;
<img class="card-image" src={image} alt={title} /> <img class="card-image" src={image} alt={title} />
</div> </div>
<h3 class="card-title">{title}</h3> <h3 class="card-title" set:html={title} />
<h4 class="card_date">{date}</h4> <h4 class="card_date">{date}</h4>
<div class="hover-text"> <div class="hover-text">
<div> <p set:html={description} />
<p>{description}</p>
</div>
</div> </div>
</article> </article>

59
src/pages/index.astro
View File

@ -3,34 +3,59 @@
import Layout from "../components/Layout.astro"; import Layout from "../components/Layout.astro";
import Hero from "../components/Hero.astro"; import Hero from "../components/Hero.astro";
import Welcome from "../components/Welcome.astro"; import Welcome from "../components/Welcome.astro";
import EventsGrid from '../components/EventsGrid.astro'; import EventsGrid from "../components/EventsGrid.astro";
import Drinks from "../components/Drinks.astro"; import Drinks from "../components/Drinks.astro";
import ImageCarousel from "../components/ImageCarousel.astro"; import ImageCarousel from "../components/ImageCarousel.astro";
const events = [ const events = [
{image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }, {
{image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }, image: "/images/karaoke.jpg",
{image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' }, title: "Karaoke",
{image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' } date: "Mittwoch - Samstag",
description: `
Bei uns gibt es Karaoke Mi-Sa!! <br>
Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
`,
},
{
image: "/images/pub_quiz.jpg",
title: "Pub Quiz",
date: "Jeden Freitag",
description: `
Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
Auch Einzelpersonen sind herzlich willkommen! <br>
*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
`,
},
{
image: "/images/crepes_sucette.jpg",
title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
date: "Do, 04. September 2025",
description: `
<b>20:00 Uhr</b> <br>
<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
},
]; ];
const images = [ const images = [
{ src: '/images/Logo.png', alt: 'Erstes Bild' }, { src: "/images/Logo.png", alt: "Erstes Bild" },
{ src: '/images/Logo.png', alt: 'Zweites Bild' }, { src: "/images/Logo.png", alt: "Zweites Bild" },
{ src: '/images/Logo.png', alt: 'Drittes Bild' }, { src: "/images/Logo.png", alt: "Drittes Bild" },
{ src: '/images/Logo.png', alt: 'Viertes Bild' }, { src: "/images/Logo.png", alt: "Viertes Bild" },
{ src: '/images/Logo.png', alt: 'Fünftes Bild' }, { src: "/images/Logo.png", alt: "Fünftes Bild" },
{ src: '/images/Logo.png', alt: 'Sechstes Bild' }, { src: "/images/Logo.png", alt: "Sechstes Bild" },
{ src: '/images/Logo.png', alt: 'Siebtes Bild' }, { src: "/images/Logo.png", alt: "Siebtes Bild" },
{ src: '/images/Logo.png', alt: 'Achtes Bild' }, { src: "/images/Logo.png", alt: "Achtes Bild" },
{ src: '/images/Logo.png', alt: 'Neuntes Bild' }, { src: "/images/Logo.png", alt: "Neuntes Bild" },
{ src: '/images/Logo.png', alt: 'Zehntes Bild' } { src: "/images/Logo.png", alt: "Zehntes Bild" },
]; ];
--- ---
<Layout> <Layout>
<Hero id="hero" /> <Hero id="hero" />
<Welcome id="welcome" /> <Welcome id="welcome" />
<EventsGrid id="events" events={events} /> <EventsGrid id="events" events={events} />

132
styles/components/HoverCard.css
View File

@ -1,112 +1,114 @@
.hover-card { .hover-card {
position: relative; position: relative;
width: 350px; width: 350px;
height: 400px; height: 400px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color-accent-green); background-color: var(--color-accent-green);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
transition: transform var(--transition-standard); transition: transform var(--transition-standard);
overflow: hidden; overflow: hidden;
margin: var(--margin-standard); margin: var(--margin-standard);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.hover-card:hover { .hover-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
} }
.card-title { .card-title {
padding: 15px 15px 5px 15px; padding: 15px 15px 5px 15px;
margin: 0; margin: 0;
color: var(--color-accent-beige); color: var(--color-accent-beige);
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
text-align: center; text-align: center;
order: -2; order: -2;
} }
.card_date { .card_date {
padding: 0 15px 15px 15px; padding: 0 15px 15px 15px;
margin: 0; margin: 0;
color: var(--color-accent-beige); color: var(--color-accent-beige);
font-size: var(--font-size-small); font-size: var(--font-size-small);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
order: -1; order: -1;
} }
.image-container { .image-container {
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.card-image { .card-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.hover-text { .hover-text {
position: absolute; font-size: var(--font-size-small-medium);
top: 0; text-align: center;
left: 0; position: absolute;
width: 100%; top: 0;
height: 100%; left: 0;
background-color: var(--color-accent-green-transparent); width: 100%;
display: flex; height: 100%;
justify-content: center; background-color: var(--color-accent-green-transparent);
align-items: center; display: flex;
padding: 20px; justify-content: center;
opacity: 0; align-items: center;
transition: opacity var(--transition-standard); padding: 20px;
opacity: 0;
transition: opacity var(--transition-standard);
} }
.hover-text div { .hover-text div {
color: var(--color-accent-beige); color: var(--color-accent-beige);
text-align: center; text-align: center;
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
padding-right: 5px; padding-right: 5px;
} }
.hover-text div::-webkit-scrollbar { .hover-text div::-webkit-scrollbar {
width: 5px; width: 5px;
} }
.hover-text div::-webkit-scrollbar-track { .hover-text div::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
} }
.hover-text div::-webkit-scrollbar-thumb { .hover-text div::-webkit-scrollbar-thumb {
background: var(--color-accent-beige); background: var(--color-accent-beige);
border-radius: 10px; border-radius: 10px;
} }
.hover-text div { .hover-text div {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1); scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
} }
.hover-card:hover .hover-text { .hover-card:hover .hover-text {
opacity: 1; opacity: 1;
} }
.hover-card:hover .card-image { .hover-card:hover .card-image {
opacity: 0.1; opacity: 0.1;
} }
.hover-text p { .hover-text p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hover-card { .hover-card {
width: 100%; width: 100%;
max-width: 350px; max-width: 350px;
} }
} }

9
styles/index.css
View File

@ -23,3 +23,12 @@ body {
width: var(--container-width); width: var(--container-width);
margin: 0 auto; margin: 0 auto;
} }
a {
color: #ffa500;
}
a:hover {
text-decoration: none;
}

54
styles/variables.css
View File

@ -1,30 +1,34 @@
:root { :root {
/* Colors */ /* Colors */
--color-background: #000; --color-background: #000;
--color-text: #f5f5f5; --color-text: #f5f5f5;
--color-accent-green: #213b28; --color-accent-green: #213b28;
--color-accent-beige: #ceb39b; --color-accent-beige: #ceb39b;
--color-accent-green-transparent: rgba(33, 59, 40, 0.95); --color-accent-green-transparent: rgba(33, 59, 40, 0.95);
--color-shadow: rgba(0, 0, 0, 0.2); --color-shadow: rgba(0, 0, 0, 0.2);
--color-orange1: #ffa500;
--font-family-primary: 'Georgia', serif; /* Font Sizes */
--font-size-small: 1rem; --font-family-primary: 'Georgia', serif;
--font-size-medium: 1.5rem; --font-size-small: 1rem;
--font-size-large: 2rem; --font-size-small-medium: 1.2rem;
--line-height: 1.6; --font-size-medium: 1.5rem;
--font-size-large: 2rem;
--container-width: 100%; --line-height: 1.6;
--container-max-width: 1600px;
--padding-vertical: 2rem;
--padding-horizontal: 0;
--margin-standard: 1rem;
--gap-standard: 30px;
--border-radius: 8px;
--box-shadow: 0 4px 8px var(--color-shadow);
--transition-standard: 0.3s ease;
--breakpoint-mobile: 768px; --container-width: 100%;
--breakpoint-desktop: 1600px; --container-max-width: 1600px;
--padding-vertical: 2rem;
--padding-horizontal: 0;
--margin-standard: 1rem;
--gap-standard: 30px;
--border-radius: 8px;
--box-shadow: 0 4px 8px var(--color-shadow);
--transition-standard: 0.3s ease;
--breakpoint-mobile: 768px;
--breakpoint-desktop: 1600px;
} }