Add 20-years-indico blog post (#63)

_includes/header.html

@@ -1,8 +1,8 @@
 <header class="site-header">
   <nav class="navbar navbar-expand-md site-nav">
     <div class="container">
-      <a class="navbar-brand" href="{{ site.baseurl }}/">
-        <img class="header-logo" src="{{ site.baseurl }}/img/logos/indico_white.svg">
+      <a class="navbar-brand" href="{{ site.baseurl }}/indico/anniversary/2024/09/19/twenty-years.html">
+        <img class="header-logo" src="{{ site.baseurl }}/img/logos/indico_bday_logo_dark.svg">
       </a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon">

_posts/2024-09-19-twenty-years.md

@@ -0,0 +1,29 @@
+---
+layout: post
+title:  "20 Years of Indico (2004-2024)"
+date: 2024-09-19 17:00
+author: "Indico Team"
+categories: indico anniversary
+---
+
+<div id="indico-historical-logos" class="image-container xs-hidden sm-hidden">
+    <img src="/assets/2024-09-19-twenty-years/dec.agendas.gif" alt="CDS Agendas Logo" />
+    <i class="fa fa-chevron-right fa-lg"></i>
+    <img src="/assets/2024-09-19-twenty-years/indico_classic.jpeg" alt="Indico Classic Logo" />
+    <i class="fa fa-chevron-right fa-lg"></i>
+    <img src="/assets/2024-09-19-twenty-years/indico_solid_bg.svg" alt="Indico Logo" />
+</div>
+
+For the past 20 years, Indico has been the go-to solution for event management and conference organization at CERN and beyond, but did you know that Indico has been around for much longer than that?
+
+Before Indico, "CDS Agenda" (formally "AgendaMaker") was the preferred tool for managing conference agendas at CERN, which was initially developed for the ATLAS collaboration in 1999 by a small in-house team at CERN. After a positive response from the community, the team behind the tool had higher aspirations for it. In 2002, an EU funded project was launched to create a flexible 'catch-all' platform for hosting meetings and conferences. The project became known as the "Integrated Digital Conferencing Project" (InDiCo), which later became the Indico we know today. In 2004, the first conference, CHEP 2004 (known as 'event 0'), was organized using Indico.
+
+Moving forward, in 2009, CDS Agenda was retired in favor of Indico; as well as this, integrations with video conferencing tools (EVO) were added into Indico, thus allowing users to organize their events online. In 2015, the United Nations Office at Geneva (UNOG) started using Indico to manage their events, alongside many academic, scientific, and governmental institutions that ran their own Indico instances. In 2017, the project underwent a major rewrite, which brought a modern look and feel to the platform as well as a more robust and scalable architecture.
+
+<div id="indico-poster" class="image-container">
+    <img src="/assets/2024-09-19-twenty-years/indico_20_poster.jpeg" alt="Indico 20th Anniversary Poster" />
+     <p class="mb-0"><i class="fa fa-magnifying-glass-plus"></i> Click to enlarge</p>
+    <p>Indico 20th Anniversary Poster - Credit: Jennifer Cham</p>
+</div>
+
+We've come a long way since our humble beginnings in 2004, and we're proud to have been powering events at CERN and beyond for the past 20 years. Over the coming weeks, we will be revealing some future plans for Indico; stay tuned to our news and social media platforms for more info. We're excited to see what the next 20 years will bring!

_sass/indico.scss

@@ -53,6 +53,26 @@ $xl:               1200px;
     }
 }
 
+/**
+ * Hide elements on different screen sizes
+ * E.g. '.xs-hidden' will hide the element on extra small screens
+ */
+$breakpoints: (
+    xs: $xs,
+    sm: $sm,
+    md: $md,
+    lg: $lg,
+    xl: $xl
+);
+
+@each $name, $size in $breakpoints {
+    @media (max-width: $size) {
+        .#{$name}-hidden {
+            display: none !important;
+        }
+    }
+}
+
 
 @import '_base';
 @import '_plugins';
@@ -1496,7 +1516,7 @@ a.no-decoration {
 
 #checkin-app-images {
     gap: 1em;
-    
+
     img {
         min-width: 0;
         border-color: black;
@@ -1507,8 +1527,39 @@ a.no-decoration {
     }
 }
 
-@media (max-width: $xs) {
-    .xs-hidden {
-        display: none !important;
+#indico-historical-logos {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 1em;
+
+    img {
+        transform: scale(0.5);
+        border-radius: 10px;
+        margin: 0;
+    }
+
+    img:first-child {
+        transform: scale(1);
+        margin: 0 75px;
+        border-radius: 0;
+    }
+
+    img:last-child {
+        background-color: $blue-darker;
+        padding: 10px;
+    }
+}
+
+#indico-poster {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    img {
+        width: 50%;
+        height: 50%;
+        cursor: zoom-in;
     }
 }