Merge remote-tracking branch 'origin/dev' into dev
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
# Conflicts: # Dockerfile # src/components/Footer.astro # src/pages/index.astro # src/styles/components/Drinks.css # src/styles/components/HoverCard.css
This commit is contained in:
21
Dockerfile
21
Dockerfile
@ -1,22 +1,29 @@
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
# Ensure CSS variables are present
|
||||
RUN mkdir -p public/styles
|
||||
RUN cp -r styles/* public/styles/ || true
|
||||
|
||||
RUN npm run build
|
||||
|
||||
FROM node:20-alpine AS production
|
||||
|
||||
ENV NODE_ENV=production
|
||||
WORKDIR /app
|
||||
RUN npm install -g serve
|
||||
COPY --from=build /app/dist ./dist
|
||||
|
||||
# Copy built app and minimal runtime files
|
||||
COPY --from=build /app/dist /app/dist
|
||||
COPY --from=build /app/package*.json /app/
|
||||
|
||||
RUN npm pkg delete devDependencies || true
|
||||
|
||||
EXPOSE 3000
|
||||
CMD ["serve", "-s", "dist", "-l", "3000"]
|
||||
|
||||
# Run Astro server entry (node adapter standalone)
|
||||
CMD ["node", "dist/server/entry.mjs"]
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD wget -qO- http://localhost:3000/ || exit 1
|
||||
@ -1,13 +1,11 @@
|
||||
---
|
||||
// src/components/Footer.astro
|
||||
import "../styles/components/Footer.css"
|
||||
import "/styles/components/Footer.css"
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="footer" id="footer">
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
|
||||
|
||||
<div class="footer-sections">
|
||||
<div class="footer-section">
|
||||
<h3>Öffnungszeiten</h3>
|
||||
@ -22,7 +20,7 @@ const currentYear = new Date().getFullYear();
|
||||
<p>Gallus Pub</p>
|
||||
<p>Metzgergasse 13</p>
|
||||
<p>9000 St. Gallen</p>
|
||||
<p><a href="tel:0772322770">077 232 27 70</a></p>
|
||||
<p>Email:</p>
|
||||
<p><a href="mailto:info@gallus-pub.ch">info@gallus-pub.ch</a></p>
|
||||
</div>
|
||||
|
||||
@ -30,9 +28,11 @@ const currentYear = new Date().getFullYear();
|
||||
<h3>Raumreservationen</h3>
|
||||
<p>Du planst einen Event?</p>
|
||||
<p>Der "St.Gallerruum" im 2.OG</p>
|
||||
<p>kann gemietet werden.</p>
|
||||
<p>Kann gemietet werden.</p>
|
||||
<p>Reservierungen via Whatsapp</p>
|
||||
<p><a href="tel:0772322770">077 232 27 70</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© {currentYear} Gallus Pub. Alle Rechte vorbehalten.
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
// src/pages/index.astro
|
||||
import Layout from "../components/Layout.astro";
|
||||
import Hero from "../components/Hero.astro";
|
||||
import Welcome from "../components/Welcome.astro";
|
||||
@ -8,75 +9,9 @@ import ImageCarousel from "../components/ImageCarousel.astro";
|
||||
import Contact from "../components/Contact.astro";
|
||||
import About from "../components/About.astro";
|
||||
|
||||
const events = [
|
||||
{
|
||||
image: "/images/karaoke.jpg",
|
||||
title: "Karaoke",
|
||||
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/Event3.png",
|
||||
title: "Karaoke tes",
|
||||
date: "Mittwoch - Samstag",
|
||||
description: `
|
||||
`,
|
||||
},
|
||||
{
|
||||
image: "/images/Event2.png",
|
||||
title: "Karaoke test",
|
||||
date: "Mittwoch - Samstag",
|
||||
description: `
|
||||
`,
|
||||
},
|
||||
{
|
||||
image: "/images/Event1.png",
|
||||
title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
|
||||
date: "Do, 04. September 2025",
|
||||
description: `
|
||||
<b>ab 19 Uhr geht’s los, bis max. 21.30 Uhr</b> <br>
|
||||
Kosten? CHF 10 pro Spielgast
|
||||
Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
|
||||
`,
|
||||
},
|
||||
{
|
||||
image: "/images/Event4.png",
|
||||
title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
|
||||
date: "Sa, 27. September 2025",
|
||||
description: `
|
||||
<b>ab 20:00 Uhr</b> <br>
|
||||
Eintritt ist Frei / Hutkollekte <br>
|
||||
Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
const images = [
|
||||
{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
|
||||
{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
|
||||
{ src: "/images/Gallery9.png", alt: "Neuntes Bild" },
|
||||
{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
|
||||
{ src: "/images/Gallery1.png", alt: "Erstes Bild" },
|
||||
{ src: "/images/Gallery2.png", alt: "Zweites Bild" },
|
||||
{ src: "/images/Gallery3.png", alt: "Drittes Bild" },
|
||||
{ src: "/images/Gallery4.png", alt: "Viertes Bild" },
|
||||
{ src: "/images/Gallery5.png", alt: "Fünftes Bild" },
|
||||
];
|
||||
// Inhalte aus Dateien laden (editierbar über Admin)
|
||||
import events from "../content/events.json";
|
||||
import images from "../content/gallery.json";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.Drinks {
|
||||
font-family: var(--font-family-primary);
|
||||
font-family: var(--font-family-primary), serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-large);
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-text);
|
||||
text-transform: uppercase;
|
||||
@ -25,7 +25,6 @@
|
||||
.card-link {
|
||||
border: 2px solid var(--color-accent-beige);
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
@ -69,6 +68,7 @@
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: var(--border-radius);
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
@ -81,8 +81,8 @@
|
||||
}
|
||||
|
||||
.circle {
|
||||
height: 35vh;
|
||||
width: 35vh;
|
||||
height: 9em;
|
||||
width: 9em;
|
||||
border: 2px solid var(--color-accent-beige);
|
||||
border-radius: 50%;
|
||||
margin: 0.5rem;
|
||||
@ -94,7 +94,6 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circle:hover {
|
||||
@ -110,25 +109,12 @@
|
||||
text-align: center;
|
||||
transition: opacity var(--transition-standard);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.circle:hover .circle-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.circle-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circle-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -163,6 +149,10 @@
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.circle-label {
|
||||
font-size: 0.7rem;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.hover-card {
|
||||
position: relative;
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-accent-green);
|
||||
box-shadow: var(--box-shadow);
|
||||
@ -12,28 +12,8 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Hover effects only for devices that support hover */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.hover-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.hover-card:hover .hover-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-card:hover .card-image {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 15px 15px 5px 15px;
|
||||
margin: 0;
|
||||
color: var(--color-accent-beige);
|
||||
font-size: var(--font-size-medium);
|
||||
text-align: center;
|
||||
order: -2;
|
||||
.hover-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card_date {
|
||||
@ -104,12 +84,11 @@
|
||||
scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Active state for mobile tap functionality */
|
||||
.hover-card.active .hover-text {
|
||||
.hover-card:hover .hover-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-card.active .card-image {
|
||||
.hover-card:hover .card-image {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
@ -122,34 +101,5 @@
|
||||
.hover-card {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
/* Maintain square aspect ratio */
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
/* Add cursor pointer to indicate it's clickable */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Add visual feedback for tap */
|
||||
.hover-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.hover-card::after {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: var(--color-accent-beige);
|
||||
font-size: 0.7rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Hide the hint when card is active */
|
||||
.hover-card.active::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user