Add conference chip to the main page (#125)

* Add conference chip to the main page

Author: gtca

assets/main.scss

@@ -371,6 +371,76 @@ body {
                     }
                 }
 
+                #chip-announcement {
+                    margin: 3rem auto;
+                    margin-bottom: -3rem;
+                    @media (max-width: 40rem) {
+                        width: 100%;
+                        margin-bottom: 3rem;
+                    }
+                    display: flex;
+                    justify-content: center;
+                    &:hover {
+                        cursor: pointer;
+                    }
+
+                    .event-chip {
+                        width: auto;
+                        display: inline-flex;
+                        align-items: center;
+                        background-color: none;
+                        border-radius: 2.2rem;
+                        padding: 0.1rem 1rem 0.1rem 0;
+                        font-size: 0.8rem;
+                        font-weight: 500;
+                        color: black;
+                        transition: all 0.3s ease;
+                        outline: 1px solid black;
+
+                        .event-date {
+                            background-color: black;
+                            color: white;
+                            padding: 0.5rem 1rem;
+                            border-radius: 2rem;
+                            margin: 0.1rem 1rem 0.1rem 0.2rem;
+                            align-self: start;
+                        }
+
+                        .event-text {
+                            position: relative;
+
+                            .arrow {
+                                display: inline-block;
+                                transition: transform 0.3s ease;
+                            }
+                        }
+
+                        &:hover {
+                            color: #4557c4;
+                            transform: scale(1.05);
+
+                            .event-date {
+                                background: linear-gradient(135deg, #262fb5, #74c8fa);
+                            }
+
+                            .event-text .arrow {
+                                transform: translateX(0.2rem);
+                            }
+                        }
+
+                        position: relative;
+
+                        a {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            overflow: hidden;
+                        }
+                    }
+                }
+
                 section {
                     max-width: $maxwidth;
                     width: $contentwidth;

layouts/index.html

@@ -10,6 +10,7 @@
     <div id="wrapper">
       <div id="content">
         <div id="cover" class="mw-10">
+          {{ partial "main/chip" . }}
           {{ partial "main/cover" . }}
           {{ partial "main/packages" . }}
 

layouts/partials/main/chip.html

@@ -0,0 +1,7 @@
+<div id="chip-announcement" class="row w-90 align-middle">
+  <div class="event-chip">
+    <div class="event-date">September 2024</div>
+    <div class="event-text">The very first scverse conference! <span class="arrow">→</span></div>
+    <a href="/events/2024_09_conference/"></a>
+  </div>
+</div>