Skip to content

Commit

Permalink
homepage: layout for keynoters + panel tuned
Browse files Browse the repository at this point in the history
  • Loading branch information
@benabraham
benabraham committed Jul 25, 2023
1 parent 72aeb56 commit 562a750
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 90 deletions.
21 changes: 9 additions & 12 deletions static_src/scss/_custom-css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,26 +116,18 @@ ul {
background-size: 96px;
}

.PC-keynoters {
@include media-breakpoint-up(lg) {
max-width: 60rem;
}
margin-left: auto;
margin-right: auto;
}

.PC-keynoters-keynoter {
.PC-keynoter {
overflow: hidden;

flex-direction: column;

@include media-breakpoint-up(md) {
flex-direction: row;
&:nth-child(even) {
&:nth-child(odd) .row {
flex-direction: row-reverse;
}
}

position: relative;
background-color: transparent;
background-position: 0 0;
background-size: 96px, 100%;
Expand All @@ -146,11 +138,15 @@ ul {

@include media-breakpoint-up(md) {
background-image: url(/static/img/noise.svg), radial-gradient(farthest-corner at 0% 100%, $primary, $white 60%);
&:nth-child(even) {
&:nth-child(odd) {
background-image: url(/static/img/noise.svg), radial-gradient(farthest-corner at 100% 100%, $primary, $white 60%);
}
}

p {
max-width: 60ch;
}

}

.PC-image-primary {
Expand Down Expand Up @@ -186,6 +182,7 @@ ul {
height: 100%;
object-fit: cover;
max-height: 60vh;

@include media-breakpoint-up(md) {
max-height: 100%;
}
Expand Down
138 changes: 74 additions & 64 deletions templates/pages/__keynoters.html
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,89 @@
{% load static %}

<section id="keynoters" class="PC-bg-blurry mt-4 py-4 py-md-5">
<div class="container PC-keynoters">
<div class="container">
<h2 class="text-white mt-4 mb-5 h1">Keynote speakers</h2>

<article class="PC-keynoters-keynoter border border-black shadow mb-5 border-2 rounded row">
<div class="col-12 col-md-6 col-lg-4 px-0 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/evelina-gabasova.webp' %}" width="800" height="800" alt="">
<div>
<article class="PC-keynoter border border-black shadow mb-5 border-2 rounded">
<div class="row g-0">
<div class="col-12 col-md-6 col-lg-5 px-0 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/evelina-gabasova.webp' %}" width="800" height="800" alt="">
</div>
</div>
<div class="col px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Evelina Gabašová</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://github.com/evelinag"><i class="bi-github link-primary me-2"></i>evelinag</a></li>
<li class="list-inline-item"><a href="https://twitter.com/evelgab"><i class="bi-twitter link-primary me-2"></i>evelgab</a></li>
<li class="list-inline-item"><a href="https://www.linkedin.com/in/egabasova/"><i class="bi-linkedin link-primary me-2"></i>LinkedIn</a></li>
{# <li class="list-inline-item"><a href="https://evelinag.com/"><i class="bi-globe link-primary me-2"></i>evelinag.com</a></li> #}
</ul>
<p>Evelina Gabašová is a Principal Research Data Scientist at <a href="https://www.turing.ac.uk">The Alan Turing Institute</a>, the UK’s national institute for AI and data science. As a member of the leadership team of the Research Engineering Group, her focus is on bridging the gap between cutting-edge AI research and its real‑world applications. Additionally, she serves as a Vice‑President of the Society of Research Software Engineering in the UK.</p>
<p>Evelina has been an active member of open source and open science communities, championing openness and co‑creation to enable collaborative AI research.</p>
</div>
</div>
</div>
<div class="col px-3 px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Evelina Gabašová</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://github.com/evelinag"><i class="bi-github link-secondary me-2"></i>evelinag</a></li>
<li class="list-inline-item"><a href="https://twitter.com/evelgab"><i class="bi-twitter link-secondary me-2"></i>evelgab</a></li>
<li class="list-inline-item"><a href="https://www.linkedin.com/in/egabasova/"><i class="bi-linkedin link-secondary me-2"></i>LinkedIn</a></li>
{# <li class="list-inline-item"><a href="https://evelinag.com/"><i class="bi-globe link-secondary me-2"></i>evelinag.com</a></li> #}
</ul>
<p>Evelina Gabašová is a Principal Research Data Scientist at <a href="https://www.turing.ac.uk">The Alan Turing Institute</a>, the UK’s national institute for AI and data science. As a member of the leadership team of the Research Engineering Group, her focus is on bridging the gap between cutting-edge AI research and its real‑world applications. Additionally, she serves as a Vice‑President of the Society of Research Software Engineering in the UK.</p>
<p>Evelina has been an active member of open source and open science communities, championing openness and co‑creation to enable collaborative AI research.</p>
</div>
</article>
</article>

<article class="PC-keynoters-keynoter border border-black shadow mb-5 border-2 rounded row">
<div class="col-12 col-md-6 col-lg-4 px-0 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/prokop-bartonicek.webp' %}" width="800" height="800" alt="">
<article class="PC-keynoter border border-black shadow mb-5 border-2 rounded">
<div class="row g-0">
<div class="col-12 col-md-6 col-lg-5 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/prokop-bartonicek.webp' %}" width="800" height="800" alt="">
</div>
</div>
<div class="col px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Prokop Bartoníček</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://www.prokopbartonicek.com"><i class="bi-globe link-primary me-2"></i>prokopbartonicek.com</a></li>
</ul>
<p>Prokop Bartoníček is a part of the new generation of contemporary artists who integrate the latest technological innovations into their work. Unlike many of his peers, he stays connected to the human experience, avoiding the allure of virtual reality.</p>
<p>Through his art, he invites us to contemplate the laws and mysteries that shape our civilization and the cosmos.</p>
{# <p>Prokop began his artistic journey studying sculpture under Prof. Beranek at UMPRUM and later Prof. Joachim Sauter at UdK Berlin. Currently based in Prague, he focuses on creating light, interactive, and experimental projects. Notably, from 2008 to 2015, he organized art exhibitions in Prague, showcasing the Berlin experimental scene, and contributed to establishing the cultural center, Ex Post.</p> #}
</div>
</div>
</div>
<div class="col px-3 px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Prokop Bartoníček</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://www.prokopbartonicek.com"><i class="bi-globe link-secondary me-2"></i>prokopbartonicek.com</a></li>
</ul>
<p>Prokop Bartoníček is a part of the new generation of contemporary artists who integrate the latest technological innovations into their work. Unlike many of his peers, he stays connected to the human experience, avoiding the allure of virtual reality.</p>
<p>Through his art, he invites us to contemplate the laws and mysteries that shape our civilization and the cosmos.</p>
{# <p>Prokop began his artistic journey studying sculpture under Prof. Beranek at UMPRUM and later Prof. Joachim Sauter at UdK Berlin. Currently based in Prague, he focuses on creating light, interactive, and experimental projects. Notably, from 2008 to 2015, he organized art exhibitions in Prague, showcasing the Berlin experimental scene, and contributed to establishing the cultural center, Ex Post.</p> #}
</div>
</article>
</article>

<article class="PC-keynoters-keynoter border border-black shadow mb-5 border-2 rounded row">
<div class="col-12 col-md-6 col-lg-4 px-0 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/karel-minarik.webp' %}" width="800" height="800" alt="">
<article class="PC-keynoter border border-black shadow mb-5 border-2 rounded">
<div class="row g-0">
<div class="col-12 col-md-6 col-lg-5 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/karel-minarik.webp' %}" width="800" height="800" alt="">
</div>
</div>
<div class="col px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Karel Minařík</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://github.com/karmi"><i class="bi-github link-primary me-2"></i>karmi</a></li>
<li class="list-inline-item"><a href="https://twitter.com/karmiq"><i class="bi-twitter link-primary me-2"></i>karmiq</a></li>
<li class="list-inline-item"><a href="https://www.linkedin.com/in/karelminarik/"><i class="bi-linkedin link-primary me-2"></i>LinkedIn</a></li>
<li class="list-inline-item"><a href="https://karmi.cz/"><i class="bi-globe link-primary me-2"></i>karmi.cz</a></li>
</ul>
<p>Karel Minařík is a software developer with a focus on system architectures, web APIs, interactive applications, and data visualization.</p>
<p>For almost a decade, he has been working at <a href="https://www.elastic.co/">Elastic</a>, writing Ruby and Go code for libraries and internal applications. Until last year, he had been helping with the digital transformation in the Czech Republic as part of the <a href="https://cesko.digital/">Česko.Digital</a> team.</p>
</div>
</div>
</div>
<div class="col px-3 px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Karel Minařík</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://github.com/karmi"><i class="bi-github link-secondary me-2"></i>karmi</a></li>
<li class="list-inline-item"><a href="https://twitter.com/karmiq"><i class="bi-twitter link-secondary me-2"></i>karmiq</a></li>
<li class="list-inline-item"><a href="https://www.linkedin.com/in/karelminarik/"><i class="bi-linkedin link-secondary me-2"></i>LinkedIn</a></li>
<li class="list-inline-item"><a href="https://karmi.cz/"><i class="bi-globe link-secondary me-2"></i>karmi.cz</a></li>
</ul>
<p>Karel Minařík is a software developer with a focus on system architectures, web APIs, interactive applications, and data visualization.</p>
<p>For almost a decade, he has been working at <a href="https://www.elastic.co/">Elastic</a>, writing Ruby and Go code for libraries and internal applications. Until last year, he had been helping with the digital transformation in the Czech Republic as part of the <a href="https://cesko.digital/">Česko.Digital</a> team.</p>
</div>
</article>
</article>

<article class="PC-keynoters-keynoter border border-black shadow mb-5 border-2 rounded row">
<div class="col-12 col-md-6 col-lg-4 px-0 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/katerina-falk.webp' %}" width="800" height="800" alt="">
<article class="PC-keynoter border border-black shadow mb-5 border-2 rounded">
<div class="row g-0">
<div class="col-12 col-md-6 col-lg-5 position-relative">
<div class="PC-image-primary">
<img class="img-fluid" src="{% static 'img/speakers/katerina-falk.webp' %}" width="800" height="800" alt="">
</div>
</div>
<div class="col px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Kateřina Falk</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://www.linkedin.com/in/katerina-falk-a450147/"><i class="bi-linkedin link-primary me-2"></i>LinkedIn</a></li>
</ul>
<p>Kateřina Falk is a plasma physicist focused on research in fusion energy and laboratory astrophysics.</p>
<p>She studied at the Imperial College London and the University of Oxford. She previously worked at the Los Alamos National Laboratory, and the Czech Academy of Sciences and currently leads a research group at the Helmholz‑Zentrum Dresden‑Rossendorf and holds a lecturer position at the Technical University in Dresden, Germany.</p>
</div>
</div>
</div>
<div class="col px-3 px-xxs-4 px-xs-5 pb-xs-4 pt-2">
<h3 class="h1 mt-3 mt-sm-4">Kateřina Falk</h3>
<ul class="list-inline font-monospace">
<li class="list-inline-item"><a href="https://www.linkedin.com/in/katerina-falk-a450147/"><i class="bi-linkedin link-secondary me-2"></i>LinkedIn</a></li>
</ul>
<p>Kateřina Falk is a plasma physicist focused on research in fusion energy and laboratory astrophysics.</p>
<p>She studied at the Imperial College London and the University of Oxford. She previously worked at the Los Alamos National Laboratory, and the Czech Academy of Sciences and currently leads a research group at the Helmholz‑Zentrum Dresden‑Rossendorf and holds a lecturer position at the Technical University in Dresden, Germany.</p>
</div>
</article>
</article>
</div>

{% comment %}
{% for keynoter in keynoters %}
Expand Down
36 changes: 22 additions & 14 deletions templates/pages/homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,27 +98,35 @@ <h2 class="h4 mt-1">Childcare</h2>


{% block main %}
<div class="container pt-4 pb-3 mt-3">
<div class="container-lg pt-4 pb-3 mt-3">
<div class="row row-gap-3">
<div class="col-lg">
<div class="h-100 rounded-3 border border-black p-4">
<h2 class="mt-0">More information coming soon</h2>
<p>Do you want to be notified when more information (tickets go on sale, speakers are announced or talk and workshops details online) about PyCon CZ 23 will be available?</p>
<p><a class="btn btn-secondary ps-3" href="https://pycon.us4.list-manage.com/subscribe?u=6d66d8cf3a86d34aaa8e29799&id=54c2b80aeb"><img src="{% static 'img/icons/email.min.svg' %}" width="32" height="32" alt=""> Subscribe to our newsletter</a></p>
<div class="col-sm">
<div class="
h-100 rounded-3 border border-black p-4 p-lg-5
d-flex flex-column align-items-start justify-content-between
">
<div>
<h2 class="mt-0">Don’t miss anything</h2>
<p class="">Do you want to be notified when more information (tickets go on sale, speakers are announced or talk and workshops details online) about PyCon CZ 23 will be available?</p>
</div>

<a class="btn btn-secondary ps-3" href="https://pycon.us4.list-manage.com/subscribe?u=6d66d8cf3a86d34aaa8e29799&id=54c2b80aeb"><img src="{% static 'img/icons/email.min.svg' %}" width="32" height="32" alt="" class="me-2">Subscribe to our newsletter</a>
</div>
</div>
<div class="col-lg">
<div class="h-100 rounded-3 border border-black shadow mb-5 bg-secondary-subtle p-4 overflow-hidden">
<h2 class="mt-0">Sponsorship</h2>

<div class="h-lg-100 d-flex flex-column flex-sm-row flex-lg-column column-gap-4 row-gap-3 align-items-end align-items-lg-start">
<div class="col-sm">
<div class="
h-100 rounded-3 border border-black p-4 p-lg-5 bg-secondary-subtle
d-flex flex-column align-items-start justify-content-between
">
<div>
<h2 class="mt-0">Sponsorship</h2>
<p class="lead">
PyCon CZ relies on sponsors to keep ticket prices affordable.
<br>
If you would like to sponsor the conference please
If you would like to sponsor the conference please
</p>
<p><a class="btn btn-primary" href="{% url 'sponsorship' %}">check sponsorship options</a></p>
</div>

<a class="btn btn-primary btn-lg" href="{% url 'sponsorship' %}">check sponsorship options</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 562a750

Please sign in to comment.