Merge pull request #415 from python-discord/frontpage-100k

Frontpage design update - Stage 1 - 100K edition.

12 files changed, 699 insertions, 208 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index dc7c504d..b53ff5d4 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -12,42 +12,61 @@ main.site-content {
     flex: 1;
 }
 
-div.card.has-equal-height {
+.card.has-equal-height {
     height: 100%;
     display: flex;
     flex-direction: column;
 }
 
-.navbar-item.is-fullsize {
-    padding: 0;
+.navbar {
+    padding-right: 0.8em;
 }
 
-.navbar-item.is-fullsize img {
-    max-height: 4.75rem;
+.navbar-item .navbar-link {
+    padding-left: 1.5em;
+    padding-right: 2.5em;
+}
+
+.navbar-link:not(.is-arrowless)::after {
+    right: 1.125em;
+    margin-top: -0.455em;
 }
 
 .navbar-item.has-no-highlight:hover {
     background-color: transparent;
 }
 
-.navbar-item.has-left-margin-1 {
-    margin-left: 1rem;
+#navbar-banner {
+    background-color: transparent;
 }
 
-.navbar-item.has-left-margin-2 {
-    margin-left: 2rem;
+#navbar-banner img {
+    max-height: 3rem;
 }
 
-.navbar-item.has-left-margin-3 {
-    margin-left: 3rem;
+#discord-btn a {
+    color: transparent;
+    background-image: url(../../images/navbar/discord.svg);
+    background-size: 200%;
+    background-position: 100% 50%;
+    background-repeat: no-repeat;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    background-color: #697ec4ff;
+    margin-left: 0.5rem;
+    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
+    overflow: hidden;
 }
 
-#navbar-banner {
-    background-color: transparent;
+#discord-btn:hover a {
+    box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
+    /*transform: scale(1.03) translate3d(0,0,0);*/
+    background-size: 200%;
+    background-position: 1% 50%;
 }
 
-#navbar-banner img {
-    max-height: 3rem;
+#discord-btn:hover {
+    background-color: transparent;
 }
 
 #django-logo {
@@ -111,3 +130,17 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
 .codehilite-wrap {
     margin-bottom: 1em;
 }
+
+/* 16:9 aspect ratio fixing */
+.force-aspect-container {
+    position: relative;
+    padding-bottom: 56.25%;
+}
+
+.force-aspect-content {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index ba856a8e..58ca8888 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -1,87 +1,214 @@
-.discord-banner {
-    border-radius: 0.5rem;
+h1 {
+    padding-bottom: 0.5em;
 }
 
-.hero-image {
-    width: 20rem;
-    margin: auto;
+/* Mobile-only notice banner */
+
+#mobile-notice {
+    margin: 5px;
+    margin-bottom: -10px!important;
 }
 
-.hero-body {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+/* Wave hero */
+
+#wave-hero {
+    position: relative;
+    background-color: #7289DA;
+    color: #fff;
+    height: 32vw;
+    min-height: 270px;
+    max-height: 500px;
+    overflow-x: hidden;
+    width: 100%;
+    padding: 0;
 }
 
-.section-sp img {
-    height: 5rem;
-    margin-right: 2rem;
+#wave-hero .container {
+    z-index: 4;  /* keep hero contents above wave animations */
 }
 
-.video-container iframe,
-.video-container object,
-.video-container embed {
-    width: 100%;
-    height: calc(92vw * 0.5625);
-    margin: 8px auto auto auto;
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+    #wave-hero .columns {
+        margin: 0 1em 0 1em;  /* Stop cards touching canvas edges in table-view */
+    }
+}
+
+#wave-hero iframe {
+    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;
+    border: none;
+}
+
+#wave-hero iframe:hover {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+#wave-hero-right 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;
+    text-align: right;
+}
+
+#wave-hero .wave {
+    background: url(../../images/waves/wave_dark.svg) repeat-x;
+    position: absolute;
+    bottom: 0;
+    width: 6400px;
+    animation-name: wave;
+    animation-timing-function: cubic-bezier(.36,.45,.63,.53);
+    animation-iteration-count: infinite;
+    transform: translate3d(0,0,0);  /* Trigger 3D acceleration for smoother animation */
 }
 
