Add wave-style hero, 100K promo, timeline card.

3 files changed, 169 insertions, 16 deletions

diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index ba856a8e..67caf61c 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -70,18 +70,117 @@ span.repo-language-dot.javascript {
     padding-bottom: 3rem;
 }
 
-@media screen and (min-width: 1088px) {
-    .video-container iframe {
-        height: calc(42vw * 0.5625);
-        max-height: 371px;
-        max-width: 660px;
-    }
-}
-
-@media screen and (max-width: 1087px) {
-    .video-container iframe {
-        height: calc(92vw * 0.5625);
-        max-height: none;
-        max-width: none;
-    }
+.welcome-video {
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    border-radius: 10px;
+    margin-top: 1em;
+}
+
+.welcome-video:hover {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+.aspect-wrapper {
+    position: relative;
+    padding-bottom: 56.25%;
+}
+.aspect-content {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.hero-card img{
+    border-radius: 10px;
+    box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
+    margin-top: 1em;
+}
+
+.main-head {
+    position: relative;
+    background-color: #7289DA;
+    color: #fff;
+    height: 32vw;
+    max-height: 500px;
+    overflow-x: hidden;
+    width: 100%;
+    padding: 0;
+}
+
+.bottom-wave {
+    background: url(https://svgur.com/i/QVH.svg) repeat-x;
+    position: absolute;
+    bottom: 0;
+    width: 6400px;
+    height: 26px;
+    animation: wave 50s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
+    transform: translate3d(0, 0, 0);
+    z-index: 3;
+}
+
+.above-waves {
+    z-index: 4;
+}
+
+.wave {
+    background: url(https://svgur.com/i/QSd.svg) repeat-x;
+    position: absolute;
+    bottom: 0;
+    width: 6400px;
+    height: 198px;
+    animation: wave 65s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
+    transform: translate3d(0, 0, 0);
+}
+
+.wave:nth-of-type(2) {
+    animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 60s ease -1.25s infinite;
+    opacity: 0.5;
+    height: 178px;
+    animation-delay: -50s;
+}
+
+@keyframes wave {
+  0% {
+    margin-left: 0;
+  }
+  100% {
+    margin-left: -1600px;
+  }
+}
+
+.showcase {
+    margin: 0 1em;
+}
+
+.mini-timeline {
+    height: 3px;
+    position: relative;
+    margin: 50px 0 50px 0;
+    background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00);
+    text-align: center;
+}
+.mtl-item {
+    display: inline-block;
+    vertical-align: middle;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    position: relative;
+    top: -14px;
+    margin: 0 4% 0 4%;
+    background-color: #3EB2EF;
+    color: white;
+    font-size: 15px;
+    line-height: 33px;
+    border:none;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.mtl-item:hover {
+    box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23);
+    transform: scale(1.5);
 }
diff --git a/pydis_site/static/images/events/100k.png b/pydis_site/static/images/events/100k.png
new file mode 100644
index 00000000..ae024d77
--- /dev/null
+++ b/pydis_site/static/images/events/100k.png
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index f31363a4..04ad4465 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -9,6 +9,35 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
+  <section class="section main-head is-hidden-touch">
+      <div class="container is-spaced above-waves">
+        <div class="columns">
+          <div class="column is-half">
+            <div class="aspect-wrapper">
+              <iframe
+              class="welcome-video aspect-content"
+              src="https://www.youtube.com/embed/ZH26PuX3re0"
+              srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020}</style><a href=https://www.youtube.com/embed/ZH26PuX3re0?autoplay=1><img src=https://i.ytimg.com/vi/ZH26PuX3re0/maxresdefault.jpg alt='Welcome to Python Discord'><span>▶</span></a>"
+              frameborder="0"
+              allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              ></iframe>
+            </div>
+          </div>
+
+          <div class="column is-half hero-card has-text-right">
+              <img src="{% static "images/events/100k.png" %}" alt="100K members!">
+          </div>
+
+        </div>
+
+      </div>
+
+    <div class="wave"></div>
+    <div class="wave"></div>
+    <div class="bottom-wave"></div>
+
+  </section>
   <section class="section">
 
     {# Who are we? #}
@@ -38,8 +67,33 @@
         </div>
 
         {# Right column container #}
-        <div class="column is-half-desktop">
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/ZH26PuX3re0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <div class="column is-half-desktop showcase has-text-centered">
+          <div class="box">
+            <p class="title">
+              New Timeline!
+            </p>
+            <div class="mini-timeline">
+              <i class="fa fa-asterisk mtl-item"></i>
+              <i class="fa fa-code mtl-item"></i>
+              <i class="fab fa-python mtl-item"></i>
+              <i class="fa fa-alien-monster mtl-item"></i>
+              <i class="fa fa-duck mtl-item"></i>
+              <i class="fa fa-bug mtl-item"></i>
+            </div>
+            <p class="subtitle">
+              Start from our humble beginnings to discover the events that made our community what it is today.
+            </p>
+            <div class="buttons are-large is-centered">
+              <a href="{% url 'timeline' %}">
+                <button class="button is-primary">
+                  <span>Check it out!</span>
+                  <span class="icon">
+                    <i class="fas fa-arrow-right"></i>
+                  </span>
+                </button>
+              </a>
+            </div>
+          </div>
         </div>
       </div>