Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/components/AddToCalendar.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
// TODO: replace with the public iCal URL of the DevFest 2026 calendar event.
// Use `webcal://` scheme so most browsers hand off to the OS default calendar app
// (Apple Calendar, Outlook desktop). Falls back to downloading the .ics file.
const ICS_URL = 'webcal://example.com/devfest-cz-2026.ics';
---

<a class="add-to-calendar" href={ICS_URL}>
<span class="label">Add to calendar</span>
<span class="icon" aria-hidden="true">+</span>
</a>

<style lang="scss">
.add-to-calendar {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'Share Tech Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
background: transparent;
border: 1px solid rgba(204, 0, 0, 0.55);
padding: 0.85rem 2rem;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
transition: background 0.25s, border-color 0.25s, color 0.25s;

&:hover {
background: rgba(204, 0, 0, 0.18);
border-color: rgba(204, 0, 0, 0.85);
color: var(--color-text);
}

&:focus-visible {
outline: 1px solid rgba(204, 0, 0, 0.85);
outline-offset: 3px;
}
}

.icon {
font-size: 1rem;
color: var(--color-accent);
opacity: 0.9;
line-height: 1;
}

@media (max-width: 600px) {
.add-to-calendar {
font-size: 0.72rem;
padding: 0.75rem 1.6rem;
letter-spacing: 0.22em;
}
}
</style>
4 changes: 4 additions & 0 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import BaseLayout from '../layouts/BaseLayout.astro';
import Countdown from '../components/Countdown';
import NewsletterForm from '../components/NewsletterForm';
import AddToCalendar from '../components/AddToCalendar.astro';
import Footer from '../components/Footer.astro';
import HeroBackground from '../components/HeroBackground.astro';
import Ticker from '../components/Ticker.astro';
Expand Down Expand Up @@ -144,6 +145,9 @@ const tickerTopics = [
Leave your email and we'll let you know the moment tickets go on sale.
</p>
<NewsletterForm client:visible />
<div class="newsletter-calendar">
<AddToCalendar />
</div>
</div>
</section>
</main>
Expand Down
6 changes: 6 additions & 0 deletions src/pages/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -456,6 +456,12 @@
margin: 0 auto 2.6rem;
}

.newsletter-calendar {
margin-top: 1.75rem;
display: flex;
justify-content: center;
}

.section-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.78rem;
Expand Down
Loading