-div.card.github-card {
+#front-wave {
+    animation-duration: 60s;
+    animation-delay: -50s;
+    opacity: 0.5;
+    height: 178px;
+}
+
+#back-wave {
+    animation-duration: 65s;
+    height: 198px;
+}
+
+#bottom-wave {
+    animation-duration: 50s;
+    animation-delay: -10s;
+    background: url(../../images/waves/wave_white.svg) repeat-x !important;
+    height: 26px;
+    z-index: 3;
+}
+
+@keyframes wave {
+  0% {
+    margin-left: 0;
+  }
+  100% {
+    margin-left: -1600px;
+  }
+}
+
+/* Showcase */
+
+#showcase {
+    margin: 0 1em;
+}
+
+#showcase .mini-timeline {
+    height: 3px;
+    position: relative;
+    margin: 50px 0 50px 0;
+    background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00);
+    text-align: center;
+}
+
+#showcase .mini-timeline i {
+    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);
+}
+
+#showcase .mini-timeline i: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);
+}
+
+/* Projects */
+
+#projects {
+    padding-top: 0;
+}
+
+#projects .card {
     box-shadow: none;
     border: #d1d5da 1px solid;
     border-radius: 3px;
+    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#projects .card:hover {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
-div.repo-headline {
+#projects .card-header {
+    box-shadow: none;
     font-size: 1.25rem;
-    margin-bottom: 8px;
+    padding: 1.5rem 1.5rem 0 1.5rem;
 }
 
-span.repo-language-dot {
-    border-radius: 50%;
-    height: 12px;
-    width: 12px;
-    top: 1px;
-    display: inline-block;
-    position: relative;
+#projects .card-header-icon {
+    font-size: 1.5rem;
+    padding: 0 1rem 0 0;
 }
 
-span.repo-language-dot.python {
-    background-color: #3572A5;
+#projects .card-header-title {
+    padding: 0;
+    color: #7289DA;
 }
 
-span.repo-language-dot.html {
-    background-color: #e34c26;
+#projects .card:hover .card-header-title {
+    color: #363636;
 }
 
-span.repo-language-dot.css {
-    background-color: #563d7c;
+#projects .card-content {
+    padding-top: 8px;
+    padding-bottom: 1rem;
 }
 
-span.repo-language-dot.javascript {
-    background-color: #f1e05a;
+#projects .card-footer {
+    margin-top: auto;
+    border: none;
 }
 
-#repo-footer-item {
-    margin-left: 1.2rem;
+#projects .card-footer-item {
+    border: none;
 }
 
-#sponsors-hero {
-    padding-top: 2rem;
-    padding-bottom: 3rem;
+#projects .card-footer-item i {
+    margin-right: 0.5rem;
 }
 
-@media screen and (min-width: 1088px) {
-    .video-container iframe {
-        height: calc(42vw * 0.5625);
-        max-height: 371px;
-        max-width: 660px;
-    }
+#projects .repo-language-dot {
+    border-radius: 50%;
+    height: 12px;
+    width: 12px;
+    top: -1px;
+    display: inline-block;
+    position: relative;
 }
 
-@media screen and (max-width: 1087px) {
-    .video-container iframe {
-        height: calc(92vw * 0.5625);
-        max-height: none;
-        max-width: none;
-    }
+#projects .repo-language-dot.python { background-color: #3572A5; }
+#projects .repo-language-dot.html { background-color: #e34c26; }
+#projects .repo-language-dot.css { background-color: #563d7c; }
+#projects .repo-language-dot.javascript { background-color: #f1e05a; }
+
+/* Sponsors */
+
+#sponsors .hero-body {
+    padding-top: 2rem;
+    padding-bottom: 3rem;
+}
+
+#sponsors img {
+    height: 5rem;
+    margin-right: 2rem;
 }
diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index c7137fde..0a4dfbb6 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -61,20 +61,6 @@ button, input, textarea, select {
     background-color: #576297 !important;
 }
 
