diff --git a/_layouts/default.html b/_layouts/default.html
index 06d4ebe..673a7b6 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -26,15 +26,42 @@
{% endif %}
{% endfor %}
{% endif %}
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
{%- include header.html -%}
+ <header>
+ <div id="postSlider" class="carousel slide slider-container" data-bs-ride="carousel">
+ <div class="carousel-inner">
+ {% for post in site.posts %}
+ <div class="carousel-item {% if forloop.first %}active{% endif %}">
+ <div class="email-circle">
+ <img src="{{ post.featured_image | default: post.content | split: '!' | first | split: '(' | last | split: ')' | first | default: 'default-image.jpg' }}" alt="{{ post.title }}">
+ </div>
+ <h3 class="post-title">{{ post.title }}</h3>
+ <p class="post-summary">{{ post.excerpt | strip_html | truncatewords: 20 }}</p>
+ </div>
+ {% endfor %}
+ </div>
+
+ <!-- Controls -->
+ <button class="carousel-control-prev" type="button" data-bs-target="#postSlider" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#postSlider" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </button>
+ </div>
+ </header>
<main class="container" role="main" aria-label="Content">
{{ content }}
</main>
{%- include footer.html -%}
<script src="{{ '/assets/js/index.js' | relative_url }}"></script>
<script src="https://kit.fontawesome.com/1bbe56de49.js" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
diff --git a/_layouts/index.html b/_layouts/index.html
index a3b4b19..542321c 100644
--- a/_layouts/index.html
+++ b/_layouts/index.html
@@ -2,10 +2,6 @@
layout: default
---
<div class="home">
- {% assign t = site.data.locales[page.lang][page.lang] %} {% if page.title %} {% assign header = page.title %} {% else %} {% assign header = site.title %} {% endif %}
- <article class="hero">
- <div class="hero-text">{{ t.index.lead }}</div>
- </article>
{{ content }}
<img src="{{'/assets/images/dcus.jpg' | relative_url }}" alt="DjangoCon US 2023"/>
diff --git a/assets/css/bpd.css b/assets/css/bpd.css
index 7c53dd0..7b095f1 100644
--- a/assets/css/bpd.css
+++ b/assets/css/bpd.css
@@ -517,3 +517,51 @@ ul.speaking-list {
max-width: 60%;
}
}
+
+header {
+ padding: 40px 20px;
+ margin-bottom: 20px;
+ /* background-color: black; */
+}
+.slider-container {
+ min-height: 300px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* background-image: url("/assets/images/hero-bpd-background.jpg"); */
+ background-color: #222;
+ padding: 40px;
+ border-radius: 10px;
+ margin: 0 auto;
+ width: 85%;
+ /* max-width: 1000px; */
+}
+.email-circle {
+ width: 200px;
+ height: 200px;
+ background-color: #fff;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto 15px;
+ overflow: hidden;
+}
+.email-circle img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.carousel-item {
+ text-align: center;
+}
+.post-title {
+ font-size: 25px;
+ font-weight: bold;
+ color: white;
+ margin-bottom: 10px;
+}
+.post-summary {
+ font-size: 15px;
+ color: #f1f1f1;
+}