Skip to content

Commit 49ae70a

Browse files
gtcagtca
committed
Conference save the date landing page
1 parent ffbfc7c commit 49ae70a

File tree

3 files changed

+195
-0
lines changed

3 files changed

+195
-0
lines changed

‎content/conference2025.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: "Standalone Page"
3+
layout: "conference"
4+
type: "page"
5+
url: "/conference2025"
6+
7+
# Conference Details
8+
label: "Save the date!"
9+
conferenceTitle: "scverse conference 2025"
10+
conferenceDates: "November 17 - 19"
11+
conferenceLocation: "Stanford, CA"
12+
subtitle: "Follow us on our channels to learn more details in the coming weeks"
13+
14+
# Design Options
15+
backgroundImage: "/img/events/2025_11_conference_bg.jpeg"
16+
# highlightColor: "#ff4f00"
17+
highlightColor: "#ff8b57"
18+
19+
# Social Links
20+
socialLinks:
21+
- name: "X / Twitter"
22+
url: "https://x.com/scverse_team"
23+
- name: "Bluesky"
24+
url: "https://bsky.app/profile/scverse.bsky.social"
25+
- name: "LinkedIn"
26+
url: "https://linkedin.com/company/scverse"
27+
- name: "Zulip"
28+
url: "https://scverse.zulipchat.com/"
29+
---
30+

‎layouts/page/conference.html

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ .Title }}</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap" rel="stylesheet">
10+
<style>
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
body, html {
18+
height: 100%;
19+
font-family: 'Inter', sans-serif;
20+
color: white;
21+
overflow: hidden;
22+
}
23+
24+
.background-container {
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
z-index: -1;
31+
background-color: #000;
32+
}
33+
34+
.background-container img,
35+
.background-container video {
36+
width: 100%;
37+
height: 100%;
38+
object-fit: cover;
39+
opacity: 0.8;
40+
}
41+
42+
.overlay {
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
width: 100%;
47+
height: 100%;
48+
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5));
49+
z-index: -1;
50+
}
51+
52+
.content {
53+
height: 100%;
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: center;
57+
padding: 2rem;
58+
max-width: 1600px;
59+
margin: 0 auto;
60+
text-align: center;
61+
}
62+
63+
h1 {
64+
font-size: clamp(3rem, 10vw, 5rem);
65+
font-weight: 800;
66+
font-family: 'Inter', sans-serif;
67+
letter-spacing: -0.02em;
68+
margin-bottom: 1rem;
69+
line-height: 1;
70+
background: linear-gradient(135deg, #ffffff 0%, #d0d0d0 100%);
71+
-webkit-background-clip: text;
72+
background-clip: text;
73+
-webkit-text-fill-color: transparent;
74+
}
75+
76+
.preamble {
77+
font-size: clamp(1rem, 3vw, 1.5rem);
78+
opacity: 0.5;
79+
margin: 1rem 0;
80+
}
81+
82+
.date-location {
83+
font-size: clamp(1.5rem, 3vw, 2rem);
84+
font-weight: 400;
85+
margin-bottom: 5rem;
86+
opacity: 0.8;
87+
}
88+
89+
.subtitle {
90+
font-size: clamp(1rem, 2vw, 1.25rem);
91+
font-weight: 300;
92+
max-width: 700px;
93+
margin: 0 auto;
94+
line-height: 1.6;
95+
}
96+
97+
.highlight {
98+
color: {{ .Params.highlightColor | default "#64ffda" }};
99+
font-weight: 400;
100+
}
101+
102+
.social-links {
103+
margin-top: 1rem;
104+
}
105+
106+
.social-links a {
107+
display: inline-block;
108+
margin: 0 0.75rem;
109+
color: white;
110+
font-size: 1.2rem;
111+
transition: transform 0.3s ease, color 0.3s ease;
112+
text-decoration: none;
113+
opacity: 0.8;
114+
}
115+
116+
.social-links a:hover {
117+
color: {{ .Params.highlightColor | default "#ff0000" }};
118+
transform: translateY(-.1rem);
119+
border-color: transparent;
120+
opacity: 1.0;
121+
transition: all 0.3s;
122+
}
123+
124+
@media (max-width: 768px) {
125+
.content {
126+
padding: 1.5rem;
127+
}
128+
129+
.social-links {
130+
margin-top: 2rem;
131+
}
132+
}
133+
</style>
134+
</head>
135+
<body>
136+
<div class="background-container">
137+
{{ if .Params.backgroundVideo }}
138+
<video autoplay muted loop>
139+
<source src="{{ .Params.backgroundVideo }}" type="video/mp4">
140+
</video>
141+
{{ else }}
142+
<img src="{{ .Params.backgroundImage | default "/images/conference-background.jpg" }}" alt="Conference background">
143+
{{ end }}
144+
</div>
145+
<div class="overlay"></div>
146+
147+
<div class="content">
148+
<div class="preamble">
149+
<span>{{ .Params.label | default " " }}</span>
150+
</div>
151+
<h1>{{ .Params.conferenceTitle | default .Title }}</h1>
152+
<div class="date-location">
153+
{{ .Params.conferenceDates | default "September 1 - 3" }}<br>
154+
{{ .Params.conferenceLocation | default "San Francisco, CA" }}
155+
</div>
156+
<p class="subtitle">{{ .Params.subtitle | default "Follow us on our channels to learn more details in the coming weeks. Join us for an unforgettable experience of innovation and collaboration." }}</p>
157+
158+
<div class="social-links">
159+
{{ range .Params.socialLinks }}
160+
<a href="{{ .url }}" aria-label="{{ .name }}" target="_blank">{{ .name }}</a>
161+
{{ end }}
162+
</div>
163+
</div>
164+
</body>
165+
</html>

‎static/img/events/2025_11_conference_bg.jpeg

217 KB
Loading

0 commit comments

Comments
 (0)