-.video-container {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 75%;
-}
-.video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
 .pydis-logo-banner {
     background-color: #7289DA !important;
     border-radius: 10px;
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/static/images/frontpage/welcome.jpg b/pydis_site/static/images/frontpage/welcome.jpg
new file mode 100644
index 00000000..0eb8f672
--- /dev/null
+++ b/pydis_site/static/images/frontpage/welcome.jpg
diff --git a/pydis_site/static/images/navbar/discord.svg b/pydis_site/static/images/navbar/discord.svg
new file mode 100644
index 00000000..406e3836
--- /dev/null
+++ b/pydis_site/static/images/navbar/discord.svg
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="120mm"
+   height="30mm"
+   viewBox="0 0 120 30"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   sodipodi:docname="discord.svg">
+  <defs
+     id="defs2">
+    <rect
+       x="75.819944"
+       y="98.265513"
+       width="25.123336"
+       height="7.8844509"
+       id="rect953" />
+    <rect
+       x="75.819946"
+       y="98.265511"
+       width="25.123337"
+       height="7.8844509"
+       id="rect953-0" />
+    <rect
+       x="75.819946"
+       y="98.265511"
+       width="25.123337"
+       height="7.8844509"
+       id="rect968" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="194.44623"
+     inkscape:cy="53.152927"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="2560"
+     inkscape:window-height="1413"
+     inkscape:window-x="4880"
+     inkscape:window-y="677"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:document-rotation="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-52.233408,-75.88169)">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.137677;paint-order:stroke fill markers;stop-color:#000000"
+       id="rect832"
+       width="61.511906"
+       height="30"
+       x="52.23341"
+       y="75.881691" />
+    <g
+       id="g910"
+       transform="matrix(0.90000009,0,0,0.90000009,17.445516,9.7980333)">
+      <g
+         id="g850"
+         transform="matrix(0.06491223,0,0,0.06491223,109.76284,82.07218)">
+        <path
+           class="st0"
+           d="m 142.8,120.1 c -5.7,0 -10.2,4.9 -10.2,11 0,6.1 4.6,11 10.2,11 5.7,0 10.2,-4.9 10.2,-11 0,-6.1 -4.6,-11 -10.2,-11 z m -36.5,0 c -5.7,0 -10.2,4.9 -10.2,11 0,6.1 4.6,11 10.2,11 5.7,0 10.2,-4.9 10.2,-11 0.1,-6.1 -4.5,-11 -10.2,-11 z"
+           id="path836" />
+        <path
+           class="st0"
+           d="m 191.4,36.9 h -134 c -11.3,0 -20.5,9.2 -20.5,20.5 v 134 c 0,11.3 9.2,20.5 20.5,20.5 h 113.4 l -5.3,-18.3 12.8,11.8 12.1,11.1 21.6,18.7 V 57.4 C 211.9,46.1 202.7,36.9 191.4,36.9 Z m -38.6,129.5 c 0,0 -3.6,-4.3 -6.6,-8 13.1,-3.7 18.1,-11.8 18.1,-11.8 -4.1,2.7 -8,4.6 -11.5,5.9 -5,2.1 -9.8,3.4 -14.5,4.3 -9.6,1.8 -18.4,1.3 -25.9,-0.1 -5.7,-1.1 -10.6,-2.6 -14.7,-4.3 -2.3,-0.9 -4.8,-2 -7.3,-3.4 -0.3,-0.2 -0.6,-0.3 -0.9,-0.5 -0.2,-0.1 -0.3,-0.2 -0.4,-0.2 -1.8,-1 -2.8,-1.7 -2.8,-1.7 0,0 4.8,7.9 17.5,11.7 -3,3.8 -6.7,8.2 -6.7,8.2 C 75,165.8 66.6,151.4 66.6,151.4 66.6,119.5 81,93.6 81,93.6 95.4,82.9 109,83.2 109,83.2 l 1,1.2 c -18,5.1 -26.2,13 -26.2,13 0,0 2.2,-1.2 5.9,-2.8 10.7,-4.7 19.2,-5.9 22.7,-6.3 0.6,-0.1 1.1,-0.2 1.7,-0.2 6.1,-0.8 13,-1 20.2,-0.2 9.5,1.1 19.7,3.9 30.1,9.5 0,0 -7.9,-7.5 -24.9,-12.6 l 1.4,-1.6 c 0,0 13.7,-0.3 28,10.4 0,0 14.4,25.9 14.4,57.8 0,-0.1 -8.4,14.3 -30.5,15 z m 151,-86.7 H 270.6 V 117 l 22.1,19.9 v -36.2 h 11.8 c 7.5,0 11.2,3.6 11.2,9.4 v 27.7 c 0,5.8 -3.5,9.7 -11.2,9.7 h -34 v 21.1 h 33.2 c 17.8,0.1 34.5,-8.8 34.5,-29.2 V 109.6 C 338.3,88.8 321.6,79.7 303.8,79.7 Z m 174,59.7 v -30.6 c 0,-11 19.8,-13.5 25.8,-2.5 l 18.3,-7.4 c -7.2,-15.8 -20.3,-20.4 -31.2,-20.4 -17.8,0 -35.4,10.3 -35.4,30.3 v 30.6 c 0,20.2 17.6,30.3 35,30.3 11.2,0 24.6,-5.5 32,-19.9 l -19.6,-9 c -4.8,12.3 -24.9,9.3 -24.9,-1.4 z M 417.3,113 c -6.9,-1.5 -11.5,-4 -11.8,-8.3 0.4,-10.3 16.3,-10.7 25.6,-0.8 l 14.7,-11.3 c -9.2,-11.2 -19.6,-14.2 -30.3,-14.2 -16.3,0 -32.1,9.2 -32.1,26.6 0,16.9 13,26 27.3,28.2 7.3,1 15.4,3.9 15.2,8.9 -0.6,9.5 -20.2,9 -29.1,-1.8 l -14.2,13.3 c 8.3,10.7 19.6,16.1 30.2,16.1 16.3,0 34.4,-9.4 35.1,-26.6 1,-21.7 -14.8,-27.2 -30.6,-30.1 z m -67,55.5 h 22.4 V 79.7 H 350.3 Z M 728,79.7 H 694.8 V 117 l 22.1,19.9 v -36.2 h 11.8 c 7.5,0 11.2,3.6 11.2,9.4 v 27.7 c 0,5.8 -3.5,9.7 -11.2,9.7 h -34 v 21.1 H 728 c 17.8,0.1 34.5,-8.8 34.5,-29.2 V 109.6 C 762.5,88.8 745.8,79.7 728,79.7 Z M 565.1,78.5 c -18.4,0 -36.7,10 -36.7,30.5 v 30.3 c 0,20.3 18.4,30.5 36.9,30.5 18.4,0 36.7,-10.2 36.7,-30.5 V 109 C 602,88.6 583.5,78.5 565.1,78.5 Z m 14.4,60.8 c 0,6.4 -7.2,9.7 -14.3,9.7 -7.2,0 -14.4,-3.1 -14.4,-9.7 V 109 c 0,-6.5 7,-10 14,-10 7.3,0 14.7,3.1 14.7,10 z M 682.4,109 c -0.5,-20.8 -14.7,-29.2 -33,-29.2 h -35.5 v 88.8 h 22.7 v -28.2 h 4 l 20.6,28.2 h 28 L 665,138.1 c 10.7,-3.4 17.4,-12.7 17.4,-29.1 z m -32.6,12 h -13.2 v -20.3 h 13.2 c 14.1,0 14.1,20.3 0,20.3 z"
+           id="path838" />
+      </g>
+      <path
+         id="path4789-6"
+         class=""
+         d="m 167.72059,90.383029 -3.19204,3.19205 c -0.15408,0.15408 -0.40352,0.15408 -0.55746,0 l -0.37229,-0.37231 c -0.15368,-0.15369 -0.15408,-0.40277 -4.9e-4,-0.55681 l 2.52975,-2.54167 -2.52975,-2.54164 c -0.15329,-0.15408 -0.15309,-0.40312 4.9e-4,-0.55681 l 0.37229,-0.37228 c 0.15408,-0.15408 0.40353,-0.15408 0.55746,0 l 3.19204,3.19201 c 0.15408,0.15407 0.15408,0.40354 0,0.55746 z"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.0164247" />
+    </g>
+    <g
+       id="g904"
+       transform="matrix(0.90000009,0,0,0.90000009,10.464254,9.7980333)">
+      <g
+         id="g850-3"
+         transform="matrix(0.06491223,0,0,0.06491223,52.083661,82.07218)">
+        <path
+           class="st0"
+           d="m 142.8,120.1 c -5.7,0 -10.2,4.9 -10.2,11 0,6.1 4.6,11 10.2,11 5.7,0 10.2,-4.9 10.2,-11 0,-6.1 -4.6,-11 -10.2,-11 z m -36.5,0 c -5.7,0 -10.2,4.9 -10.2,11 0,6.1 4.6,11 10.2,11 5.7,0 10.2,-4.9 10.2,-11 0.1,-6.1 -4.5,-11 -10.2,-11 z"
+           id="path836-5"
+           style="fill:#7289da;fill-opacity:1" />
+        <path
+           class="st0"
+           d="m 191.4,36.9 h -134 c -11.3,0 -20.5,9.2 -20.5,20.5 v 134 c 0,11.3 9.2,20.5 20.5,20.5 h 113.4 l -5.3,-18.3 12.8,11.8 12.1,11.1 21.6,18.7 V 57.4 C 211.9,46.1 202.7,36.9 191.4,36.9 Z m -38.6,129.5 c 0,0 -3.6,-4.3 -6.6,-8 13.1,-3.7 18.1,-11.8 18.1,-11.8 -4.1,2.7 -8,4.6 -11.5,5.9 -5,2.1 -9.8,3.4 -14.5,4.3 -9.6,1.8 -18.4,1.3 -25.9,-0.1 -5.7,-1.1 -10.6,-2.6 -14.7,-4.3 -2.3,-0.9 -4.8,-2 -7.3,-3.4 -0.3,-0.2 -0.6,-0.3 -0.9,-0.5 -0.2,-0.1 -0.3,-0.2 -0.4,-0.2 -1.8,-1 -2.8,-1.7 -2.8,-1.7 0,0 4.8,7.9 17.5,11.7 -3,3.8 -6.7,8.2 -6.7,8.2 C 75,165.8 66.6,151.4 66.6,151.4 66.6,119.5 81,93.6 81,93.6 95.4,82.9 109,83.2 109,83.2 l 1,1.2 c -18,5.1 -26.2,13 -26.2,13 0,0 2.2,-1.2 5.9,-2.8 10.7,-4.7 19.2,-5.9 22.7,-6.3 0.6,-0.1 1.1,-0.2 1.7,-0.2 6.1,-0.8 13,-1 20.2,-0.2 9.5,1.1 19.7,3.9 30.1,9.5 0,0 -7.9,-7.5 -24.9,-12.6 l 1.4,-1.6 c 0,0 13.7,-0.3 28,10.4 0,0 14.4,25.9 14.4,57.8 0,-0.1 -8.4,14.3 -30.5,15 z"
+           id="path838-6"
+           style="fill:#7289da;fill-opacity:1"
+           sodipodi:nodetypes="sssssccccccscccccccccccccccccccccccccccc" />
+      </g>
+      <path
+         id="path4789-6-2"
+         class=""
+         d="m 107.16039,90.382629 -3.19204,3.19205 c -0.15408,0.15408 -0.40352,0.15408 -0.55746,0 l -0.37229,-0.37231 c -0.15368,-0.15369 -0.15408,-0.40277 -5.3e-4,-0.55681 l 2.52975,-2.54167 -2.52975,-2.54164 c -0.15329,-0.15408 -0.15309,-0.40312 5.3e-4,-0.55681 l 0.37229,-0.37228 c 0.15408,-0.15408 0.40353,-0.15408 0.55746,0 l 3.19204,3.19201 c 0.15408,0.15407 0.15408,0.40354 0,0.55746 z"
+         inkscape:connector-curvature="0"
+         style="fill:#7289da;fill-opacity:1;stroke-width:0.0164247" />
+      <g
+         aria-label="JOIN US"
+         transform="matrix(1.2501707,0,0,1.2501707,-25.160061,-36.966352)"
+         id="text951"
+         style="font-style:normal;font-weight:normal;font-size:6.35px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect953-0);fill:#7289da;fill-opacity:1;stroke:none">
+        <path
+           d="m 75.839362,102.56309 c 0.127,0.9525 0.89535,1.3843 1.67005,1.3843 0.85725,0 1.7145,-0.55245 1.7145,-1.53035 v -3.028953 h -2.1463 v 1.028703 h 1.02235 v 2.00025 c 0,0.26035 -0.2667,0.4318 -0.5461,0.4318 -0.2794,0 -0.57785,-0.14605 -0.64135,-0.508 z"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:'Uni Sans';-inkscape-font-specification:'Uni Sans Heavy';fill:#7289da;fill-opacity:1"
+           id="path850" />
+        <path
+           d="m 79.795412,102.40434 c 0,1.0287 0.93345,1.54305 1.8669,1.54305 0.93345,0 1.86055,-0.51435 1.86055,-1.54305 v -1.5367 c 0,-1.028703 -0.93345,-1.543053 -1.8669,-1.543053 -0.93345,0 -1.86055,0.508 -1.86055,1.543053 z m 1.13665,-1.5367 c 0,-0.3302 0.3556,-0.508 0.7112,-0.508 0.3683,0 0.74295,0.15875 0.74295,0.508 v 1.5367 c 0,0.32385 -0.36195,0.48895 -0.7239,0.48895 -0.36195,0 -0.73025,-0.15875 -0.73025,-0.48895 z"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:'Uni Sans';-inkscape-font-specification:'Uni Sans Heavy';fill:#7289da;fill-opacity:1"
+           id="path852" />
+        <path
+           d="m 85.262755,99.388087 h -1.13665 v 4.495803 h 1.13665 z"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:'Uni Sans';-inkscape-font-specification:'Uni Sans Heavy';fill:#7289da;fill-opacity:1"
+           id="path854" />
+        <path
+           d="m 85.973945,103.88389 h 1.13665 v -1.79705 l -0.14605,-0.86995 0.03175,-0.006 0.3937,0.9017 1.016,1.77165 h 1.14935 v -4.495803 h -1.1303 v 2.038353 c 0.0063,0 0.12065,0.7747 0.127,0.7747 l -0.03175,0.006 -0.381,-0.9017 -1.08585,-1.917703 h -1.0795 z"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:'Uni Sans';-inkscape-font-specification:'Uni Sans Heavy';fill:#7289da;fill-opacity:1"
+           id="path856" />
+        <path
+           d="m 92.546182,99.388087 h -1.14935 v 2.990853 c -0.0063,2.1082 3.5814,2.1082 3.58775,0 v -2.990853 h -1.14935 v 2.990853 c -0.0064,0.7239 -1.28905,0.7239 -1.28905,0 z"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:'Uni Sans';-inkscape-font-specification:'Uni Sans Heavy';fill:#7289da;fill-opacity:1"
+           id="path858" />
+        <path
+           d="m 95.44178,103.13459 c 0.4191,0.53975 0.9906,0.8128 1.53035,0.8128 0.8255,0 1.7399,-0.47625 1.778,-1.3462 0.0508,-1.1049 -0.7493,-1.3843 -1.5494,-1.53035 -0.34925,-0.0762 -0.5842,-0.2032 -0.5969,-0.4191 0.01905,-0.5207 0.8255,-0.53975 1.2954,-0.0381 l 0.74295,-0.5715 c -0.46355,-0.565153 -0.9906,-0.717553 -1.5367,-0.717553 -0.8255,0 -1.6256,0.46355 -1.6256,1.346203 0,0.85725 0.6604,1.31445 1.3843,1.42875 0.3683,0.0508 0.78105,0.19685 0.76835,0.45085 -0.03175,0.4826 -1.02235,0.4572 -1.4732,-0.0889 z"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:'Uni Sans';-inkscape-font-specification:'Uni Sans Heavy';fill:#7289da;fill-opacity:1"
+           id="path860" />
+      </g>
+    </g>
+  </g>
+  <style
+     id="style834">.st0{fill:#FFFFFF;}</style>
+</svg>
diff --git a/pydis_site/static/images/navbar/navbar_discordjoin.svg b/pydis_site/static/images/navbar/navbar_discordjoin.svg
deleted file mode 100644
index 75e6b102..00000000
--- a/pydis_site/static/images/navbar/navbar_discordjoin.svg
+++ /dev/null
@@ -1,81 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="114.70044mm"
-   height="61.897388mm"
-   viewBox="0 0 114.70044 61.897388"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="discordjoin.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.98994949"
-     inkscape:cx="-404.01729"
-     inkscape:cy="34.494854"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="3440"
-     inkscape:window-height="1409"
-     inkscape:window-x="2560"
-     inkscape:window-y="31"
-     inkscape:window-maximized="1"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-52.233408,-75.88169)">
-    <path
-       style="opacity:1;vector-effect:none;fill:#697ec4;fill-opacity:1;stroke:none;stroke-width:0.81460673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 60.360377,75.88169 -8.126969,61.89739 H 166.93385 V 75.88169 Z"
-       id="rect4758-3"
-       inkscape:connector-curvature="0" />
-    <path
-       id="path4789-6"
-       class=""
-       d="m 157.65213,107.11299 -4.99428,4.9943 c -0.24107,0.24107 -0.63135,0.24107 -0.8722,0 l -0.58249,-0.58252 c -0.24045,-0.24046 -0.24107,-0.63017 -8.3e-4,-0.87119 l 3.95805,-3.9767 -3.95805,-3.97665 c -0.23984,-0.24107 -0.23953,-0.63072 8.3e-4,-0.87118 l 0.58249,-0.58248 c 0.24107,-0.24108 0.63137,-0.24108 0.8722,0 l 4.99428,4.99422 c 0.24107,0.24107 0.24107,0.63138 0,0.8722 z"
-       inkscape:connector-curvature="0"
-       style="fill:#ffffff;fill-opacity:1;stroke-width:0.02569815" />
-    <image
-       y="94.290833"
-       x="67.190086"
-       id="image4856"
-       xlink:href="data:image/png;base64,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 "
-       preserveAspectRatio="none"
-       height="26.987499"
-       width="79.375" />
-  </g>
-</svg>
diff --git a/pydis_site/static/images/waves/wave_dark.svg b/pydis_site/static/images/waves/wave_dark.svg
new file mode 100644
index 00000000..35174c47
--- /dev/null
+++ b/pydis_site/static/images/waves/wave_dark.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1600"
+   height="198"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="wave.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1409"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="1.44625"
+     inkscape:cx="757.49384"
+     inkscape:cy="107.38903"
+     inkscape:window-x="4880"
+     inkscape:window-y="677"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="a"
+       x1="50%"
+       x2="50%"
+       y1="-10.959%"
+       y2="100%">
+      <stop
+         stop-color="#57BBC1"
+         stop-opacity=".25"
+         offset="0%"
+         id="stop2" />
+      <stop
+         stop-color="#015871"
+         offset="100%"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="url(#a)"
+     fill-rule="evenodd"
+     d="M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z"
+     transform="matrix(-1 0 0 1 1600 0)"
+     id="path9"
+     style="fill:#5b6daf;fill-opacity:1" />
+</svg>
diff --git a/pydis_site/static/images/waves/wave_white.svg b/pydis_site/static/images/waves/wave_white.svg
new file mode 100644
index 00000000..441dacff
--- /dev/null
+++ b/pydis_site/static/images/waves/wave_white.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1600"
+   height="28.745832"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="wavew.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1409"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="1.44625"
+     inkscape:cx="884.40031"
+     inkscape:cy="-61.865141"
+     inkscape:window-x="4880"
+     inkscape:window-y="677"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="a"
+       x1="0.5"
+       x2="0.5"
+       y1="-0.10958999"
+       y2="1">
+      <stop
+         stop-color="#57BBC1"
+         stop-opacity=".25"
+         offset="0%"
+         id="stop2" />
+      <stop
+         stop-color="#015871"
+         offset="100%"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="url(#a)"
+     fill-rule="evenodd"
+     d="M 1599.995,17.566918 C 1289,17.566918 1190.102,-0.03623696 789,5.6042811e-5 389,5.6042811e-5 289,17.566918 0,17.566918 v 11.178914 h 1600 c 0,0 -0.01,-6.968673 -0.01,-11.178914 z"
+     id="path9"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:0.381026" />
+</svg>
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index c2915025..d8abf36d 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -20,7 +20,7 @@
   <div class="navbar-menu is-paddingless" id="navbar_menu">
     <div class="navbar-end">
 
-      {# Discord invite - only visible in the hamburger on mobile sizes. #}
+      {# Burger-menu Discord #}
       <a class="navbar-item is-hidden-desktop" href="https://discord.gg/python">
         <span class="icon is-size-4 is-medium"><i class="fab fa-discord"></i></span>
         <span>&nbsp;Discord</span>
@@ -57,7 +57,7 @@
       </a>
 
       {# More #}
-      <div class="navbar-item has-dropdown is-hoverable has-left-margin-1">
+      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
           More
         </a>
@@ -122,12 +122,14 @@
 
         </div>
       </div>
+
+      {# Desktop Nav Discord  #}
+      <div id="discord-btn" class="buttons is-hidden-touch">
+        <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a>
+      </div>
+
     </div>
 
-    {# Join us on Discord! #}
-    <a class="navbar-item is-fullsize has-no-highlight has-left-margin-1" href="https://discord.gg/python">
-      <img class="is-hidden-touch" src="{% static "images/navbar/navbar_discordjoin.svg" %}" alt="Join us on Discord!"/>
-    </a>
   </div>
 </nav>
 
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index f31363a4..7f59231c 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -9,12 +9,69 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
-  <section class="section">
+  <!-- Mobile-only Notice -->
+  <section id="mobile-notice" class="message is-primary is-hidden-tablet">
+    <div class="message-header">
+      <p>100K Member Milestone!</p>
+    </div>
+    <div class="message-body">
+      Thanks to all our members for helping us create this friendly and helpful community!
+      <br><br>
+      As a nice treat, we've created a <a href="{% url 'timeline' %}">Timeline page</a> for people
+      to discover the events that made our community what it is today. Be sure to check it out!
+    </div>
+  </section>
+
+  <!-- Wave Hero -->
+  <section id="wave-hero" class="section is-hidden-mobile">
+
+      <div class="container">
+        <div class="columns is-variable is-8">
+
+          {# Embedded Welcome video #}
+          <div id="wave-hero-left" class="column is-half">
+            <div class="force-aspect-container">
+              <iframe
+              class="force-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='{% static "images/frontpage/welcome.jpg" %}' alt='Welcome to Python Discord'>
+                <span>▶</span>
+              </a>"
+              allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              ></iframe>
+            </div>
+          </div>
+
+          {# Right side content #}
+          <div id="wave-hero-right" class="column is-half">
+            <img src="{% static "images/events/100k.png" %}" alt="100K members!">
+          </div>
+
+        </div>
+      </div>
+
+    {# Animated wave elements #}
+    <span id="front-wave" class="wave"></span>
+    <span id="back-wave" class="wave"></span>
+    <span id="bottom-wave" class="wave"></span>
 
-    {# Who are we? #}
-    <div class="container is-spaced">
+  </section>
+
+  <!-- Main Body -->
+  <section id="body" class="section">
+
+    <div class="container">
       <h1 class="is-size-1">Who are we?</h1>
-      <br>
+
       <div class="columns is-desktop">
         <div class="column is-half-desktop content">
           <p>
@@ -37,45 +94,97 @@
           </p>
         </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>
+        {# Showcase box #}
+        <section id="showcase" class="column is-half-desktop has-text-centered">
+          <article class="box">
+
+            <header class="title">New Timeline!</header>
+
+            <div class="mini-timeline">
+              <i class="fa fa-asterisk"></i>
+              <i class="fa fa-code"></i>
+              <i class="fab fa-python"></i>
+              <i class="fa fa-alien-monster"></i>
+              <i class="fa fa-duck"></i>
+              <i class="fa fa-bug"></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' %}" class="button is-primary">
+                <span>Check it out!</span>
+                <span class="icon">
+                  <i class="fas fa-arrow-right"></i>
+                </span>
+              </a>
+            </div>
+
+          </article>
+        </section>
+
       </div>
+    </div>
+  </section>
 
-      {# Projects #}
+  <!-- Projects -->
+  <section id="projects" class="section">
+    <div class="container">
       <h1 class="is-size-1">Projects</h1>
-      <br>
+
       <div class="columns is-multiline is-tablet">
 
-        {# Display projects from HomeView.repos #}
+        {# Generate project data from HomeView.repos #}
         {% for repo in repo_data %}
           <div class="column is-one-third-desktop is-half-tablet">
-            <div class="card has-equal-height github-card">
-              <div class="card-content">
-                <div class="repo-headline">
-                  <i class="fab fa-github"></i>
-                  <a href="https://github.com/{{ repo.repo_name }}"> <strong>{{ repo.repo_name }}</strong></a>
-                </div>
-                <div>
+
+            <a href="https://github.com/{{ repo.repo_name }}">
+              <article class="card">
+
+                <header class="card-header">
+                  <span class="card-header-icon">
+                    <span class="icon"><i class="fab fa-github"></i></span>
+                  </span>
+                  <div class="card-header-title">
+                    {{ repo.repo_name|cut:"python-discord/" }}
+                  </div>
+                </header>
+
+                <p class="card-content">
                   {{ repo.description }}
-                  <br><br>
-                  </span><span class="repo-language-dot {{ repo.language | lower }}"></span> {{ repo.language }}
-                  <span id="repo-footer-item"><i class="fas fa-star"></i> {{ repo.stargazers }}</span>
-                  <span id="repo-footer-item"><i class="fas fa-code-branch"></i> {{ repo.forks }}</span>
-                </div>
-              </div>
-            </div>
+                </p>
+
+                <footer class="card-footer">
+                  <div class="card-footer-item">
+                    <i class="repo-language-dot {{ repo.language | lower }}"></i>
+                    {{ repo.language }}
+                  </div>
+                  <div class="card-footer-item">
+                    <i class="fas fa-star"></i>
+                    {{ repo.stargazers }}
+                  </div>
+                  <div class="card-footer-item">
+                    <i class="fas fa-code-branch"></i>
+                    {{ repo.forks }}
+                  </div>
+                </footer>
+
+              </article>
+            </a>
+
           </div>
         {% endfor %}
 
       </div>
+
     </div>
   </section>
 
-  {# Sponsors #}
-  <section class="section-sp hero is-light">
-    <div id="sponsors-hero" class="hero-body">
+  <!-- Sponsors -->
+  <section id="sponsors" class="hero is-light">
+    <div class="hero-body">
       <div class="container">
         <h1 class="title is-6 has-text-grey">
           Sponsors
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index 54cbdc1b..f3c58fc2 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -14,7 +14,7 @@
     <div class="container max-width-lg cd-timeline__container">
         <div class="cd-timeline__block">
             <div class="cd-timeline__img cd-timeline__img--picture">
-                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
+                <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
             </div>
 
             <div class="cd-timeline__content text-component">
@@ -231,8 +231,8 @@
 
             <div class="cd-timeline__content text-component">
                 <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2>
-                <div class="video-container">
-                    <iframe class="video" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
+                <div class="force-aspect-container">
+                    <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowfullscreen></iframe>
                 </div>
@@ -319,8 +319,8 @@
                     developers join us to judge the event and help out our members during the event. One of them,
                     @tshirtman, even joins our staff!</p>
 
-                <div class="video-container">
-                    <iframe class="video" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0"
+                <div class="force-aspect-container">
+                    <iframe class="force-aspect-content" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowfullscreen></iframe>
                 </div>
@@ -377,8 +377,8 @@
                     Several of the Code Jam participants also end up getting involved contributing to the Arcade
                     repository.</p>
 
-                <div class="video-container">
-                    <iframe class="video" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0"
+                <div class="force-aspect-container">
+                    <iframe class="force-aspect-content" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowfullscreen></iframe>
                 </div>
@@ -450,8 +450,8 @@
                     Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
                     projects. Check them out in our judge stream below:</p>
 
-                <div class="video-container">
-                    <iframe class="video" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0"
+                <div class="force-aspect-container">
+                    <iframe class="force-aspect-content" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowfullscreen></iframe>
                 </div>
@@ -481,13 +481,13 @@
 
 	<div class="cd-timeline__block">
             <div class="cd-timeline__img cd-timeline__img--picture">
-                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
+                <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
             </div>
 
             <div class="cd-timeline__content text-component">
                 <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
-                <div class="video-container">
-                    <iframe class="video" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
+                <div class="force-aspect-container">
+                    <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowfullscreen></iframe>
                 </div>