add home page introduction section

_includes/index.css

@@ -0,0 +1,97 @@
+.introduction {
+  position: relative;
+  text-align: center;
+  margin-top: -4rem;
+  width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  padding: 12rem 0;
+  background-color: grey;
+}
+
+.badge {
+  transform: skew(-4deg) rotate(-4deg);
+  max-width: calc(100vw - 2rem);
+  margin: 0 auto 4rem;
+}
+
+.badge .date {
+  font-size: 19px;
+  display: inline-block;
+  background: #fff;
+  color: #262626;
+  padding: 0 .75rem;
+  margin-bottom: 2.5rem;
+}
+
+.badge h1 {
+  font-size: 28px;
+  line-height: 1.25;
+  color: #262626;
+  margin: 0;
+}
+
+.badge h1 .spacer {
+  height: 1rem;
+}
+
+.badge h1 span {
+  font-size: 28px;
+  background: #fff;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.badge h1 span:first-child {
+  font-weight: 500;
+  padding: .1em .5em;
+}
+.badge h1 span:first-child::after {
+  content: "\A";
+  white-space: pre;
+  line-height: 3rem;
+}
+
+.badge h1 span:last-child {
+  font-weight: 800;
+  font-size: 44px;
+  padding: .02em .25em;
+}
+
+.social-media {
+  list-style-type: none;
+  padding: 0;
+}
+
+.social-media li {
+  display: inline-block;
+}
+
+.social-media a {
+  color: #fff;
+  filter: drop-shadow(0 0 10px rgba(0,0,0,.5));
+  transition: opacity .3s ease-out;
+}
+
+.social-media a:hover {
+  opacity: .75;
+}
+
+.social-media svg {
+  height: 4rem;
+  padding: 4px;
+  fill: currentColor;
+}
+
+.social-media li:not(:first-child) {
+  margin-left: 36px;
+}
+
+@media (width < 640px) {
+  .introduction {
+    padding: 6.5rem 0;
+  }
+  .badge .date {
+    font-size: 16px;
+  }
+}

_includes/index.njk

@@ -1,6 +1,49 @@
 ---
 layout: page.njk
 ---
+<section class="introduction">
+  <div class="background-image">
+
+  </div>
+
+  <div class="badge">
+    <p class="date">{{ eseDate }}</p>
+    <h1>
+      {% if lang == "en" %}
+      <span>Your start at the Faculty of</span>
+      <div class="spacer"></div>
+      <span>Computer Science</span>
+      {% else %}
+      <span>Dein Studienstart an der</span>
+      <div class="spacer"></div>
+      <span>Fakultät Informatik</span>
+      {% endif %}
+    </h1>
+  </div>
+
+  <ul class="social-media">
+    <li>
+      <a href="https://www.instagram.com/ifsrde" title="Instagram" target="_blank">
+        {% icon "brands:instagram" %}
+      </a>
+    </li>
+    <li>
+      <a href="https://toot.kif.rocks/@iFSR" title="Mastodon" target="_blank">
+        {% icon "brands:mastodon" %}
+      </a>
+    </li>
+    <li>
+      <a href="https://t.me/s/ifsrde" title="Telegram" target="_blank">
+        {% icon "brands:telegram" %}
+      </a>
+    </li>
+  </ul>
+</section>
+
 <section>
 {{ content | safe }}
 </section>
+
+{% css %}
+  {% include "index.css" %}
+{% endcss %}

content/de/index.md

@@ -1,5 +1,6 @@
 ---
 layout: index.njk
+eseDate: 7. – 11. Oktober 2024
 ---
 ## Herzlich Willkommen
 

content/en/index.md

@@ -1,5 +1,6 @@
 ---
 layout: index.njk
+eseDate: 7–11 October 2024
 ---
 ## Welcome!