Resolve conflicts

4 files changed, 393 insertions, 87 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index dc7c504d..a1d325f9 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -12,42 +12,69 @@ 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 {
+#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%;
+}
+
+#discord-btn:hover {
     background-color: transparent;
 }
 
-#navbar-banner img {
-    max-height: 3rem;
+#linode-logo {
+    padding-left: 15px;
+    background: url(https://www.linode.com/wp-content/uploads/2021/01/Linode-Logo-Black.svg) no-repeat center;
+    filter: invert(1) grayscale(1);
+    background-size: 60px;
+    color: #00000000;
 }
 
 #django-logo {
@@ -111,3 +138,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/error_pages.css b/pydis_site/static/css/error_pages.css
new file mode 100644
index 00000000..77bb7e2b
--- /dev/null
+++ b/pydis_site/static/css/error_pages.css
@@ -0,0 +1,66 @@
+html {
+    height: 100%;
+}
+
+body {
+    background-color: #7289DA;
+    background-image: url("https://raw.githubusercontent.com/python-discord/branding/master/logos/banner_pattern/banner_pattern.svg");
+    background-size: 128px;
+    font-family: "Hind", "Helvetica", "Arial", sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+h1,
+p {
+    color: black;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin-bottom: 15px;
+    font-size: 26px;
+}
+
+p,
+li {
+    line-height: 125%;
+}
+
+a {
+    color: #7289DA;
+}
+
+ul {
+    margin-bottom: 0;
+}
+
+li {
+    margin-top: 10px;
+}
+
+.error-box {
+    display: flex;
+    flex-direction: column;
+    max-width: 512px;
+    background-color: white;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 5px 7px 40px rgba(0, 0, 0, 0.432);
+}
+
+.logo-box {
+    display: flex;
+    justify-content: center;
+    height: 80px;
+    padding: 15px;
+    background-color: #758ad4;
+}
+
+.content-box {
+    padding: 25px;
+}
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 73698c7c..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;
@@ -3497,8 +3483,8 @@ mark {
     align-items: center;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
     box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
@@ -3509,17 +3495,23 @@ mark {
     color: white;
 }
 
+@media (max-width: 64rem) {
+    .cd-timeline__img i {
+	font-size: 0.9em;
+    }
+}
+
 .cd-timeline__img img {
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     margin-left: 2px;
     margin-top: 2px;
 }
 
 @media (max-width: 64rem) {
     .cd-timeline__img img {
-        width: 30px;
-        height: 30px;
+        width: 20px;
+        height: 20px;
         margin-left: 2px;
         margin-top: 2px;
     }
@@ -3532,7 +3524,7 @@ mark {
         -ms-flex-order: 1;
         order: 1;
         margin-left: calc(5% - 30px);
-        will-change: transform
+        will-change: transform;
     }
 
     .cd-timeline__block:nth-child(even) .cd-timeline__img {
@@ -3646,6 +3638,14 @@ mark {
         -webkit-animation-name: cd-bounce-2-inverse;
         animation-name: cd-bounce-2-inverse
     }
+    .cd-timeline__img--bounce-out {
+        -webkit-animation: cd-bounce-out-1 0.6s;
+        animation: cd-bounce-out-1 0.6s;
+    }
+    .cd-timeline__content--bounce-out {
+        -webkit-animation: cd-bounce-out-2 0.6s;
+        animation: cd-bounce-out-2 0.6s;
+    }
 }
 
 @-webkit-keyframes cd-bounce-1 {
@@ -3749,3 +3749,75 @@ mark {
         transform: translateX(0)
     }
 }
+
+@-webkit-keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2)
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5)
+    }
+}
+
+@keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+}
+
+@-webkit-keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}
+
+@keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}