pydata-helsinki
diff --git a/‎assets/pydata-helsinki-banner-16x9.avif‎
227 KB b/‎assets/pydata-helsinki-banner-16x9.avif‎
227 KB
diff --git a/‎assets/pydata-helsinki-banner-1x1.avif‎
148 KB b/‎assets/pydata-helsinki-banner-1x1.avif‎
148 KB
diff --git a/‎assets/pydata-helsinki-banner-4x3.avif‎
177 KB b/‎assets/pydata-helsinki-banner-4x3.avif‎
177 KB
diff --git a/‎index.html‎
Lines changed: 15 additions & 1 deletion b/‎index.html‎
Lines changed: 15 additions & 1 deletion
diff --git a/‎style.css‎
Lines changed: 17 additions & 1 deletion b/‎style.css‎
Lines changed: 17 additions & 1 deletion
@@ -4,8 +4,22 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="A group of Python and data enthusiasts in Helsinki, Finland.">
-<link rel="stylesheet" href="style.css?v=3">
+<link rel="stylesheet" href="style.css?v=4">
 <body>
+    <div class="banner">
+        <picture>
+            <source type="image/avif" media="(min-width: 768px)" srcset="assets/pydata-helsinki-banner-16x9.avif">
+            <source type="image/avif" media="(min-width: 480px)" srcset="assets/pydata-helsinki-banner-4x3.avif">
+            <source type="image/avif" srcset="assets/pydata-helsinki-banner-1x1.avif">
+            <source media="(min-width: 768px)" srcset="assets/pydata-helsinki-banner-16x9.png">
+            <source media="(min-width: 480px)" srcset="assets/pydata-helsinki-banner-4x3.png">
+            <img
+                src="assets/pydata-helsinki-banner-1x1.png"
+                alt="Helsinki Cathedral at Nightfall, photo by Tapio Haaja, overlaid with 'PyData Helsinki'"
+                class="banner-image"
+            >
+        </picture>
+    </div>
     <hgroup>
     <h1>PyData Helsinki</h1>
     <p>A group of Python and data enthusiasts in Helsinki, Finland</p>
 
@@ -32,7 +32,8 @@ img, picture, video, canvas, svg {
 
 body {
     font-family: var(--font-family);
-    font-size: 1rem;
+    font-weight: 450;
+    font-size: 1.1rem;
     color: var(--text-color);
     background-color: var(--background-color);
     padding: 2rem 1rem;
@@ -86,6 +87,21 @@ a:hover {
     text-decoration: underline;
 }
 
+.banner {
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+    margin-top: -2rem;
+    margin-bottom: 2rem;
+    overflow: hidden;
+}
+
+.banner-image {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 0;
+}
+
 footer {
     margin-top: 3rem;
     padding-top: 1.5rem;