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

2 files changed, 113 insertions, 14 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