From d2a23f1d52e291d3d5730bdf14f31aa3b7a5f807 Mon Sep 17 00:00:00 2001
From: Jan Smitka <jan.smitka@lynt.cz>
Date: Tue, 21 Oct 2025 11:16:37 +0200
Subject: [PATCH] Improve layout of the 2026 announcement

---
 _upcoming/2026/index.html             | 57 ++++++++++++++++-----------
 _upcoming/2026/{ => static}/style.css | 50 ++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 24 deletions(-)
 rename _upcoming/2026/{ => static}/style.css (77%)
diff --git a/_upcoming/2026/index.html b/_upcoming/2026/index.html
index 60680ac..7f8ffda 100644
--- a/_upcoming/2026/index.html
+++ b/_upcoming/2026/index.html
@@ -18,7 +18,7 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:image:alt" content="PyCon CZ 26">
 
-    <link href="/2026/style.css" rel="stylesheet">
+    <link href="/2026/static/style.css" rel="stylesheet">
 
     <link rel="apple-touch-icon" sizes="180x180" href="/2026/favicon/apple-touch-icon.png?v4">
     <link rel="icon" type="image/png" sizes="32x32" href="/2026/favicon/favicon-32x32.png?v4">
@@ -29,38 +29,51 @@
 </head>
 <body class="landing-page-body">
 <header class="top-header">
-    <div class="container">
+    <div class="container header-container">
         <div class="logo-container">
-            <img src="/2026/static/logo-pyconcz-26.svg" alt="PyCon CZ 26" class="logo" width="600" height="300"/>
+            <img src="/2026/static/logo-pyconcz-26.svg" alt="PyCon CZ 26" class="logo" width="500" height="250"/>
         </div>
+        <h1 class="title">
+            PyCon&nbsp;CZ&nbsp;26<br/>
+            September&nbsp;2026<br/>
+            Pilsen
+        </h1>
     </div>
 </header>
 
 <main class="main-content">
     <div class="container">
-        <h1 class="text-center">
-            PyCon&nbsp;CZ&nbsp;26, September&nbsp;2026, Pilsen
-        </h1>
-        <h2 class="text-center">
-            Fancy a Pilsner?
-        </h2>
+        <div class="text-cols">
+            <div class="text-cols-item">
+                <h2>
+                    Fancy a Pilsner?
+                </h2>
+
+                <p>
+                    Even if Pilsner is not your thing, <strong>Pilsen</strong> is the place to be.  We will meet in the heart
+                    of the city, where history and innovation come together. Join us for the next edition
+                    of <strong>PyCon CZ</strong>, the largest Czech Python event!
+                </p>
+            </div>
 
-        <p class="text-center">
-            Even if Pilsner is not your thing, <strong>Pilsen</strong> is the place to be. Join us for the next edition
-            of <strong>PyCon CZ</strong>, the largest Czech Python event!
-        </p>
+            <div class="text-cols-item">
+                <h2>
+                    What to expect?
+                </h2>
 
-        <p class="text-center">
-            We will meet in the heart of the city, where history and innovation come together. You can look forward to
-            inspiring lectures, practical workshops, and unforgettable connections with friends from the community.
-        </p>
+                <p>
+                    You can look forward to  inspiring lectures, practical workshops, and unforgettable connections with friends
+                    from the community.
+                </p>
 
-        <p class="text-center">
-            Follow this website or our social media channels to be the first to know about the venue, program, speakers,
-            and tickets!
-        </p>
+                <p>
+                    <strong>Follow this website</strong> or our social media channels to be the first to know about the venue, program, speakers,
+                    and tickets!
+                </p>
+            </div>
+        </div>
 
-        <h2 class="text-center">Follow us on</h2>
+        <h2 class="socials-header text-center">Follow us on</h2>
 
         <div class="social-icons">
             <a class="social-icons-item" rel="me" href="https://x.com/pyconcz">
diff --git a/_upcoming/2026/style.css b/_upcoming/2026/static/style.css
similarity index 77%
rename from _upcoming/2026/style.css
rename to _upcoming/2026/static/style.css
index 87bf31d..40600a3 100644
--- a/_upcoming/2026/style.css
+++ b/_upcoming/2026/static/style.css
@@ -16,11 +16,13 @@ a:hover, a:focus, a:active {
 }
 
 h1, h2, h3 {
-    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
     font-weight: bold;
+    line-height: 1.35;
 }
 
 h1 {
+    font-size: 1.75rem;
     margin: 0 0 0.5rem;
 }
 
@@ -82,7 +84,7 @@ p {
 .top-header {
     padding: 32px 24px;
     text-align: center;
-    background: linear-gradient(to bottom, #223816, #2E451C);
+    background: linear-gradient(to bottom, #212D19, #2E451C);
 }
 
 .logo-container {
@@ -94,12 +96,34 @@ p {
     height: auto;
 }
 
+.header-container {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: repeat(2, auto);
+    gap: 32px;
+}
+
+@media (min-width: 768px) {
+    .header-container {
+        grid-template-columns: 3fr minmax(max-content, 2fr);
+        grid-template-rows: auto;
+        gap: 48px;
+        align-items: center;
+    }
+
+    h1.title {
+        text-align: left;
+        font-size: 3rem;
+    }
+}
+
 
 /* Main content */
 
 .main-content {
     flex-grow: 1;
     padding-bottom: 64px;
+    line-height: 1.75;
 }
 
 @media (min-width: 768px) {
@@ -108,6 +132,28 @@ p {
     }
 }
 
+.text-cols {
+    display: block;
+}
+
+.text-cols-item {
+    text-align: justify;
+}
+
+@media (min-width: 768px) {
+    .text-cols {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 112px;
+    }
+}
+
+h2.socials-header {
+    font-family: inherit;
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
 .social-icons {
     display: flex;
     flex-direction: column;
